CINXE.COM
snippets/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt at f595a0d317fd8aca6b33d4344bf87696cd45c481 · android/snippets · 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-3e154969b9f9.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-9c5b7a476542.css" /><link data-color-theme="dark_dimmed" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed-afda8eb0fb33.css" /><link data-color-theme="dark_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_high_contrast-2494e44ccdc5.css" /><link data-color-theme="dark_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind-56fff47acadc.css" /><link data-color-theme="light_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind-71cd4cc132ec.css" /><link data-color-theme="light_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_high_contrast-fd5499848985.css" /><link data-color-theme="light_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia-31d17ba3e139.css" /><link data-color-theme="dark_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia-68d6b2c79663.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-4cf0d59ab51a.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-af846850481e.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-e41ff91f8baa.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-d3b66f11d613.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/repository-1e3bbbee6b91.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/code-a0610fd00b47.css" /> <script type="application/json" id="client-env">{"locale":"en","featureFlags":["copilot_new_references_ui","copilot_beta_features_opt_in","copilot_chat_static_thread_suggestions","copilot_conversational_ux_history_refs","copilot_implicit_context","copilot_smell_icebreaker_ux","experimentation_azure_variant_endpoint","failbot_handle_non_errors","geojson_azure_maps","ghost_pilot_confidence_truncation_25","ghost_pilot_confidence_truncation_40","hovercard_accessibility","issues_react_new_timeline","issues_react_avatar_refactor","issues_react_remove_placeholders","issues_react_cache_fix_workaround","issues_react_blur_item_picker_on_close","marketing_pages_search_explore_provider","remove_child_patch","sample_network_conn_type","site_metered_billing_update","issues_react_first_time_contribution_banner","jk_navigation_in_list_view","ui_commands_respect_modals","lifecycle_label_name_updates"]}</script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/wp-runtime-118ecaabd77e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_dompurify_dist_purify_js-b73fdff77a4e.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-aff936e590ed.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-247092-740e4ddd559d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_failbot_failbot_ts-a46544e9ee5e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/environment-cd35650c2e9c.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-4aa4b0e95669.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-6d3967acd51c.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-6ce195-53781cbc550f.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_-6afc16-3cdfa69a0406.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-f5498b8d4e5d.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-492b5042c841.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-1f651a-1e3d784c897c.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-7671f1-dc6cac136d88.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/github-elements-71486356f507.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/element-registry-e3ab8405ef80.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-bb80ec-634de60bacfa.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lit-html_lit-html_js-ce7225a304c5.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-f3aee1-e6893db9c19e.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-f8a5485c982a.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-858e043fcf76.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-6cf3320416b8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_scroll-anchoring_dist_scroll-anchoring_esm_js-node_modules_stacktrace-pa-a71630-6f3c4f0189d8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_color-convert_index_js-0e07cc183eed.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_-0b5e12-889cec8cf448.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_updatable-content_updatable-content_ts-eae9df0dd562.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-18d1c91a7872.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-7cbef09a422c.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-d0d0a6-0e9fa537dc4f.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-c89801ebbe15.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/behaviors-93287f4de493.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-3366f6b6298e.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_github_catalyst_lib_inde-dbbea9-9b97703a4e6a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/code-menu-3118a76a2829.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-765944243383.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-cd0a67881543.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-7b7b5264f6c1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-45c3a19dd792.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-62da9f-54c0c921f04b.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-285fc29e9fa5.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-4896ddd4b7bb.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-13a0602a5edf.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-9002b0-8e5e346f0cbe.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_promise-with-resolvers-polyfill_promise-with-r-014121-e1792bd5a31e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_paths_index_ts-193243317670.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ref-selector_RefSelector_tsx-7a75d9f22fe9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_code-view-shared_utilities_web-worker_ts-ui_packages_code-view-shared_worker-jobs-7fe572-0d8f4a2976ee.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_hydro-analytics_hydro-analytics_ts-ui_packages_verified-fetch_verified-fetch_ts-u-4672d1-0996d093463a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_code-view-shared_hooks_use-canonical-object_ts-ui_packages_code-view-shared_utili-228da6-37a4eeff405d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_code-view-shared_hooks_use-file-page-payload_ts-ui_packages_code-view-shared_comp-1beb66-b07e414af699.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_blob-anchor_ts-ui_packages_code-nav_code-nav_ts-ui_packages_filter--8253c1-87c39cb5708f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-code-view-6462e4b9d310.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9fa170e9435ed4b922b9.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/react-code-view.6b587a69b593e23c3657.module.css" /> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-765944243383.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-cd0a67881543.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-7b7b5264f6c1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-45c3a19dd792.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-62da9f-54c0c921f04b.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-285fc29e9fa5.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-4896ddd4b7bb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-subscriptions-menu-1490f5bef85d.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9fa170e9435ed4b922b9.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/notifications-subscriptions-menu.1bcff9205c241e99cff2.module.css" /> <title>snippets/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt at f595a0d317fd8aca6b33d4344bf87696cd45c481 · android/snippets · GitHub</title> <meta name="route-pattern" content="/:user_id/:repository/blob/*name(/*path)" data-turbo-transient> <meta name="route-controller" content="blob" data-turbo-transient> <meta name="route-action" content="show" data-turbo-transient> <meta name="current-catalog-service-hash" content="f3abb0cc802f3d7b95fc8762b94bdcb13bf39634c40c357301c4aa1d67a256fb"> <meta name="request-id" content="B47E:4110D:6B58D0:75E7F3:6741D10F" data-pjax-transient="true"/><meta name="html-safe-nonce" content="d8cb2f3a9f12113664209792721764b11d73d4021c0aea73fa249523d594c515" data-pjax-transient="true"/><meta name="visitor-payload" content="eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJCNDdFOjQxMTBEOjZCNThEMDo3NUU3RjM6Njc0MUQxMEYiLCJ2aXNpdG9yX2lkIjoiNjg1MDE4MDA1NTIyNjc2NTU4MyIsInJlZ2lvbl9lZGdlIjoic291dGhlYXN0YXNpYSIsInJlZ2lvbl9yZW5kZXIiOiJzb3V0aGVhc3Rhc2lhIn0=" data-pjax-transient="true"/><meta name="visitor-hmac" content="7e3980274560fecf94f3df11f94bd39801768652ddc945a404f47cc7e7a607bb" data-pjax-transient="true"/> <meta name="hovercard-subject-tag" content="repository:138043025" data-turbo-transient> <meta name="github-keyboard-shortcuts" content="repository,source-code,file-tree,copilot" data-turbo-transient="true" /> <meta name="selected-link" value="repo_source" 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>/blob/show" data-turbo-transient="true" /> <meta name="user-login" content=""> <meta name="viewport" content="width=device-width"> <meta name="description" content="Main repository for snippets surfaced on developer.android.com. - snippets/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt at f595a0d317fd8aca6b33d4344bf87696cd45c481 · android/snippets"> <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/android/snippets/blob/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt" /> <meta name="twitter:image" content="https://opengraph.githubassets.com/4eef78e271fb9eac12d86e65619259581160e183a647599e5585bc1a503d7fc7/android/snippets" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="snippets/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt at f595a0d317fd8aca6b33d4344bf87696cd45c481 · android/snippets" /><meta name="twitter:description" content="Main repository for snippets surfaced on developer.android.com. - android/snippets" /> <meta property="og:image" content="https://opengraph.githubassets.com/4eef78e271fb9eac12d86e65619259581160e183a647599e5585bc1a503d7fc7/android/snippets" /><meta property="og:image:alt" content="Main repository for snippets surfaced on developer.android.com. - android/snippets" /><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="snippets/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt at f595a0d317fd8aca6b33d4344bf87696cd45c481 · android/snippets" /><meta property="og:url" content="https://github.com/android/snippets/blob/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt" /><meta property="og:description" content="Main repository for snippets surfaced on developer.android.com. - android/snippets" /> <meta name="hostname" content="github.com"> <meta name="expected-hostname" content="github.com"> <meta http-equiv="x-pjax-version" content="272935131c2027f789efabd5bf30904ffaea35908a22afd03d8f75128cee7e1b" data-turbo-track="reload"> <meta http-equiv="x-pjax-csp-version" content="ace39c3b6632770952207593607e6e0be0db363435a8b877b1f96abe6430f345" data-turbo-track="reload"> <meta http-equiv="x-pjax-css-version" content="8968ee26e93ec8c6d3c4e91c77fb9d206091689d451ebbcddeca3832587a5b30" data-turbo-track="reload"> <meta http-equiv="x-pjax-js-version" content="c4972ae1cf5d4607c47252349fc1b47a24ff0ea303e5a8fbbe18ec27725a87ee" data-turbo-track="reload"> <meta name="turbo-cache-control" content="no-preview" data-turbo-transient=""> <meta name="turbo-cache-control" content="no-cache" data-turbo-transient> <meta data-hydrostats="publish"> <meta name="go-import" content="github.com/android/snippets git https://github.com/android/snippets.git"> <meta name="octolytics-dimension-user_id" content="32689599" /><meta name="octolytics-dimension-user_login" content="android" /><meta name="octolytics-dimension-repository_id" content="138043025" /><meta name="octolytics-dimension-repository_nwo" content="android/snippets" /><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="138043025" /><meta name="octolytics-dimension-repository_network_root_nwo" content="android/snippets" /> <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"> <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/ui_packages_ui-commands_ui-commands_ts-d25fac54a6bc.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/keyboard-shortcuts-dialog-ed30662f9578.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9fa170e9435ed4b922b9.module.css" /> <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-cf3dd69d89eb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/sessions-8fa3b694f335.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.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> </a> <div class="flex-1 flex-order-2 text-right"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Fandroid%2Fsnippets%2Fblob%2Ff595a0d317fd8aca6b33d4344bf87696cd45c481%2Fcompose%2Fsnippets%2Fsrc%2Fmain%2Fjava%2Fcom%2Fexample%2Fcompose%2Fsnippets%2Fanimations%2FAnimationSnippets.kt" 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/android/snippets/blob/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt","user_id":null}}" data-hydro-click-hmac="ae8489dd8138b46873561062b90ebaabed661a98afa591b72f43e2089d58908a" 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":"security","context":"product","tag":"link","label":"security_link_product_navbar"}" href="https://github.com/features/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">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> </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":"white_papers_ebooks_webinars","context":"resources","tag":"link","label":"white_papers_ebooks_webinars_link_resources_navbar"}" href="https://resources.github.com"> White papers, Ebooks, 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":"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> </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":"advanced_security","context":"enterprise","tag":"link","label":"advanced_security_link_enterprise_navbar"}" href="https://github.com/enterprise/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">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":"github_copilot","context":"enterprise","tag":"link","label":"github_copilot_link_enterprise_navbar"}" href="/features/copilot#enterprise"> <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> 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:android/snippets" data-custom-scopes-path="/search/custom_scopes" data-delete-custom-scopes-csrf="Cn1c0nr4KlWYHsEHk_EYGbNxanOlvsew_20NchaXjJgAmMwGJCfKHDISQP3XDsk3note8jq8BvRlJkdwcmfx3Q" 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="android/snippets" data-current-org="android" 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-e34a4153-0fe0-471e-90c5-1e3e7d6339bb" 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-e34a4153-0fe0-471e-90c5-1e3e7d6339bb" 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="pge89tHmmJuNmNXozplL09TYaRYIrfFSO0+43jFllSO+bRI2SCw6z2sb4okxpyW1QFVi+UttexUCLOQzrLqr/g==" /> <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="N10sg5upYJwauYIT1hR5h7+dXYvRBzYfche6/jXuG4CpmufDR0WsJP1eIVeIimYKDvF3A6ojzYWWpla7pVMQEQ==" /> <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> <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="MnyZVGh+163+GozHfmEcK9P3iViJ2EKdv+bIVPxNlCZITtgM3mYDZf6D/OyOfhR7b0RzDD4gRhchK970J01Y5w==" /> </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%2Fandroid%2Fsnippets%2Fblob%2Ff595a0d317fd8aca6b33d4344bf87696cd45c481%2Fcompose%2Fsnippets%2Fsrc%2Fmain%2Fjava%2Fcom%2Fexample%2Fcompose%2Fsnippets%2Fanimations%2FAnimationSnippets.kt" 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/android/snippets/blob/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt","user_id":null}}" data-hydro-click-hmac="ae8489dd8138b46873561062b90ebaabed661a98afa591b72f43e2089d58908a" 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%2Fblob%2Fshow&source=header-repo&source_repo=android%2Fsnippets" 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/android/snippets/blob/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt","user_id":null}}" data-hydro-click-hmac="ae8489dd8138b46873561062b90ebaabed661a98afa591b72f43e2089d58908a" data-analytics-event="{"category":"Sign up","action":"click to sign up for account","label":"ref_page:/<user-name>/<repo-name>/blob/show;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-59b6a176-b119-4323-a01a-6e0ae333a320" aria-labelledby="tooltip-b6479e68-2477-4652-a731-e09be8749d09" 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-b6479e68-2477-4652-a731-e09be8749d09" for="icon-button-59b6a176-b119-4323-a01a-6e0ae333a320" 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 > <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/android/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/android"> android </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="/android/snippets">snippets</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=%2Fandroid%2Fsnippets" 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/android/snippets/blob/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt","user_id":null}}" data-hydro-click-hmac="00d60847dcb4c4d39e1de867765cf20064b7b5f91319053baa51031080336b83" 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-6c82e9f1-a474-43ca-888a-e41591d8d076" 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=%2Fandroid%2Fsnippets" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"repo details fork button","repository_id":138043025,"auth_type":"LOG_IN","originating_url":"https://github.com/android/snippets/blob/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt","user_id":null}}" data-hydro-click-hmac="69ff707a1c363f557042396f304bdc94c5beaee030b9d9da838410d0e27d678f" 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="179" data-view-component="true" class="Counter">179</span> </a> </li> <li> <div data-view-component="true" class="BtnGroup d-flex"> <a href="/login?return_to=%2Fandroid%2Fsnippets" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":138043025,"auth_type":"LOG_IN","originating_url":"https://github.com/android/snippets/blob/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt","user_id":null}}" data-hydro-click-hmac="77edcc52a3be70cff04c2ebe8c13381cd1f957f2270cead6b60a3a730416a11c" 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="700 users starred this repository" data-singular-suffix="user starred this repository" data-plural-suffix="users starred this repository" data-turbo-replace="true" title="700" data-view-component="true" class="Counter js-social-count">700</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="/android/snippets" 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 /android/snippets" 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"}" 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-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="/android/snippets/issues" data-tab-item="i1issues-tab" data-selected-links="repo_issues repo_labels repo_milestones /android/snippets/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"}" 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-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="5" data-view-component="true" class="Counter">5</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="pull-requests-tab" href="/android/snippets/pulls" data-tab-item="i2pull-requests-tab" data-selected-links="repo_pulls checks /android/snippets/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="12" data-view-component="true" class="Counter">12</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="actions-tab" href="/android/snippets/actions" data-tab-item="i3actions-tab" data-selected-links="repo_actions /android/snippets/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="/android/snippets/projects" data-tab-item="i4projects-tab" data-selected-links="repo_projects new_repo_project repo_project /android/snippets/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="/android/snippets/security" data-tab-item="i5security-tab" data-selected-links="security overview alerts policy token_scanning code_scanning /android/snippets/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="/android/snippets/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="/android/snippets/pulse" data-tab-item="i6insights-tab" data-selected-links="repo_graphs repo_contributors dependency_graph dependabot_updates pulse people community /android/snippets/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-164cb641-ab33-41b6-b9e5-97493cb23252-button" popovertarget="action-menu-164cb641-ab33-41b6-b9e5-97493cb23252-overlay" aria-controls="action-menu-164cb641-ab33-41b6-b9e5-97493cb23252-list" aria-haspopup="true" aria-labelledby="tooltip-8b2676dc-9c11-42ae-acdb-addd9894099a" 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-8b2676dc-9c11-42ae-acdb-addd9894099a" for="action-menu-164cb641-ab33-41b6-b9e5-97493cb23252-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 id="action-menu-164cb641-ab33-41b6-b9e5-97493cb23252-overlay" anchor="action-menu-164cb641-ab33-41b6-b9e5-97493cb23252-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-164cb641-ab33-41b6-b9e5-97493cb23252-button" id="action-menu-164cb641-ab33-41b6-b9e5-97493cb23252-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-2c98622e-b0a8-4bbd-ac25-f1dcd08c1a6d" href="/android/snippets" 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-9e10f076-55bf-4a24-8661-d8b6573a7e32" href="/android/snippets/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-d7b55d44-237c-4605-a9c0-c47e6a9315c2" href="/android/snippets/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="i3actions-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-67abeaf3-f22f-4bae-b8da-c61741b87096" href="/android/snippets/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="i4projects-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-16bcff26-3d42-42f6-b8e8-9f0cb19af9ee" href="/android/snippets/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="i5security-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-a317f579-8899-4cd4-8191-4de0a83260b1" href="/android/snippets/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="i6insights-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-ca2746c5-fef1-4e74-ac4a-1205b012a351" href="/android/snippets/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="react-code-view" initial-path="/android/snippets/blob/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt" style="display: block; min-height: calc(100vh - 64px);" data-attempted-ssr="true" data-ssr="true" data-lazy="false" data-alternate="false" > <script type="application/json" data-target="react-app.embeddedData">{"payload":{"allShortcutsEnabled":false,"fileTree":{"compose/snippets/src/main/java/com/example/compose/snippets/animations":{"items":[{"name":"sharedelement","path":"compose/snippets/src/main/java/com/example/compose/snippets/animations/sharedelement","contentType":"directory"},{"name":"AdvancedAnimationSnippets.kt","path":"compose/snippets/src/main/java/com/example/compose/snippets/animations/AdvancedAnimationSnippets.kt","contentType":"file"},{"name":"AnimationQuickGuide.kt","path":"compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationQuickGuide.kt","contentType":"file"},{"name":"AnimationSnippets.kt","path":"compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt","contentType":"file"}],"totalCount":4},"compose/snippets/src/main/java/com/example/compose/snippets":{"items":[{"name":"accessibility","path":"compose/snippets/src/main/java/com/example/compose/snippets/accessibility","contentType":"directory"},{"name":"adaptivelayouts","path":"compose/snippets/src/main/java/com/example/compose/snippets/adaptivelayouts","contentType":"directory"},{"name":"animations","path":"compose/snippets/src/main/java/com/example/compose/snippets/animations","contentType":"directory"},{"name":"architecture","path":"compose/snippets/src/main/java/com/example/compose/snippets/architecture","contentType":"directory"},{"name":"components","path":"compose/snippets/src/main/java/com/example/compose/snippets/components","contentType":"directory"},{"name":"designsystems","path":"compose/snippets/src/main/java/com/example/compose/snippets/designsystems","contentType":"directory"},{"name":"draganddrop","path":"compose/snippets/src/main/java/com/example/compose/snippets/draganddrop","contentType":"directory"},{"name":"glance","path":"compose/snippets/src/main/java/com/example/compose/snippets/glance","contentType":"directory"},{"name":"graphics","path":"compose/snippets/src/main/java/com/example/compose/snippets/graphics","contentType":"directory"},{"name":"images","path":"compose/snippets/src/main/java/com/example/compose/snippets/images","contentType":"directory"},{"name":"interop","path":"compose/snippets/src/main/java/com/example/compose/snippets/interop","contentType":"directory"},{"name":"kotlin","path":"compose/snippets/src/main/java/com/example/compose/snippets/kotlin","contentType":"directory"},{"name":"landing","path":"compose/snippets/src/main/java/com/example/compose/snippets/landing","contentType":"directory"},{"name":"layouts","path":"compose/snippets/src/main/java/com/example/compose/snippets/layouts","contentType":"directory"},{"name":"lifecycle","path":"compose/snippets/src/main/java/com/example/compose/snippets/lifecycle","contentType":"directory"},{"name":"lists","path":"compose/snippets/src/main/java/com/example/compose/snippets/lists","contentType":"directory"},{"name":"mentalmodel","path":"compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel","contentType":"directory"},{"name":"modifiers","path":"compose/snippets/src/main/java/com/example/compose/snippets/modifiers","contentType":"directory"},{"name":"navigation","path":"compose/snippets/src/main/java/com/example/compose/snippets/navigation","contentType":"directory"},{"name":"performance","path":"compose/snippets/src/main/java/com/example/compose/snippets/performance","contentType":"directory"},{"name":"phases","path":"compose/snippets/src/main/java/com/example/compose/snippets/phases","contentType":"directory"},{"name":"pictureinpicture","path":"compose/snippets/src/main/java/com/example/compose/snippets/pictureinpicture","contentType":"directory"},{"name":"resources","path":"compose/snippets/src/main/java/com/example/compose/snippets/resources","contentType":"directory"},{"name":"semantics","path":"compose/snippets/src/main/java/com/example/compose/snippets/semantics","contentType":"directory"},{"name":"sideeffects","path":"compose/snippets/src/main/java/com/example/compose/snippets/sideeffects","contentType":"directory"},{"name":"state","path":"compose/snippets/src/main/java/com/example/compose/snippets/state","contentType":"directory"},{"name":"system","path":"compose/snippets/src/main/java/com/example/compose/snippets/system","contentType":"directory"},{"name":"text","path":"compose/snippets/src/main/java/com/example/compose/snippets/text","contentType":"directory"},{"name":"tooling","path":"compose/snippets/src/main/java/com/example/compose/snippets/tooling","contentType":"directory"},{"name":"touchinput","path":"compose/snippets/src/main/java/com/example/compose/snippets/touchinput","contentType":"directory"},{"name":"ui","path":"compose/snippets/src/main/java/com/example/compose/snippets/ui","contentType":"directory"},{"name":"util","path":"compose/snippets/src/main/java/com/example/compose/snippets/util","contentType":"directory"},{"name":"MyActivity.kt","path":"compose/snippets/src/main/java/com/example/compose/snippets/MyActivity.kt","contentType":"file"},{"name":"SnippetsActivity.kt","path":"compose/snippets/src/main/java/com/example/compose/snippets/SnippetsActivity.kt","contentType":"file"}],"totalCount":34},"compose/snippets/src/main/java/com/example/compose":{"items":[{"name":"snippets","path":"compose/snippets/src/main/java/com/example/compose/snippets","contentType":"directory"}],"totalCount":1},"compose/snippets/src/main/java/com/example":{"items":[{"name":"compose","path":"compose/snippets/src/main/java/com/example/compose","contentType":"directory"}],"totalCount":1},"compose/snippets/src/main/java/com":{"items":[{"name":"example","path":"compose/snippets/src/main/java/com/example","contentType":"directory"}],"totalCount":1},"compose/snippets/src/main/java":{"items":[{"name":"com","path":"compose/snippets/src/main/java/com","contentType":"directory"}],"totalCount":1},"compose/snippets/src/main":{"items":[{"name":"java","path":"compose/snippets/src/main/java","contentType":"directory"},{"name":"res","path":"compose/snippets/src/main/res","contentType":"directory"},{"name":"AndroidManifest.xml","path":"compose/snippets/src/main/AndroidManifest.xml","contentType":"file"}],"totalCount":3},"compose/snippets/src":{"items":[{"name":"androidTest","path":"compose/snippets/src/androidTest","contentType":"directory"},{"name":"main","path":"compose/snippets/src/main","contentType":"directory"}],"totalCount":2},"compose/snippets":{"items":[{"name":"src","path":"compose/snippets/src","contentType":"directory"},{"name":".gitignore","path":"compose/snippets/.gitignore","contentType":"file"},{"name":"build.gradle.kts","path":"compose/snippets/build.gradle.kts","contentType":"file"},{"name":"lint.xml","path":"compose/snippets/lint.xml","contentType":"file"},{"name":"proguard-rules.pro","path":"compose/snippets/proguard-rules.pro","contentType":"file"}],"totalCount":5},"compose":{"items":[{"name":"recomposehighlighter","path":"compose/recomposehighlighter","contentType":"directory"},{"name":"snippets","path":"compose/snippets","contentType":"directory"},{"name":".gitignore","path":"compose/.gitignore","contentType":"file"}],"totalCount":3},"":{"items":[{"name":".github","path":".github","contentType":"directory"},{"name":".idea","path":".idea","contentType":"directory"},{"name":"bluetoothle","path":"bluetoothle","contentType":"directory"},{"name":"buildscripts","path":"buildscripts","contentType":"directory"},{"name":"compose","path":"compose","contentType":"directory"},{"name":"gradle","path":"gradle","contentType":"directory"},{"name":"kotlin","path":"kotlin","contentType":"directory"},{"name":"shared","path":"shared","contentType":"directory"},{"name":"spotless","path":"spotless","contentType":"directory"},{"name":"views","path":"views","contentType":"directory"},{"name":"wear","path":"wear","contentType":"directory"},{"name":".gitignore","path":".gitignore","contentType":"file"},{"name":"ASSETS_LICENSE","path":"ASSETS_LICENSE","contentType":"file"},{"name":"CONTRIBUTING.md","path":"CONTRIBUTING.md","contentType":"file"},{"name":"LICENSE","path":"LICENSE","contentType":"file"},{"name":"README.md","path":"README.md","contentType":"file"},{"name":"build.gradle.kts","path":"build.gradle.kts","contentType":"file"},{"name":"gradle.properties","path":"gradle.properties","contentType":"file"},{"name":"gradlew","path":"gradlew","contentType":"file"},{"name":"gradlew.bat","path":"gradlew.bat","contentType":"file"},{"name":"settings.gradle.kts","path":"settings.gradle.kts","contentType":"file"}],"totalCount":21}},"fileTreeProcessingTime":17.787007,"foldersToFetch":[],"repo":{"id":138043025,"defaultBranch":"main","name":"snippets","ownerLogin":"android","currentUserCanPush":false,"isFork":false,"isEmpty":false,"createdAt":"2018-06-20T14:19:53.000Z","ownerAvatar":"https://avatars.githubusercontent.com/u/32689599?v=4","public":true,"private":false,"isOrgOwned":true},"codeLineWrapEnabled":false,"symbolsExpanded":false,"treeExpanded":true,"refInfo":{"name":"f595a0d317fd8aca6b33d4344bf87696cd45c481","listCacheKey":"v0:1732303074.0","canEdit":false,"refType":"tree","currentOid":"f595a0d317fd8aca6b33d4344bf87696cd45c481"},"path":"compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt","currentUser":null,"blob":{"rawLines":["/*"," * Copyright 2023 The Android Open Source Project"," *"," * Licensed under the Apache License, Version 2.0 (the \"License\");"," * you may not use this file except in compliance with the License."," * You may obtain a copy of the License at"," *"," * https://www.apache.org/licenses/LICENSE-2.0"," *"," * Unless required by applicable law or agreed to in writing, software"," * distributed under the License is distributed on an \"AS IS\" BASIS,"," * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied."," * See the License for the specific language governing permissions and"," * limitations under the License."," */","","@file:Suppress(\"CanBeVal\", \"UNUSED_VARIABLE\", \"UNUSED_PARAMETER\", \"unused\")","","package com.example.compose.snippets.animations","","import androidx.compose.animation.Animatable","import androidx.compose.animation.AnimatedContent","import androidx.compose.animation.AnimatedVisibility","import androidx.compose.animation.Crossfade","import androidx.compose.animation.EnterExitState","import androidx.compose.animation.SizeTransform","import androidx.compose.animation.animateColor","import androidx.compose.animation.animateContentSize","import androidx.compose.animation.core.AnimationVector1D","import androidx.compose.animation.core.AnimationVector2D","import androidx.compose.animation.core.Easing","import androidx.compose.animation.core.ExperimentalTransitionApi","import androidx.compose.animation.core.FastOutLinearInEasing","import androidx.compose.animation.core.FastOutSlowInEasing","import androidx.compose.animation.core.LinearEasing","import androidx.compose.animation.core.LinearOutSlowInEasing","import androidx.compose.animation.core.MutableTransitionState","import androidx.compose.animation.core.RepeatMode","import androidx.compose.animation.core.Spring","import androidx.compose.animation.core.TargetBasedAnimation","import androidx.compose.animation.core.Transition","import androidx.compose.animation.core.TwoWayConverter","import androidx.compose.animation.core.VectorConverter","import androidx.compose.animation.core.animateDp","import androidx.compose.animation.core.animateFloatAsState","import androidx.compose.animation.core.animateRect","import androidx.compose.animation.core.animateValueAsState","import androidx.compose.animation.core.createChildTransition","import androidx.compose.animation.core.infiniteRepeatable","import androidx.compose.animation.core.keyframes","import androidx.compose.animation.core.rememberInfiniteTransition","import androidx.compose.animation.core.rememberTransition","import androidx.compose.animation.core.repeatable","import androidx.compose.animation.core.snap","import androidx.compose.animation.core.spring","import androidx.compose.animation.core.tween","import androidx.compose.animation.core.updateTransition","import androidx.compose.animation.expandVertically","import androidx.compose.animation.fadeIn","import androidx.compose.animation.fadeOut","import androidx.compose.animation.graphics.ExperimentalAnimationGraphicsApi","import androidx.compose.animation.graphics.res.animatedVectorResource","import androidx.compose.animation.graphics.res.rememberAnimatedVectorPainter","import androidx.compose.animation.graphics.vector.AnimatedImageVector","import androidx.compose.animation.shrinkVertically","import androidx.compose.animation.slideInVertically","import androidx.compose.animation.slideOutVertically","import androidx.compose.animation.togetherWith","import androidx.compose.foundation.BorderStroke","import androidx.compose.foundation.Image","import androidx.compose.foundation.background","import androidx.compose.foundation.clickable","import androidx.compose.foundation.layout.Box","import androidx.compose.foundation.layout.Column","import androidx.compose.foundation.layout.Row","import androidx.compose.foundation.layout.fillMaxSize","import androidx.compose.foundation.layout.fillMaxWidth","import androidx.compose.foundation.layout.height","import androidx.compose.foundation.layout.padding","import androidx.compose.foundation.layout.size","import androidx.compose.foundation.layout.sizeIn","import androidx.compose.foundation.shape.RoundedCornerShape","import androidx.compose.material.icons.Icons","import androidx.compose.material.icons.filled.Phone","import androidx.compose.material3.Button","import androidx.compose.material3.Icon","import androidx.compose.material3.MaterialTheme","import androidx.compose.material3.Surface","import androidx.compose.material3.Text","import androidx.compose.runtime.Composable","import androidx.compose.runtime.LaunchedEffect","import androidx.compose.runtime.State","import androidx.compose.runtime.getValue","import androidx.compose.runtime.mutableIntStateOf","import androidx.compose.runtime.mutableLongStateOf","import androidx.compose.runtime.mutableStateOf","import androidx.compose.runtime.remember","import androidx.compose.runtime.setValue","import androidx.compose.runtime.withFrameNanos","import androidx.compose.ui.Alignment","import androidx.compose.ui.Modifier","import androidx.compose.ui.geometry.Rect","import androidx.compose.ui.graphics.Color","import androidx.compose.ui.graphics.graphicsLayer","import androidx.compose.ui.layout.ContentScale","import androidx.compose.ui.platform.LocalDensity","import androidx.compose.ui.tooling.preview.Preview","import androidx.compose.ui.unit.Dp","import androidx.compose.ui.unit.IntSize","import androidx.compose.ui.unit.dp","import com.example.compose.snippets.R","import java.text.BreakIterator","import java.text.StringCharacterIterator","import kotlinx.coroutines.delay","","/*","* Copyright 2023 The Android Open Source Project","*","* Licensed under the Apache License, Version 2.0 (the \"License\");","* you may not use this file except in compliance with the License.","* You may obtain a copy of the License at","*","* http://www.apache.org/licenses/LICENSE-2.0","*","* Unless required by applicable law or agreed to in writing, software","* distributed under the License is distributed on an \"AS IS\" BASIS,","* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.","* See the License for the specific language governing permissions and","* limitations under the License.","*/","@Preview","@Composable","private fun AnimatedVisibilitySample() {"," // [START android_compose_animations_animated_visibility]"," var editable by remember { mutableStateOf(true) }"," AnimatedVisibility(visible = editable) {"," Text(text = \"Edit\")"," }"," // [END android_compose_animations_animated_visibility]","}","","@Preview","@Composable","private fun AnimatedVisibilityWithEnterAndExit() {"," // [START android_compose_animations_animated_visibility_enter_exit]"," var visible by remember { mutableStateOf(true) }"," val density = LocalDensity.current"," AnimatedVisibility("," visible = visible,"," enter = slideInVertically {"," // Slide in from 40 dp from the top."," with(density) { -40.dp.roundToPx() }"," } + expandVertically("," // Expand from the top."," expandFrom = Alignment.Top"," ) + fadeIn("," // Fade in with the initial alpha of 0.3f."," initialAlpha = 0.3f"," ),"," exit = slideOutVertically() + shrinkVertically() + fadeOut()"," ) {"," Text("," \"Hello\","," Modifier"," .fillMaxWidth()"," .height(200.dp)"," )"," }"," // [END android_compose_animations_animated_visibility_enter_exit]","}","","@Preview","@Composable","private fun AnimatedVisibilityMutable() {"," // [START android_compose_animations_animated_visibility_mutable]"," // Create a MutableTransitionState\u003cBoolean\u003e for the AnimatedVisibility."," val state = remember {"," MutableTransitionState(false).apply {"," // Start the animation immediately."," targetState = true"," }"," }"," Column {"," AnimatedVisibility(visibleState = state) {"," Text(text = \"Hello, world!\")"," }",""," // Use the MutableTransitionState to know the current animation state"," // of the AnimatedVisibility."," Text("," text = when {"," state.isIdle \u0026\u0026 state.currentState -\u003e \"Visible\""," !state.isIdle \u0026\u0026 state.currentState -\u003e \"Disappearing\""," state.isIdle \u0026\u0026 !state.currentState -\u003e \"Invisible\""," else -\u003e \"Appearing\""," }"," )"," }"," // [END android_compose_animations_animated_visibility_mutable]","}","","@Composable","@Preview","private fun AnimatedVisibilityAnimateEnterExitChildren() {"," // [START android_compose_animations_animated_visibility_animate_enter_exit_children]"," var visible by remember { mutableStateOf(true) }",""," AnimatedVisibility("," visible = visible,"," enter = fadeIn(),"," exit = fadeOut()"," ) {"," // Fade in/out the background and the foreground."," Box("," Modifier"," .fillMaxSize()"," .background(Color.DarkGray)"," ) {"," Box("," Modifier"," .align(Alignment.Center)"," .animateEnterExit("," // Slide in/out the inner box."," enter = slideInVertically(),"," exit = slideOutVertically()"," )"," .sizeIn(minWidth = 256.dp, minHeight = 64.dp)"," .background(Color.Red)"," ) {"," // Content of the notification…"," }"," }"," }"," // [END android_compose_animations_animated_visibility_animate_enter_exit_children]","}","","@Preview","@Composable","private fun AnimatedVisibilityTransition() {"," // [START android_compose_animations_animated_visibility_transition]"," var visible by remember { mutableStateOf(true) }",""," AnimatedVisibility("," visible = visible,"," enter = fadeIn(),"," exit = fadeOut()"," ) { // this: AnimatedVisibilityScope"," // Use AnimatedVisibilityScope#transition to add a custom animation"," // to the AnimatedVisibility."," val background by transition.animateColor(label = \"color\") { state -\u003e"," if (state == EnterExitState.Visible) Color.Blue else Color.Gray"," }"," Box("," modifier = Modifier"," .size(128.dp)"," .background(background)"," )"," }"," // [END android_compose_animations_animated_visibility_transition]","}","","@Composable","@Preview","private fun AnimateAsStateSimple() {"," // [START android_compose_animations_animate_as_state]"," var enabled by remember { mutableStateOf(true) }",""," val alpha: Float by animateFloatAsState(if (enabled) 1f else 0.5f, label = \"alpha\")"," Box("," Modifier"," .fillMaxSize()"," .graphicsLayer(alpha = alpha)"," .background(Color.Red)"," )"," // [END android_compose_animations_animate_as_state]","}","","@Preview","@Composable","private fun AnimatedContentSimple() {"," // [START android_compose_animations_animated_content_simple]"," Row {"," var count by remember { mutableIntStateOf(0) }"," Button(onClick = { count++ }) {"," Text(\"Add\")"," }"," AnimatedContent("," targetState = count,"," label = \"animated content\""," ) { targetCount -\u003e"," // Make sure to use `targetCount`, not `count`."," Text(text = \"Count: $targetCount\")"," }"," }"," // [END android_compose_animations_animated_content_simple]","}","","@Composable","private fun AnimatedContentTransitionSpec(count: Int) {"," // [START android_compose_animations_animated_content_transition_spec]"," AnimatedContent("," targetState = count,"," transitionSpec = {"," // Compare the incoming number with the previous number."," if (targetState \u003e initialState) {"," // If the target number is larger, it slides up and fades in"," // while the initial (smaller) number slides up and fades out."," slideInVertically { height -\u003e height } + fadeIn() togetherWith"," slideOutVertically { height -\u003e -height } + fadeOut()"," } else {"," // If the target number is smaller, it slides down and fades in"," // while the initial number slides down and fades out."," slideInVertically { height -\u003e -height } + fadeIn() togetherWith"," slideOutVertically { height -\u003e height } + fadeOut()"," }.using("," // Disable clipping since the faded slide-in/out should"," // be displayed out of bounds."," SizeTransform(clip = false)"," )"," }, label = \"animated content\""," ) { targetCount -\u003e"," Text(text = \"$targetCount\")"," }"," // [END android_compose_animations_animated_content_transition_spec]","}","","@Composable","private fun AnimatedContentSizeTransform() {"," // [START android_compose_animations_animated_content_size_transform]"," var expanded by remember { mutableStateOf(false) }"," Surface("," color = MaterialTheme.colorScheme.primary,"," onClick = { expanded = !expanded }"," ) {"," AnimatedContent("," targetState = expanded,"," transitionSpec = {"," fadeIn(animationSpec = tween(150, 150)) togetherWith"," fadeOut(animationSpec = tween(150)) using"," SizeTransform { initialSize, targetSize -\u003e"," if (targetState) {"," keyframes {"," // Expand horizontally first."," IntSize(targetSize.width, initialSize.height) at 150"," durationMillis = 300"," }"," } else {"," keyframes {"," // Shrink vertically first."," IntSize(initialSize.width, targetSize.height) at 150"," durationMillis = 300"," }"," }"," }"," }, label = \"size transform\""," ) { targetExpanded -\u003e"," if (targetExpanded) {"," Expanded()"," } else {"," ContentIcon()"," }"," }"," }"," // [END android_compose_animations_animated_content_size_transform]","}","","@Composable","private fun AnimateContentSizeSimple() {"," // [START android_compose_animations_animated_content_size_modifier_simple]"," var message by remember { mutableStateOf(\"Hello\") }"," Box("," modifier = Modifier"," .background(Color.Blue)"," .animateContentSize()"," ) { Text(text = message) }"," // [END android_compose_animations_animated_content_size_modifier_simple]","}","","@Composable","private fun CrossfadeSimple() {"," // [START android_compose_animations_crossfade_simple]"," var currentPage by remember { mutableStateOf(\"A\") }"," Crossfade(targetState = currentPage, label = \"cross fade\") { screen -\u003e"," when (screen) {"," \"A\" -\u003e Text(\"Page A\")"," \"B\" -\u003e Text(\"Page B\")"," }"," }"," // [END android_compose_animations_crossfade_simple]","}","","private object UpdateTransitionEnumState {"," // [START android_compose_animations_transitions_box_state]"," enum class BoxState {"," Collapsed,"," Expanded"," }"," // [END android_compose_animations_transitions_box_state]",""," @Composable"," private fun UpdateTransitionInstance() {"," // [START android_compose_animations_transitions_instance]"," var currentState by remember { mutableStateOf(BoxState.Collapsed) }"," val transition = updateTransition(currentState, label = \"box state\")"," // [END android_compose_animations_transitions_instance]"," }",""," @Composable"," private fun UpdateTransitionAnimationValues(transition: Transition\u003cBoxState\u003e) {"," // [START android_compose_animations_transitions_values]"," val rect by transition.animateRect(label = \"rectangle\") { state -\u003e"," when (state) {"," BoxState.Collapsed -\u003e Rect(0f, 0f, 100f, 100f)"," BoxState.Expanded -\u003e Rect(100f, 100f, 300f, 300f)"," }"," }"," val borderWidth by transition.animateDp(label = \"border width\") { state -\u003e"," when (state) {"," BoxState.Collapsed -\u003e 1.dp"," BoxState.Expanded -\u003e 0.dp"," }"," }"," // [END android_compose_animations_transitions_values]"," }",""," @Composable"," private fun UpdateTransitionTransitionSpec(transition: Transition\u003cBoxState\u003e) {"," // [START android_compose_animations_transitions_spec]"," val color by transition.animateColor("," transitionSpec = {"," when {"," BoxState.Expanded isTransitioningTo BoxState.Collapsed -\u003e"," spring(stiffness = 50f)",""," else -\u003e"," tween(durationMillis = 500)"," }"," }, label = \"color\""," ) { state -\u003e"," when (state) {"," BoxState.Collapsed -\u003e MaterialTheme.colorScheme.primary"," BoxState.Expanded -\u003e MaterialTheme.colorScheme.background"," }"," }"," // [END android_compose_animations_transitions_spec]"," }",""," @Composable"," private fun UpdateTransitionMutableTransitionState() {"," // [START android_compose_animations_transitions_state]"," // Start in collapsed state and immediately animate to expanded"," var currentState = remember { MutableTransitionState(BoxState.Collapsed) }"," currentState.targetState = BoxState.Expanded"," val transition = rememberTransition(currentState, label = \"box state\")"," // ……"," // [END android_compose_animations_transitions_state]"," }","}","","@OptIn(ExperimentalTransitionApi::class)","private object UpdateTransitionCreateChildTransition {",""," // [START android_compose_animations_transitions_dialer_example]"," enum class DialerState { DialerMinimized, NumberPad }",""," @Composable"," fun DialerButton(isVisibleTransition: Transition\u003cBoolean\u003e) {"," // `isVisibleTransition` spares the need for the content to know"," // about other DialerStates. Instead, the content can focus on"," // animating the state change between visible and not visible."," }",""," @Composable"," fun NumberPad(isVisibleTransition: Transition\u003cBoolean\u003e) {"," // `isVisibleTransition` spares the need for the content to know"," // about other DialerStates. Instead, the content can focus on"," // animating the state change between visible and not visible."," }",""," @Composable"," fun Dialer(dialerState: DialerState) {"," val transition = updateTransition(dialerState, label = \"dialer state\")"," Box {"," // Creates separate child transitions of Boolean type for NumberPad"," // and DialerButton for any content animation between visible and"," // not visible"," NumberPad("," transition.createChildTransition {"," it == DialerState.NumberPad"," }"," )"," DialerButton("," transition.createChildTransition {"," it == DialerState.DialerMinimized"," }"," )"," }"," }"," // [END android_compose_animations_transitions_dialer_example]","}","","@Composable","private fun UpdateTransitionAnimatedVisibility() {"," // [START android_compose_animations_transitions_animated_visibility]"," var selected by remember { mutableStateOf(false) }"," // Animates changes when `selected` is changed."," val transition = updateTransition(selected, label = \"selected state\")"," val borderColor by transition.animateColor(label = \"border color\") { isSelected -\u003e"," if (isSelected) Color.Magenta else Color.White"," }"," val elevation by transition.animateDp(label = \"elevation\") { isSelected -\u003e"," if (isSelected) 10.dp else 2.dp"," }"," Surface("," onClick = { selected = !selected },"," shape = RoundedCornerShape(8.dp),"," border = BorderStroke(2.dp, borderColor),"," shadowElevation = elevation"," ) {"," Column("," modifier = Modifier"," .fillMaxWidth()"," .padding(16.dp)"," ) {"," Text(text = \"Hello, world!\")"," // AnimatedVisibility as a part of the transition."," transition.AnimatedVisibility("," visible = { targetSelected -\u003e targetSelected },"," enter = expandVertically(),"," exit = shrinkVertically()"," ) {"," Text(text = \"It is fine today.\")"," }"," // AnimatedContent as a part of the transition."," transition.AnimatedContent { targetState -\u003e"," if (targetState) {"," Text(text = \"Selected\")"," } else {"," Icon(imageVector = Icons.Default.Phone, contentDescription = \"Phone\")"," }"," }"," }"," }"," // [END android_compose_animations_transitions_animated_visibility]","}","","private object UpdateTransitionEncapsulating {"," // [START android_compose_animations_transitions_encapsulating]"," enum class BoxState { Collapsed, Expanded }",""," @Composable"," fun AnimatingBox(boxState: BoxState) {"," val transitionData = updateTransitionData(boxState)"," // UI tree"," Box("," modifier = Modifier"," .background(transitionData.color)"," .size(transitionData.size)"," )"," }",""," // Holds the animation values."," private class TransitionData("," color: State\u003cColor\u003e,"," size: State\u003cDp\u003e"," ) {"," val color by color"," val size by size"," }",""," // Create a Transition and return its animation values."," @Composable"," private fun updateTransitionData(boxState: BoxState): TransitionData {"," val transition = updateTransition(boxState, label = \"box state\")"," val color = transition.animateColor(label = \"color\") { state -\u003e"," when (state) {"," BoxState.Collapsed -\u003e Color.Gray"," BoxState.Expanded -\u003e Color.Red"," }"," }"," val size = transition.animateDp(label = \"size\") { state -\u003e"," when (state) {"," BoxState.Collapsed -\u003e 64.dp"," BoxState.Expanded -\u003e 128.dp"," }"," }"," return remember(transition) { TransitionData(color, size) }"," }"," // [END android_compose_animations_transitions_encapsulating]","}","","@Composable","private fun RememberInfiniteTransitionSimple() {"," // [START android_compose_animations_infinite_transition_simple]"," val infiniteTransition = rememberInfiniteTransition(label = \"infinite\")"," val color by infiniteTransition.animateColor("," initialValue = Color.Red,"," targetValue = Color.Green,"," animationSpec = infiniteRepeatable("," animation = tween(1000, easing = LinearEasing),"," repeatMode = RepeatMode.Reverse"," ),"," label = \"color\""," )",""," Box("," Modifier"," .fillMaxSize()"," .background(color)"," )"," // [END android_compose_animations_infinite_transition_simple]","}","","@Composable","private fun AnimatableSimple(ok: Boolean) {"," // [START android_compose_animations_animatable_simple]"," // Start out gray and animate to green/red based on `ok`"," val color = remember { Animatable(Color.Gray) }"," LaunchedEffect(ok) {"," color.animateTo(if (ok) Color.Green else Color.Red)"," }"," Box("," Modifier"," .fillMaxSize()"," .background(color.value)"," )"," // [END android_compose_animations_animatable_simple]","}","","@Composable","private fun TargetBasedAnimationSimple(someCustomCondition: () -\u003e Boolean) {"," // [START android_compose_animations_target_based_animation_simple]"," val anim = remember {"," TargetBasedAnimation("," animationSpec = tween(200),"," typeConverter = Float.VectorConverter,"," initialValue = 200f,"," targetValue = 1000f"," )"," }"," var playTime by remember { mutableLongStateOf(0L) }",""," LaunchedEffect(anim) {"," val startTime = withFrameNanos { it }",""," do {"," playTime = withFrameNanos { it } - startTime"," val animationValue = anim.getValueFromNanos(playTime)"," } while (someCustomCondition())"," }"," // [END android_compose_animations_target_based_animation_simple]","}","","@Composable","private fun AnimationSpecTween(enabled: Boolean) {"," // [START android_compose_animations_spec_tween]"," val alpha: Float by animateFloatAsState("," targetValue = if (enabled) 1f else 0.5f,"," // Configure the animation duration and easing."," animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing),"," label = \"alpha\""," )"," // [END android_compose_animations_spec_tween]","}","","@Composable","private fun AnimationSpecSpring() {"," // [START android_compose_animations_spec_spring]"," val value by animateFloatAsState("," targetValue = 1f,"," animationSpec = spring("," dampingRatio = Spring.DampingRatioHighBouncy,"," stiffness = Spring.StiffnessMedium"," ),"," label = \"spring spec\""," )"," // [END android_compose_animations_spec_spring]","}","","@Composable","private fun AnimationSpecTween() {"," // [START android_compose_animations_spec_tween_delay]"," val value by animateFloatAsState("," targetValue = 1f,"," animationSpec = tween("," durationMillis = 300,"," delayMillis = 50,"," easing = LinearOutSlowInEasing"," ),"," label = \"tween delay\""," )"," // [END android_compose_animations_spec_tween_delay]","}","","@Composable","private fun AnimationSpecKeyframe() {"," // [START android_compose_animations_spec_keyframe]"," val value by animateFloatAsState("," targetValue = 1f,"," animationSpec = keyframes {"," durationMillis = 375"," 0.0f at 0 using LinearOutSlowInEasing // for 0-15 ms"," 0.2f at 15 using FastOutLinearInEasing // for 15-75 ms"," 0.4f at 75 // ms"," 0.4f at 225 // ms"," },"," label = \"keyframe\""," )"," // [END android_compose_animations_spec_keyframe]","}","","@Composable","private fun AnimationSpecRepeatable() {"," // [START android_compose_animations_spec_repeatable]"," val value by animateFloatAsState("," targetValue = 1f,"," animationSpec = repeatable("," iterations = 3,"," animation = tween(durationMillis = 300),"," repeatMode = RepeatMode.Reverse"," ),"," label = \"repeatable spec\""," )"," // [END android_compose_animations_spec_repeatable]","}","","@Composable","private fun AnimationSpecInfiniteRepeatable() {"," // [START android_compose_animations_spec_infinite_repeatable]"," val value by animateFloatAsState("," targetValue = 1f,"," animationSpec = infiniteRepeatable("," animation = tween(durationMillis = 300),"," repeatMode = RepeatMode.Reverse"," ),"," label = \"infinite repeatable\""," )"," // [END android_compose_animations_spec_infinite_repeatable]","}","","@Composable","private fun AnimationSpecSnap() {"," // [START android_compose_animations_spec_snap]"," val value by animateFloatAsState("," targetValue = 1f,"," animationSpec = snap(delayMillis = 50),"," label = \"snap spec\""," )"," // [END android_compose_animations_spec_snap]","}","","private object Easing {"," // [START android_compose_animations_easing_usage]"," val CustomEasing = Easing { fraction -\u003e fraction * fraction }",""," @Composable"," fun EasingUsage() {"," val value by animateFloatAsState("," targetValue = 1f,"," animationSpec = tween("," durationMillis = 300,"," easing = CustomEasing"," ),"," label = \"custom easing\""," )"," // ……"," }"," // [END android_compose_animations_easing_usage]","}","","private object AnimationVectorTwoWayConverter {"," // [START android_compose_animations_vector_convertor]"," val IntToVector: TwoWayConverter\u003cInt, AnimationVector1D\u003e ="," TwoWayConverter({ AnimationVector1D(it.toFloat()) }, { it.value.toInt() })"," // [END android_compose_animations_vector_convertor]","}","","private object AnimationVectorCustomType {"," // [START android_compose_animations_vector_convertor_custom_type]"," data class MySize(val width: Dp, val height: Dp)",""," @Composable"," fun MyAnimation(targetSize: MySize) {"," val animSize: MySize by animateValueAsState("," targetSize,"," TwoWayConverter("," convertToVector = { size: MySize -\u003e"," // Extract a float value from each of the `Dp` fields."," AnimationVector2D(size.width.value, size.height.value)"," },"," convertFromVector = { vector: AnimationVector2D -\u003e"," MySize(vector.v1.dp, vector.v2.dp)"," }"," ),"," label = \"size\""," )"," }"," // [END android_compose_animations_vector_convertor_custom_type]","}","","@OptIn(ExperimentalAnimationGraphicsApi::class)","@Preview","// [START android_compose_animations_vector_drawable]","@Composable","fun AnimatedVectorDrawable() {"," val image = AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)"," var atEnd by remember { mutableStateOf(false) }"," Image("," painter = rememberAnimatedVectorPainter(image, atEnd),"," contentDescription = \"Timer\","," modifier = Modifier.clickable {"," atEnd = !atEnd"," },"," contentScale = ContentScale.Crop"," )","}","// [END android_compose_animations_vector_drawable]","","@Composable","private fun Expanded() {","}","","@Composable","private fun ContentIcon() {","}","","// [START android_compose_animations_char_by_char]","@Composable","private fun AnimatedText() {"," val text = \"This text animates as though it is being typed \\uD83E\\uDDDE\\u200D♀\\uFE0F \\uD83D\\uDD10 \\uD83D\\uDC69\\u200D❤\\uFE0F\\u200D\\uD83D\\uDC68 \\uD83D\\uDC74\\uD83C\\uDFFD\"",""," // Use BreakIterator as it correctly iterates over characters regardless of how they are"," // stored, for example, some emojis are made up of multiple characters."," // You don't want to break up an emoji as it animates, so using BreakIterator will ensure"," // this is correctly handled!"," val breakIterator = remember(text) { BreakIterator.getCharacterInstance() }",""," // Define how many milliseconds between each character should pause for. This will create the"," // illusion of an animation, as we delay the job after each character is iterated on."," val typingDelayInMs = 50L",""," var substringText by remember {"," mutableStateOf(\"\")"," }"," LaunchedEffect(text) {"," // Initial start delay of the typing animation"," delay(1000)"," breakIterator.text = StringCharacterIterator(text)",""," var nextIndex = breakIterator.next()"," // Iterate over the string, by index boundary"," while (nextIndex != BreakIterator.DONE) {"," substringText = text.subSequence(0, nextIndex).toString()"," // Go to the next logical character boundary"," nextIndex = breakIterator.next()"," delay(typingDelayInMs)"," }"," }"," Text(substringText)","// [END android_compose_animations_char_by_char]","}"],"stylingDirectives":[[{"s":0,"e":2,"c":"pl-c"},{"s":0,"e":2,"c":"pl-c"}],[{"s":0,"e":49,"c":"pl-c"}],[{"s":0,"e":2,"c":"pl-c"}],[{"s":0,"e":66,"c":"pl-c"}],[{"s":0,"e":67,"c":"pl-c"}],[{"s":0,"e":42,"c":"pl-c"}],[{"s":0,"e":2,"c":"pl-c"}],[{"s":0,"e":50,"c":"pl-c"}],[{"s":0,"e":2,"c":"pl-c"}],[{"s":0,"e":70,"c":"pl-c"}],[{"s":0,"e":68,"c":"pl-c"}],[{"s":0,"e":75,"c":"pl-c"}],[{"s":0,"e":70,"c":"pl-c"}],[{"s":0,"e":33,"c":"pl-c"}],[{"s":0,"e":3,"c":"pl-c"},{"s":1,"e":3,"c":"pl-c"}],[],[{"s":15,"e":25,"c":"pl-s"},{"s":15,"e":16,"c":"pl-pds"},{"s":24,"e":25,"c":"pl-pds"},{"s":27,"e":44,"c":"pl-s"},{"s":27,"e":28,"c":"pl-pds"},{"s":43,"e":44,"c":"pl-pds"},{"s":46,"e":64,"c":"pl-s"},{"s":46,"e":47,"c":"pl-pds"},{"s":63,"e":64,"c":"pl-pds"},{"s":66,"e":74,"c":"pl-s"},{"s":66,"e":67,"c":"pl-pds"},{"s":73,"e":74,"c":"pl-pds"}],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":47,"c":"pl-en"}],[],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":44,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":49,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":52,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":43,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":48,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":47,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":46,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":52,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":56,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":56,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":45,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":64,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":60,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":58,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":51,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":60,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":61,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":49,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":45,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":59,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":49,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":54,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":54,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":48,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":58,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":50,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":58,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":60,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":57,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":48,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":65,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":57,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":49,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":43,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":45,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":44,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":55,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":50,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":40,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":41,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":75,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":69,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":76,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":69,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":50,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":51,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":52,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":46,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":47,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":40,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":45,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":44,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":45,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":48,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":45,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":53,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":54,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":48,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":49,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":46,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":48,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":59,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":44,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":51,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":40,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":38,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":47,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":41,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":38,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":42,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":46,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":37,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":40,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":49,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":50,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":46,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":40,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":40,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":46,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":36,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":35,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":40,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":41,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":49,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":46,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":48,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":50,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":34,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":39,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":34,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":37,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":30,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":40,"c":"pl-smi"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":31,"c":"pl-smi"}],[],[{"s":0,"e":2,"c":"pl-c"},{"s":0,"e":2,"c":"pl-c"}],[{"s":0,"e":48,"c":"pl-c"}],[{"s":0,"e":1,"c":"pl-c"}],[{"s":0,"e":65,"c":"pl-c"}],[{"s":0,"e":66,"c":"pl-c"}],[{"s":0,"e":41,"c":"pl-c"}],[{"s":0,"e":1,"c":"pl-c"}],[{"s":0,"e":48,"c":"pl-c"}],[{"s":0,"e":1,"c":"pl-c"}],[{"s":0,"e":69,"c":"pl-c"}],[{"s":0,"e":67,"c":"pl-c"}],[{"s":0,"e":74,"c":"pl-c"}],[{"s":0,"e":69,"c":"pl-c"}],[{"s":0,"e":32,"c":"pl-c"}],[{"s":0,"e":2,"c":"pl-c"},{"s":0,"e":2,"c":"pl-c"}],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":36,"c":"pl-en"}],[{"s":4,"e":61,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":46,"e":50,"c":"pl-c1"}],[{"s":4,"e":22,"c":"pl-en"},{"s":31,"e":32,"c":"pl-k"}],[{"s":8,"e":12,"c":"pl-en"},{"s":18,"e":19,"c":"pl-k"},{"s":20,"e":26,"c":"pl-s"},{"s":20,"e":21,"c":"pl-pds"},{"s":25,"e":26,"c":"pl-pds"}],[],[{"s":4,"e":59,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":46,"c":"pl-en"}],[{"s":4,"e":72,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":45,"e":49,"c":"pl-c1"}],[{"s":4,"e":7,"c":"pl-k"},{"s":16,"e":17,"c":"pl-k"},{"s":18,"e":30,"c":"pl-en"}],[{"s":4,"e":22,"c":"pl-en"}],[{"s":16,"e":17,"c":"pl-k"}],[{"s":14,"e":15,"c":"pl-k"}],[{"s":12,"e":48,"c":"pl-c"},{"s":12,"e":14,"c":"pl-c"}],[{"s":12,"e":16,"c":"pl-c1"},{"s":28,"e":29,"c":"pl-k"},{"s":29,"e":31,"c":"pl-c1"}],[{"s":10,"e":11,"c":"pl-k"}],[{"s":12,"e":35,"c":"pl-c"},{"s":12,"e":14,"c":"pl-c"}],[{"s":23,"e":24,"c":"pl-k"},{"s":25,"e":34,"c":"pl-en"},{"s":35,"e":38,"c":"pl-en"}],[{"s":10,"e":11,"c":"pl-k"}],[{"s":12,"e":54,"c":"pl-c"},{"s":12,"e":14,"c":"pl-c"}],[{"s":25,"e":26,"c":"pl-k"},{"s":27,"e":31,"c":"pl-c1"}],[],[{"s":13,"e":14,"c":"pl-k"},{"s":36,"e":37,"c":"pl-k"},{"s":57,"e":58,"c":"pl-k"}],[],[{"s":8,"e":12,"c":"pl-en"}],[{"s":12,"e":19,"c":"pl-s"},{"s":12,"e":13,"c":"pl-pds"},{"s":18,"e":19,"c":"pl-pds"}],[{"s":12,"e":20,"c":"pl-en"}],[],[{"s":24,"e":27,"c":"pl-c1"}],[],[],[{"s":4,"e":70,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":37,"c":"pl-en"}],[{"s":4,"e":69,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":75,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":14,"e":15,"c":"pl-k"}],[{"s":8,"e":30,"c":"pl-en"},{"s":31,"e":36,"c":"pl-c1"},{"s":38,"e":43,"c":"pl-c1"}],[{"s":12,"e":47,"c":"pl-c"},{"s":12,"e":14,"c":"pl-c"}],[{"s":24,"e":25,"c":"pl-k"},{"s":26,"e":30,"c":"pl-c1"}],[],[],[{"s":4,"e":10,"c":"pl-en"}],[{"s":8,"e":26,"c":"pl-en"},{"s":40,"e":41,"c":"pl-k"}],[{"s":12,"e":16,"c":"pl-en"},{"s":22,"e":23,"c":"pl-k"},{"s":24,"e":39,"c":"pl-s"},{"s":24,"e":25,"c":"pl-pds"},{"s":38,"e":39,"c":"pl-pds"}],[],[],[{"s":8,"e":77,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":37,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":12,"c":"pl-en"}],[{"s":17,"e":18,"c":"pl-k"},{"s":19,"e":23,"c":"pl-k"}],[{"s":29,"e":31,"c":"pl-k"},{"s":51,"e":53,"c":"pl-k"},{"s":54,"e":63,"c":"pl-s"},{"s":54,"e":55,"c":"pl-pds"},{"s":62,"e":63,"c":"pl-pds"}],[{"s":16,"e":17,"c":"pl-k"},{"s":30,"e":32,"c":"pl-k"},{"s":52,"e":54,"c":"pl-k"},{"s":55,"e":69,"c":"pl-s"},{"s":55,"e":56,"c":"pl-pds"},{"s":68,"e":69,"c":"pl-pds"}],[{"s":29,"e":31,"c":"pl-k"},{"s":32,"e":33,"c":"pl-k"},{"s":52,"e":54,"c":"pl-k"},{"s":55,"e":66,"c":"pl-s"},{"s":55,"e":56,"c":"pl-pds"},{"s":65,"e":66,"c":"pl-pds"}],[{"s":16,"e":20,"c":"pl-k"},{"s":21,"e":23,"c":"pl-k"},{"s":24,"e":35,"c":"pl-s"},{"s":24,"e":25,"c":"pl-pds"},{"s":34,"e":35,"c":"pl-pds"}],[],[],[],[{"s":4,"e":67,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":54,"c":"pl-en"}],[{"s":4,"e":89,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":45,"e":49,"c":"pl-c1"}],[],[{"s":4,"e":22,"c":"pl-en"}],[{"s":16,"e":17,"c":"pl-k"}],[{"s":14,"e":15,"c":"pl-k"}],[{"s":13,"e":14,"c":"pl-k"}],[],[{"s":8,"e":57,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":11,"c":"pl-en"}],[{"s":12,"e":20,"c":"pl-en"}],[],[{"s":28,"e":33,"c":"pl-en"},{"s":34,"e":42,"c":"pl-en"}],[],[{"s":12,"e":15,"c":"pl-en"}],[{"s":16,"e":24,"c":"pl-en"}],[{"s":27,"e":36,"c":"pl-en"},{"s":37,"e":43,"c":"pl-en"}],[],[{"s":24,"e":54,"c":"pl-c"},{"s":24,"e":26,"c":"pl-c"}],[{"s":30,"e":31,"c":"pl-k"}],[{"s":29,"e":30,"c":"pl-k"}],[],[{"s":37,"e":38,"c":"pl-k"},{"s":39,"e":42,"c":"pl-c1"},{"s":57,"e":58,"c":"pl-k"},{"s":59,"e":61,"c":"pl-c1"}],[{"s":32,"e":37,"c":"pl-en"},{"s":38,"e":41,"c":"pl-en"}],[],[{"s":16,"e":47,"c":"pl-c"},{"s":16,"e":18,"c":"pl-c"}],[],[],[],[{"s":4,"e":87,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":40,"c":"pl-en"}],[{"s":4,"e":72,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":45,"e":49,"c":"pl-c1"}],[],[{"s":4,"e":22,"c":"pl-en"}],[{"s":16,"e":17,"c":"pl-k"}],[{"s":14,"e":15,"c":"pl-k"}],[{"s":13,"e":14,"c":"pl-k"}],[{"s":8,"e":40,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":75,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":37,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":11,"c":"pl-k"},{"s":56,"e":57,"c":"pl-k"},{"s":58,"e":65,"c":"pl-s"},{"s":58,"e":59,"c":"pl-pds"},{"s":64,"e":65,"c":"pl-pds"},{"s":75,"e":77,"c":"pl-k"}],[{"s":12,"e":14,"c":"pl-k"},{"s":22,"e":24,"c":"pl-k"},{"s":25,"e":39,"c":"pl-en"},{"s":40,"e":47,"c":"pl-en"},{"s":49,"e":54,"c":"pl-en"},{"s":55,"e":59,"c":"pl-en"},{"s":60,"e":64,"c":"pl-k"},{"s":65,"e":70,"c":"pl-en"},{"s":71,"e":75,"c":"pl-en"}],[],[{"s":8,"e":11,"c":"pl-en"}],[{"s":21,"e":22,"c":"pl-k"},{"s":23,"e":31,"c":"pl-en"}],[{"s":22,"e":25,"c":"pl-c1"}],[],[],[],[{"s":4,"e":70,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":32,"c":"pl-en"}],[{"s":4,"e":58,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":45,"e":49,"c":"pl-c1"}],[],[{"s":4,"e":7,"c":"pl-k"},{"s":13,"e":14,"c":"pl-k"},{"s":15,"e":20,"c":"pl-c1"},{"s":44,"e":46,"c":"pl-k"},{"s":57,"e":59,"c":"pl-c1"},{"s":60,"e":64,"c":"pl-k"},{"s":65,"e":69,"c":"pl-c1"},{"s":77,"e":78,"c":"pl-k"},{"s":79,"e":86,"c":"pl-s"},{"s":79,"e":80,"c":"pl-pds"},{"s":85,"e":86,"c":"pl-pds"}],[{"s":4,"e":7,"c":"pl-en"}],[{"s":8,"e":16,"c":"pl-en"}],[],[{"s":33,"e":34,"c":"pl-k"}],[{"s":24,"e":29,"c":"pl-en"},{"s":30,"e":33,"c":"pl-en"}],[],[{"s":4,"e":56,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":33,"c":"pl-en"}],[{"s":4,"e":65,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-en"}],[{"s":8,"e":11,"c":"pl-k"},{"s":50,"e":51,"c":"pl-c1"}],[{"s":8,"e":14,"c":"pl-en"},{"s":23,"e":24,"c":"pl-k"},{"s":32,"e":34,"c":"pl-k"}],[{"s":12,"e":16,"c":"pl-en"},{"s":17,"e":22,"c":"pl-s"},{"s":17,"e":18,"c":"pl-pds"},{"s":21,"e":22,"c":"pl-pds"}],[],[{"s":8,"e":23,"c":"pl-en"}],[{"s":24,"e":25,"c":"pl-k"}],[{"s":18,"e":19,"c":"pl-k"},{"s":20,"e":38,"c":"pl-s"},{"s":20,"e":21,"c":"pl-pds"},{"s":37,"e":38,"c":"pl-pds"}],[{"s":24,"e":26,"c":"pl-k"}],[{"s":12,"e":59,"c":"pl-c"},{"s":12,"e":14,"c":"pl-c"}],[{"s":12,"e":16,"c":"pl-en"},{"s":22,"e":23,"c":"pl-k"},{"s":24,"e":45,"c":"pl-s"},{"s":24,"e":25,"c":"pl-pds"},{"s":32,"e":44,"c":"pl-e"},{"s":44,"e":45,"c":"pl-pds"}],[],[],[{"s":4,"e":63,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":41,"c":"pl-en"},{"s":42,"e":47,"c":"pl-smi"},{"s":47,"e":48,"c":"pl-k"},{"s":49,"e":52,"c":"pl-c1"}],[{"s":4,"e":74,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":19,"c":"pl-en"}],[{"s":20,"e":21,"c":"pl-k"}],[{"s":23,"e":24,"c":"pl-k"}],[{"s":12,"e":68,"c":"pl-c"},{"s":12,"e":14,"c":"pl-c"}],[{"s":12,"e":14,"c":"pl-k"},{"s":28,"e":29,"c":"pl-k"}],[{"s":16,"e":76,"c":"pl-c"},{"s":16,"e":18,"c":"pl-c"}],[{"s":16,"e":78,"c":"pl-c"},{"s":16,"e":18,"c":"pl-c"}],[{"s":43,"e":45,"c":"pl-k"},{"s":55,"e":56,"c":"pl-k"}],[{"s":48,"e":50,"c":"pl-k"},{"s":51,"e":52,"c":"pl-k"},{"s":61,"e":62,"c":"pl-k"}],[{"s":14,"e":18,"c":"pl-k"}],[{"s":16,"e":79,"c":"pl-c"},{"s":16,"e":18,"c":"pl-c"}],[{"s":16,"e":70,"c":"pl-c"},{"s":16,"e":18,"c":"pl-c"}],[{"s":43,"e":45,"c":"pl-k"},{"s":46,"e":47,"c":"pl-k"},{"s":56,"e":57,"c":"pl-k"}],[{"s":48,"e":50,"c":"pl-k"},{"s":60,"e":61,"c":"pl-k"}],[],[{"s":16,"e":71,"c":"pl-c"},{"s":16,"e":18,"c":"pl-c"}],[{"s":16,"e":46,"c":"pl-c"},{"s":16,"e":18,"c":"pl-c"}],[{"s":16,"e":29,"c":"pl-en"},{"s":35,"e":36,"c":"pl-k"},{"s":37,"e":42,"c":"pl-c1"}],[],[{"s":17,"e":18,"c":"pl-k"},{"s":19,"e":37,"c":"pl-s"},{"s":19,"e":20,"c":"pl-pds"},{"s":36,"e":37,"c":"pl-pds"}],[{"s":20,"e":22,"c":"pl-k"}],[{"s":8,"e":12,"c":"pl-en"},{"s":18,"e":19,"c":"pl-k"},{"s":20,"e":34,"c":"pl-s"},{"s":20,"e":21,"c":"pl-pds"},{"s":21,"e":33,"c":"pl-e"},{"s":33,"e":34,"c":"pl-pds"}],[],[{"s":4,"e":72,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":40,"c":"pl-en"}],[{"s":4,"e":73,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":46,"e":51,"c":"pl-c1"}],[{"s":4,"e":11,"c":"pl-en"}],[{"s":14,"e":15,"c":"pl-k"},{"s":16,"e":29,"c":"pl-en"}],[{"s":16,"e":17,"c":"pl-k"},{"s":29,"e":30,"c":"pl-k"},{"s":31,"e":32,"c":"pl-k"}],[],[{"s":8,"e":23,"c":"pl-en"}],[{"s":24,"e":25,"c":"pl-k"}],[{"s":27,"e":28,"c":"pl-k"}],[{"s":37,"e":38,"c":"pl-k"},{"s":45,"e":48,"c":"pl-c1"},{"s":50,"e":53,"c":"pl-c1"}],[{"s":42,"e":43,"c":"pl-k"},{"s":50,"e":53,"c":"pl-c1"}],[{"s":20,"e":33,"c":"pl-en"},{"s":60,"e":62,"c":"pl-k"}],[{"s":24,"e":26,"c":"pl-k"}],[],[{"s":32,"e":61,"c":"pl-c"},{"s":32,"e":34,"c":"pl-c"}],[{"s":32,"e":39,"c":"pl-en"},{"s":81,"e":84,"c":"pl-c1"}],[{"s":47,"e":48,"c":"pl-k"},{"s":49,"e":52,"c":"pl-c1"}],[],[{"s":26,"e":30,"c":"pl-k"}],[],[{"s":32,"e":59,"c":"pl-c"},{"s":32,"e":34,"c":"pl-c"}],[{"s":32,"e":39,"c":"pl-en"},{"s":81,"e":84,"c":"pl-c1"}],[{"s":47,"e":48,"c":"pl-k"},{"s":49,"e":52,"c":"pl-c1"}],[],[],[],[{"s":21,"e":22,"c":"pl-k"},{"s":23,"e":39,"c":"pl-s"},{"s":23,"e":24,"c":"pl-pds"},{"s":38,"e":39,"c":"pl-pds"}],[{"s":27,"e":29,"c":"pl-k"}],[{"s":12,"e":14,"c":"pl-k"}],[{"s":16,"e":24,"c":"pl-en"}],[{"s":14,"e":18,"c":"pl-k"}],[{"s":16,"e":27,"c":"pl-en"}],[],[],[],[{"s":4,"e":71,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":36,"c":"pl-en"}],[{"s":4,"e":79,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":45,"e":52,"c":"pl-s"},{"s":45,"e":46,"c":"pl-pds"},{"s":51,"e":52,"c":"pl-pds"}],[{"s":4,"e":7,"c":"pl-en"}],[{"s":17,"e":18,"c":"pl-k"},{"s":19,"e":27,"c":"pl-en"}],[{"s":24,"e":29,"c":"pl-en"},{"s":30,"e":34,"c":"pl-en"}],[],[{"s":8,"e":12,"c":"pl-en"},{"s":18,"e":19,"c":"pl-k"}],[{"s":4,"e":77,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":27,"c":"pl-en"}],[{"s":4,"e":58,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":49,"e":52,"c":"pl-s"},{"s":49,"e":50,"c":"pl-pds"},{"s":51,"e":52,"c":"pl-pds"}],[{"s":4,"e":13,"c":"pl-en"},{"s":26,"e":27,"c":"pl-k"},{"s":47,"e":48,"c":"pl-k"},{"s":49,"e":61,"c":"pl-s"},{"s":49,"e":50,"c":"pl-pds"},{"s":60,"e":61,"c":"pl-pds"},{"s":72,"e":74,"c":"pl-k"}],[{"s":8,"e":12,"c":"pl-k"}],[{"s":12,"e":15,"c":"pl-s"},{"s":12,"e":13,"c":"pl-pds"},{"s":14,"e":15,"c":"pl-pds"},{"s":16,"e":18,"c":"pl-k"},{"s":19,"e":23,"c":"pl-en"},{"s":24,"e":32,"c":"pl-s"},{"s":24,"e":25,"c":"pl-pds"},{"s":31,"e":32,"c":"pl-pds"}],[{"s":12,"e":15,"c":"pl-s"},{"s":12,"e":13,"c":"pl-pds"},{"s":14,"e":15,"c":"pl-pds"},{"s":16,"e":18,"c":"pl-k"},{"s":19,"e":23,"c":"pl-en"},{"s":24,"e":32,"c":"pl-s"},{"s":24,"e":25,"c":"pl-pds"},{"s":31,"e":32,"c":"pl-pds"}],[],[],[{"s":4,"e":56,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":14,"c":"pl-k"}],[{"s":4,"e":63,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":8,"c":"pl-k"},{"s":9,"e":14,"c":"pl-k"},{"s":15,"e":23,"c":"pl-en"}],[{"s":8,"e":17,"c":"pl-en"}],[{"s":8,"e":16,"c":"pl-en"}],[],[{"s":4,"e":61,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[{"s":4,"e":11,"c":"pl-k"},{"s":12,"e":15,"c":"pl-k"},{"s":16,"e":40,"c":"pl-en"}],[{"s":8,"e":66,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":11,"c":"pl-k"},{"s":54,"e":62,"c":"pl-en"},{"s":63,"e":72,"c":"pl-en"}],[{"s":8,"e":11,"c":"pl-k"},{"s":23,"e":24,"c":"pl-k"},{"s":62,"e":63,"c":"pl-k"},{"s":64,"e":75,"c":"pl-s"},{"s":64,"e":65,"c":"pl-pds"},{"s":74,"e":75,"c":"pl-pds"}],[{"s":8,"e":64,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[],[],[],[{"s":4,"e":11,"c":"pl-k"},{"s":12,"e":15,"c":"pl-k"},{"s":16,"e":47,"c":"pl-en"},{"s":48,"e":58,"c":"pl-smi"},{"s":58,"e":59,"c":"pl-k"},{"s":60,"e":70,"c":"pl-en"},{"s":71,"e":79,"c":"pl-en"}],[{"s":8,"e":64,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":11,"c":"pl-k"},{"s":49,"e":50,"c":"pl-k"},{"s":51,"e":62,"c":"pl-s"},{"s":51,"e":52,"c":"pl-pds"},{"s":61,"e":62,"c":"pl-pds"},{"s":72,"e":74,"c":"pl-k"}],[{"s":12,"e":16,"c":"pl-k"}],[{"s":16,"e":24,"c":"pl-en"},{"s":25,"e":34,"c":"pl-en"},{"s":35,"e":37,"c":"pl-k"},{"s":38,"e":42,"c":"pl-en"},{"s":43,"e":45,"c":"pl-c1"},{"s":47,"e":49,"c":"pl-c1"},{"s":51,"e":55,"c":"pl-c1"},{"s":57,"e":61,"c":"pl-c1"}],[{"s":16,"e":24,"c":"pl-en"},{"s":25,"e":33,"c":"pl-en"},{"s":34,"e":36,"c":"pl-k"},{"s":37,"e":41,"c":"pl-en"},{"s":42,"e":46,"c":"pl-c1"},{"s":48,"e":52,"c":"pl-c1"},{"s":54,"e":58,"c":"pl-c1"},{"s":60,"e":64,"c":"pl-c1"}],[],[],[{"s":8,"e":11,"c":"pl-k"},{"s":54,"e":55,"c":"pl-k"},{"s":56,"e":70,"c":"pl-s"},{"s":56,"e":57,"c":"pl-pds"},{"s":69,"e":70,"c":"pl-pds"},{"s":80,"e":82,"c":"pl-k"}],[{"s":12,"e":16,"c":"pl-k"}],[{"s":16,"e":24,"c":"pl-en"},{"s":25,"e":34,"c":"pl-en"},{"s":35,"e":37,"c":"pl-k"},{"s":38,"e":39,"c":"pl-c1"}],[{"s":16,"e":24,"c":"pl-en"},{"s":25,"e":33,"c":"pl-en"},{"s":34,"e":36,"c":"pl-k"},{"s":37,"e":38,"c":"pl-c1"}],[],[],[{"s":8,"e":62,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[],[],[],[{"s":4,"e":11,"c":"pl-k"},{"s":12,"e":15,"c":"pl-k"},{"s":16,"e":46,"c":"pl-en"},{"s":47,"e":57,"c":"pl-smi"},{"s":57,"e":58,"c":"pl-k"},{"s":59,"e":69,"c":"pl-en"},{"s":70,"e":78,"c":"pl-en"}],[{"s":8,"e":62,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":11,"c":"pl-k"}],[{"s":27,"e":28,"c":"pl-k"}],[{"s":16,"e":20,"c":"pl-k"}],[{"s":20,"e":28,"c":"pl-en"},{"s":29,"e":37,"c":"pl-en"},{"s":56,"e":64,"c":"pl-en"},{"s":65,"e":74,"c":"pl-en"},{"s":75,"e":77,"c":"pl-k"}],[{"s":41,"e":42,"c":"pl-k"},{"s":43,"e":46,"c":"pl-c1"}],[],[{"s":20,"e":24,"c":"pl-k"},{"s":25,"e":27,"c":"pl-k"}],[{"s":45,"e":46,"c":"pl-k"},{"s":47,"e":50,"c":"pl-c1"}],[],[{"s":21,"e":22,"c":"pl-k"},{"s":23,"e":30,"c":"pl-s"},{"s":23,"e":24,"c":"pl-pds"},{"s":29,"e":30,"c":"pl-pds"}],[{"s":18,"e":20,"c":"pl-k"}],[{"s":12,"e":16,"c":"pl-k"}],[{"s":16,"e":24,"c":"pl-en"},{"s":25,"e":34,"c":"pl-en"},{"s":35,"e":37,"c":"pl-k"},{"s":38,"e":51,"c":"pl-en"}],[{"s":16,"e":24,"c":"pl-en"},{"s":25,"e":33,"c":"pl-en"},{"s":34,"e":36,"c":"pl-k"},{"s":37,"e":50,"c":"pl-en"}],[],[],[{"s":8,"e":60,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[],[],[],[{"s":4,"e":11,"c":"pl-k"},{"s":12,"e":15,"c":"pl-k"},{"s":16,"e":54,"c":"pl-en"}],[{"s":8,"e":63,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":71,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":11,"c":"pl-k"},{"s":25,"e":26,"c":"pl-k"},{"s":38,"e":60,"c":"pl-en"},{"s":61,"e":69,"c":"pl-en"},{"s":70,"e":79,"c":"pl-en"}],[{"s":33,"e":34,"c":"pl-k"},{"s":35,"e":43,"c":"pl-en"},{"s":44,"e":52,"c":"pl-en"}],[{"s":8,"e":11,"c":"pl-k"},{"s":23,"e":24,"c":"pl-k"},{"s":64,"e":65,"c":"pl-k"},{"s":66,"e":77,"c":"pl-s"},{"s":66,"e":67,"c":"pl-pds"},{"s":76,"e":77,"c":"pl-pds"}],[{"s":8,"e":13,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":61,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[],[],[],[{"s":7,"e":32,"c":"pl-en"},{"s":34,"e":39,"c":"pl-c1"}],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":14,"c":"pl-k"}],[],[{"s":4,"e":68,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":8,"c":"pl-k"},{"s":9,"e":14,"c":"pl-k"},{"s":15,"e":26,"c":"pl-en"},{"s":29,"e":44,"c":"pl-en"},{"s":46,"e":55,"c":"pl-en"}],[],[],[{"s":4,"e":7,"c":"pl-k"},{"s":8,"e":20,"c":"pl-en"},{"s":21,"e":40,"c":"pl-smi"},{"s":40,"e":41,"c":"pl-k"},{"s":42,"e":52,"c":"pl-en"},{"s":53,"e":60,"c":"pl-en"}],[{"s":8,"e":72,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":70,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":70,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[],[],[],[{"s":4,"e":7,"c":"pl-k"},{"s":8,"e":17,"c":"pl-en"},{"s":18,"e":37,"c":"pl-smi"},{"s":37,"e":38,"c":"pl-k"},{"s":39,"e":49,"c":"pl-en"},{"s":50,"e":57,"c":"pl-en"}],[{"s":8,"e":72,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":70,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":70,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[],[],[],[{"s":4,"e":7,"c":"pl-k"},{"s":8,"e":14,"c":"pl-en"},{"s":15,"e":26,"c":"pl-smi"},{"s":26,"e":27,"c":"pl-k"},{"s":28,"e":39,"c":"pl-en"}],[{"s":8,"e":11,"c":"pl-k"},{"s":23,"e":24,"c":"pl-k"},{"s":61,"e":62,"c":"pl-k"},{"s":63,"e":77,"c":"pl-s"},{"s":63,"e":64,"c":"pl-pds"},{"s":76,"e":77,"c":"pl-pds"}],[{"s":8,"e":11,"c":"pl-en"}],[{"s":12,"e":79,"c":"pl-c"},{"s":12,"e":14,"c":"pl-c"}],[{"s":12,"e":77,"c":"pl-c"},{"s":12,"e":14,"c":"pl-c"}],[{"s":12,"e":26,"c":"pl-c"},{"s":12,"e":14,"c":"pl-c"}],[{"s":12,"e":21,"c":"pl-en"}],[],[{"s":23,"e":25,"c":"pl-k"},{"s":26,"e":37,"c":"pl-en"},{"s":38,"e":47,"c":"pl-en"}],[],[],[{"s":12,"e":24,"c":"pl-en"}],[],[{"s":23,"e":25,"c":"pl-k"},{"s":26,"e":37,"c":"pl-en"},{"s":38,"e":53,"c":"pl-en"}],[],[],[],[],[{"s":4,"e":66,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":46,"c":"pl-en"}],[{"s":4,"e":73,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":46,"e":51,"c":"pl-c1"}],[{"s":4,"e":51,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":19,"e":20,"c":"pl-k"},{"s":54,"e":55,"c":"pl-k"},{"s":56,"e":72,"c":"pl-s"},{"s":56,"e":57,"c":"pl-pds"},{"s":71,"e":72,"c":"pl-pds"}],[{"s":4,"e":7,"c":"pl-k"},{"s":53,"e":54,"c":"pl-k"},{"s":55,"e":69,"c":"pl-s"},{"s":55,"e":56,"c":"pl-pds"},{"s":68,"e":69,"c":"pl-pds"},{"s":84,"e":86,"c":"pl-k"}],[{"s":8,"e":10,"c":"pl-k"},{"s":24,"e":29,"c":"pl-en"},{"s":30,"e":37,"c":"pl-en"},{"s":38,"e":42,"c":"pl-k"},{"s":43,"e":48,"c":"pl-en"},{"s":49,"e":54,"c":"pl-en"}],[],[{"s":4,"e":7,"c":"pl-k"},{"s":48,"e":49,"c":"pl-k"},{"s":50,"e":61,"c":"pl-s"},{"s":50,"e":51,"c":"pl-pds"},{"s":60,"e":61,"c":"pl-pds"},{"s":76,"e":78,"c":"pl-k"}],[{"s":8,"e":10,"c":"pl-k"},{"s":24,"e":26,"c":"pl-c1"},{"s":30,"e":34,"c":"pl-k"},{"s":35,"e":36,"c":"pl-c1"}],[],[{"s":4,"e":11,"c":"pl-en"}],[{"s":16,"e":17,"c":"pl-k"},{"s":29,"e":30,"c":"pl-k"},{"s":31,"e":32,"c":"pl-k"}],[{"s":14,"e":15,"c":"pl-k"},{"s":16,"e":34,"c":"pl-en"},{"s":35,"e":36,"c":"pl-c1"}],[{"s":15,"e":16,"c":"pl-k"},{"s":17,"e":29,"c":"pl-en"},{"s":30,"e":31,"c":"pl-c1"}],[{"s":24,"e":25,"c":"pl-k"}],[],[{"s":8,"e":14,"c":"pl-en"}],[{"s":21,"e":22,"c":"pl-k"},{"s":23,"e":31,"c":"pl-en"}],[],[{"s":25,"e":27,"c":"pl-c1"}],[],[{"s":12,"e":16,"c":"pl-en"},{"s":22,"e":23,"c":"pl-k"},{"s":24,"e":39,"c":"pl-s"},{"s":24,"e":25,"c":"pl-pds"},{"s":38,"e":39,"c":"pl-pds"}],[{"s":12,"e":62,"c":"pl-c"},{"s":12,"e":14,"c":"pl-c"}],[{"s":23,"e":41,"c":"pl-en"}],[{"s":24,"e":25,"c":"pl-k"},{"s":43,"e":45,"c":"pl-k"}],[{"s":22,"e":23,"c":"pl-k"}],[{"s":21,"e":22,"c":"pl-k"}],[],[{"s":16,"e":20,"c":"pl-en"},{"s":26,"e":27,"c":"pl-k"},{"s":28,"e":47,"c":"pl-s"},{"s":28,"e":29,"c":"pl-pds"},{"s":46,"e":47,"c":"pl-pds"}],[],[{"s":12,"e":59,"c":"pl-c"},{"s":12,"e":14,"c":"pl-c"}],[{"s":23,"e":38,"c":"pl-en"},{"s":53,"e":55,"c":"pl-k"}],[{"s":16,"e":18,"c":"pl-k"}],[{"s":20,"e":24,"c":"pl-en"},{"s":30,"e":31,"c":"pl-k"},{"s":32,"e":42,"c":"pl-s"},{"s":32,"e":33,"c":"pl-pds"},{"s":41,"e":42,"c":"pl-pds"}],[{"s":18,"e":22,"c":"pl-k"}],[{"s":20,"e":24,"c":"pl-en"},{"s":37,"e":38,"c":"pl-k"},{"s":39,"e":44,"c":"pl-en"},{"s":45,"e":52,"c":"pl-en"},{"s":53,"e":58,"c":"pl-en"},{"s":79,"e":80,"c":"pl-k"},{"s":81,"e":88,"c":"pl-s"},{"s":81,"e":82,"c":"pl-pds"},{"s":87,"e":88,"c":"pl-pds"}],[],[],[],[],[{"s":4,"e":71,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":14,"c":"pl-k"}],[{"s":4,"e":67,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":8,"c":"pl-k"},{"s":9,"e":14,"c":"pl-k"},{"s":15,"e":23,"c":"pl-en"},{"s":26,"e":35,"c":"pl-en"},{"s":37,"e":45,"c":"pl-en"}],[],[],[{"s":4,"e":7,"c":"pl-k"},{"s":8,"e":20,"c":"pl-en"},{"s":21,"e":29,"c":"pl-smi"},{"s":29,"e":30,"c":"pl-k"},{"s":31,"e":39,"c":"pl-en"}],[{"s":8,"e":11,"c":"pl-k"},{"s":27,"e":28,"c":"pl-k"}],[{"s":8,"e":18,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":11,"c":"pl-en"}],[{"s":21,"e":22,"c":"pl-k"},{"s":23,"e":31,"c":"pl-en"}],[],[],[],[],[],[{"s":4,"e":34,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":11,"c":"pl-k"},{"s":12,"e":17,"c":"pl-k"},{"s":18,"e":32,"c":"pl-en"}],[{"s":8,"e":13,"c":"pl-smi"},{"s":13,"e":14,"c":"pl-k"},{"s":15,"e":20,"c":"pl-en"},{"s":21,"e":26,"c":"pl-en"}],[{"s":8,"e":12,"c":"pl-smi"},{"s":12,"e":13,"c":"pl-k"},{"s":14,"e":19,"c":"pl-en"},{"s":20,"e":22,"c":"pl-en"}],[],[{"s":8,"e":11,"c":"pl-k"}],[{"s":8,"e":11,"c":"pl-k"}],[],[],[{"s":4,"e":59,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[{"s":4,"e":11,"c":"pl-k"},{"s":12,"e":15,"c":"pl-k"},{"s":16,"e":36,"c":"pl-en"},{"s":37,"e":45,"c":"pl-smi"},{"s":45,"e":46,"c":"pl-k"},{"s":47,"e":55,"c":"pl-en"},{"s":58,"e":72,"c":"pl-en"}],[{"s":8,"e":11,"c":"pl-k"},{"s":23,"e":24,"c":"pl-k"},{"s":58,"e":59,"c":"pl-k"},{"s":60,"e":71,"c":"pl-s"},{"s":60,"e":61,"c":"pl-pds"},{"s":70,"e":71,"c":"pl-pds"}],[{"s":8,"e":11,"c":"pl-k"},{"s":18,"e":19,"c":"pl-k"},{"s":50,"e":51,"c":"pl-k"},{"s":52,"e":59,"c":"pl-s"},{"s":52,"e":53,"c":"pl-pds"},{"s":58,"e":59,"c":"pl-pds"},{"s":69,"e":71,"c":"pl-k"}],[{"s":12,"e":16,"c":"pl-k"}],[{"s":16,"e":24,"c":"pl-en"},{"s":25,"e":34,"c":"pl-en"},{"s":35,"e":37,"c":"pl-k"},{"s":38,"e":43,"c":"pl-en"},{"s":44,"e":48,"c":"pl-en"}],[{"s":16,"e":24,"c":"pl-en"},{"s":25,"e":33,"c":"pl-en"},{"s":34,"e":36,"c":"pl-k"},{"s":37,"e":42,"c":"pl-en"},{"s":43,"e":46,"c":"pl-en"}],[],[],[{"s":8,"e":11,"c":"pl-k"},{"s":17,"e":18,"c":"pl-k"},{"s":46,"e":47,"c":"pl-k"},{"s":48,"e":54,"c":"pl-s"},{"s":48,"e":49,"c":"pl-pds"},{"s":53,"e":54,"c":"pl-pds"},{"s":64,"e":66,"c":"pl-k"}],[{"s":12,"e":16,"c":"pl-k"}],[{"s":16,"e":24,"c":"pl-en"},{"s":25,"e":34,"c":"pl-en"},{"s":35,"e":37,"c":"pl-k"},{"s":38,"e":40,"c":"pl-c1"}],[{"s":16,"e":24,"c":"pl-en"},{"s":25,"e":33,"c":"pl-en"},{"s":34,"e":36,"c":"pl-k"},{"s":37,"e":40,"c":"pl-c1"}],[],[],[{"s":8,"e":14,"c":"pl-k"},{"s":38,"e":52,"c":"pl-en"}],[],[{"s":4,"e":65,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":44,"c":"pl-en"}],[{"s":4,"e":68,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":27,"e":28,"c":"pl-k"},{"s":62,"e":63,"c":"pl-k"},{"s":64,"e":74,"c":"pl-s"},{"s":64,"e":65,"c":"pl-pds"},{"s":73,"e":74,"c":"pl-pds"}],[{"s":4,"e":7,"c":"pl-k"}],[{"s":21,"e":22,"c":"pl-k"},{"s":23,"e":28,"c":"pl-en"},{"s":29,"e":32,"c":"pl-en"}],[{"s":20,"e":21,"c":"pl-k"},{"s":22,"e":27,"c":"pl-en"},{"s":28,"e":33,"c":"pl-en"}],[{"s":22,"e":23,"c":"pl-k"}],[{"s":22,"e":23,"c":"pl-k"},{"s":30,"e":34,"c":"pl-c1"},{"s":43,"e":44,"c":"pl-k"},{"s":45,"e":57,"c":"pl-en"}],[{"s":23,"e":24,"c":"pl-k"},{"s":25,"e":35,"c":"pl-en"},{"s":36,"e":43,"c":"pl-en"}],[],[{"s":14,"e":15,"c":"pl-k"},{"s":16,"e":23,"c":"pl-s"},{"s":16,"e":17,"c":"pl-pds"},{"s":22,"e":23,"c":"pl-pds"}],[],[],[{"s":4,"e":7,"c":"pl-en"}],[{"s":8,"e":16,"c":"pl-en"}],[],[],[],[{"s":4,"e":66,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":28,"c":"pl-en"},{"s":29,"e":31,"c":"pl-smi"},{"s":31,"e":32,"c":"pl-k"},{"s":33,"e":40,"c":"pl-c1"}],[{"s":4,"e":59,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":60,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":14,"e":15,"c":"pl-k"},{"s":27,"e":37,"c":"pl-en"},{"s":38,"e":43,"c":"pl-en"},{"s":44,"e":48,"c":"pl-en"}],[{"s":4,"e":18,"c":"pl-en"}],[{"s":24,"e":26,"c":"pl-k"},{"s":32,"e":37,"c":"pl-en"},{"s":38,"e":43,"c":"pl-en"},{"s":44,"e":48,"c":"pl-k"},{"s":49,"e":54,"c":"pl-en"},{"s":55,"e":58,"c":"pl-en"}],[],[{"s":4,"e":7,"c":"pl-en"}],[{"s":8,"e":16,"c":"pl-en"}],[],[],[],[{"s":4,"e":57,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":38,"c":"pl-en"},{"s":39,"e":58,"c":"pl-smi"},{"s":58,"e":59,"c":"pl-k"},{"s":63,"e":65,"c":"pl-k"},{"s":66,"e":73,"c":"pl-c1"}],[{"s":4,"e":71,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":13,"e":14,"c":"pl-k"}],[{"s":8,"e":28,"c":"pl-en"}],[{"s":26,"e":27,"c":"pl-k"},{"s":34,"e":37,"c":"pl-c1"}],[{"s":26,"e":27,"c":"pl-k"},{"s":28,"e":33,"c":"pl-c1"},{"s":34,"e":49,"c":"pl-en"}],[{"s":25,"e":26,"c":"pl-k"},{"s":27,"e":31,"c":"pl-c1"}],[{"s":24,"e":25,"c":"pl-k"},{"s":26,"e":31,"c":"pl-c1"}],[],[],[{"s":4,"e":7,"c":"pl-k"},{"s":50,"e":52,"c":"pl-c1"}],[],[{"s":4,"e":18,"c":"pl-en"}],[{"s":8,"e":11,"c":"pl-k"},{"s":22,"e":23,"c":"pl-k"}],[],[{"s":8,"e":10,"c":"pl-k"}],[{"s":21,"e":22,"c":"pl-k"},{"s":45,"e":46,"c":"pl-k"}],[{"s":12,"e":15,"c":"pl-k"},{"s":31,"e":32,"c":"pl-k"}],[{"s":10,"e":15,"c":"pl-k"}],[],[{"s":4,"e":69,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":30,"c":"pl-en"},{"s":31,"e":38,"c":"pl-smi"},{"s":38,"e":39,"c":"pl-k"},{"s":40,"e":47,"c":"pl-c1"}],[{"s":4,"e":52,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":13,"e":14,"c":"pl-k"},{"s":15,"e":20,"c":"pl-c1"}],[{"s":20,"e":21,"c":"pl-k"},{"s":22,"e":24,"c":"pl-k"},{"s":35,"e":37,"c":"pl-c1"},{"s":38,"e":42,"c":"pl-k"},{"s":43,"e":47,"c":"pl-c1"}],[{"s":8,"e":55,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":22,"e":23,"c":"pl-k"},{"s":45,"e":46,"c":"pl-k"},{"s":47,"e":50,"c":"pl-c1"},{"s":59,"e":60,"c":"pl-k"},{"s":61,"e":80,"c":"pl-en"}],[{"s":14,"e":15,"c":"pl-k"},{"s":16,"e":23,"c":"pl-s"},{"s":16,"e":17,"c":"pl-pds"},{"s":22,"e":23,"c":"pl-pds"}],[],[{"s":4,"e":50,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":31,"c":"pl-en"}],[{"s":4,"e":53,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"}],[{"s":20,"e":21,"c":"pl-k"},{"s":22,"e":24,"c":"pl-c1"}],[{"s":22,"e":23,"c":"pl-k"}],[{"s":25,"e":26,"c":"pl-k"},{"s":27,"e":33,"c":"pl-en"},{"s":34,"e":56,"c":"pl-en"}],[{"s":22,"e":23,"c":"pl-k"},{"s":24,"e":30,"c":"pl-en"},{"s":31,"e":46,"c":"pl-en"}],[],[{"s":14,"e":15,"c":"pl-k"},{"s":16,"e":29,"c":"pl-s"},{"s":16,"e":17,"c":"pl-pds"},{"s":28,"e":29,"c":"pl-pds"}],[],[{"s":4,"e":51,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":30,"c":"pl-en"}],[{"s":4,"e":58,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"}],[{"s":20,"e":21,"c":"pl-k"},{"s":22,"e":24,"c":"pl-c1"}],[{"s":22,"e":23,"c":"pl-k"}],[{"s":27,"e":28,"c":"pl-k"},{"s":29,"e":32,"c":"pl-c1"}],[{"s":24,"e":25,"c":"pl-k"},{"s":26,"e":28,"c":"pl-c1"}],[{"s":19,"e":20,"c":"pl-k"},{"s":21,"e":42,"c":"pl-en"}],[],[{"s":14,"e":15,"c":"pl-k"},{"s":16,"e":29,"c":"pl-s"},{"s":16,"e":17,"c":"pl-pds"},{"s":28,"e":29,"c":"pl-pds"}],[],[{"s":4,"e":56,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":33,"c":"pl-en"}],[{"s":4,"e":55,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"}],[{"s":20,"e":21,"c":"pl-k"},{"s":22,"e":24,"c":"pl-c1"}],[{"s":22,"e":23,"c":"pl-k"}],[{"s":27,"e":28,"c":"pl-k"},{"s":29,"e":32,"c":"pl-c1"}],[{"s":12,"e":16,"c":"pl-c1"},{"s":20,"e":21,"c":"pl-c1"},{"s":28,"e":49,"c":"pl-en"},{"s":50,"e":64,"c":"pl-c"},{"s":50,"e":52,"c":"pl-c"}],[{"s":12,"e":16,"c":"pl-c1"},{"s":20,"e":22,"c":"pl-c1"},{"s":29,"e":50,"c":"pl-en"},{"s":51,"e":66,"c":"pl-c"},{"s":51,"e":53,"c":"pl-c"}],[{"s":12,"e":16,"c":"pl-c1"},{"s":20,"e":22,"c":"pl-c1"},{"s":23,"e":28,"c":"pl-c"},{"s":23,"e":25,"c":"pl-c"}],[{"s":12,"e":16,"c":"pl-c1"},{"s":20,"e":23,"c":"pl-c1"},{"s":24,"e":29,"c":"pl-c"},{"s":24,"e":26,"c":"pl-c"}],[],[{"s":14,"e":15,"c":"pl-k"},{"s":16,"e":26,"c":"pl-s"},{"s":16,"e":17,"c":"pl-pds"},{"s":25,"e":26,"c":"pl-pds"}],[],[{"s":4,"e":53,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":35,"c":"pl-en"}],[{"s":4,"e":57,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"}],[{"s":20,"e":21,"c":"pl-k"},{"s":22,"e":24,"c":"pl-c1"}],[{"s":22,"e":23,"c":"pl-k"}],[{"s":23,"e":24,"c":"pl-k"},{"s":25,"e":26,"c":"pl-c1"}],[{"s":22,"e":23,"c":"pl-k"},{"s":45,"e":46,"c":"pl-k"},{"s":47,"e":50,"c":"pl-c1"}],[{"s":23,"e":24,"c":"pl-k"},{"s":25,"e":35,"c":"pl-en"},{"s":36,"e":43,"c":"pl-en"}],[],[{"s":14,"e":15,"c":"pl-k"},{"s":16,"e":33,"c":"pl-s"},{"s":16,"e":17,"c":"pl-pds"},{"s":32,"e":33,"c":"pl-pds"}],[],[{"s":4,"e":55,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":43,"c":"pl-en"}],[{"s":4,"e":66,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"}],[{"s":20,"e":21,"c":"pl-k"},{"s":22,"e":24,"c":"pl-c1"}],[{"s":22,"e":23,"c":"pl-k"}],[{"s":22,"e":23,"c":"pl-k"},{"s":45,"e":46,"c":"pl-k"},{"s":47,"e":50,"c":"pl-c1"}],[{"s":23,"e":24,"c":"pl-k"},{"s":25,"e":35,"c":"pl-en"},{"s":36,"e":43,"c":"pl-en"}],[],[{"s":14,"e":15,"c":"pl-k"},{"s":16,"e":37,"c":"pl-s"},{"s":16,"e":17,"c":"pl-pds"},{"s":36,"e":37,"c":"pl-pds"}],[],[{"s":4,"e":64,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":29,"c":"pl-en"}],[{"s":4,"e":51,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"}],[{"s":20,"e":21,"c":"pl-k"},{"s":22,"e":24,"c":"pl-c1"}],[{"s":22,"e":23,"c":"pl-k"},{"s":41,"e":42,"c":"pl-k"},{"s":43,"e":45,"c":"pl-c1"}],[{"s":14,"e":15,"c":"pl-k"},{"s":16,"e":27,"c":"pl-s"},{"s":16,"e":17,"c":"pl-pds"},{"s":26,"e":27,"c":"pl-pds"}],[],[{"s":4,"e":49,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":14,"c":"pl-k"}],[{"s":4,"e":54,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":8,"e":20,"c":"pl-en"},{"s":21,"e":22,"c":"pl-k"},{"s":23,"e":29,"c":"pl-en"},{"s":41,"e":43,"c":"pl-k"},{"s":53,"e":54,"c":"pl-k"}],[],[],[{"s":4,"e":7,"c":"pl-k"},{"s":8,"e":19,"c":"pl-en"}],[{"s":8,"e":11,"c":"pl-k"}],[{"s":24,"e":25,"c":"pl-k"},{"s":26,"e":28,"c":"pl-c1"}],[{"s":26,"e":27,"c":"pl-k"}],[{"s":31,"e":32,"c":"pl-k"},{"s":33,"e":36,"c":"pl-c1"}],[{"s":23,"e":24,"c":"pl-k"},{"s":25,"e":37,"c":"pl-en"}],[],[{"s":18,"e":19,"c":"pl-k"},{"s":20,"e":35,"c":"pl-s"},{"s":20,"e":21,"c":"pl-pds"},{"s":34,"e":35,"c":"pl-pds"}],[],[{"s":8,"e":13,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[],[{"s":4,"e":52,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":14,"c":"pl-k"}],[{"s":4,"e":58,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":8,"e":19,"c":"pl-en"},{"s":19,"e":20,"c":"pl-k"},{"s":21,"e":36,"c":"pl-en"},{"s":37,"e":40,"c":"pl-en"},{"s":42,"e":59,"c":"pl-en"},{"s":61,"e":62,"c":"pl-k"}],[{"s":8,"e":23,"c":"pl-en"},{"s":26,"e":43,"c":"pl-en"}],[{"s":4,"e":56,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":14,"c":"pl-k"}],[{"s":4,"e":70,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":14,"c":"pl-k"},{"s":15,"e":21,"c":"pl-en"},{"s":22,"e":25,"c":"pl-k"},{"s":26,"e":31,"c":"pl-smi"},{"s":31,"e":32,"c":"pl-k"},{"s":33,"e":35,"c":"pl-en"},{"s":37,"e":40,"c":"pl-k"},{"s":41,"e":47,"c":"pl-smi"},{"s":47,"e":48,"c":"pl-k"},{"s":49,"e":51,"c":"pl-en"}],[],[],[{"s":4,"e":7,"c":"pl-k"},{"s":8,"e":19,"c":"pl-en"},{"s":20,"e":30,"c":"pl-smi"},{"s":30,"e":31,"c":"pl-k"},{"s":32,"e":38,"c":"pl-en"}],[{"s":8,"e":11,"c":"pl-k"},{"s":20,"e":21,"c":"pl-k"},{"s":22,"e":28,"c":"pl-en"}],[],[{"s":12,"e":27,"c":"pl-en"}],[{"s":32,"e":33,"c":"pl-k"},{"s":40,"e":41,"c":"pl-k"},{"s":42,"e":48,"c":"pl-en"},{"s":49,"e":51,"c":"pl-k"}],[{"s":20,"e":74,"c":"pl-c"},{"s":20,"e":22,"c":"pl-c"}],[{"s":20,"e":37,"c":"pl-en"}],[],[{"s":34,"e":35,"c":"pl-k"},{"s":44,"e":45,"c":"pl-k"},{"s":46,"e":63,"c":"pl-en"},{"s":64,"e":66,"c":"pl-k"}],[{"s":20,"e":26,"c":"pl-en"}],[],[],[{"s":18,"e":19,"c":"pl-k"},{"s":20,"e":26,"c":"pl-s"},{"s":20,"e":21,"c":"pl-pds"},{"s":25,"e":26,"c":"pl-pds"}],[],[],[{"s":4,"e":68,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[],[],[{"s":7,"e":39,"c":"pl-en"},{"s":41,"e":46,"c":"pl-c1"}],[],[{"s":0,"e":53,"c":"pl-c"},{"s":0,"e":2,"c":"pl-c"}],[],[{"s":0,"e":3,"c":"pl-k"},{"s":4,"e":26,"c":"pl-en"}],[{"s":4,"e":7,"c":"pl-k"},{"s":14,"e":15,"c":"pl-k"},{"s":16,"e":35,"c":"pl-en"},{"s":59,"e":60,"c":"pl-en"}],[{"s":4,"e":7,"c":"pl-k"},{"s":43,"e":48,"c":"pl-c1"}],[{"s":4,"e":9,"c":"pl-en"}],[{"s":16,"e":17,"c":"pl-k"}],[{"s":27,"e":28,"c":"pl-k"},{"s":29,"e":36,"c":"pl-s"},{"s":29,"e":30,"c":"pl-pds"},{"s":35,"e":36,"c":"pl-pds"}],[{"s":17,"e":18,"c":"pl-k"},{"s":19,"e":27,"c":"pl-en"}],[{"s":18,"e":19,"c":"pl-k"},{"s":20,"e":21,"c":"pl-k"}],[],[{"s":21,"e":22,"c":"pl-k"},{"s":23,"e":35,"c":"pl-en"},{"s":36,"e":40,"c":"pl-en"}],[],[],[{"s":0,"e":51,"c":"pl-c"},{"s":0,"e":2,"c":"pl-c"}],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":20,"c":"pl-en"}],[],[],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":23,"c":"pl-en"}],[],[],[{"s":0,"e":50,"c":"pl-c"},{"s":0,"e":2,"c":"pl-c"}],[],[{"s":0,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-k"},{"s":12,"e":24,"c":"pl-en"}],[{"s":4,"e":7,"c":"pl-k"},{"s":13,"e":14,"c":"pl-k"},{"s":15,"e":172,"c":"pl-s"},{"s":15,"e":16,"c":"pl-pds"},{"s":63,"e":81,"c":"pl-cce"},{"s":82,"e":88,"c":"pl-cce"},{"s":89,"e":101,"c":"pl-cce"},{"s":103,"e":121,"c":"pl-cce"},{"s":122,"e":146,"c":"pl-cce"},{"s":147,"e":171,"c":"pl-cce"},{"s":171,"e":172,"c":"pl-pds"}],[],[{"s":4,"e":92,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":75,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":93,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":33,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":22,"e":23,"c":"pl-k"},{"s":41,"e":54,"c":"pl-en"}],[],[{"s":4,"e":97,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":89,"c":"pl-c"},{"s":4,"e":6,"c":"pl-c"}],[{"s":4,"e":7,"c":"pl-k"},{"s":24,"e":25,"c":"pl-k"},{"s":26,"e":29,"c":"pl-c1"}],[],[{"s":4,"e":7,"c":"pl-k"}],[{"s":23,"e":25,"c":"pl-s"},{"s":23,"e":24,"c":"pl-pds"},{"s":24,"e":25,"c":"pl-pds"}],[],[{"s":4,"e":18,"c":"pl-en"}],[{"s":8,"e":54,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":14,"e":18,"c":"pl-c1"}],[{"s":27,"e":28,"c":"pl-k"},{"s":29,"e":52,"c":"pl-en"}],[],[{"s":8,"e":11,"c":"pl-k"},{"s":22,"e":23,"c":"pl-k"}],[{"s":8,"e":53,"c":"pl-c"},{"s":8,"e":10,"c":"pl-c"}],[{"s":8,"e":13,"c":"pl-k"},{"s":25,"e":27,"c":"pl-k"},{"s":28,"e":41,"c":"pl-en"},{"s":42,"e":46,"c":"pl-en"}],[{"s":26,"e":27,"c":"pl-k"},{"s":45,"e":46,"c":"pl-c1"}],[{"s":12,"e":56,"c":"pl-c"},{"s":12,"e":14,"c":"pl-c"}],[{"s":22,"e":23,"c":"pl-k"}],[],[],[],[{"s":4,"e":8,"c":"pl-en"}],[{"s":0,"e":48,"c":"pl-c"},{"s":0,"e":2,"c":"pl-c"}],[]],"colorizedLines":null,"csv":null,"csvError":null,"dependabotInfo":{"showConfigurationBanner":false,"configFilePath":null,"networkDependabotPath":"/android/snippets/network/updates","dismissConfigurationNoticePath":"/settings/dismiss-notice/dependabot_configuration_notice","configurationNoticeDismissed":null},"displayName":"AnimationSnippets.kt","displayUrl":"https://github.com/android/snippets/blob/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt?raw=true","headerInfo":{"blobSize":"30.3 KB","deleteTooltip":"You must be signed in to make or propose changes","editTooltip":"You must be signed in to make or propose changes","ghDesktopPath":null,"isGitLfs":false,"onBranch":false,"shortPath":"38a1eb4","siteNavLoginPath":"/login?return_to=https%3A%2F%2Fgithub.com%2Fandroid%2Fsnippets%2Fblob%2Ff595a0d317fd8aca6b33d4344bf87696cd45c481%2Fcompose%2Fsnippets%2Fsrc%2Fmain%2Fjava%2Fcom%2Fexample%2Fcompose%2Fsnippets%2Fanimations%2FAnimationSnippets.kt","isCSV":false,"isRichtext":false,"toc":null,"lineInfo":{"truncatedLoc":"861","truncatedSloc":"801"},"mode":"file"},"image":false,"isCodeownersFile":null,"isPlain":false,"isValidLegacyIssueTemplate":false,"issueTemplate":null,"discussionTemplate":null,"language":"Kotlin","languageID":189,"large":false,"planSupportInfo":{"repoIsFork":null,"repoOwnedByCurrentUser":null,"requestFullPath":"/android/snippets/blob/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt","showFreeOrgGatedFeatureMessage":null,"showPlanSupportBanner":null,"upgradeDataAttributes":null,"upgradePath":null},"publishBannersInfo":{"dismissActionNoticePath":"/settings/dismiss-notice/publish_action_from_dockerfile","releasePath":"/android/snippets/releases/new?marketplace=true","showPublishActionBanner":false},"rawBlobUrl":"https://github.com/android/snippets/raw/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt","renderImageOrRaw":false,"richText":null,"renderedFileInfo":null,"shortPath":null,"symbolsEnabled":true,"tabSize":8,"topBannersInfo":{"overridingGlobalFundingFile":false,"globalPreferredFundingPath":null,"showInvalidCitationWarning":false,"citationHelpUrl":"https://docs.github.com/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/about-citation-files","actionsOnboardingTip":null},"truncated":false,"viewable":true,"workflowRedirectUrl":null,"symbols":{"timed_out":false,"not_analyzed":true,"symbols":[]}},"copilotInfo":null,"copilotAccessAllowed":false,"csrf_tokens":{"/android/snippets/branches":{"post":"u2Xzwvq2KaqimJLSubNwXgR15J9NoxkJqCqCmYZcdC7YltLJ-KzYBBK6eNjdsFijqldIEdIaTp2JqCfX4ej2Kw"},"/repos/preferences":{"post":"SI6nua69D2mWDPChmlOnQv670pwNZoRvSfUHbw4C5FNzGD-VZSd1X_wvjvpQGm1-UV2jtfdC192yaRZjW9PdEw"}}},"title":"snippets/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt at f595a0d317fd8aca6b33d4344bf87696cd45c481 · android/snippets","appPayload":{"helpUrl":"https://docs.github.com","findFileWorkerPath":"/assets-cdn/worker/find-file-worker-1583894afd38.js","findInFileWorkerPath":"/assets-cdn/worker/find-in-file-worker-67668e8c2caa.js","githubDevUrl":null,"enabled_features":{"code_nav_ui_events":false,"overview_shared_code_dropdown_button":false,"react_blob_overlay":false,"copilot_conversational_ux_embedding_update":false,"copilot_smell_icebreaker_ux":true,"copilot_workspace":false,"blob_edit_unsaved_changes_storage":true,"accessible_code_button":true}}}</script> <div data-target="react-app.reactRoot"><style data-styled="true" data-styled-version="5.3.11">.hOfjFo{padding:0;}/*!sc*/ .oDGAe{max-width:100%;margin-left:auto;margin-right:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}/*!sc*/ .kowOcT{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 1 100%;-ms-flex:1 1 100%;flex:1 1 100%;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%;}/*!sc*/ .gISSDQ{width:100%;}/*!sc*/ @media screen and (min-width:544px){.gISSDQ{width:100%;}}/*!sc*/ @media screen and (min-width:768px){.gISSDQ{width:auto;}}/*!sc*/ .fLEPlD{display:none;-webkit-order:1;-ms-flex-order:1;order:1;width:100%;margin-left:0;margin-right:0;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-bottom:0;min-width:0;}/*!sc*/ @media screen and (min-width:544px){.fLEPlD{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}/*!sc*/ @media screen and (min-width:768px){.fLEPlD{width:auto;margin-top:0 !important;margin-bottom:0 !important;position:-webkit-sticky;position:sticky;top:0px;max-height:100vh !important;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin-right:0;height:100vh;}}/*!sc*/ @media print,screen and (max-width:1011px) and (min-width:768px){.fLEPlD{display:none;}}/*!sc*/ .hPvFuC{margin-left:0;margin-right:0;display:none;margin-top:0;}/*!sc*/ @media screen and (min-width:768px){.hPvFuC{margin-left:0 !important;margin-right:0 !important;}}/*!sc*/ .fFSoPl{--pane-min-width:256px;--pane-max-width-diff:511px;--pane-max-width:calc(100vw - var(--pane-max-width-diff));width:100%;padding:0;}/*!sc*/ @media screen and (min-width:544px){}/*!sc*/ @media screen and (min-width:768px){.fFSoPl{width:clamp(var(--pane-min-width),var(--pane-width),var(--pane-max-width));overflow:auto;}}/*!sc*/ @media screen and (min-width:1280px){.fFSoPl{--pane-max-width-diff:959px;}}/*!sc*/ .bTBnTW{height:100%;position:relative;display:none;margin-left:0;}/*!sc*/ .bHLmSv{position:absolute;inset:0 -2px;cursor:col-resize;background-color:transparent;-webkit-transition-delay:0.1s;transition-delay:0.1s;}/*!sc*/ .bHLmSv:hover{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));}/*!sc*/ .iKqMNA{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-order:2;-ms-flex-order:2;order:2;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;min-width:1px;margin-right:auto;}/*!sc*/ @media print{.iKqMNA{display:-webkit-box !important;display:-webkit-flex !important;display:-ms-flexbox !important;display:flex !important;}}/*!sc*/ .FxAyp{width:100%;max-width:100%;margin-left:auto;margin-right:auto;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:0;}/*!sc*/ .leYMvG{margin-left:auto;margin-right:auto;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-bottom:40px;max-width:100%;margin-top:0;}/*!sc*/ .KMPzq{display:inherit;}/*!sc*/ .hfKjHv{width:100%;}/*!sc*/ .gZWyZE{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:8px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}/*!sc*/ .dwYKDk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;gap:8px;}/*!sc*/ .ibcGmb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;min-width:0;}/*!sc*/ .hKaEJF{display:block;margin-right:8px;}/*!sc*/ @media screen and (min-width:1360px){.hKaEJF{display:block;}}/*!sc*/ .XosP{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:14px;}/*!sc*/ .gUkoLg{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}/*!sc*/ .hzSPyu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;pointer-events:none;}/*!sc*/ .bZBlpz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}/*!sc*/ .lhTYNA{margin-right:4px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .dbrgmi{font-size:14px;min-width:0;max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}/*!sc*/ .dHJiml{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-left:8px;padding-right:8px;min-width:0;}/*!sc*/ .cEytCf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;font-size:16px;min-width:0;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ .fzFXnm{max-width:100%;}/*!sc*/ .iMnkmv{max-width:100%;list-style:none;display:inline-block;}/*!sc*/ .ghzDag{display:inline-block;max-width:100%;}/*!sc*/ .kHuKdh{font-weight:600;}/*!sc*/ .kgiVEz{font-weight:400;}/*!sc*/ .jGhzSQ{font-weight:600;display:inline-block;max-width:100%;font-size:16px;}/*!sc*/ .faNtbn{min-height:32px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}/*!sc*/ .fmQaBv{margin-left:4px;margin-right:4px;}/*!sc*/ .dJxjrT{margin-left:16px;margin-right:16px;}/*!sc*/ .eFxKDQ{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}/*!sc*/ .dzCJzi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-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;gap:8px;min-width:273px;padding:8px;}/*!sc*/ @media screen and (min-width:544px){.dzCJzi{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}}/*!sc*/ .ldRxiI{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}/*!sc*/ .fVkfyA{width:100%;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;min-width:0;margin-right:0;}/*!sc*/ .gNAmSV{height:40px;padding-left:4px;padding-bottom:16px;}/*!sc*/ .jNEwzY{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ .bsDwxw{font-size:12px;-webkit-flex:auto;-ms-flex:auto;flex:auto;padding-right:16px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));min-width:0;}/*!sc*/ .jdLMhu{top:0px;z-index:4;background:var(--bgColor-default,var(--color-canvas-default));position:-webkit-sticky;position:sticky;}/*!sc*/ .tOISc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;position:absolute;}/*!sc*/ .hqwSEx{display:none;min-width:0;padding-top:8px;padding-bottom:8px;}/*!sc*/ .bDVoEr{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;overflow:hidden;margin-left:8px;margin-right:8px;-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;width:100%;}/*!sc*/ .kYLlPM{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*/ .gYjEmn{margin-left:4px;margin-right:8px;}/*!sc*/ .kGqOLL{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ .fHind{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;font-size:14px;min-width:0;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ .dnZoUW{font-weight:600;display:inline-block;max-width:100%;font-size:14px;}/*!sc*/ .kTvpNk{padding-left:8px;padding-top:8px;padding-bottom:8px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;background-color:var(--bgColor-muted,var(--color-canvas-subtle,#f6f8fa));border:1px solid var(--borderColor-default,var(--color-border-default));border-radius:6px 6px 0px 0px;}/*!sc*/ .iNMjfP{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;gap:8px;min-width:0;}/*!sc*/ .fefCSX{display:block;position:relative;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;margin-top:-1px;margin-bottom:-1px;--separator-color:transparent;}/*!sc*/ .fefCSX:not(:last-child){margin-right:1px;}/*!sc*/ .fefCSX:not(:last-child):after{background-color:var(--separator-color);content:"";position:absolute;right:-2px;top:8px;bottom:8px;width:1px;}/*!sc*/ .fefCSX:focus-within:has(:focus-visible){--separator-color:transparent;}/*!sc*/ .fefCSX:first-child{margin-left:-1px;}/*!sc*/ .fefCSX:last-child{margin-right:-1px;}/*!sc*/ .idgUkN{display:block;position:relative;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;margin-top:-1px;margin-bottom:-1px;--separator-color:var(--borderColor-default,var(--color-border-default,#d0d7de));}/*!sc*/ .idgUkN:not(:last-child){margin-right:1px;}/*!sc*/ .idgUkN:not(:last-child):after{background-color:var(--separator-color);content:"";position:absolute;right:-2px;top:8px;bottom:8px;width:1px;}/*!sc*/ .idgUkN:focus-within:has(:focus-visible){--separator-color:transparent;}/*!sc*/ .idgUkN:first-child{margin-left:-1px;}/*!sc*/ .idgUkN:last-child{margin-right:-1px;}/*!sc*/ .kcLCKF{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;gap:8px;margin-right:8px;}/*!sc*/ .kVWtTz{gap:8px;}/*!sc*/ .hGyMdv{border:1px solid;border-top:none;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));border-radius:0px 0px 6px 6px;min-width:273px;}/*!sc*/ .dceWRL{background-color:var(--bgColor-default,var(--color-canvas-default));border:0px;border-width:0;border-radius:0px 0px 6px 6px;padding:0;min-width:0;margin-top:46px;}/*!sc*/ .dGXHv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;padding-top:8px;padding-bottom:8px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;min-width:0;position:relative;}/*!sc*/ .bpDFns{position:relative;}/*!sc*/ .iJOeCH{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;min-width:0;}/*!sc*/ .jewUnv{tab-size:8;isolation:isolate;position:relative;overflow:auto;max-width:unset;}/*!sc*/ .cCoXib{position:fixed;top:0;right:0;height:100%;width:15px;-webkit-transition:-webkit-transform 0.3s;-webkit-transition:transform 0.3s;transition:transform 0.3s;z-index:1;}/*!sc*/ .cCoXib:hover{-webkit-transform:scaleX(1.5);-ms-transform:scaleX(1.5);transform:scaleX(1.5);}/*!sc*/ data-styled.g1[id="Box-sc-g0xbh4-0"]{content:"hOfjFo,oDGAe,kowOcT,gISSDQ,fLEPlD,hPvFuC,fFSoPl,bTBnTW,bHLmSv,iKqMNA,FxAyp,leYMvG,KMPzq,hfKjHv,gZWyZE,dwYKDk,ibcGmb,hKaEJF,XosP,gUkoLg,hzSPyu,bZBlpz,lhTYNA,dbrgmi,dHJiml,cEytCf,fzFXnm,iMnkmv,ghzDag,kHuKdh,kgiVEz,jGhzSQ,faNtbn,fmQaBv,dJxjrT,eFxKDQ,dzCJzi,ldRxiI,fVkfyA,gNAmSV,jNEwzY,bsDwxw,jdLMhu,tOISc,hqwSEx,bDVoEr,kYLlPM,gYjEmn,kGqOLL,fHind,dnZoUW,kTvpNk,iNMjfP,fefCSX,idgUkN,kcLCKF,kVWtTz,hGyMdv,dceWRL,dGXHv,bpDFns,iJOeCH,jewUnv,cCoXib,"}/*!sc*/ .eMMFM{min-width:0;}/*!sc*/ .eMMFM:where([data-size='small']){font-size:var(--text-body-size-small,0.75rem);line-height:var(--text-body-lineHeight-small,1.6666);}/*!sc*/ .eMMFM:where([data-size='medium']){font-size:var(--text-body-size-medium,0.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);}/*!sc*/ .eMMFM:where([data-size='large']){font-size:var(--text-body-size-large,1rem);line-height:var(--text-body-lineHeight-large,1.5);}/*!sc*/ .eMMFM:where([data-weight='light']){font-weight:var(--base-text-weight-light,300);}/*!sc*/ .eMMFM:where([data-weight='normal']){font-weight:var(--base-text-weight-normal,400);}/*!sc*/ .eMMFM:where([data-weight='medium']){font-weight:var(--base-text-weight-medium,500);}/*!sc*/ .eMMFM:where([data-weight='semibold']){font-weight:var(--base-text-weight-semibold,600);}/*!sc*/ .HlHVj{padding-left:4px;padding-right:4px;font-weight:400;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-size:16px;}/*!sc*/ .HlHVj:where([data-size='small']){font-size:var(--text-body-size-small,0.75rem);line-height:var(--text-body-lineHeight-small,1.6666);}/*!sc*/ .HlHVj:where([data-size='medium']){font-size:var(--text-body-size-medium,0.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);}/*!sc*/ .HlHVj:where([data-size='large']){font-size:var(--text-body-size-large,1rem);line-height:var(--text-body-lineHeight-large,1.5);}/*!sc*/ .HlHVj:where([data-weight='light']){font-weight:var(--base-text-weight-light,300);}/*!sc*/ .HlHVj:where([data-weight='normal']){font-weight:var(--base-text-weight-normal,400);}/*!sc*/ .HlHVj:where([data-weight='medium']){font-weight:var(--base-text-weight-medium,500);}/*!sc*/ .HlHVj:where([data-weight='semibold']){font-weight:var(--base-text-weight-semibold,600);}/*!sc*/ .lauzFl{padding-left:4px;padding-right:4px;font-weight:400;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-size:14px;}/*!sc*/ .lauzFl:where([data-size='small']){font-size:var(--text-body-size-small,0.75rem);line-height:var(--text-body-lineHeight-small,1.6666);}/*!sc*/ .lauzFl:where([data-size='medium']){font-size:var(--text-body-size-medium,0.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);}/*!sc*/ .lauzFl:where([data-size='large']){font-size:var(--text-body-size-large,1rem);line-height:var(--text-body-lineHeight-large,1.5);}/*!sc*/ .lauzFl:where([data-weight='light']){font-weight:var(--base-text-weight-light,300);}/*!sc*/ .lauzFl:where([data-weight='normal']){font-weight:var(--base-text-weight-normal,400);}/*!sc*/ .lauzFl:where([data-weight='medium']){font-weight:var(--base-text-weight-medium,500);}/*!sc*/ .lauzFl:where([data-weight='semibold']){font-weight:var(--base-text-weight-semibold,600);}/*!sc*/ data-styled.g3[id="Text__StyledText-sc-17v1xeu-0"]{content:"eMMFM,HlHVj,lauzFl,"}/*!sc*/ .gwqFqs{font-size:14px;line-height:20px;color:var(--fgColor-default,var(--color-fg-default,#1F2328));vertical-align:middle;background-color:var(--bgColor-default,var(--color-canvas-default,#ffffff));border:1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));border-radius:6px;outline:none;box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;min-height:32px;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:160px;}/*!sc*/ .gwqFqs input,.gwqFqs textarea{cursor:text;}/*!sc*/ .gwqFqs select{cursor:pointer;}/*!sc*/ .gwqFqs input::-webkit-input-placeholder,.gwqFqs textarea::-webkit-input-placeholder,.gwqFqs select::-webkit-input-placeholder{color:var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gwqFqs input::-moz-placeholder,.gwqFqs textarea::-moz-placeholder,.gwqFqs select::-moz-placeholder{color:var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gwqFqs input:-ms-input-placeholder,.gwqFqs textarea:-ms-input-placeholder,.gwqFqs select:-ms-input-placeholder{color:var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gwqFqs input::placeholder,.gwqFqs textarea::placeholder,.gwqFqs select::placeholder{color:var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gwqFqs:focus-within{border-color:var(--fgColor-accent,var(--color-accent-fg,#0969da));outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-1px;}/*!sc*/ .gwqFqs > textarea{padding:12px;}/*!sc*/ @media (min-width:768px){.gwqFqs{font-size:14px;}}/*!sc*/ data-styled.g9[id="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0"]{content:"gwqFqs,"}/*!sc*/ .decvaq{background-repeat:no-repeat;background-position:right 8px center;padding-left:12px;padding-right:12px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:160px;}/*!sc*/ .decvaq > :not(:last-child){margin-right:8px;}/*!sc*/ .decvaq .TextInput-icon,.decvaq .TextInput-action{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}/*!sc*/ .decvaq > input,.decvaq > select{padding-left:0;padding-right:0;}/*!sc*/ data-styled.g10[id="TextInputWrapper-sc-1mqhpbi-1"]{content:"decvaq,"}/*!sc*/ .kBQCgV{border-radius:6px;border:1px solid;border-color:transparent;font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));background-color:transparent;box-shadow:none;}/*!sc*/ .kBQCgV:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .kBQCgV:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .kBQCgV:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .kBQCgV[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .kBQCgV[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .kBQCgV:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .kBQCgV:active{-webkit-transition:none;transition:none;}/*!sc*/ .kBQCgV[data-inactive]{cursor:auto;}/*!sc*/ .kBQCgV:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));background-color:var(--button-invisible-bgColor-disabled,transparent);}/*!sc*/ .kBQCgV:disabled [data-component=ButtonCounter],.kBQCgV:disabled [data-component="leadingVisual"],.kBQCgV:disabled [data-component="trailingAction"]{color:inherit;}/*!sc*/ @media (forced-colors:active){.kBQCgV:focus{outline:solid 1px transparent;}}/*!sc*/ .kBQCgV [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .kBQCgV[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .kBQCgV[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .kBQCgV[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .kBQCgV[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .kBQCgV[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .kBQCgV[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .kBQCgV[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .kBQCgV[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .kBQCgV[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .kBQCgV[data-block="block"]{width:100%;}/*!sc*/ .kBQCgV[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .kBQCgV[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .kBQCgV[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .kBQCgV[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .kBQCgV[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .kBQCgV[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .kBQCgV[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .kBQCgV[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .kBQCgV[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .kBQCgV [data-component="leadingVisual"]{grid-area:leadingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .kBQCgV [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .kBQCgV [data-component="trailingVisual"]{grid-area:trailingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .kBQCgV [data-component="trailingAction"]{margin-right:-4px;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .kBQCgV [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .kBQCgV [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .kBQCgV [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .kBQCgV [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .kBQCgV:hover:not([disabled]){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));}/*!sc*/ .kBQCgV:active:not([disabled]){background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));}/*!sc*/ .kBQCgV[aria-expanded=true]{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ .kBQCgV[data-component="IconButton"][data-no-visuals]{color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .kBQCgV[data-no-visuals]{color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .kBQCgV:has([data-component="ButtonCounter"]){color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .kBQCgV:disabled[data-no-visuals]{color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));}/*!sc*/ .kBQCgV:disabled[data-no-visuals] [data-component=ButtonCounter]{color:inherit;}/*!sc*/ .kBQCgV[data-size="medium"]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));padding-left:8px;padding-right:8px;display:none;}/*!sc*/ @media screen and (max-width:768px){.kBQCgV[data-size="medium"]{display:block;}}/*!sc*/ .dPmZyJ{border-radius:6px;border:1px solid;border-color:transparent;font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));background-color:transparent;box-shadow:none;}/*!sc*/ .dPmZyJ:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .dPmZyJ:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .dPmZyJ:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .dPmZyJ[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .dPmZyJ[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .dPmZyJ:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .dPmZyJ:active{-webkit-transition:none;transition:none;}/*!sc*/ .dPmZyJ[data-inactive]{cursor:auto;}/*!sc*/ .dPmZyJ:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));background-color:var(--button-invisible-bgColor-disabled,transparent);}/*!sc*/ .dPmZyJ:disabled [data-component=ButtonCounter],.dPmZyJ:disabled [data-component="leadingVisual"],.dPmZyJ:disabled [data-component="trailingAction"]{color:inherit;}/*!sc*/ @media (forced-colors:active){.dPmZyJ:focus{outline:solid 1px transparent;}}/*!sc*/ .dPmZyJ [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .dPmZyJ[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .dPmZyJ[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .dPmZyJ[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .dPmZyJ[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .dPmZyJ[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .dPmZyJ[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .dPmZyJ[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .dPmZyJ[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .dPmZyJ[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .dPmZyJ[data-block="block"]{width:100%;}/*!sc*/ .dPmZyJ[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .dPmZyJ[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .dPmZyJ[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .dPmZyJ[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .dPmZyJ[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .dPmZyJ[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .dPmZyJ[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .dPmZyJ[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .dPmZyJ[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .dPmZyJ [data-component="leadingVisual"]{grid-area:leadingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .dPmZyJ [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .dPmZyJ [data-component="trailingVisual"]{grid-area:trailingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .dPmZyJ [data-component="trailingAction"]{margin-right:-4px;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .dPmZyJ [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .dPmZyJ [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .dPmZyJ [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .dPmZyJ [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .dPmZyJ:hover:not([disabled]){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));}/*!sc*/ .dPmZyJ:active:not([disabled]){background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));}/*!sc*/ .dPmZyJ[aria-expanded=true]{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ .dPmZyJ[data-component="IconButton"][data-no-visuals]{color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .dPmZyJ[data-no-visuals]{color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .dPmZyJ:has([data-component="ButtonCounter"]){color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .dPmZyJ:disabled[data-no-visuals]{color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));}/*!sc*/ .dPmZyJ:disabled[data-no-visuals] [data-component=ButtonCounter]{color:inherit;}/*!sc*/ .iQGjqs{border-radius:6px;border:1px solid;border-color:var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));}/*!sc*/ .iQGjqs:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .iQGjqs:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .iQGjqs:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .iQGjqs[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .iQGjqs[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .iQGjqs:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .iQGjqs:active{-webkit-transition:none;transition:none;}/*!sc*/ .iQGjqs[data-inactive]{cursor:auto;}/*!sc*/ .iQGjqs:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));border-color:var(--button-default-borderColor-disabled,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));background-color:var(--button-default-bgColor-disabled,var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2))));}/*!sc*/ .iQGjqs:disabled [data-component=ButtonCounter]{color:inherit;}/*!sc*/ @media (forced-colors:active){.iQGjqs:focus{outline:solid 1px transparent;}}/*!sc*/ .iQGjqs [data-component=ButtonCounter]{font-size:12px;background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08)));}/*!sc*/ .iQGjqs[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .iQGjqs[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .iQGjqs[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .iQGjqs[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .iQGjqs[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .iQGjqs[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .iQGjqs[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .iQGjqs[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .iQGjqs[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .iQGjqs[data-block="block"]{width:100%;}/*!sc*/ .iQGjqs[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .iQGjqs[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .iQGjqs[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .iQGjqs[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .iQGjqs[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .iQGjqs[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .iQGjqs[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .iQGjqs[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .iQGjqs[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .iQGjqs [data-component="leadingVisual"]{grid-area:leadingVisual;}/*!sc*/ .iQGjqs [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .iQGjqs [data-component="trailingVisual"]{grid-area:trailingVisual;}/*!sc*/ .iQGjqs [data-component="trailingAction"]{margin-right:-4px;}/*!sc*/ .iQGjqs [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .iQGjqs [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .iQGjqs [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .iQGjqs [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .iQGjqs:hover:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));border-color:var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));}/*!sc*/ .iQGjqs:active:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .iQGjqs[aria-expanded=true]{background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .iQGjqs [data-component="leadingVisual"],.iQGjqs [data-component="trailingVisual"],.iQGjqs [data-component="trailingAction"]{color:var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .iQGjqs[data-component="IconButton"][data-no-visuals]:not(:disabled){color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .iQGjqs[data-size="medium"]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ .iQGjqs[data-size="medium"] svg{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .iQGjqs[data-size="medium"] > span{width:inherit;}/*!sc*/ .iLfocZ{border-radius:6px;border:1px solid;border-color:var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));}/*!sc*/ .iLfocZ:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .iLfocZ:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .iLfocZ:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .iLfocZ[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .iLfocZ[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .iLfocZ:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .iLfocZ:active{-webkit-transition:none;transition:none;}/*!sc*/ .iLfocZ[data-inactive]{cursor:auto;}/*!sc*/ .iLfocZ:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));border-color:var(--button-default-borderColor-disabled,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));background-color:var(--button-default-bgColor-disabled,var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2))));}/*!sc*/ .iLfocZ:disabled [data-component=ButtonCounter]{color:inherit;}/*!sc*/ @media (forced-colors:active){.iLfocZ:focus{outline:solid 1px transparent;}}/*!sc*/ .iLfocZ [data-component=ButtonCounter]{font-size:12px;background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08)));}/*!sc*/ .iLfocZ[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .iLfocZ[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .iLfocZ[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .iLfocZ[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .iLfocZ[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .iLfocZ[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .iLfocZ[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .iLfocZ[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .iLfocZ[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .iLfocZ[data-block="block"]{width:100%;}/*!sc*/ .iLfocZ[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .iLfocZ[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .iLfocZ[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .iLfocZ[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .iLfocZ[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .iLfocZ[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .iLfocZ[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .iLfocZ[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .iLfocZ[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .iLfocZ [data-component="leadingVisual"]{grid-area:leadingVisual;}/*!sc*/ .iLfocZ [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .iLfocZ [data-component="trailingVisual"]{grid-area:trailingVisual;}/*!sc*/ .iLfocZ [data-component="trailingAction"]{margin-right:-4px;}/*!sc*/ .iLfocZ [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .iLfocZ [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .iLfocZ [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .iLfocZ [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .iLfocZ:hover:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));border-color:var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));}/*!sc*/ .iLfocZ:active:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .iLfocZ[aria-expanded=true]{background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .iLfocZ [data-component="leadingVisual"],.iLfocZ [data-component="trailingVisual"],.iLfocZ [data-component="trailingAction"]{color:var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .iLfocZ[data-component="IconButton"][data-no-visuals]:not(:disabled){color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .iLfocZ[data-size="medium"][data-no-visuals]{border-top-left-radius:0;border-bottom-left-radius:0;display:none;}/*!sc*/ .JVsBq{border-radius:6px;border:1px solid;border-color:var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));}/*!sc*/ .JVsBq:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .JVsBq:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .JVsBq:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .JVsBq[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .JVsBq[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .JVsBq:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .JVsBq:active{-webkit-transition:none;transition:none;}/*!sc*/ .JVsBq[data-inactive]{cursor:auto;}/*!sc*/ .JVsBq:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));border-color:var(--button-default-borderColor-disabled,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));background-color:var(--button-default-bgColor-disabled,var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2))));}/*!sc*/ .JVsBq:disabled [data-component=ButtonCounter]{color:inherit;}/*!sc*/ @media (forced-colors:active){.JVsBq:focus{outline:solid 1px transparent;}}/*!sc*/ .JVsBq [data-component=ButtonCounter]{font-size:12px;background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08)));}/*!sc*/ .JVsBq[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .JVsBq[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .JVsBq[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .JVsBq[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .JVsBq[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .JVsBq[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .JVsBq[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .JVsBq[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .JVsBq[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .JVsBq[data-block="block"]{width:100%;}/*!sc*/ .JVsBq[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .JVsBq[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .JVsBq[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .JVsBq[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .JVsBq[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .JVsBq[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .JVsBq[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .JVsBq[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .JVsBq[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .JVsBq [data-component="leadingVisual"]{grid-area:leadingVisual;}/*!sc*/ .JVsBq [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .JVsBq [data-component="trailingVisual"]{grid-area:trailingVisual;}/*!sc*/ .JVsBq [data-component="trailingAction"]{margin-right:-4px;}/*!sc*/ .JVsBq [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .JVsBq [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .JVsBq [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .JVsBq [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .JVsBq:hover:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));border-color:var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));}/*!sc*/ .JVsBq:active:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .JVsBq[aria-expanded=true]{background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .JVsBq [data-component="leadingVisual"],.JVsBq [data-component="trailingVisual"],.JVsBq [data-component="trailingAction"]{color:var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .JVsBq[data-component="IconButton"][data-no-visuals]:not(:disabled){color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .JVsBq[data-size="medium"][data-no-visuals]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .fwExmK{border-radius:6px;border:1px solid;border-color:transparent;font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));background-color:transparent;box-shadow:none;}/*!sc*/ .fwExmK:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .fwExmK:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .fwExmK:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .fwExmK[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .fwExmK[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .fwExmK:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .fwExmK:active{-webkit-transition:none;transition:none;}/*!sc*/ .fwExmK[data-inactive]{cursor:auto;}/*!sc*/ .fwExmK:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));background-color:var(--button-invisible-bgColor-disabled,transparent);}/*!sc*/ .fwExmK:disabled [data-component=ButtonCounter],.fwExmK:disabled [data-component="leadingVisual"],.fwExmK:disabled [data-component="trailingAction"]{color:inherit;}/*!sc*/ @media (forced-colors:active){.fwExmK:focus{outline:solid 1px transparent;}}/*!sc*/ .fwExmK [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .fwExmK[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .fwExmK[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;color:var(--fgColor-default,var(--color-fg-default,#1F2328));margin-left:8px;}/*!sc*/ .fwExmK[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .fwExmK[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .fwExmK[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .fwExmK[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .fwExmK[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .fwExmK[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .fwExmK[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .fwExmK[data-block="block"]{width:100%;}/*!sc*/ .fwExmK[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .fwExmK[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .fwExmK[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .fwExmK[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .fwExmK[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .fwExmK[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .fwExmK[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .fwExmK[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .fwExmK[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .fwExmK [data-component="leadingVisual"]{grid-area:leadingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .fwExmK [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .fwExmK [data-component="trailingVisual"]{grid-area:trailingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .fwExmK [data-component="trailingAction"]{margin-right:-4px;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .fwExmK [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .fwExmK [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .fwExmK [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .fwExmK [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .fwExmK:hover:not([disabled]){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));}/*!sc*/ .fwExmK:active:not([disabled]){background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));}/*!sc*/ .fwExmK[aria-expanded=true]{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ .fwExmK[data-component="IconButton"][data-no-visuals]{color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .fwExmK[data-no-visuals]{color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .fwExmK:has([data-component="ButtonCounter"]){color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .fwExmK:disabled[data-no-visuals]{color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));}/*!sc*/ .fwExmK:disabled[data-no-visuals] [data-component=ButtonCounter]{color:inherit;}/*!sc*/ .ifVXZX{border-radius:6px;border:1px solid;border-color:var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));padding-left:8px;padding-right:8px;}/*!sc*/ .ifVXZX:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .ifVXZX:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .ifVXZX:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .ifVXZX[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .ifVXZX[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .ifVXZX:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .ifVXZX:active{-webkit-transition:none;transition:none;}/*!sc*/ .ifVXZX[data-inactive]{cursor:auto;}/*!sc*/ .ifVXZX:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));border-color:var(--button-default-borderColor-disabled,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));background-color:var(--button-default-bgColor-disabled,var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2))));}/*!sc*/ .ifVXZX:disabled [data-component=ButtonCounter]{color:inherit;}/*!sc*/ @media (forced-colors:active){.ifVXZX:focus{outline:solid 1px transparent;}}/*!sc*/ .ifVXZX [data-component=ButtonCounter]{font-size:12px;background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08)));}/*!sc*/ .ifVXZX[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .ifVXZX[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .ifVXZX[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .ifVXZX[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .ifVXZX[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .ifVXZX[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .ifVXZX[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .ifVXZX[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .ifVXZX[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .ifVXZX[data-block="block"]{width:100%;}/*!sc*/ .ifVXZX[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .ifVXZX[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .ifVXZX[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .ifVXZX[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .ifVXZX[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .ifVXZX[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .ifVXZX[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .ifVXZX[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .ifVXZX[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .ifVXZX [data-component="leadingVisual"]{grid-area:leadingVisual;}/*!sc*/ .ifVXZX [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .ifVXZX [data-component="trailingVisual"]{grid-area:trailingVisual;}/*!sc*/ .ifVXZX [data-component="trailingAction"]{margin-right:-4px;}/*!sc*/ .ifVXZX [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .ifVXZX [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .ifVXZX [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .ifVXZX [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .ifVXZX:hover:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));border-color:var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));}/*!sc*/ .ifVXZX:active:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .ifVXZX[aria-expanded=true]{background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .ifVXZX [data-component="leadingVisual"],.ifVXZX [data-component="trailingVisual"],.ifVXZX [data-component="trailingAction"]{color:var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .ifVXZX[data-component="IconButton"][data-no-visuals]:not(:disabled){color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .ifVXZX linkButtonSx:hover:not([disabled]){-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .ifVXZX linkButtonSx:focus:not([disabled]){-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .ifVXZX linkButtonSx:active:not([disabled]){-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .gGdPyq{border-radius:6px;border:1px solid;border-color:var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));}/*!sc*/ .gGdPyq:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .gGdPyq:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .gGdPyq:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .gGdPyq[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .gGdPyq[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .gGdPyq:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .gGdPyq:active{-webkit-transition:none;transition:none;}/*!sc*/ .gGdPyq[data-inactive]{cursor:auto;}/*!sc*/ .gGdPyq:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));border-color:var(--button-default-borderColor-disabled,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));background-color:var(--button-default-bgColor-disabled,var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2))));}/*!sc*/ .gGdPyq:disabled [data-component=ButtonCounter]{color:inherit;}/*!sc*/ @media (forced-colors:active){.gGdPyq:focus{outline:solid 1px transparent;}}/*!sc*/ .gGdPyq [data-component=ButtonCounter]{font-size:12px;background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08)));}/*!sc*/ .gGdPyq[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .gGdPyq[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .gGdPyq[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .gGdPyq[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .gGdPyq[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .gGdPyq[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .gGdPyq[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .gGdPyq[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .gGdPyq[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .gGdPyq[data-block="block"]{width:100%;}/*!sc*/ .gGdPyq[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .gGdPyq[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .gGdPyq[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .gGdPyq[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .gGdPyq[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .gGdPyq[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .gGdPyq[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .gGdPyq[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .gGdPyq[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .gGdPyq [data-component="leadingVisual"]{grid-area:leadingVisual;}/*!sc*/ .gGdPyq [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .gGdPyq [data-component="trailingVisual"]{grid-area:trailingVisual;}/*!sc*/ .gGdPyq [data-component="trailingAction"]{margin-right:-4px;}/*!sc*/ .gGdPyq [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .gGdPyq [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .gGdPyq [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .gGdPyq [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .gGdPyq:hover:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));border-color:var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));}/*!sc*/ .gGdPyq:active:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .gGdPyq[aria-expanded=true]{background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .gGdPyq [data-component="leadingVisual"],.gGdPyq [data-component="trailingVisual"],.gGdPyq [data-component="trailingAction"]{color:var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gGdPyq[data-component="IconButton"][data-no-visuals]:not(:disabled){color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .dOuZvu{border-radius:6px;border:1px solid;border-color:var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));}/*!sc*/ .dOuZvu:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .dOuZvu:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .dOuZvu:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .dOuZvu[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .dOuZvu[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .dOuZvu:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .dOuZvu:active{-webkit-transition:none;transition:none;}/*!sc*/ .dOuZvu[data-inactive]{cursor:auto;}/*!sc*/ .dOuZvu:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));border-color:var(--button-default-borderColor-disabled,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));background-color:var(--button-default-bgColor-disabled,var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2))));}/*!sc*/ .dOuZvu:disabled [data-component=ButtonCounter]{color:inherit;}/*!sc*/ @media (forced-colors:active){.dOuZvu:focus{outline:solid 1px transparent;}}/*!sc*/ .dOuZvu [data-component=ButtonCounter]{font-size:12px;background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08)));}/*!sc*/ .dOuZvu[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .dOuZvu[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .dOuZvu[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .dOuZvu[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .dOuZvu[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .dOuZvu[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .dOuZvu[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .dOuZvu[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .dOuZvu[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .dOuZvu[data-block="block"]{width:100%;}/*!sc*/ .dOuZvu[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .dOuZvu[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .dOuZvu[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .dOuZvu[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .dOuZvu[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .dOuZvu[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .dOuZvu[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .dOuZvu[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .dOuZvu[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .dOuZvu [data-component="leadingVisual"]{grid-area:leadingVisual;}/*!sc*/ .dOuZvu [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .dOuZvu [data-component="trailingVisual"]{grid-area:trailingVisual;}/*!sc*/ .dOuZvu [data-component="trailingAction"]{margin-right:-4px;}/*!sc*/ .dOuZvu [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .dOuZvu [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .dOuZvu [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .dOuZvu [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .dOuZvu:hover:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));border-color:var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));}/*!sc*/ .dOuZvu:active:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .dOuZvu[aria-expanded=true]{background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .dOuZvu [data-component="leadingVisual"],.dOuZvu [data-component="trailingVisual"],.dOuZvu [data-component="trailingAction"]{color:var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .dOuZvu[data-component="IconButton"][data-no-visuals]:not(:disabled){color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .dOuZvu[data-size="small"][data-no-visuals]{border-top-left-radius:0;border-bottom-left-radius:0;}/*!sc*/ .iZkvjn{border-radius:6px;border:1px solid;border-color:transparent;font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));background-color:transparent;box-shadow:none;}/*!sc*/ .iZkvjn:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .iZkvjn:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .iZkvjn:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .iZkvjn[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .iZkvjn[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .iZkvjn:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .iZkvjn:active{-webkit-transition:none;transition:none;}/*!sc*/ .iZkvjn[data-inactive]{cursor:auto;}/*!sc*/ .iZkvjn:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));background-color:var(--button-invisible-bgColor-disabled,transparent);}/*!sc*/ .iZkvjn:disabled [data-component=ButtonCounter],.iZkvjn:disabled [data-component="leadingVisual"],.iZkvjn:disabled [data-component="trailingAction"]{color:inherit;}/*!sc*/ @media (forced-colors:active){.iZkvjn:focus{outline:solid 1px transparent;}}/*!sc*/ .iZkvjn [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .iZkvjn[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .iZkvjn[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .iZkvjn[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .iZkvjn[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .iZkvjn[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .iZkvjn[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .iZkvjn[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .iZkvjn[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .iZkvjn[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .iZkvjn[data-block="block"]{width:100%;}/*!sc*/ .iZkvjn[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .iZkvjn[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .iZkvjn[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .iZkvjn[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .iZkvjn[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .iZkvjn[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .iZkvjn[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .iZkvjn[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .iZkvjn[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .iZkvjn [data-component="leadingVisual"]{grid-area:leadingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .iZkvjn [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .iZkvjn [data-component="trailingVisual"]{grid-area:trailingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .iZkvjn [data-component="trailingAction"]{margin-right:-4px;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .iZkvjn [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .iZkvjn [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .iZkvjn [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .iZkvjn [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .iZkvjn:hover:not([disabled]){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));}/*!sc*/ .iZkvjn:active:not([disabled]){background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));}/*!sc*/ .iZkvjn[aria-expanded=true]{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ .iZkvjn[data-component="IconButton"][data-no-visuals]{color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .iZkvjn[data-no-visuals]{color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .iZkvjn:has([data-component="ButtonCounter"]){color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .iZkvjn:disabled[data-no-visuals]{color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));}/*!sc*/ .iZkvjn:disabled[data-no-visuals] [data-component=ButtonCounter]{color:inherit;}/*!sc*/ .iZkvjn[data-size="small"][data-no-visuals]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));position:relative;}/*!sc*/ .ggSvLP{border-radius:6px;border:1px solid;border-color:transparent;font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));background-color:transparent;box-shadow:none;}/*!sc*/ .ggSvLP:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .ggSvLP:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .ggSvLP:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .ggSvLP[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .ggSvLP[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .ggSvLP:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .ggSvLP:active{-webkit-transition:none;transition:none;}/*!sc*/ .ggSvLP[data-inactive]{cursor:auto;}/*!sc*/ .ggSvLP:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));background-color:var(--button-invisible-bgColor-disabled,transparent);}/*!sc*/ .ggSvLP:disabled [data-component=ButtonCounter],.ggSvLP:disabled [data-component="leadingVisual"],.ggSvLP:disabled [data-component="trailingAction"]{color:inherit;}/*!sc*/ @media (forced-colors:active){.ggSvLP:focus{outline:solid 1px transparent;}}/*!sc*/ .ggSvLP [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .ggSvLP[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .ggSvLP[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .ggSvLP[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .ggSvLP[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .ggSvLP[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .ggSvLP[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .ggSvLP[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .ggSvLP[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .ggSvLP[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .ggSvLP[data-block="block"]{width:100%;}/*!sc*/ .ggSvLP[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .ggSvLP[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .ggSvLP[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .ggSvLP[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .ggSvLP[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .ggSvLP[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .ggSvLP[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .ggSvLP[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .ggSvLP[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .ggSvLP [data-component="leadingVisual"]{grid-area:leadingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .ggSvLP [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .ggSvLP [data-component="trailingVisual"]{grid-area:trailingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .ggSvLP [data-component="trailingAction"]{margin-right:-4px;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .ggSvLP [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .ggSvLP [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .ggSvLP [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .ggSvLP [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .ggSvLP:hover:not([disabled]){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));}/*!sc*/ .ggSvLP:active:not([disabled]){background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));}/*!sc*/ .ggSvLP[aria-expanded=true]{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ .ggSvLP[data-component="IconButton"][data-no-visuals]{color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .ggSvLP[data-no-visuals]{color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .ggSvLP:has([data-component="ButtonCounter"]){color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .ggSvLP:disabled[data-no-visuals]{color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));}/*!sc*/ .ggSvLP:disabled[data-no-visuals] [data-component=ButtonCounter]{color:inherit;}/*!sc*/ .ggSvLP[data-size="small"][data-no-visuals]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ data-styled.g11[id="types__StyledButton-sc-ws60qy-0"]{content:"kBQCgV,dPmZyJ,iQGjqs,iLfocZ,JVsBq,fwExmK,ifVXZX,gGdPyq,dOuZvu,iZkvjn,ggSvLP,"}/*!sc*/ .hWlpPn{position:relative;display:inline-block;}/*!sc*/ .hWlpPn::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*/ .hWlpPn:hover::after,.hWlpPn:active::after,.hWlpPn:focus::after,.hWlpPn: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*/ .hWlpPn.tooltipped-no-delay:hover::after,.hWlpPn.tooltipped-no-delay:active::after,.hWlpPn.tooltipped-no-delay:focus::after,.hWlpPn.tooltipped-no-delay:focus-within::after{-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .hWlpPn.tooltipped-multiline:hover::after,.hWlpPn.tooltipped-multiline:active::after,.hWlpPn.tooltipped-multiline:focus::after,.hWlpPn.tooltipped-multiline:focus-within::after{display:table-cell;}/*!sc*/ .hWlpPn.tooltipped-s::after,.hWlpPn.tooltipped-se::after,.hWlpPn.tooltipped-sw::after{top:100%;right:50%;margin-top:6px;}/*!sc*/ .hWlpPn.tooltipped-se::after{right:auto;left:50%;margin-left:-16px;}/*!sc*/ .hWlpPn.tooltipped-sw::after{margin-right:-16px;}/*!sc*/ .hWlpPn.tooltipped-n::after,.hWlpPn.tooltipped-ne::after,.hWlpPn.tooltipped-nw::after{right:50%;bottom:100%;margin-bottom:6px;}/*!sc*/ .hWlpPn.tooltipped-ne::after{right:auto;left:50%;margin-left:-16px;}/*!sc*/ .hWlpPn.tooltipped-nw::after{margin-right:-16px;}/*!sc*/ .hWlpPn.tooltipped-s::after,.hWlpPn.tooltipped-n::after{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}/*!sc*/ .hWlpPn.tooltipped-w::after{right:100%;bottom:50%;margin-right:6px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}/*!sc*/ .hWlpPn.tooltipped-e::after{bottom:50%;left:100%;margin-left:6px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}/*!sc*/ .hWlpPn.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*/ .hWlpPn.tooltipped-multiline.tooltipped-s::after,.hWlpPn.tooltipped-multiline.tooltipped-n::after{right:auto;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}/*!sc*/ .hWlpPn.tooltipped-multiline.tooltipped-w::after,.hWlpPn.tooltipped-multiline.tooltipped-e::after{right:100%;}/*!sc*/ .hWlpPn.tooltipped-align-right-2::after{right:0;margin-right:0;}/*!sc*/ .hWlpPn.tooltipped-align-left-2::after{left:0;margin-left:0;}/*!sc*/ data-styled.g14[id="Tooltip__TooltipBase-sc-17tf59c-0"]{content:"hWlpPn,"}/*!sc*/ .kbCLEG{border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;}/*!sc*/ .kbCLEG:focus{outline:0;}/*!sc*/ data-styled.g15[id="UnstyledTextInput-sc-14ypya-0"]{content:"kbCLEG,"}/*!sc*/ .eAtkQz{display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:top;white-space:nowrap;max-width:125px;max-width:100%;}/*!sc*/ data-styled.g17[id="Truncate__StyledTruncate-sc-23o1d2-0"]{content:"eAtkQz,"}/*!sc*/ body[data-page-layout-dragging="true"]{cursor:col-resize;}/*!sc*/ body[data-page-layout-dragging="true"] *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}/*!sc*/ data-styled.g99[id="sc-global-gbKrvU1"]{content:"sc-global-gbKrvU1,"}/*!sc*/ .lirRhW{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;isolation:isolate;}/*!sc*/ .lirRhW.lirRhW > *:not([data-loading-wrapper]){margin-inline-end:-1px;position:relative;border-radius:0;}/*!sc*/ .lirRhW.lirRhW > *:not([data-loading-wrapper]):first-child{border-top-left-radius:6px;border-bottom-left-radius:6px;}/*!sc*/ .lirRhW.lirRhW > *:not([data-loading-wrapper]):last-child{border-top-right-radius:6px;border-bottom-right-radius:6px;}/*!sc*/ .lirRhW.lirRhW > *:not([data-loading-wrapper]):focus,.lirRhW.lirRhW > *:not([data-loading-wrapper]):active,.lirRhW.lirRhW > *:not([data-loading-wrapper]):hover{z-index:1;}/*!sc*/ .lirRhW [data-loading-wrapper]:first-child button,.lirRhW [data-loading-wrapper]:first-child a{border-top-left-radius:6px;border-bottom-left-radius:6px;}/*!sc*/ .lirRhW [data-loading-wrapper]:last-child button,.lirRhW [data-loading-wrapper]:last-child a{border-top-right-radius:6px;border-bottom-right-radius:6px;}/*!sc*/ .lirRhW [data-loading-wrapper] > *{margin-inline-end:-1px;position:relative;border-radius:0;}/*!sc*/ .lirRhW [data-loading-wrapper] > *:focus,.lirRhW [data-loading-wrapper] > *:active,.lirRhW [data-loading-wrapper] > *:hover{z-index:1;}/*!sc*/ data-styled.g104[id="ButtonGroup__StyledButtonGroup-sc-1gxhls1-0"]{content:"lirRhW,"}/*!sc*/ .dbGjOi{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;--segmented-control-outer-radius:6px;background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:600;padding:0;height:100%;width:100%;}/*!sc*/ .dbGjOi:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-1px;}/*!sc*/ .dbGjOi:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .dbGjOi:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-1px;}/*!sc*/ .dbGjOi .segmentedControl-content{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg,#ffffff));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-hover-active-selected-border,#8c959f));border-style:solid;border-width:1px;border-radius:var(--segmented-control-outer-radius);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding);}/*!sc*/ .dbGjOi svg{fill:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .dbGjOi:focus:focus-visible:not(:last-child):after{width:0;}/*!sc*/ .dbGjOi .segmentedControl-text:after{content:"Code";display:block;font-weight:600;height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;}/*!sc*/ @media (pointer:coarse){.dbGjOi:before{content:"";position:absolute;left:0;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);top:50%;min-height:44px;}}/*!sc*/ .bHmvop{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;--segmented-control-outer-radius:6px;background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:400;padding:var(--segmented-control-button-bg-inset);height:100%;width:100%;}/*!sc*/ .bHmvop:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-1px;}/*!sc*/ .bHmvop:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .bHmvop:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-1px;}/*!sc*/ .bHmvop .segmentedControl-content{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border-color:transparent;border-style:solid;border-width:1px;border-radius:calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding-left:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));padding-right:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));}/*!sc*/ .bHmvop svg{fill:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .bHmvop:hover .segmentedControl-content{background-color:var(--controlTrack-bgColor-hover,var(--color-segmented-control-button-hover-bg,rgba(175,184,193,0.2)));}/*!sc*/ .bHmvop:active .segmentedControl-content{background-color:var(--controlTrack-bgColor-active,var(--color-segmented-control-button-hover-active-bg,rgba(175,184,193,0.4)));}/*!sc*/ .bHmvop:focus:focus-visible:not(:last-child):after{width:0;}/*!sc*/ .bHmvop .segmentedControl-text:after{content:"Blame";display:block;font-weight:600;height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;}/*!sc*/ @media (pointer:coarse){.bHmvop:before{content:"";position:absolute;left:0;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);top:50%;min-height:44px;}}/*!sc*/ data-styled.g106[id="SegmentedControlButton__SegmentedControlButtonStyled-sc-8lkgxl-0"]{content:"dbGjOi,bHmvop,"}/*!sc*/ .lawgDG{background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg,#eaeef2));border-radius:6px;border:1px solid;border-color:var(--controlTrack-borderColor-rest,transparent);display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;font-size:14px;height:28px;margin:0;padding:0;}/*!sc*/ data-styled.g108[id="SegmentedControl__SegmentedControlList-sc-1rzig82-0"]{content:"lawgDG,"}/*!sc*/ </style><meta data-hydrostats="publish"/> <!-- --> <!-- --> <button hidden="" data-testid="header-permalink-button" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden=""></button><div><div style="--sticky-pane-height:100vh" class="Box-sc-g0xbh4-0 hOfjFo"><div class="Box-sc-g0xbh4-0 oDGAe"><div class="Box-sc-g0xbh4-0 kowOcT"><div tabindex="0" class="Box-sc-g0xbh4-0 gISSDQ"><div class="Box-sc-g0xbh4-0 fLEPlD"><div class="Box-sc-g0xbh4-0 hPvFuC"></div><div style="--pane-width:320px" class="Box-sc-g0xbh4-0 fFSoPl"></div><div class="Box-sc-g0xbh4-0 bTBnTW"><div role="slider" aria-label="Draggable pane splitter" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0" aria-valuetext="Pane width 0 pixels" tabindex="0" class="Box-sc-g0xbh4-0 bHLmSv"></div></div></div></div><div class="Box-sc-g0xbh4-0 iKqMNA"><div class="Box-sc-g0xbh4-0"></div><div class="Box-sc-g0xbh4-0 FxAyp"><div data-selector="repos-split-pane-content" tabindex="0" class="Box-sc-g0xbh4-0 leYMvG"><div class="Box-sc-g0xbh4-0 KMPzq"><div class="Box-sc-g0xbh4-0 hfKjHv container"><div class="px-3 pt-3 pb-0" id="StickyHeader"><div class="Box-sc-g0xbh4-0 gZWyZE"><div class="Box-sc-g0xbh4-0 dwYKDk"><div class="Box-sc-g0xbh4-0 ibcGmb react-code-view-header-wrap--narrow"><div class="Box-sc-g0xbh4-0 hKaEJF"><h2 class="Box-sc-g0xbh4-0 XosP prc-Heading-Heading-6CmGO"><button style="--button-color:fg.muted" type="button" aria-label="Expand file tree" data-testid="expand-file-tree-button-mobile" class="types__StyledButton-sc-ws60qy-0 kBQCgV" data-loading="false" data-size="medium" aria-describedby=":Rld9lab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="leadingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-arrow-left" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"></path></svg></span><span data-component="text">Files</span></span></button><span role="tooltip" aria-label="Expand file tree" id="expand-button-file-tree-button" class="Tooltip__TooltipBase-sc-17tf59c-0 hWlpPn tooltipped-se"><button data-component="IconButton" type="button" data-testid="expand-file-tree-button" aria-controls="repos-file-tree" class="types__StyledButton-sc-ws60qy-0 dPmZyJ position-relative ExpandFileTreeButton-module__expandButton--gL4is ExpandFileTreeButton-module__filesButtonBreakpoint--WfX9t fgColor-muted prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":R35d9lab:-loading-announcement" aria-labelledby="expand-button-file-tree-button"><svg aria-hidden="true" focusable="false" class="octicon octicon-sidebar-collapse" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M6.823 7.823a.25.25 0 0 1 0 .354l-2.396 2.396A.25.25 0 0 1 4 10.396V5.604a.25.25 0 0 1 .427-.177Z"></path><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.25H9.5v-13H1.75a.25.25 0 0 0-.25.25ZM11 14.5h3.25a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H11Z"></path></svg></button></span><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button></h2></div><div class="react-code-view-header-mb--narrow mr-2"><button type="button" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-label="f595a0d branch" data-testid="anchor-button" class="types__StyledButton-sc-ws60qy-0 iQGjqs ref-selector-class" data-loading="false" data-size="medium" aria-describedby="branch-picker-repos-header-ref-selector-wide-loading-announcement" id="branch-picker-repos-header-ref-selector-wide"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="text"><div class="Box-sc-g0xbh4-0 bZBlpz"><div class="Box-sc-g0xbh4-0 lhTYNA"><svg aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></div><div class="Box-sc-g0xbh4-0 dbrgmi ref-selector-button-text-container"><span class="Text__StyledText-sc-17v1xeu-0 eMMFM"> <!-- -->f595a0d</span></div></div></span><span data-component="trailingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-triangle-down" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path></svg></span></span></button><button hidden="" data-hotkey-scope="read-only-cursor-text-area"></button></div><div class="Box-sc-g0xbh4-0 dHJiml react-code-view-header-mb--narrow"><div class="Box-sc-g0xbh4-0 cEytCf"><nav data-testid="breadcrumbs" aria-labelledby="repos-header-breadcrumb-heading" id="repos-header-breadcrumb" class="Box-sc-g0xbh4-0 fzFXnm"><h2 class="sr-only prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading" id="repos-header-breadcrumb-heading">Breadcrumbs</h2><ol class="Box-sc-g0xbh4-0 iMnkmv"><li class="Box-sc-g0xbh4-0 ghzDag"><a class="Box-sc-g0xbh4-0 kHuKdh prc-Link-Link-85e08" sx="[object Object]" data-testid="breadcrumbs-repo-link" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481">snippets</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose">compose</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets">snippets</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src">src</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main">main</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java">java</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com">com</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example">example</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose">compose</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets">snippets</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets/animations">animations</a></li></ol></nav><div data-testid="breadcrumbs-filename" class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><h1 class="Box-sc-g0xbh4-0 jGhzSQ prc-Heading-Heading-6CmGO" tabindex="-1" id="file-name-id">AnimationSnippets.kt</h1></div><div aria-describedby=":R1td9lab:"><button data-component="IconButton" type="button" aria-label="Copy path" tabindex="0" class="types__StyledButton-sc-ws60qy-0 dPmZyJ prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="small" aria-describedby=":R7td9lab:-loading-announcement"><svg aria-hidden="true" focusable="false" class="octicon octicon-copy" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><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></div></div></div></div><div class="react-code-view-header-element--wide"><div class="Box-sc-g0xbh4-0 faNtbn"><div class="d-flex gap-2"> <div><div class="Box-sc-g0xbh4-0 fmQaBv"><span class="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0 TextInputWrapper-sc-1mqhpbi-1 gwqFqs decvaq TextInput-wrapper" aria-busy="false"><span class="TextInput-icon" id=":R5j6d9lab:" aria-hidden="true"><svg aria-hidden="true" focusable="false" class="octicon octicon-search" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><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><input type="text" aria-label="Go to file" role="combobox" aria-controls="file-results-list" aria-expanded="false" aria-haspopup="dialog" autoCorrect="off" spellcheck="false" placeholder="Go to file" aria-describedby=":R5j6d9lab: :R5j6d9labH1:" data-component="input" class="UnstyledTextInput-sc-14ypya-0 kbCLEG" value=""/><span class="TextInput-icon" id=":R5j6d9labH1:" aria-hidden="true"></span></span></div><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden=""></button></div><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden=""></button><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden=""></button><button type="button" class="types__StyledButton-sc-ws60qy-0 iLfocZ" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":R2l6d9lab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="text">Blame</span></span></button><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button data-component="IconButton" type="button" aria-label="More file actions" title="More file actions" data-testid="more-file-actions-button-nav-menu-wide" aria-haspopup="true" aria-expanded="false" tabindex="0" class="types__StyledButton-sc-ws60qy-0 JVsBq js-blob-dropdown-click prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":R156d9lab:-loading-announcement" id=":R156d9lab:"><svg aria-hidden="true" focusable="false" class="octicon octicon-kebab-horizontal" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><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> </div></div></div><div class="react-code-view-header-element--narrow"><div class="Box-sc-g0xbh4-0 faNtbn"><div class="d-flex gap-2"> <button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden=""></button><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden=""></button><button type="button" class="types__StyledButton-sc-ws60qy-0 iLfocZ" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":R2l7d9lab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="text">Blame</span></span></button><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button data-component="IconButton" type="button" aria-label="More file actions" title="More file actions" data-testid="more-file-actions-button-nav-menu-narrow" aria-haspopup="true" aria-expanded="false" tabindex="0" class="types__StyledButton-sc-ws60qy-0 JVsBq js-blob-dropdown-click prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":R157d9lab:-loading-announcement" id=":R157d9lab:"><svg aria-hidden="true" focusable="false" class="octicon octicon-kebab-horizontal" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><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> </div></div></div></div></div></div></div></div><div class="Box-sc-g0xbh4-0 dJxjrT react-code-view-bottom-padding"> <div class="Box-sc-g0xbh4-0 eFxKDQ"></div> <!-- --> <!-- --> </div><div class="Box-sc-g0xbh4-0 dJxjrT"> <!-- --> <!-- --> <div class="d-flex flex-column border rounded-2 mb-3 pl-1"><div class="Box-sc-g0xbh4-0 dzCJzi"><h2 class="sr-only prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading">Latest commit</h2><div style="width:120px" class="Skeleton Skeleton--text" data-testid="loading"> </div><div class="d-flex flex-shrink-0 gap-2"><div data-testid="latest-commit-details" class="d-none d-sm-flex flex-items-center"></div><div class="d-flex gap-2"><h2 class="sr-only prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading">History</h2><a href="/android/snippets/commits/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt" class="types__StyledButton-sc-ws60qy-0 dPmZyJ d-none d-lg-flex LinkButton-module__code-view-link-button--xvCGA flex-items-center fgColor-default" data-loading="false" data-size="small" aria-describedby=":R5dlal9lab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="leadingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-history" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><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></span><span data-component="text"><span class="fgColor-default">History</span></span></span></a><div class="d-sm-none"></div><div class="d-flex d-lg-none"><span role="tooltip" aria-label="History" id="history-icon-button-tooltip" class="Tooltip__TooltipBase-sc-17tf59c-0 hWlpPn tooltipped-n"><a href="/android/snippets/commits/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt" class="types__StyledButton-sc-ws60qy-0 dPmZyJ LinkButton-module__code-view-link-button--xvCGA flex-items-center fgColor-default" data-loading="false" data-size="small" aria-describedby=":Rpdlal9lab:-loading-announcement history-icon-button-tooltip"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="leadingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-history" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><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></span></span></a></span></div></div></div></div></div><div class="Box-sc-g0xbh4-0 ldRxiI"><div class="Box-sc-g0xbh4-0 fVkfyA container"><div class="Box-sc-g0xbh4-0 gNAmSV react-code-size-details-banner"><div class="Box-sc-g0xbh4-0 jNEwzY react-code-size-details-banner"><div class="Box-sc-g0xbh4-0 bsDwxw text-mono"><div title="30.3 KB" data-testid="blob-size" class="Truncate__StyledTruncate-sc-23o1d2-0 eAtkQz"><span>861 lines (801 loc) · 30.3 KB</span></div></div></div></div><div class="Box-sc-g0xbh4-0 jdLMhu react-blob-view-header-sticky" id="repos-sticky-header"><div class="Box-sc-g0xbh4-0 tOISc"><div class="react-blob-sticky-header"><div class="Box-sc-g0xbh4-0 hqwSEx"><div class="Box-sc-g0xbh4-0 bDVoEr"><div class="Box-sc-g0xbh4-0 kYLlPM"><div class="Box-sc-g0xbh4-0 gYjEmn"><button type="button" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-label="f595a0d branch" data-testid="anchor-button" class="types__StyledButton-sc-ws60qy-0 iQGjqs ref-selector-class" data-loading="false" data-size="medium" aria-describedby="branch-picker-repos-header-ref-selector-loading-announcement" id="branch-picker-repos-header-ref-selector"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="text"><div class="Box-sc-g0xbh4-0 bZBlpz"><div class="Box-sc-g0xbh4-0 lhTYNA"><svg aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></div><div class="Box-sc-g0xbh4-0 dbrgmi ref-selector-button-text-container"><span class="Text__StyledText-sc-17v1xeu-0 eMMFM"> <!-- -->f595a0d</span></div></div></span><span data-component="trailingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-triangle-down" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path></svg></span></span></button><button hidden="" data-hotkey-scope="read-only-cursor-text-area"></button></div><div class="Box-sc-g0xbh4-0 kGqOLL"><div class="Box-sc-g0xbh4-0 fHind"><nav data-testid="breadcrumbs" aria-labelledby="sticky-breadcrumb-heading" id="sticky-breadcrumb" class="Box-sc-g0xbh4-0 fzFXnm"><h2 class="sr-only prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading" id="sticky-breadcrumb-heading">Breadcrumbs</h2><ol class="Box-sc-g0xbh4-0 iMnkmv"><li class="Box-sc-g0xbh4-0 ghzDag"><a class="Box-sc-g0xbh4-0 kHuKdh prc-Link-Link-85e08" sx="[object Object]" data-testid="breadcrumbs-repo-link" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481">snippets</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose">compose</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets">snippets</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src">src</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main">main</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java">java</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com">com</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example">example</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose">compose</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets">snippets</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/android/snippets/tree/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets/animations">animations</a></li></ol></nav><div data-testid="breadcrumbs-filename" class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><h1 class="Box-sc-g0xbh4-0 dnZoUW prc-Heading-Heading-6CmGO" tabindex="-1" id="sticky-file-name-id">AnimationSnippets.kt</h1></div></div></div></div><button style="--button-color:fg.default" type="button" class="types__StyledButton-sc-ws60qy-0 fwExmK" data-loading="false" data-size="small" aria-describedby=":Riptal9lab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="leadingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-arrow-up" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M3.47 7.78a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018L9 4.81v7.44a.75.75 0 0 1-1.5 0V4.81L4.53 7.78a.75.75 0 0 1-1.06 0Z"></path></svg></span><span data-component="text">Top</span></span></button></div></div></div><div class="Box-sc-g0xbh4-0 kTvpNk"><h2 class="sr-only prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading">File metadata and controls</h2><div class="Box-sc-g0xbh4-0 iNMjfP"><ul aria-label="File view" class="SegmentedControl__SegmentedControlList-sc-1rzig82-0 lawgDG"><li class="Box-sc-g0xbh4-0 fefCSX"><button aria-current="true" type="button" class="SegmentedControlButton__SegmentedControlButtonStyled-sc-8lkgxl-0 dbGjOi"><span class="segmentedControl-content"><div class="Box-sc-g0xbh4-0 segmentedControl-text">Code</div></span></button></li><li class="Box-sc-g0xbh4-0 idgUkN"><button aria-current="false" type="button" class="SegmentedControlButton__SegmentedControlButtonStyled-sc-8lkgxl-0 bHmvop"><span class="segmentedControl-content"><div class="Box-sc-g0xbh4-0 segmentedControl-text">Blame</div></span></button></li></ul><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><div class="Box-sc-g0xbh4-0 jNEwzY react-code-size-details-in-header"><div class="Box-sc-g0xbh4-0 bsDwxw text-mono"><div title="30.3 KB" data-testid="blob-size" class="Truncate__StyledTruncate-sc-23o1d2-0 eAtkQz"><span>861 lines (801 loc) · 30.3 KB</span></div></div></div></div><div class="Box-sc-g0xbh4-0 kcLCKF"><div class="Box-sc-g0xbh4-0 kVWtTz react-blob-header-edit-and-raw-actions"><div class="ButtonGroup__StyledButtonGroup-sc-1gxhls1-0 lirRhW"><a href="https://github.com/android/snippets/raw/f595a0d317fd8aca6b33d4344bf87696cd45c481/compose/snippets/src/main/java/com/example/compose/snippets/animations/AnimationSnippets.kt" data-testid="raw-button" class="types__StyledButton-sc-ws60qy-0 ifVXZX" data-loading="false" data-no-visuals="true" data-size="small" aria-describedby=":R5csptal9lab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="text">Raw</span></span></a><button data-component="IconButton" type="button" aria-label="Copy raw content" data-testid="copy-raw-button" class="types__StyledButton-sc-ws60qy-0 gGdPyq prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="small" aria-describedby=":Rpcsptal9lab:-loading-announcement"><svg aria-hidden="true" focusable="false" class="octicon octicon-copy" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><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 role="tooltip" aria-label="Download raw file" id=":Rdcsptal9lab:" class="Tooltip__TooltipBase-sc-17tf59c-0 hWlpPn tooltipped-n"><button data-component="IconButton" type="button" aria-label="Download raw content" data-testid="download-raw-button" class="types__StyledButton-sc-ws60qy-0 dOuZvu prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="small" aria-describedby=":Rtcsptal9lab:-loading-announcement"><svg aria-hidden="true" focusable="false" class="octicon octicon-download" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z"></path><path d="M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06l1.97 1.969Z"></path></svg></button></span></div><button hidden="" data-testid="raw-button-shortcut" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden="" data-testid="copy-raw-button-shortcut" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden="" data-testid="download-raw-button-shortcut" data-hotkey-scope="read-only-cursor-text-area"></button></div><span role="tooltip" aria-label="Open symbols panel" id=":R5sptal9lab:" class="Tooltip__TooltipBase-sc-17tf59c-0 hWlpPn tooltipped-nw"><button data-component="IconButton" type="button" aria-label="Symbols" aria-pressed="false" aria-expanded="false" aria-controls="symbols-pane" data-testid="symbols-button" class="types__StyledButton-sc-ws60qy-0 iZkvjn prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="small" aria-describedby="symbols-button-loading-announcement" id="symbols-button"><svg aria-hidden="true" focusable="false" class="octicon octicon-code-square" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><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></button></span><div class="react-blob-header-edit-and-raw-actions-combined"><button data-component="IconButton" type="button" aria-label="Edit and raw actions" title="More file actions" data-testid="more-file-actions-button" aria-haspopup="true" aria-expanded="false" tabindex="0" class="types__StyledButton-sc-ws60qy-0 ggSvLP js-blob-dropdown-click prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="small" aria-describedby=":Rnsptal9lab:-loading-announcement" id=":Rnsptal9lab:"><svg aria-hidden="true" focusable="false" class="octicon octicon-kebab-horizontal" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><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></div></div></div></div><div></div></div><div class="Box-sc-g0xbh4-0 hGyMdv"><section aria-labelledby="file-name-id-wide file-name-id-mobile" class="Box-sc-g0xbh4-0 dceWRL"><div class="Box-sc-g0xbh4-0 dGXHv"><div id="highlighted-line-menu-positioner" class="position-relative"><div id="copilot-button-positioner" class="Box-sc-g0xbh4-0 bpDFns"><div class="Box-sc-g0xbh4-0 iJOeCH"><div class="Box-sc-g0xbh4-0 jewUnv react-code-file-contents" role="presentation" aria-hidden="true" data-tab-size="8" data-paste-markdown-skip="true" data-hpc="true"><div class="react-line-numbers" style="pointer-events:auto"><div data-line-number="1" class="react-line-number react-code-text" style="padding-right:16px">1</div><div data-line-number="2" class="react-line-number react-code-text" style="padding-right:16px">2</div><div data-line-number="3" class="react-line-number react-code-text" style="padding-right:16px">3</div><div data-line-number="4" class="react-line-number react-code-text" style="padding-right:16px">4</div><div data-line-number="5" class="react-line-number react-code-text" style="padding-right:16px">5</div><div data-line-number="6" class="react-line-number react-code-text" style="padding-right:16px">6</div><div data-line-number="7" class="react-line-number react-code-text" style="padding-right:16px">7</div><div data-line-number="8" class="react-line-number react-code-text" style="padding-right:16px">8</div><div data-line-number="9" class="react-line-number react-code-text" style="padding-right:16px">9</div><div data-line-number="10" class="react-line-number react-code-text" style="padding-right:16px">10</div><div data-line-number="11" class="react-line-number react-code-text" style="padding-right:16px">11</div><div data-line-number="12" class="react-line-number react-code-text" style="padding-right:16px">12</div><div data-line-number="13" class="react-line-number react-code-text" style="padding-right:16px">13</div><div data-line-number="14" class="react-line-number react-code-text" style="padding-right:16px">14</div><div data-line-number="15" class="react-line-number react-code-text" style="padding-right:16px">15</div><div data-line-number="16" class="react-line-number react-code-text" style="padding-right:16px">16</div><div data-line-number="17" class="react-line-number react-code-text" style="padding-right:16px">17</div><div data-line-number="18" class="react-line-number react-code-text" style="padding-right:16px">18</div><div data-line-number="19" class="react-line-number react-code-text" style="padding-right:16px">19</div><div data-line-number="20" class="react-line-number react-code-text" style="padding-right:16px">20</div><div data-line-number="21" class="react-line-number react-code-text" style="padding-right:16px">21</div><div data-line-number="22" class="react-line-number react-code-text" style="padding-right:16px">22</div><div data-line-number="23" class="react-line-number react-code-text" style="padding-right:16px">23</div><div data-line-number="24" class="react-line-number react-code-text" style="padding-right:16px">24</div><div data-line-number="25" class="react-line-number react-code-text" style="padding-right:16px">25</div><div data-line-number="26" class="react-line-number react-code-text" style="padding-right:16px">26</div><div data-line-number="27" class="react-line-number react-code-text" style="padding-right:16px">27</div><div data-line-number="28" class="react-line-number react-code-text" style="padding-right:16px">28</div><div data-line-number="29" class="react-line-number react-code-text" style="padding-right:16px">29</div><div data-line-number="30" class="react-line-number react-code-text" style="padding-right:16px">30</div><div data-line-number="31" class="react-line-number react-code-text" style="padding-right:16px">31</div><div data-line-number="32" class="react-line-number react-code-text" style="padding-right:16px">32</div><div data-line-number="33" class="react-line-number react-code-text" style="padding-right:16px">33</div><div data-line-number="34" class="react-line-number react-code-text" style="padding-right:16px">34</div><div data-line-number="35" class="react-line-number react-code-text" style="padding-right:16px">35</div><div data-line-number="36" class="react-line-number react-code-text" style="padding-right:16px">36</div><div data-line-number="37" class="react-line-number react-code-text" style="padding-right:16px">37</div><div data-line-number="38" class="react-line-number react-code-text" style="padding-right:16px">38</div><div data-line-number="39" class="react-line-number react-code-text" style="padding-right:16px">39</div><div data-line-number="40" class="react-line-number react-code-text" style="padding-right:16px">40</div><div data-line-number="41" class="react-line-number react-code-text" style="padding-right:16px">41</div><div data-line-number="42" class="react-line-number react-code-text" style="padding-right:16px">42</div><div data-line-number="43" class="react-line-number react-code-text" style="padding-right:16px">43</div><div data-line-number="44" class="react-line-number react-code-text" style="padding-right:16px">44</div><div data-line-number="45" class="react-line-number react-code-text" style="padding-right:16px">45</div><div data-line-number="46" class="react-line-number react-code-text" style="padding-right:16px">46</div><div data-line-number="47" class="react-line-number react-code-text" style="padding-right:16px">47</div><div data-line-number="48" class="react-line-number react-code-text" style="padding-right:16px">48</div><div data-line-number="49" class="react-line-number react-code-text" style="padding-right:16px">49</div><div data-line-number="50" class="react-line-number react-code-text" style="padding-right:16px">50</div><div data-line-number="51" class="react-line-number react-code-text" style="padding-right:16px">51</div><div data-line-number="52" class="react-line-number react-code-text" style="padding-right:16px">52</div><div data-line-number="53" class="react-line-number react-code-text" style="padding-right:16px">53</div><div data-line-number="54" class="react-line-number react-code-text" style="padding-right:16px">54</div><div data-line-number="55" class="react-line-number react-code-text" style="padding-right:16px">55</div><div data-line-number="56" class="react-line-number react-code-text" style="padding-right:16px">56</div><div data-line-number="57" class="react-line-number react-code-text" style="padding-right:16px">57</div><div data-line-number="58" class="react-line-number react-code-text" style="padding-right:16px">58</div><div data-line-number="59" class="react-line-number react-code-text" style="padding-right:16px">59</div><div data-line-number="60" class="react-line-number react-code-text" style="padding-right:16px">60</div><div data-line-number="61" class="react-line-number react-code-text" style="padding-right:16px">61</div><div data-line-number="62" class="react-line-number react-code-text" style="padding-right:16px">62</div><div data-line-number="63" class="react-line-number react-code-text" style="padding-right:16px">63</div><div data-line-number="64" class="react-line-number react-code-text" style="padding-right:16px">64</div><div data-line-number="65" class="react-line-number react-code-text" style="padding-right:16px">65</div><div data-line-number="66" class="react-line-number react-code-text" style="padding-right:16px">66</div><div data-line-number="67" class="react-line-number react-code-text" style="padding-right:16px">67</div><div data-line-number="68" class="react-line-number react-code-text" style="padding-right:16px">68</div><div data-line-number="69" class="react-line-number react-code-text" style="padding-right:16px">69</div><div data-line-number="70" class="react-line-number react-code-text" style="padding-right:16px">70</div><div data-line-number="71" class="react-line-number react-code-text" style="padding-right:16px">71</div><div data-line-number="72" class="react-line-number react-code-text" style="padding-right:16px">72</div><div data-line-number="73" class="react-line-number react-code-text" style="padding-right:16px">73</div><div data-line-number="74" class="react-line-number react-code-text" style="padding-right:16px">74</div><div data-line-number="75" class="react-line-number react-code-text" style="padding-right:16px">75</div><div data-line-number="76" class="react-line-number react-code-text" style="padding-right:16px">76</div><div data-line-number="77" class="react-line-number react-code-text" style="padding-right:16px">77</div><div data-line-number="78" class="react-line-number react-code-text" style="padding-right:16px">78</div><div data-line-number="79" class="react-line-number react-code-text" style="padding-right:16px">79</div><div data-line-number="80" class="react-line-number react-code-text" style="padding-right:16px">80</div><div data-line-number="81" class="react-line-number react-code-text" style="padding-right:16px">81</div><div data-line-number="82" class="react-line-number react-code-text" style="padding-right:16px">82</div><div data-line-number="83" class="react-line-number react-code-text" style="padding-right:16px">83</div><div data-line-number="84" class="react-line-number react-code-text" style="padding-right:16px">84</div><div data-line-number="85" class="react-line-number react-code-text" style="padding-right:16px">85</div><div data-line-number="86" class="react-line-number react-code-text" style="padding-right:16px">86</div><div data-line-number="87" class="react-line-number react-code-text" style="padding-right:16px">87</div><div data-line-number="88" class="react-line-number react-code-text" style="padding-right:16px">88</div><div data-line-number="89" class="react-line-number react-code-text" style="padding-right:16px">89</div><div data-line-number="90" class="react-line-number react-code-text" style="padding-right:16px">90</div><div data-line-number="91" class="react-line-number react-code-text" style="padding-right:16px">91</div><div data-line-number="92" class="react-line-number react-code-text" style="padding-right:16px">92</div><div data-line-number="93" class="react-line-number react-code-text" style="padding-right:16px">93</div><div data-line-number="94" class="react-line-number react-code-text" style="padding-right:16px">94</div><div data-line-number="95" class="react-line-number react-code-text" style="padding-right:16px">95</div><div data-line-number="96" class="react-line-number react-code-text" style="padding-right:16px">96</div><div data-line-number="97" class="react-line-number react-code-text" style="padding-right:16px">97</div><div data-line-number="98" class="react-line-number react-code-text" style="padding-right:16px">98</div><div data-line-number="99" class="react-line-number react-code-text" style="padding-right:16px">99</div><div data-line-number="100" class="react-line-number react-code-text" style="padding-right:16px">100</div><div data-line-number="101" class="react-line-number react-code-text" style="padding-right:16px">101</div><div data-line-number="102" class="react-line-number react-code-text" style="padding-right:16px">102</div><div data-line-number="103" class="react-line-number react-code-text" style="padding-right:16px">103</div><div data-line-number="104" class="react-line-number react-code-text" style="padding-right:16px">104</div><div data-line-number="105" class="react-line-number react-code-text" style="padding-right:16px">105</div><div data-line-number="106" class="react-line-number react-code-text" style="padding-right:16px">106</div><div data-line-number="107" class="react-line-number react-code-text" style="padding-right:16px">107</div><div data-line-number="108" class="react-line-number react-code-text" style="padding-right:16px">108</div><div data-line-number="109" class="react-line-number react-code-text" style="padding-right:16px">109</div><div data-line-number="110" class="react-line-number react-code-text" style="padding-right:16px">110</div><div data-line-number="111" class="react-line-number react-code-text" style="padding-right:16px">111</div><div data-line-number="112" class="react-line-number react-code-text" style="padding-right:16px">112</div><div data-line-number="113" class="react-line-number react-code-text" style="padding-right:16px">113</div><div data-line-number="114" class="react-line-number react-code-text" style="padding-right:16px">114</div><div data-line-number="115" class="react-line-number react-code-text" style="padding-right:16px">115</div><div data-line-number="116" class="react-line-number react-code-text" style="padding-right:16px">116</div><div data-line-number="117" class="react-line-number react-code-text" style="padding-right:16px">117</div><div data-line-number="118" class="react-line-number react-code-text" style="padding-right:16px">118</div><div data-line-number="119" class="react-line-number react-code-text" style="padding-right:16px">119</div><div data-line-number="120" class="react-line-number react-code-text" style="padding-right:16px">120</div><div data-line-number="121" class="react-line-number react-code-text" style="padding-right:16px">121</div><div data-line-number="122" class="react-line-number react-code-text" style="padding-right:16px">122</div><div data-line-number="123" class="react-line-number react-code-text" style="padding-right:16px">123</div><div data-line-number="124" class="react-line-number react-code-text" style="padding-right:16px">124</div><div data-line-number="125" class="react-line-number react-code-text" style="padding-right:16px">125</div><div data-line-number="126" class="react-line-number react-code-text" style="padding-right:16px">126</div><div data-line-number="127" class="react-line-number react-code-text" style="padding-right:16px">127</div><div data-line-number="128" class="react-line-number react-code-text" style="padding-right:16px">128</div><div data-line-number="129" class="react-line-number react-code-text" style="padding-right:16px">129</div><div data-line-number="130" class="react-line-number react-code-text" style="padding-right:16px">130</div><div data-line-number="131" class="react-line-number react-code-text" style="padding-right:16px">131</div><div data-line-number="132" class="react-line-number react-code-text" style="padding-right:16px">132</div><div data-line-number="133" class="react-line-number react-code-text" style="padding-right:16px">133</div><div data-line-number="134" class="react-line-number react-code-text" style="padding-right:16px">134</div><div data-line-number="135" class="react-line-number react-code-text" style="padding-right:16px">135</div><div data-line-number="136" class="react-line-number react-code-text" style="padding-right:16px">136</div><div data-line-number="137" class="react-line-number react-code-text" style="padding-right:16px">137</div><div data-line-number="138" class="react-line-number react-code-text" style="padding-right:16px">138</div><div data-line-number="139" class="react-line-number react-code-text" style="padding-right:16px">139</div><div data-line-number="140" class="react-line-number react-code-text" style="padding-right:16px">140</div><div data-line-number="141" class="react-line-number react-code-text" style="padding-right:16px">141</div><div data-line-number="142" class="react-line-number react-code-text" style="padding-right:16px">142</div><div data-line-number="143" class="react-line-number react-code-text" style="padding-right:16px">143</div><div data-line-number="144" class="react-line-number react-code-text" style="padding-right:16px">144</div><div data-line-number="145" class="react-line-number react-code-text" style="padding-right:16px">145</div><div data-line-number="146" class="react-line-number react-code-text" style="padding-right:16px">146</div><div data-line-number="147" class="react-line-number react-code-text" style="padding-right:16px">147</div><div data-line-number="148" class="react-line-number react-code-text" style="padding-right:16px">148</div><div data-line-number="149" class="react-line-number react-code-text" style="padding-right:16px">149</div><div data-line-number="150" class="react-line-number react-code-text" style="padding-right:16px">150</div><div data-line-number="151" class="react-line-number react-code-text" style="padding-right:16px">151</div><div data-line-number="152" class="react-line-number react-code-text" style="padding-right:16px">152</div><div data-line-number="153" class="react-line-number react-code-text" style="padding-right:16px">153</div><div data-line-number="154" class="react-line-number react-code-text" style="padding-right:16px">154</div><div data-line-number="155" class="react-line-number react-code-text" style="padding-right:16px">155</div><div data-line-number="156" class="react-line-number react-code-text" style="padding-right:16px">156</div><div data-line-number="157" class="react-line-number react-code-text" style="padding-right:16px">157</div><div data-line-number="158" class="react-line-number react-code-text" style="padding-right:16px">158</div><div data-line-number="159" class="react-line-number react-code-text" style="padding-right:16px">159</div><div data-line-number="160" class="react-line-number react-code-text" style="padding-right:16px">160</div><div data-line-number="161" class="react-line-number react-code-text" style="padding-right:16px">161</div><div data-line-number="162" class="react-line-number react-code-text" style="padding-right:16px">162</div><div data-line-number="163" class="react-line-number react-code-text" style="padding-right:16px">163</div><div data-line-number="164" class="react-line-number react-code-text" style="padding-right:16px">164</div><div data-line-number="165" class="react-line-number react-code-text" style="padding-right:16px">165</div><div data-line-number="166" class="react-line-number react-code-text" style="padding-right:16px">166</div><div data-line-number="167" class="react-line-number react-code-text" style="padding-right:16px">167</div><div data-line-number="168" class="react-line-number react-code-text" style="padding-right:16px">168</div><div data-line-number="169" class="react-line-number react-code-text" style="padding-right:16px">169</div><div data-line-number="170" class="react-line-number react-code-text" style="padding-right:16px">170</div><div data-line-number="171" class="react-line-number react-code-text" style="padding-right:16px">171</div><div data-line-number="172" class="react-line-number react-code-text" style="padding-right:16px">172</div><div data-line-number="173" class="react-line-number react-code-text" style="padding-right:16px">173</div><div data-line-number="174" class="react-line-number react-code-text" style="padding-right:16px">174</div><div data-line-number="175" class="react-line-number react-code-text" style="padding-right:16px">175</div><div data-line-number="176" class="react-line-number react-code-text" style="padding-right:16px">176</div><div data-line-number="177" class="react-line-number react-code-text" style="padding-right:16px">177</div><div data-line-number="178" class="react-line-number react-code-text" style="padding-right:16px">178</div><div data-line-number="179" class="react-line-number react-code-text" style="padding-right:16px">179</div><div data-line-number="180" class="react-line-number react-code-text" style="padding-right:16px">180</div><div data-line-number="181" class="react-line-number react-code-text" style="padding-right:16px">181</div><div data-line-number="182" class="react-line-number react-code-text" style="padding-right:16px">182</div><div data-line-number="183" class="react-line-number react-code-text" style="padding-right:16px">183</div><div data-line-number="184" class="react-line-number react-code-text" style="padding-right:16px">184</div><div data-line-number="185" class="react-line-number react-code-text" style="padding-right:16px">185</div><div data-line-number="186" class="react-line-number react-code-text" style="padding-right:16px">186</div><div data-line-number="187" class="react-line-number react-code-text" style="padding-right:16px">187</div><div data-line-number="188" class="react-line-number react-code-text" style="padding-right:16px">188</div><div data-line-number="189" class="react-line-number react-code-text" style="padding-right:16px">189</div><div data-line-number="190" class="react-line-number react-code-text" style="padding-right:16px">190</div><div data-line-number="191" class="react-line-number react-code-text" style="padding-right:16px">191</div><div data-line-number="192" class="react-line-number react-code-text" style="padding-right:16px">192</div><div data-line-number="193" class="react-line-number react-code-text" style="padding-right:16px">193</div><div data-line-number="194" class="react-line-number react-code-text" style="padding-right:16px">194</div><div data-line-number="195" class="react-line-number react-code-text" style="padding-right:16px">195</div><div data-line-number="196" class="react-line-number react-code-text" style="padding-right:16px">196</div><div data-line-number="197" class="react-line-number react-code-text" style="padding-right:16px">197</div><div data-line-number="198" class="react-line-number react-code-text" style="padding-right:16px">198</div><div data-line-number="199" class="react-line-number react-code-text" style="padding-right:16px">199</div><div data-line-number="200" class="react-line-number react-code-text" style="padding-right:16px">200</div><div data-line-number="201" class="react-line-number react-code-text" style="padding-right:16px">201</div><div data-line-number="202" class="react-line-number react-code-text" style="padding-right:16px">202</div><div data-line-number="203" class="react-line-number react-code-text" style="padding-right:16px">203</div><div data-line-number="204" class="react-line-number react-code-text" style="padding-right:16px">204</div><div data-line-number="205" class="react-line-number react-code-text" style="padding-right:16px">205</div><div data-line-number="206" class="react-line-number react-code-text" style="padding-right:16px">206</div><div data-line-number="207" class="react-line-number react-code-text" style="padding-right:16px">207</div><div data-line-number="208" class="react-line-number react-code-text" style="padding-right:16px">208</div><div data-line-number="209" class="react-line-number react-code-text" style="padding-right:16px">209</div><div data-line-number="210" class="react-line-number react-code-text" style="padding-right:16px">210</div><div data-line-number="211" class="react-line-number react-code-text" style="padding-right:16px">211</div><div data-line-number="212" class="react-line-number react-code-text" style="padding-right:16px">212</div><div data-line-number="213" class="react-line-number react-code-text" style="padding-right:16px">213</div><div data-line-number="214" class="react-line-number react-code-text" style="padding-right:16px">214</div><div data-line-number="215" class="react-line-number react-code-text" style="padding-right:16px">215</div><div data-line-number="216" class="react-line-number react-code-text" style="padding-right:16px">216</div><div data-line-number="217" class="react-line-number react-code-text" style="padding-right:16px">217</div><div data-line-number="218" class="react-line-number react-code-text" style="padding-right:16px">218</div><div data-line-number="219" class="react-line-number react-code-text" style="padding-right:16px">219</div><div data-line-number="220" class="react-line-number react-code-text" style="padding-right:16px">220</div><div data-line-number="221" class="react-line-number react-code-text" style="padding-right:16px">221</div><div data-line-number="222" class="react-line-number react-code-text" style="padding-right:16px">222</div><div data-line-number="223" class="react-line-number react-code-text" style="padding-right:16px">223</div><div data-line-number="224" class="react-line-number react-code-text" style="padding-right:16px">224</div><div data-line-number="225" class="react-line-number react-code-text" style="padding-right:16px">225</div><div data-line-number="226" class="react-line-number react-code-text" style="padding-right:16px">226</div><div data-line-number="227" class="react-line-number react-code-text" style="padding-right:16px">227</div><div data-line-number="228" class="react-line-number react-code-text" style="padding-right:16px">228</div><div data-line-number="229" class="react-line-number react-code-text" style="padding-right:16px">229</div><div data-line-number="230" class="react-line-number react-code-text" style="padding-right:16px">230</div><div data-line-number="231" class="react-line-number react-code-text" style="padding-right:16px">231</div><div data-line-number="232" class="react-line-number react-code-text" style="padding-right:16px">232</div><div data-line-number="233" class="react-line-number react-code-text" style="padding-right:16px">233</div><div data-line-number="234" class="react-line-number react-code-text" style="padding-right:16px">234</div><div data-line-number="235" class="react-line-number react-code-text" style="padding-right:16px">235</div><div data-line-number="236" class="react-line-number react-code-text" style="padding-right:16px">236</div><div data-line-number="237" class="react-line-number react-code-text" style="padding-right:16px">237</div><div data-line-number="238" class="react-line-number react-code-text" style="padding-right:16px">238</div><div data-line-number="239" class="react-line-number react-code-text" style="padding-right:16px">239</div><div data-line-number="240" class="react-line-number react-code-text" style="padding-right:16px">240</div><div data-line-number="241" class="react-line-number react-code-text" style="padding-right:16px">241</div><div data-line-number="242" class="react-line-number react-code-text" style="padding-right:16px">242</div><div data-line-number="243" class="react-line-number react-code-text" style="padding-right:16px">243</div><div data-line-number="244" class="react-line-number react-code-text" style="padding-right:16px">244</div><div data-line-number="245" class="react-line-number react-code-text" style="padding-right:16px">245</div><div data-line-number="246" class="react-line-number react-code-text" style="padding-right:16px">246</div><div data-line-number="247" class="react-line-number react-code-text" style="padding-right:16px">247</div><div data-line-number="248" class="react-line-number react-code-text" style="padding-right:16px">248</div><div data-line-number="249" class="react-line-number react-code-text" style="padding-right:16px">249</div><div data-line-number="250" class="react-line-number react-code-text" style="padding-right:16px">250</div><div data-line-number="251" class="react-line-number react-code-text" style="padding-right:16px">251</div><div data-line-number="252" class="react-line-number react-code-text" style="padding-right:16px">252</div><div data-line-number="253" class="react-line-number react-code-text" style="padding-right:16px">253</div><div data-line-number="254" class="react-line-number react-code-text" style="padding-right:16px">254</div><div data-line-number="255" class="react-line-number react-code-text" style="padding-right:16px">255</div><div data-line-number="256" class="react-line-number react-code-text" style="padding-right:16px">256</div><div data-line-number="257" class="react-line-number react-code-text" style="padding-right:16px">257</div><div data-line-number="258" class="react-line-number react-code-text" style="padding-right:16px">258</div><div data-line-number="259" class="react-line-number react-code-text" style="padding-right:16px">259</div><div data-line-number="260" class="react-line-number react-code-text" style="padding-right:16px">260</div><div data-line-number="261" class="react-line-number react-code-text" style="padding-right:16px">261</div><div data-line-number="262" class="react-line-number react-code-text" style="padding-right:16px">262</div><div data-line-number="263" class="react-line-number react-code-text" style="padding-right:16px">263</div><div data-line-number="264" class="react-line-number react-code-text" style="padding-right:16px">264</div><div data-line-number="265" class="react-line-number react-code-text" style="padding-right:16px">265</div><div data-line-number="266" class="react-line-number react-code-text" style="padding-right:16px">266</div><div data-line-number="267" class="react-line-number react-code-text" style="padding-right:16px">267</div><div data-line-number="268" class="react-line-number react-code-text" style="padding-right:16px">268</div><div data-line-number="269" class="react-line-number react-code-text" style="padding-right:16px">269</div><div data-line-number="270" class="react-line-number react-code-text" style="padding-right:16px">270</div><div data-line-number="271" class="react-line-number react-code-text" style="padding-right:16px">271</div><div data-line-number="272" class="react-line-number react-code-text" style="padding-right:16px">272</div><div data-line-number="273" class="react-line-number react-code-text" style="padding-right:16px">273</div><div data-line-number="274" class="react-line-number react-code-text" style="padding-right:16px">274</div><div data-line-number="275" class="react-line-number react-code-text" style="padding-right:16px">275</div><div data-line-number="276" class="react-line-number react-code-text" style="padding-right:16px">276</div><div data-line-number="277" class="react-line-number react-code-text" style="padding-right:16px">277</div><div data-line-number="278" class="react-line-number react-code-text" style="padding-right:16px">278</div><div data-line-number="279" class="react-line-number react-code-text" style="padding-right:16px">279</div><div data-line-number="280" class="react-line-number react-code-text" style="padding-right:16px">280</div><div data-line-number="281" class="react-line-number react-code-text" style="padding-right:16px">281</div><div data-line-number="282" class="react-line-number react-code-text" style="padding-right:16px">282</div><div data-line-number="283" class="react-line-number react-code-text" style="padding-right:16px">283</div><div data-line-number="284" class="react-line-number react-code-text" style="padding-right:16px">284</div><div data-line-number="285" class="react-line-number react-code-text" style="padding-right:16px">285</div><div data-line-number="286" class="react-line-number react-code-text" style="padding-right:16px">286</div><div data-line-number="287" class="react-line-number react-code-text" style="padding-right:16px">287</div><div data-line-number="288" class="react-line-number react-code-text" style="padding-right:16px">288</div><div data-line-number="289" class="react-line-number react-code-text" style="padding-right:16px">289</div><div data-line-number="290" class="react-line-number react-code-text" style="padding-right:16px">290</div><div data-line-number="291" class="react-line-number react-code-text" style="padding-right:16px">291</div><div data-line-number="292" class="react-line-number react-code-text" style="padding-right:16px">292</div><div data-line-number="293" class="react-line-number react-code-text" style="padding-right:16px">293</div><div data-line-number="294" class="react-line-number react-code-text" style="padding-right:16px">294</div><div data-line-number="295" class="react-line-number react-code-text" style="padding-right:16px">295</div><div data-line-number="296" class="react-line-number react-code-text" style="padding-right:16px">296</div><div data-line-number="297" class="react-line-number react-code-text" style="padding-right:16px">297</div><div data-line-number="298" class="react-line-number react-code-text" style="padding-right:16px">298</div><div data-line-number="299" class="react-line-number react-code-text" style="padding-right:16px">299</div><div data-line-number="300" class="react-line-number react-code-text" style="padding-right:16px">300</div><div data-line-number="301" class="react-line-number react-code-text" style="padding-right:16px">301</div><div data-line-number="302" class="react-line-number react-code-text" style="padding-right:16px">302</div><div data-line-number="303" class="react-line-number react-code-text" style="padding-right:16px">303</div><div data-line-number="304" class="react-line-number react-code-text" style="padding-right:16px">304</div><div data-line-number="305" class="react-line-number react-code-text" style="padding-right:16px">305</div><div data-line-number="306" class="react-line-number react-code-text" style="padding-right:16px">306</div><div data-line-number="307" class="react-line-number react-code-text" style="padding-right:16px">307</div><div data-line-number="308" class="react-line-number react-code-text" style="padding-right:16px">308</div><div data-line-number="309" class="react-line-number react-code-text" style="padding-right:16px">309</div><div data-line-number="310" class="react-line-number react-code-text" style="padding-right:16px">310</div><div data-line-number="311" class="react-line-number react-code-text" style="padding-right:16px">311</div><div data-line-number="312" class="react-line-number react-code-text" style="padding-right:16px">312</div><div data-line-number="313" class="react-line-number react-code-text" style="padding-right:16px">313</div><div data-line-number="314" class="react-line-number react-code-text" style="padding-right:16px">314</div><div data-line-number="315" class="react-line-number react-code-text" style="padding-right:16px">315</div><div data-line-number="316" class="react-line-number react-code-text" style="padding-right:16px">316</div><div data-line-number="317" class="react-line-number react-code-text" style="padding-right:16px">317</div><div data-line-number="318" class="react-line-number react-code-text" style="padding-right:16px">318</div><div data-line-number="319" class="react-line-number react-code-text" style="padding-right:16px">319</div><div data-line-number="320" class="react-line-number react-code-text" style="padding-right:16px">320</div><div data-line-number="321" class="react-line-number react-code-text" style="padding-right:16px">321</div><div data-line-number="322" class="react-line-number react-code-text" style="padding-right:16px">322</div><div data-line-number="323" class="react-line-number react-code-text" style="padding-right:16px">323</div><div data-line-number="324" class="react-line-number react-code-text" style="padding-right:16px">324</div><div data-line-number="325" class="react-line-number react-code-text" style="padding-right:16px">325</div><div data-line-number="326" class="react-line-number react-code-text" style="padding-right:16px">326</div><div data-line-number="327" class="react-line-number react-code-text" style="padding-right:16px">327</div><div data-line-number="328" class="react-line-number react-code-text" style="padding-right:16px">328</div><div data-line-number="329" class="react-line-number react-code-text" style="padding-right:16px">329</div><div data-line-number="330" class="react-line-number react-code-text" style="padding-right:16px">330</div><div data-line-number="331" class="react-line-number react-code-text" style="padding-right:16px">331</div><div data-line-number="332" class="react-line-number react-code-text" style="padding-right:16px">332</div><div data-line-number="333" class="react-line-number react-code-text" style="padding-right:16px">333</div><div data-line-number="334" class="react-line-number react-code-text" style="padding-right:16px">334</div><div data-line-number="335" class="react-line-number react-code-text" style="padding-right:16px">335</div><div data-line-number="336" class="react-line-number react-code-text" style="padding-right:16px">336</div><div data-line-number="337" class="react-line-number react-code-text" style="padding-right:16px">337</div><div data-line-number="338" class="react-line-number react-code-text" style="padding-right:16px">338</div><div data-line-number="339" class="react-line-number react-code-text" style="padding-right:16px">339</div><div data-line-number="340" class="react-line-number react-code-text" style="padding-right:16px">340</div><div data-line-number="341" class="react-line-number react-code-text" style="padding-right:16px">341</div><div data-line-number="342" class="react-line-number react-code-text" style="padding-right:16px">342</div><div data-line-number="343" class="react-line-number react-code-text" style="padding-right:16px">343</div><div data-line-number="344" class="react-line-number react-code-text" style="padding-right:16px">344</div><div data-line-number="345" class="react-line-number react-code-text" style="padding-right:16px">345</div><div data-line-number="346" class="react-line-number react-code-text" style="padding-right:16px">346</div><div data-line-number="347" class="react-line-number react-code-text" style="padding-right:16px">347</div><div data-line-number="348" class="react-line-number react-code-text" style="padding-right:16px">348</div><div data-line-number="349" class="react-line-number react-code-text" style="padding-right:16px">349</div><div data-line-number="350" class="react-line-number react-code-text" style="padding-right:16px">350</div><div data-line-number="351" class="react-line-number react-code-text" style="padding-right:16px">351</div><div data-line-number="352" class="react-line-number react-code-text" style="padding-right:16px">352</div><div data-line-number="353" class="react-line-number react-code-text" style="padding-right:16px">353</div><div data-line-number="354" class="react-line-number react-code-text" style="padding-right:16px">354</div><div data-line-number="355" class="react-line-number react-code-text" style="padding-right:16px">355</div><div data-line-number="356" class="react-line-number react-code-text" style="padding-right:16px">356</div><div data-line-number="357" class="react-line-number react-code-text" style="padding-right:16px">357</div><div data-line-number="358" class="react-line-number react-code-text" style="padding-right:16px">358</div><div data-line-number="359" class="react-line-number react-code-text" style="padding-right:16px">359</div><div data-line-number="360" class="react-line-number react-code-text" style="padding-right:16px">360</div><div data-line-number="361" class="react-line-number react-code-text" style="padding-right:16px">361</div><div data-line-number="362" class="react-line-number react-code-text" style="padding-right:16px">362</div><div data-line-number="363" class="react-line-number react-code-text" style="padding-right:16px">363</div><div data-line-number="364" class="react-line-number react-code-text" style="padding-right:16px">364</div><div data-line-number="365" class="react-line-number react-code-text" style="padding-right:16px">365</div><div data-line-number="366" class="react-line-number react-code-text" style="padding-right:16px">366</div><div data-line-number="367" class="react-line-number react-code-text" style="padding-right:16px">367</div><div data-line-number="368" class="react-line-number react-code-text" style="padding-right:16px">368</div><div data-line-number="369" class="react-line-number react-code-text" style="padding-right:16px">369</div><div data-line-number="370" class="react-line-number react-code-text" style="padding-right:16px">370</div><div data-line-number="371" class="react-line-number react-code-text" style="padding-right:16px">371</div><div data-line-number="372" class="react-line-number react-code-text" style="padding-right:16px">372</div><div data-line-number="373" class="react-line-number react-code-text" style="padding-right:16px">373</div><div data-line-number="374" class="react-line-number react-code-text" style="padding-right:16px">374</div><div data-line-number="375" class="react-line-number react-code-text" style="padding-right:16px">375</div><div data-line-number="376" class="react-line-number react-code-text" style="padding-right:16px">376</div><div data-line-number="377" class="react-line-number react-code-text" style="padding-right:16px">377</div><div data-line-number="378" class="react-line-number react-code-text" style="padding-right:16px">378</div><div data-line-number="379" class="react-line-number react-code-text" style="padding-right:16px">379</div><div data-line-number="380" class="react-line-number react-code-text" style="padding-right:16px">380</div><div data-line-number="381" class="react-line-number react-code-text" style="padding-right:16px">381</div><div data-line-number="382" class="react-line-number react-code-text" style="padding-right:16px">382</div><div data-line-number="383" class="react-line-number react-code-text" style="padding-right:16px">383</div><div data-line-number="384" class="react-line-number react-code-text" style="padding-right:16px">384</div><div data-line-number="385" class="react-line-number react-code-text" style="padding-right:16px">385</div><div data-line-number="386" class="react-line-number react-code-text" style="padding-right:16px">386</div><div data-line-number="387" class="react-line-number react-code-text" style="padding-right:16px">387</div><div data-line-number="388" class="react-line-number react-code-text" style="padding-right:16px">388</div><div data-line-number="389" class="react-line-number react-code-text" style="padding-right:16px">389</div><div data-line-number="390" class="react-line-number react-code-text" style="padding-right:16px">390</div><div data-line-number="391" class="react-line-number react-code-text" style="padding-right:16px">391</div><div data-line-number="392" class="react-line-number react-code-text" style="padding-right:16px">392</div><div data-line-number="393" class="react-line-number react-code-text" style="padding-right:16px">393</div><div data-line-number="394" class="react-line-number react-code-text" style="padding-right:16px">394</div><div data-line-number="395" class="react-line-number react-code-text" style="padding-right:16px">395</div><div data-line-number="396" class="react-line-number react-code-text" style="padding-right:16px">396</div><div data-line-number="397" class="react-line-number react-code-text" style="padding-right:16px">397</div><div data-line-number="398" class="react-line-number react-code-text" style="padding-right:16px">398</div><div data-line-number="399" class="react-line-number react-code-text" style="padding-right:16px">399</div><div data-line-number="400" class="react-line-number react-code-text" style="padding-right:16px">400</div><div data-line-number="401" class="react-line-number react-code-text" style="padding-right:16px">401</div><div data-line-number="402" class="react-line-number react-code-text" style="padding-right:16px">402</div><div data-line-number="403" class="react-line-number react-code-text" style="padding-right:16px">403</div><div data-line-number="404" class="react-line-number react-code-text" style="padding-right:16px">404</div><div data-line-number="405" class="react-line-number react-code-text" style="padding-right:16px">405</div><div data-line-number="406" class="react-line-number react-code-text" style="padding-right:16px">406</div><div data-line-number="407" class="react-line-number react-code-text" style="padding-right:16px">407</div><div data-line-number="408" class="react-line-number react-code-text" style="padding-right:16px">408</div><div data-line-number="409" class="react-line-number react-code-text" style="padding-right:16px">409</div><div data-line-number="410" class="react-line-number react-code-text" style="padding-right:16px">410</div><div data-line-number="411" class="react-line-number react-code-text" style="padding-right:16px">411</div><div data-line-number="412" class="react-line-number react-code-text" style="padding-right:16px">412</div><div data-line-number="413" class="react-line-number react-code-text" style="padding-right:16px">413</div><div data-line-number="414" class="react-line-number react-code-text" style="padding-right:16px">414</div><div data-line-number="415" class="react-line-number react-code-text" style="padding-right:16px">415</div><div data-line-number="416" class="react-line-number react-code-text" style="padding-right:16px">416</div><div data-line-number="417" class="react-line-number react-code-text" style="padding-right:16px">417</div><div data-line-number="418" class="react-line-number react-code-text" style="padding-right:16px">418</div><div data-line-number="419" class="react-line-number react-code-text" style="padding-right:16px">419</div><div data-line-number="420" class="react-line-number react-code-text" style="padding-right:16px">420</div><div data-line-number="421" class="react-line-number react-code-text" style="padding-right:16px">421</div><div data-line-number="422" class="react-line-number react-code-text" style="padding-right:16px">422</div><div data-line-number="423" class="react-line-number react-code-text" style="padding-right:16px">423</div><div data-line-number="424" class="react-line-number react-code-text" style="padding-right:16px">424</div><div data-line-number="425" class="react-line-number react-code-text" style="padding-right:16px">425</div><div data-line-number="426" class="react-line-number react-code-text" style="padding-right:16px">426</div><div data-line-number="427" class="react-line-number react-code-text" style="padding-right:16px">427</div><div data-line-number="428" class="react-line-number react-code-text" style="padding-right:16px">428</div><div data-line-number="429" class="react-line-number react-code-text" style="padding-right:16px">429</div><div data-line-number="430" class="react-line-number react-code-text" style="padding-right:16px">430</div><div data-line-number="431" class="react-line-number react-code-text" style="padding-right:16px">431</div><div data-line-number="432" class="react-line-number react-code-text" style="padding-right:16px">432</div><div data-line-number="433" class="react-line-number react-code-text" style="padding-right:16px">433</div><div data-line-number="434" class="react-line-number react-code-text" style="padding-right:16px">434</div><div data-line-number="435" class="react-line-number react-code-text" style="padding-right:16px">435</div><div data-line-number="436" class="react-line-number react-code-text" style="padding-right:16px">436</div><div data-line-number="437" class="react-line-number react-code-text" style="padding-right:16px">437</div><div data-line-number="438" class="react-line-number react-code-text" style="padding-right:16px">438</div><div data-line-number="439" class="react-line-number react-code-text" style="padding-right:16px">439</div><div data-line-number="440" class="react-line-number react-code-text" style="padding-right:16px">440</div><div data-line-number="441" class="react-line-number react-code-text" style="padding-right:16px">441</div><div data-line-number="442" class="react-line-number react-code-text" style="padding-right:16px">442</div><div data-line-number="443" class="react-line-number react-code-text" style="padding-right:16px">443</div><div data-line-number="444" class="react-line-number react-code-text" style="padding-right:16px">444</div><div data-line-number="445" class="react-line-number react-code-text" style="padding-right:16px">445</div><div data-line-number="446" class="react-line-number react-code-text" style="padding-right:16px">446</div><div data-line-number="447" class="react-line-number react-code-text" style="padding-right:16px">447</div><div data-line-number="448" class="react-line-number react-code-text" style="padding-right:16px">448</div><div data-line-number="449" class="react-line-number react-code-text" style="padding-right:16px">449</div><div data-line-number="450" class="react-line-number react-code-text" style="padding-right:16px">450</div><div data-line-number="451" class="react-line-number react-code-text" style="padding-right:16px">451</div><div data-line-number="452" class="react-line-number react-code-text" style="padding-right:16px">452</div><div data-line-number="453" class="react-line-number react-code-text" style="padding-right:16px">453</div><div data-line-number="454" class="react-line-number react-code-text" style="padding-right:16px">454</div><div data-line-number="455" class="react-line-number react-code-text" style="padding-right:16px">455</div><div data-line-number="456" class="react-line-number react-code-text" style="padding-right:16px">456</div><div data-line-number="457" class="react-line-number react-code-text" style="padding-right:16px">457</div><div data-line-number="458" class="react-line-number react-code-text" style="padding-right:16px">458</div><div data-line-number="459" class="react-line-number react-code-text" style="padding-right:16px">459</div><div data-line-number="460" class="react-line-number react-code-text" style="padding-right:16px">460</div><div data-line-number="461" class="react-line-number react-code-text" style="padding-right:16px">461</div><div data-line-number="462" class="react-line-number react-code-text" style="padding-right:16px">462</div><div data-line-number="463" class="react-line-number react-code-text" style="padding-right:16px">463</div><div data-line-number="464" class="react-line-number react-code-text" style="padding-right:16px">464</div><div data-line-number="465" class="react-line-number react-code-text" style="padding-right:16px">465</div><div data-line-number="466" class="react-line-number react-code-text" style="padding-right:16px">466</div><div data-line-number="467" class="react-line-number react-code-text" style="padding-right:16px">467</div><div data-line-number="468" class="react-line-number react-code-text" style="padding-right:16px">468</div><div data-line-number="469" class="react-line-number react-code-text" style="padding-right:16px">469</div><div data-line-number="470" class="react-line-number react-code-text" style="padding-right:16px">470</div><div data-line-number="471" class="react-line-number react-code-text" style="padding-right:16px">471</div><div data-line-number="472" class="react-line-number react-code-text" style="padding-right:16px">472</div><div data-line-number="473" class="react-line-number react-code-text" style="padding-right:16px">473</div><div data-line-number="474" class="react-line-number react-code-text" style="padding-right:16px">474</div><div data-line-number="475" class="react-line-number react-code-text" style="padding-right:16px">475</div><div data-line-number="476" class="react-line-number react-code-text" style="padding-right:16px">476</div><div data-line-number="477" class="react-line-number react-code-text" style="padding-right:16px">477</div><div data-line-number="478" class="react-line-number react-code-text" style="padding-right:16px">478</div><div data-line-number="479" class="react-line-number react-code-text" style="padding-right:16px">479</div><div data-line-number="480" class="react-line-number react-code-text" style="padding-right:16px">480</div><div data-line-number="481" class="react-line-number react-code-text" style="padding-right:16px">481</div><div data-line-number="482" class="react-line-number react-code-text" style="padding-right:16px">482</div><div data-line-number="483" class="react-line-number react-code-text" style="padding-right:16px">483</div><div data-line-number="484" class="react-line-number react-code-text" style="padding-right:16px">484</div><div data-line-number="485" class="react-line-number react-code-text" style="padding-right:16px">485</div><div data-line-number="486" class="react-line-number react-code-text" style="padding-right:16px">486</div><div data-line-number="487" class="react-line-number react-code-text" style="padding-right:16px">487</div><div data-line-number="488" class="react-line-number react-code-text" style="padding-right:16px">488</div><div data-line-number="489" class="react-line-number react-code-text" style="padding-right:16px">489</div><div data-line-number="490" class="react-line-number react-code-text" style="padding-right:16px">490</div><div data-line-number="491" class="react-line-number react-code-text" style="padding-right:16px">491</div><div data-line-number="492" class="react-line-number react-code-text" style="padding-right:16px">492</div><div data-line-number="493" class="react-line-number react-code-text" style="padding-right:16px">493</div><div data-line-number="494" class="react-line-number react-code-text" style="padding-right:16px">494</div><div data-line-number="495" class="react-line-number react-code-text" style="padding-right:16px">495</div><div data-line-number="496" class="react-line-number react-code-text" style="padding-right:16px">496</div><div data-line-number="497" class="react-line-number react-code-text" style="padding-right:16px">497</div><div data-line-number="498" class="react-line-number react-code-text" style="padding-right:16px">498</div><div data-line-number="499" class="react-line-number react-code-text" style="padding-right:16px">499</div><div data-line-number="500" class="react-line-number react-code-text" style="padding-right:16px">500</div><div data-line-number="501" class="react-line-number react-code-text" style="padding-right:16px">501</div><div data-line-number="502" class="react-line-number react-code-text" style="padding-right:16px">502</div><div data-line-number="503" class="react-line-number react-code-text" style="padding-right:16px">503</div><div data-line-number="504" class="react-line-number react-code-text" style="padding-right:16px">504</div><div data-line-number="505" class="react-line-number react-code-text" style="padding-right:16px">505</div><div data-line-number="506" class="react-line-number react-code-text" style="padding-right:16px">506</div><div data-line-number="507" class="react-line-number react-code-text" style="padding-right:16px">507</div><div data-line-number="508" class="react-line-number react-code-text" style="padding-right:16px">508</div><div data-line-number="509" class="react-line-number react-code-text" style="padding-right:16px">509</div><div data-line-number="510" class="react-line-number react-code-text" style="padding-right:16px">510</div><div data-line-number="511" class="react-line-number react-code-text" style="padding-right:16px">511</div><div data-line-number="512" class="react-line-number react-code-text" style="padding-right:16px">512</div><div data-line-number="513" class="react-line-number react-code-text" style="padding-right:16px">513</div><div data-line-number="514" class="react-line-number react-code-text" style="padding-right:16px">514</div><div data-line-number="515" class="react-line-number react-code-text" style="padding-right:16px">515</div><div data-line-number="516" class="react-line-number react-code-text" style="padding-right:16px">516</div><div data-line-number="517" class="react-line-number react-code-text" style="padding-right:16px">517</div><div data-line-number="518" class="react-line-number react-code-text" style="padding-right:16px">518</div><div data-line-number="519" class="react-line-number react-code-text" style="padding-right:16px">519</div><div data-line-number="520" class="react-line-number react-code-text" style="padding-right:16px">520</div><div data-line-number="521" class="react-line-number react-code-text" style="padding-right:16px">521</div><div data-line-number="522" class="react-line-number react-code-text" style="padding-right:16px">522</div><div data-line-number="523" class="react-line-number react-code-text" style="padding-right:16px">523</div><div data-line-number="524" class="react-line-number react-code-text" style="padding-right:16px">524</div><div data-line-number="525" class="react-line-number react-code-text" style="padding-right:16px">525</div><div data-line-number="526" class="react-line-number react-code-text" style="padding-right:16px">526</div><div data-line-number="527" class="react-line-number react-code-text" style="padding-right:16px">527</div><div data-line-number="528" class="react-line-number react-code-text" style="padding-right:16px">528</div><div data-line-number="529" class="react-line-number react-code-text" style="padding-right:16px">529</div><div data-line-number="530" class="react-line-number react-code-text" style="padding-right:16px">530</div><div data-line-number="531" class="react-line-number react-code-text" style="padding-right:16px">531</div><div data-line-number="532" class="react-line-number react-code-text" style="padding-right:16px">532</div><div data-line-number="533" class="react-line-number react-code-text" style="padding-right:16px">533</div><div data-line-number="534" class="react-line-number react-code-text" style="padding-right:16px">534</div><div data-line-number="535" class="react-line-number react-code-text" style="padding-right:16px">535</div><div data-line-number="536" class="react-line-number react-code-text" style="padding-right:16px">536</div><div data-line-number="537" class="react-line-number react-code-text" style="padding-right:16px">537</div><div data-line-number="538" class="react-line-number react-code-text" style="padding-right:16px">538</div><div data-line-number="539" class="react-line-number react-code-text" style="padding-right:16px">539</div><div data-line-number="540" class="react-line-number react-code-text" style="padding-right:16px">540</div><div data-line-number="541" class="react-line-number react-code-text" style="padding-right:16px">541</div><div data-line-number="542" class="react-line-number react-code-text" style="padding-right:16px">542</div><div data-line-number="543" class="react-line-number react-code-text" style="padding-right:16px">543</div><div data-line-number="544" class="react-line-number react-code-text" style="padding-right:16px">544</div><div data-line-number="545" class="react-line-number react-code-text" style="padding-right:16px">545</div><div data-line-number="546" class="react-line-number react-code-text" style="padding-right:16px">546</div><div data-line-number="547" class="react-line-number react-code-text" style="padding-right:16px">547</div><div data-line-number="548" class="react-line-number react-code-text" style="padding-right:16px">548</div><div data-line-number="549" class="react-line-number react-code-text" style="padding-right:16px">549</div><div data-line-number="550" class="react-line-number react-code-text" style="padding-right:16px">550</div><div data-line-number="551" class="react-line-number react-code-text" style="padding-right:16px">551</div><div data-line-number="552" class="react-line-number react-code-text" style="padding-right:16px">552</div><div data-line-number="553" class="react-line-number react-code-text" style="padding-right:16px">553</div><div data-line-number="554" class="react-line-number react-code-text" style="padding-right:16px">554</div><div data-line-number="555" class="react-line-number react-code-text" style="padding-right:16px">555</div><div data-line-number="556" class="react-line-number react-code-text" style="padding-right:16px">556</div><div data-line-number="557" class="react-line-number react-code-text" style="padding-right:16px">557</div><div data-line-number="558" class="react-line-number react-code-text" style="padding-right:16px">558</div><div data-line-number="559" class="react-line-number react-code-text" style="padding-right:16px">559</div><div data-line-number="560" class="react-line-number react-code-text" style="padding-right:16px">560</div><div data-line-number="561" class="react-line-number react-code-text" style="padding-right:16px">561</div><div data-line-number="562" class="react-line-number react-code-text" style="padding-right:16px">562</div><div data-line-number="563" class="react-line-number react-code-text" style="padding-right:16px">563</div><div data-line-number="564" class="react-line-number react-code-text" style="padding-right:16px">564</div><div data-line-number="565" class="react-line-number react-code-text" style="padding-right:16px">565</div><div data-line-number="566" class="react-line-number react-code-text" style="padding-right:16px">566</div><div data-line-number="567" class="react-line-number react-code-text" style="padding-right:16px">567</div><div data-line-number="568" class="react-line-number react-code-text" style="padding-right:16px">568</div><div data-line-number="569" class="react-line-number react-code-text" style="padding-right:16px">569</div><div data-line-number="570" class="react-line-number react-code-text" style="padding-right:16px">570</div><div data-line-number="571" class="react-line-number react-code-text" style="padding-right:16px">571</div><div data-line-number="572" class="react-line-number react-code-text" style="padding-right:16px">572</div><div data-line-number="573" class="react-line-number react-code-text" style="padding-right:16px">573</div><div data-line-number="574" class="react-line-number react-code-text" style="padding-right:16px">574</div><div data-line-number="575" class="react-line-number react-code-text" style="padding-right:16px">575</div><div data-line-number="576" class="react-line-number react-code-text" style="padding-right:16px">576</div><div data-line-number="577" class="react-line-number react-code-text" style="padding-right:16px">577</div><div data-line-number="578" class="react-line-number react-code-text" style="padding-right:16px">578</div><div data-line-number="579" class="react-line-number react-code-text" style="padding-right:16px">579</div><div data-line-number="580" class="react-line-number react-code-text" style="padding-right:16px">580</div><div data-line-number="581" class="react-line-number react-code-text" style="padding-right:16px">581</div><div data-line-number="582" class="react-line-number react-code-text" style="padding-right:16px">582</div><div data-line-number="583" class="react-line-number react-code-text" style="padding-right:16px">583</div><div data-line-number="584" class="react-line-number react-code-text" style="padding-right:16px">584</div><div data-line-number="585" class="react-line-number react-code-text" style="padding-right:16px">585</div><div data-line-number="586" class="react-line-number react-code-text" style="padding-right:16px">586</div><div data-line-number="587" class="react-line-number react-code-text" style="padding-right:16px">587</div><div data-line-number="588" class="react-line-number react-code-text" style="padding-right:16px">588</div><div data-line-number="589" class="react-line-number react-code-text" style="padding-right:16px">589</div><div data-line-number="590" class="react-line-number react-code-text" style="padding-right:16px">590</div><div data-line-number="591" class="react-line-number react-code-text" style="padding-right:16px">591</div><div data-line-number="592" class="react-line-number react-code-text" style="padding-right:16px">592</div><div data-line-number="593" class="react-line-number react-code-text" style="padding-right:16px">593</div><div data-line-number="594" class="react-line-number react-code-text" style="padding-right:16px">594</div><div data-line-number="595" class="react-line-number react-code-text" style="padding-right:16px">595</div><div data-line-number="596" class="react-line-number react-code-text" style="padding-right:16px">596</div><div data-line-number="597" class="react-line-number react-code-text" style="padding-right:16px">597</div><div data-line-number="598" class="react-line-number react-code-text" style="padding-right:16px">598</div><div data-line-number="599" class="react-line-number react-code-text" style="padding-right:16px">599</div><div data-line-number="600" class="react-line-number react-code-text" style="padding-right:16px">600</div><div data-line-number="601" class="react-line-number react-code-text" style="padding-right:16px">601</div><div data-line-number="602" class="react-line-number react-code-text" style="padding-right:16px">602</div><div data-line-number="603" class="react-line-number react-code-text" style="padding-right:16px">603</div><div data-line-number="604" class="react-line-number react-code-text" style="padding-right:16px">604</div><div data-line-number="605" class="react-line-number react-code-text" style="padding-right:16px">605</div><div data-line-number="606" class="react-line-number react-code-text" style="padding-right:16px">606</div><div data-line-number="607" class="react-line-number react-code-text" style="padding-right:16px">607</div><div data-line-number="608" class="react-line-number react-code-text" style="padding-right:16px">608</div><div data-line-number="609" class="react-line-number react-code-text" style="padding-right:16px">609</div><div data-line-number="610" class="react-line-number react-code-text" style="padding-right:16px">610</div><div data-line-number="611" class="react-line-number react-code-text" style="padding-right:16px">611</div><div data-line-number="612" class="react-line-number react-code-text" style="padding-right:16px">612</div><div data-line-number="613" class="react-line-number react-code-text" style="padding-right:16px">613</div><div data-line-number="614" class="react-line-number react-code-text" style="padding-right:16px">614</div><div data-line-number="615" class="react-line-number react-code-text" style="padding-right:16px">615</div><div data-line-number="616" class="react-line-number react-code-text" style="padding-right:16px">616</div><div data-line-number="617" class="react-line-number react-code-text" style="padding-right:16px">617</div><div data-line-number="618" class="react-line-number react-code-text" style="padding-right:16px">618</div><div data-line-number="619" class="react-line-number react-code-text" style="padding-right:16px">619</div><div data-line-number="620" class="react-line-number react-code-text" style="padding-right:16px">620</div><div data-line-number="621" class="react-line-number react-code-text" style="padding-right:16px">621</div><div data-line-number="622" class="react-line-number react-code-text" style="padding-right:16px">622</div><div data-line-number="623" class="react-line-number react-code-text" style="padding-right:16px">623</div><div data-line-number="624" class="react-line-number react-code-text" style="padding-right:16px">624</div><div data-line-number="625" class="react-line-number react-code-text" style="padding-right:16px">625</div><div data-line-number="626" class="react-line-number react-code-text" style="padding-right:16px">626</div><div data-line-number="627" class="react-line-number react-code-text" style="padding-right:16px">627</div><div data-line-number="628" class="react-line-number react-code-text" style="padding-right:16px">628</div><div data-line-number="629" class="react-line-number react-code-text" style="padding-right:16px">629</div><div data-line-number="630" class="react-line-number react-code-text" style="padding-right:16px">630</div><div data-line-number="631" class="react-line-number react-code-text" style="padding-right:16px">631</div><div data-line-number="632" class="react-line-number react-code-text" style="padding-right:16px">632</div><div data-line-number="633" class="react-line-number react-code-text" style="padding-right:16px">633</div><div data-line-number="634" class="react-line-number react-code-text" style="padding-right:16px">634</div><div data-line-number="635" class="react-line-number react-code-text" style="padding-right:16px">635</div><div data-line-number="636" class="react-line-number react-code-text" style="padding-right:16px">636</div><div data-line-number="637" class="react-line-number react-code-text" style="padding-right:16px">637</div><div data-line-number="638" class="react-line-number react-code-text" style="padding-right:16px">638</div><div data-line-number="639" class="react-line-number react-code-text" style="padding-right:16px">639</div><div data-line-number="640" class="react-line-number react-code-text" style="padding-right:16px">640</div><div data-line-number="641" class="react-line-number react-code-text" style="padding-right:16px">641</div><div data-line-number="642" class="react-line-number react-code-text" style="padding-right:16px">642</div><div data-line-number="643" class="react-line-number react-code-text" style="padding-right:16px">643</div><div data-line-number="644" class="react-line-number react-code-text" style="padding-right:16px">644</div><div data-line-number="645" class="react-line-number react-code-text" style="padding-right:16px">645</div><div data-line-number="646" class="react-line-number react-code-text" style="padding-right:16px">646</div><div data-line-number="647" class="react-line-number react-code-text" style="padding-right:16px">647</div><div data-line-number="648" class="react-line-number react-code-text" style="padding-right:16px">648</div><div data-line-number="649" class="react-line-number react-code-text" style="padding-right:16px">649</div><div data-line-number="650" class="react-line-number react-code-text" style="padding-right:16px">650</div><div data-line-number="651" class="react-line-number react-code-text" style="padding-right:16px">651</div><div data-line-number="652" class="react-line-number react-code-text" style="padding-right:16px">652</div><div data-line-number="653" class="react-line-number react-code-text" style="padding-right:16px">653</div><div data-line-number="654" class="react-line-number react-code-text" style="padding-right:16px">654</div><div data-line-number="655" class="react-line-number react-code-text" style="padding-right:16px">655</div><div data-line-number="656" class="react-line-number react-code-text" style="padding-right:16px">656</div><div data-line-number="657" class="react-line-number react-code-text" style="padding-right:16px">657</div><div data-line-number="658" class="react-line-number react-code-text" style="padding-right:16px">658</div><div data-line-number="659" class="react-line-number react-code-text" style="padding-right:16px">659</div><div data-line-number="660" class="react-line-number react-code-text" style="padding-right:16px">660</div><div data-line-number="661" class="react-line-number react-code-text" style="padding-right:16px">661</div><div data-line-number="662" class="react-line-number react-code-text" style="padding-right:16px">662</div><div data-line-number="663" class="react-line-number react-code-text" style="padding-right:16px">663</div><div data-line-number="664" class="react-line-number react-code-text" style="padding-right:16px">664</div><div data-line-number="665" class="react-line-number react-code-text" style="padding-right:16px">665</div><div data-line-number="666" class="react-line-number react-code-text" style="padding-right:16px">666</div><div data-line-number="667" class="react-line-number react-code-text" style="padding-right:16px">667</div><div data-line-number="668" class="react-line-number react-code-text" style="padding-right:16px">668</div><div data-line-number="669" class="react-line-number react-code-text" style="padding-right:16px">669</div><div data-line-number="670" class="react-line-number react-code-text" style="padding-right:16px">670</div><div data-line-number="671" class="react-line-number react-code-text" style="padding-right:16px">671</div><div data-line-number="672" class="react-line-number react-code-text" style="padding-right:16px">672</div><div data-line-number="673" class="react-line-number react-code-text" style="padding-right:16px">673</div><div data-line-number="674" class="react-line-number react-code-text" style="padding-right:16px">674</div><div data-line-number="675" class="react-line-number react-code-text" style="padding-right:16px">675</div><div data-line-number="676" class="react-line-number react-code-text" style="padding-right:16px">676</div><div data-line-number="677" class="react-line-number react-code-text" style="padding-right:16px">677</div><div data-line-number="678" class="react-line-number react-code-text" style="padding-right:16px">678</div><div data-line-number="679" class="react-line-number react-code-text" style="padding-right:16px">679</div><div data-line-number="680" class="react-line-number react-code-text" style="padding-right:16px">680</div><div data-line-number="681" class="react-line-number react-code-text" style="padding-right:16px">681</div><div data-line-number="682" class="react-line-number react-code-text" style="padding-right:16px">682</div><div data-line-number="683" class="react-line-number react-code-text" style="padding-right:16px">683</div><div data-line-number="684" class="react-line-number react-code-text" style="padding-right:16px">684</div><div data-line-number="685" class="react-line-number react-code-text" style="padding-right:16px">685</div><div data-line-number="686" class="react-line-number react-code-text" style="padding-right:16px">686</div><div data-line-number="687" class="react-line-number react-code-text" style="padding-right:16px">687</div><div data-line-number="688" class="react-line-number react-code-text" style="padding-right:16px">688</div><div data-line-number="689" class="react-line-number react-code-text" style="padding-right:16px">689</div><div data-line-number="690" class="react-line-number react-code-text" style="padding-right:16px">690</div><div data-line-number="691" class="react-line-number react-code-text" style="padding-right:16px">691</div><div data-line-number="692" class="react-line-number react-code-text" style="padding-right:16px">692</div><div data-line-number="693" class="react-line-number react-code-text" style="padding-right:16px">693</div><div data-line-number="694" class="react-line-number react-code-text" style="padding-right:16px">694</div><div data-line-number="695" class="react-line-number react-code-text" style="padding-right:16px">695</div><div data-line-number="696" class="react-line-number react-code-text" style="padding-right:16px">696</div><div data-line-number="697" class="react-line-number react-code-text" style="padding-right:16px">697</div><div data-line-number="698" class="react-line-number react-code-text" style="padding-right:16px">698</div><div data-line-number="699" class="react-line-number react-code-text" style="padding-right:16px">699</div><div data-line-number="700" class="react-line-number react-code-text" style="padding-right:16px">700</div><div data-line-number="701" class="react-line-number react-code-text" style="padding-right:16px">701</div><div data-line-number="702" class="react-line-number react-code-text" style="padding-right:16px">702</div><div data-line-number="703" class="react-line-number react-code-text" style="padding-right:16px">703</div><div data-line-number="704" class="react-line-number react-code-text" style="padding-right:16px">704</div><div data-line-number="705" class="react-line-number react-code-text" style="padding-right:16px">705</div><div data-line-number="706" class="react-line-number react-code-text" style="padding-right:16px">706</div><div data-line-number="707" class="react-line-number react-code-text" style="padding-right:16px">707</div><div data-line-number="708" class="react-line-number react-code-text" style="padding-right:16px">708</div><div data-line-number="709" class="react-line-number react-code-text" style="padding-right:16px">709</div><div data-line-number="710" class="react-line-number react-code-text" style="padding-right:16px">710</div><div data-line-number="711" class="react-line-number react-code-text" style="padding-right:16px">711</div><div data-line-number="712" class="react-line-number react-code-text" style="padding-right:16px">712</div><div data-line-number="713" class="react-line-number react-code-text" style="padding-right:16px">713</div><div data-line-number="714" class="react-line-number react-code-text" style="padding-right:16px">714</div><div data-line-number="715" class="react-line-number react-code-text" style="padding-right:16px">715</div><div data-line-number="716" class="react-line-number react-code-text" style="padding-right:16px">716</div><div data-line-number="717" class="react-line-number react-code-text" style="padding-right:16px">717</div><div data-line-number="718" class="react-line-number react-code-text" style="padding-right:16px">718</div><div data-line-number="719" class="react-line-number react-code-text" style="padding-right:16px">719</div><div data-line-number="720" class="react-line-number react-code-text" style="padding-right:16px">720</div><div data-line-number="721" class="react-line-number react-code-text" style="padding-right:16px">721</div><div data-line-number="722" class="react-line-number react-code-text" style="padding-right:16px">722</div><div data-line-number="723" class="react-line-number react-code-text" style="padding-right:16px">723</div><div data-line-number="724" class="react-line-number react-code-text" style="padding-right:16px">724</div><div data-line-number="725" class="react-line-number react-code-text" style="padding-right:16px">725</div><div data-line-number="726" class="react-line-number react-code-text" style="padding-right:16px">726</div><div data-line-number="727" class="react-line-number react-code-text" style="padding-right:16px">727</div><div data-line-number="728" class="react-line-number react-code-text" style="padding-right:16px">728</div><div data-line-number="729" class="react-line-number react-code-text" style="padding-right:16px">729</div><div data-line-number="730" class="react-line-number react-code-text" style="padding-right:16px">730</div><div data-line-number="731" class="react-line-number react-code-text" style="padding-right:16px">731</div><div data-line-number="732" class="react-line-number react-code-text" style="padding-right:16px">732</div><div data-line-number="733" class="react-line-number react-code-text" style="padding-right:16px">733</div><div data-line-number="734" class="react-line-number react-code-text" style="padding-right:16px">734</div><div data-line-number="735" class="react-line-number react-code-text" style="padding-right:16px">735</div><div data-line-number="736" class="react-line-number react-code-text" style="padding-right:16px">736</div><div data-line-number="737" class="react-line-number react-code-text" style="padding-right:16px">737</div><div data-line-number="738" class="react-line-number react-code-text" style="padding-right:16px">738</div><div data-line-number="739" class="react-line-number react-code-text" style="padding-right:16px">739</div><div data-line-number="740" class="react-line-number react-code-text" style="padding-right:16px">740</div><div data-line-number="741" class="react-line-number react-code-text" style="padding-right:16px">741</div><div data-line-number="742" class="react-line-number react-code-text" style="padding-right:16px">742</div><div data-line-number="743" class="react-line-number react-code-text" style="padding-right:16px">743</div><div data-line-number="744" class="react-line-number react-code-text" style="padding-right:16px">744</div><div data-line-number="745" class="react-line-number react-code-text" style="padding-right:16px">745</div><div data-line-number="746" class="react-line-number react-code-text" style="padding-right:16px">746</div><div data-line-number="747" class="react-line-number react-code-text" style="padding-right:16px">747</div><div data-line-number="748" class="react-line-number react-code-text" style="padding-right:16px">748</div><div data-line-number="749" class="react-line-number react-code-text" style="padding-right:16px">749</div><div data-line-number="750" class="react-line-number react-code-text" style="padding-right:16px">750</div><div data-line-number="751" class="react-line-number react-code-text" style="padding-right:16px">751</div><div data-line-number="752" class="react-line-number react-code-text" style="padding-right:16px">752</div><div data-line-number="753" class="react-line-number react-code-text" style="padding-right:16px">753</div><div data-line-number="754" class="react-line-number react-code-text" style="padding-right:16px">754</div><div data-line-number="755" class="react-line-number react-code-text" style="padding-right:16px">755</div><div data-line-number="756" class="react-line-number react-code-text" style="padding-right:16px">756</div><div data-line-number="757" class="react-line-number react-code-text" style="padding-right:16px">757</div><div data-line-number="758" class="react-line-number react-code-text" style="padding-right:16px">758</div><div data-line-number="759" class="react-line-number react-code-text" style="padding-right:16px">759</div><div data-line-number="760" class="react-line-number react-code-text" style="padding-right:16px">760</div><div data-line-number="761" class="react-line-number react-code-text" style="padding-right:16px">761</div><div data-line-number="762" class="react-line-number react-code-text" style="padding-right:16px">762</div><div data-line-number="763" class="react-line-number react-code-text" style="padding-right:16px">763</div><div data-line-number="764" class="react-line-number react-code-text" style="padding-right:16px">764</div><div data-line-number="765" class="react-line-number react-code-text" style="padding-right:16px">765</div><div data-line-number="766" class="react-line-number react-code-text" style="padding-right:16px">766</div><div data-line-number="767" class="react-line-number react-code-text" style="padding-right:16px">767</div><div data-line-number="768" class="react-line-number react-code-text" style="padding-right:16px">768</div><div data-line-number="769" class="react-line-number react-code-text" style="padding-right:16px">769</div><div data-line-number="770" class="react-line-number react-code-text" style="padding-right:16px">770</div><div data-line-number="771" class="react-line-number react-code-text" style="padding-right:16px">771</div><div data-line-number="772" class="react-line-number react-code-text" style="padding-right:16px">772</div><div data-line-number="773" class="react-line-number react-code-text" style="padding-right:16px">773</div><div data-line-number="774" class="react-line-number react-code-text" style="padding-right:16px">774</div><div data-line-number="775" class="react-line-number react-code-text" style="padding-right:16px">775</div><div data-line-number="776" class="react-line-number react-code-text" style="padding-right:16px">776</div><div data-line-number="777" class="react-line-number react-code-text" style="padding-right:16px">777</div><div data-line-number="778" class="react-line-number react-code-text" style="padding-right:16px">778</div><div data-line-number="779" class="react-line-number react-code-text" style="padding-right:16px">779</div><div data-line-number="780" class="react-line-number react-code-text" style="padding-right:16px">780</div><div data-line-number="781" class="react-line-number react-code-text" style="padding-right:16px">781</div><div data-line-number="782" class="react-line-number react-code-text" style="padding-right:16px">782</div><div data-line-number="783" class="react-line-number react-code-text" style="padding-right:16px">783</div><div data-line-number="784" class="react-line-number react-code-text" style="padding-right:16px">784</div><div data-line-number="785" class="react-line-number react-code-text" style="padding-right:16px">785</div><div data-line-number="786" class="react-line-number react-code-text" style="padding-right:16px">786</div><div data-line-number="787" class="react-line-number react-code-text" style="padding-right:16px">787</div><div data-line-number="788" class="react-line-number react-code-text" style="padding-right:16px">788</div><div data-line-number="789" class="react-line-number react-code-text" style="padding-right:16px">789</div><div data-line-number="790" class="react-line-number react-code-text" style="padding-right:16px">790</div><div data-line-number="791" class="react-line-number react-code-text" style="padding-right:16px">791</div><div data-line-number="792" class="react-line-number react-code-text" style="padding-right:16px">792</div><div data-line-number="793" class="react-line-number react-code-text" style="padding-right:16px">793</div><div data-line-number="794" class="react-line-number react-code-text" style="padding-right:16px">794</div><div data-line-number="795" class="react-line-number react-code-text" style="padding-right:16px">795</div><div data-line-number="796" class="react-line-number react-code-text" style="padding-right:16px">796</div><div data-line-number="797" class="react-line-number react-code-text" style="padding-right:16px">797</div><div data-line-number="798" class="react-line-number react-code-text" style="padding-right:16px">798</div><div data-line-number="799" class="react-line-number react-code-text" style="padding-right:16px">799</div><div data-line-number="800" class="react-line-number react-code-text" style="padding-right:16px">800</div><div data-line-number="801" class="react-line-number react-code-text" style="padding-right:16px">801</div><div data-line-number="802" class="react-line-number react-code-text" style="padding-right:16px">802</div><div data-line-number="803" class="react-line-number react-code-text" style="padding-right:16px">803</div><div data-line-number="804" class="react-line-number react-code-text" style="padding-right:16px">804</div><div data-line-number="805" class="react-line-number react-code-text" style="padding-right:16px">805</div><div data-line-number="806" class="react-line-number react-code-text" style="padding-right:16px">806</div><div data-line-number="807" class="react-line-number react-code-text" style="padding-right:16px">807</div><div data-line-number="808" class="react-line-number react-code-text" style="padding-right:16px">808</div><div data-line-number="809" class="react-line-number react-code-text" style="padding-right:16px">809</div><div data-line-number="810" class="react-line-number react-code-text" style="padding-right:16px">810</div><div data-line-number="811" class="react-line-number react-code-text" style="padding-right:16px">811</div><div data-line-number="812" class="react-line-number react-code-text" style="padding-right:16px">812</div><div data-line-number="813" class="react-line-number react-code-text" style="padding-right:16px">813</div><div data-line-number="814" class="react-line-number react-code-text" style="padding-right:16px">814</div><div data-line-number="815" class="react-line-number react-code-text" style="padding-right:16px">815</div><div data-line-number="816" class="react-line-number react-code-text" style="padding-right:16px">816</div><div data-line-number="817" class="react-line-number react-code-text" style="padding-right:16px">817</div><div data-line-number="818" class="react-line-number react-code-text" style="padding-right:16px">818</div><div data-line-number="819" class="react-line-number react-code-text" style="padding-right:16px">819</div><div data-line-number="820" class="react-line-number react-code-text" style="padding-right:16px">820</div><div data-line-number="821" class="react-line-number react-code-text" style="padding-right:16px">821</div><div data-line-number="822" class="react-line-number react-code-text" style="padding-right:16px">822</div><div data-line-number="823" class="react-line-number react-code-text" style="padding-right:16px">823</div><div data-line-number="824" class="react-line-number react-code-text" style="padding-right:16px">824</div><div data-line-number="825" class="react-line-number react-code-text" style="padding-right:16px">825</div><div data-line-number="826" class="react-line-number react-code-text" style="padding-right:16px">826</div><div data-line-number="827" class="react-line-number react-code-text" style="padding-right:16px">827</div><div data-line-number="828" class="react-line-number react-code-text" style="padding-right:16px">828</div><div data-line-number="829" class="react-line-number react-code-text" style="padding-right:16px">829</div><div data-line-number="830" class="react-line-number react-code-text" style="padding-right:16px">830</div><div data-line-number="831" class="react-line-number react-code-text" style="padding-right:16px">831</div><div data-line-number="832" class="react-line-number react-code-text" style="padding-right:16px">832</div><div data-line-number="833" class="react-line-number react-code-text" style="padding-right:16px">833</div><div data-line-number="834" class="react-line-number react-code-text" style="padding-right:16px">834</div><div data-line-number="835" class="react-line-number react-code-text" style="padding-right:16px">835</div><div data-line-number="836" class="react-line-number react-code-text" style="padding-right:16px">836</div><div data-line-number="837" class="react-line-number react-code-text" style="padding-right:16px">837</div><div data-line-number="838" class="react-line-number react-code-text" style="padding-right:16px">838</div><div data-line-number="839" class="react-line-number react-code-text" style="padding-right:16px">839</div><div data-line-number="840" class="react-line-number react-code-text" style="padding-right:16px">840</div><div data-line-number="841" class="react-line-number react-code-text" style="padding-right:16px">841</div><div data-line-number="842" class="react-line-number react-code-text" style="padding-right:16px">842</div><div data-line-number="843" class="react-line-number react-code-text" style="padding-right:16px">843</div><div data-line-number="844" class="react-line-number react-code-text" style="padding-right:16px">844</div><div data-line-number="845" class="react-line-number react-code-text" style="padding-right:16px">845</div><div data-line-number="846" class="react-line-number react-code-text" style="padding-right:16px">846</div><div data-line-number="847" class="react-line-number react-code-text" style="padding-right:16px">847</div><div data-line-number="848" class="react-line-number react-code-text" style="padding-right:16px">848</div><div data-line-number="849" class="react-line-number react-code-text" style="padding-right:16px">849</div><div data-line-number="850" class="react-line-number react-code-text" style="padding-right:16px">850</div><div data-line-number="851" class="react-line-number react-code-text" style="padding-right:16px">851</div><div data-line-number="852" class="react-line-number react-code-text" style="padding-right:16px">852</div><div data-line-number="853" class="react-line-number react-code-text" style="padding-right:16px">853</div><div data-line-number="854" class="react-line-number react-code-text" style="padding-right:16px">854</div><div data-line-number="855" class="react-line-number react-code-text" style="padding-right:16px">855</div><div data-line-number="856" class="react-line-number react-code-text" style="padding-right:16px">856</div><div data-line-number="857" class="react-line-number react-code-text" style="padding-right:16px">857</div><div data-line-number="858" class="react-line-number react-code-text" style="padding-right:16px">858</div><div data-line-number="859" class="react-line-number react-code-text" style="padding-right:16px">859</div><div data-line-number="860" class="react-line-number react-code-text" style="padding-right:16px">860</div><div data-line-number="861" class="react-line-number react-code-text" style="padding-right:16px">861</div></div><div class="react-code-lines"><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC1" class="react-file-line html-div" data-testid="code-cell" data-line-number="1" style="position:relative"><span class="pl-c"><span class="pl-c">/*</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC2" class="react-file-line html-div" data-testid="code-cell" data-line-number="2" style="position:relative"><span class="pl-c"> * Copyright 2023 The Android Open Source Project</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC3" class="react-file-line html-div" data-testid="code-cell" data-line-number="3" style="position:relative"><span class="pl-c"> *</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC4" class="react-file-line html-div" data-testid="code-cell" data-line-number="4" style="position:relative"><span class="pl-c"> * Licensed under the Apache License, Version 2.0 (the "License");</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC5" class="react-file-line html-div" data-testid="code-cell" data-line-number="5" style="position:relative"><span class="pl-c"> * you may not use this file except in compliance with the License.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC6" class="react-file-line html-div" data-testid="code-cell" data-line-number="6" style="position:relative"><span class="pl-c"> * You may obtain a copy of the License at</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC7" class="react-file-line html-div" data-testid="code-cell" data-line-number="7" style="position:relative"><span class="pl-c"> *</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC8" class="react-file-line html-div" data-testid="code-cell" data-line-number="8" style="position:relative"><span class="pl-c"> * https://www.apache.org/licenses/LICENSE-2.0</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC9" class="react-file-line html-div" data-testid="code-cell" data-line-number="9" style="position:relative"><span class="pl-c"> *</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC10" class="react-file-line html-div" data-testid="code-cell" data-line-number="10" style="position:relative"><span class="pl-c"> * Unless required by applicable law or agreed to in writing, software</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC11" class="react-file-line html-div" data-testid="code-cell" data-line-number="11" style="position:relative"><span class="pl-c"> * distributed under the License is distributed on an "AS IS" BASIS,</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC12" class="react-file-line html-div" data-testid="code-cell" data-line-number="12" style="position:relative"><span class="pl-c"> * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC13" class="react-file-line html-div" data-testid="code-cell" data-line-number="13" style="position:relative"><span class="pl-c"> * See the License for the specific language governing permissions and</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC14" class="react-file-line html-div" data-testid="code-cell" data-line-number="14" style="position:relative"><span class="pl-c"> * limitations under the License.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC15" class="react-file-line html-div" data-testid="code-cell" data-line-number="15" style="position:relative"><span class="pl-c"> <span class="pl-c">*/</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC16" class="react-file-line html-div" data-testid="code-cell" data-line-number="16" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC17" class="react-file-line html-div" data-testid="code-cell" data-line-number="17" style="position:relative">@file:Suppress(<span class="pl-s"><span class="pl-pds">"</span>CanBeVal<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>UNUSED_VARIABLE<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>UNUSED_PARAMETER<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>unused<span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC18" class="react-file-line html-div" data-testid="code-cell" data-line-number="18" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC19" class="react-file-line html-div" data-testid="code-cell" data-line-number="19" style="position:relative"><span class="pl-k">package</span> <span class="pl-en">com.example.compose.snippets.animations</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC20" class="react-file-line html-div" data-testid="code-cell" data-line-number="20" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC21" class="react-file-line html-div" data-testid="code-cell" data-line-number="21" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.Animatable</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC22" class="react-file-line html-div" data-testid="code-cell" data-line-number="22" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.AnimatedContent</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC23" class="react-file-line html-div" data-testid="code-cell" data-line-number="23" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.AnimatedVisibility</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC24" class="react-file-line html-div" data-testid="code-cell" data-line-number="24" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.Crossfade</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC25" class="react-file-line html-div" data-testid="code-cell" data-line-number="25" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.EnterExitState</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC26" class="react-file-line html-div" data-testid="code-cell" data-line-number="26" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.SizeTransform</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC27" class="react-file-line html-div" data-testid="code-cell" data-line-number="27" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.animateColor</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC28" class="react-file-line html-div" data-testid="code-cell" data-line-number="28" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.animateContentSize</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC29" class="react-file-line html-div" data-testid="code-cell" data-line-number="29" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.AnimationVector1D</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC30" class="react-file-line html-div" data-testid="code-cell" data-line-number="30" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.AnimationVector2D</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC31" class="react-file-line html-div" data-testid="code-cell" data-line-number="31" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.Easing</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC32" class="react-file-line html-div" data-testid="code-cell" data-line-number="32" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.ExperimentalTransitionApi</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC33" class="react-file-line html-div" data-testid="code-cell" data-line-number="33" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.FastOutLinearInEasing</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC34" class="react-file-line html-div" data-testid="code-cell" data-line-number="34" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.FastOutSlowInEasing</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC35" class="react-file-line html-div" data-testid="code-cell" data-line-number="35" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.LinearEasing</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC36" class="react-file-line html-div" data-testid="code-cell" data-line-number="36" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.LinearOutSlowInEasing</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC37" class="react-file-line html-div" data-testid="code-cell" data-line-number="37" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.MutableTransitionState</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC38" class="react-file-line html-div" data-testid="code-cell" data-line-number="38" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.RepeatMode</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC39" class="react-file-line html-div" data-testid="code-cell" data-line-number="39" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.Spring</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC40" class="react-file-line html-div" data-testid="code-cell" data-line-number="40" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.TargetBasedAnimation</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC41" class="react-file-line html-div" data-testid="code-cell" data-line-number="41" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.Transition</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC42" class="react-file-line html-div" data-testid="code-cell" data-line-number="42" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.TwoWayConverter</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC43" class="react-file-line html-div" data-testid="code-cell" data-line-number="43" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.VectorConverter</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC44" class="react-file-line html-div" data-testid="code-cell" data-line-number="44" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.animateDp</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC45" class="react-file-line html-div" data-testid="code-cell" data-line-number="45" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.animateFloatAsState</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC46" class="react-file-line html-div" data-testid="code-cell" data-line-number="46" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.animateRect</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC47" class="react-file-line html-div" data-testid="code-cell" data-line-number="47" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.animateValueAsState</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC48" class="react-file-line html-div" data-testid="code-cell" data-line-number="48" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.createChildTransition</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC49" class="react-file-line html-div" data-testid="code-cell" data-line-number="49" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.infiniteRepeatable</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC50" class="react-file-line html-div" data-testid="code-cell" data-line-number="50" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.keyframes</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC51" class="react-file-line html-div" data-testid="code-cell" data-line-number="51" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.rememberInfiniteTransition</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC52" class="react-file-line html-div" data-testid="code-cell" data-line-number="52" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.rememberTransition</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC53" class="react-file-line html-div" data-testid="code-cell" data-line-number="53" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.repeatable</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC54" class="react-file-line html-div" data-testid="code-cell" data-line-number="54" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.snap</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC55" class="react-file-line html-div" data-testid="code-cell" data-line-number="55" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.spring</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC56" class="react-file-line html-div" data-testid="code-cell" data-line-number="56" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.tween</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC57" class="react-file-line html-div" data-testid="code-cell" data-line-number="57" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.core.updateTransition</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC58" class="react-file-line html-div" data-testid="code-cell" data-line-number="58" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.expandVertically</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC59" class="react-file-line html-div" data-testid="code-cell" data-line-number="59" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.fadeIn</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC60" class="react-file-line html-div" data-testid="code-cell" data-line-number="60" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.fadeOut</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC61" class="react-file-line html-div" data-testid="code-cell" data-line-number="61" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.graphics.ExperimentalAnimationGraphicsApi</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC62" class="react-file-line html-div" data-testid="code-cell" data-line-number="62" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.graphics.res.animatedVectorResource</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC63" class="react-file-line html-div" data-testid="code-cell" data-line-number="63" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.graphics.res.rememberAnimatedVectorPainter</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC64" class="react-file-line html-div" data-testid="code-cell" data-line-number="64" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.graphics.vector.AnimatedImageVector</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC65" class="react-file-line html-div" data-testid="code-cell" data-line-number="65" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.shrinkVertically</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC66" class="react-file-line html-div" data-testid="code-cell" data-line-number="66" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.slideInVertically</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC67" class="react-file-line html-div" data-testid="code-cell" data-line-number="67" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.slideOutVertically</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC68" class="react-file-line html-div" data-testid="code-cell" data-line-number="68" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.animation.togetherWith</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC69" class="react-file-line html-div" data-testid="code-cell" data-line-number="69" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.foundation.BorderStroke</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC70" class="react-file-line html-div" data-testid="code-cell" data-line-number="70" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.foundation.Image</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC71" class="react-file-line html-div" data-testid="code-cell" data-line-number="71" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.foundation.background</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC72" class="react-file-line html-div" data-testid="code-cell" data-line-number="72" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.foundation.clickable</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC73" class="react-file-line html-div" data-testid="code-cell" data-line-number="73" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.foundation.layout.Box</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC74" class="react-file-line html-div" data-testid="code-cell" data-line-number="74" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.foundation.layout.Column</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC75" class="react-file-line html-div" data-testid="code-cell" data-line-number="75" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.foundation.layout.Row</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC76" class="react-file-line html-div" data-testid="code-cell" data-line-number="76" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.foundation.layout.fillMaxSize</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC77" class="react-file-line html-div" data-testid="code-cell" data-line-number="77" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.foundation.layout.fillMaxWidth</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC78" class="react-file-line html-div" data-testid="code-cell" data-line-number="78" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.foundation.layout.height</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC79" class="react-file-line html-div" data-testid="code-cell" data-line-number="79" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.foundation.layout.padding</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC80" class="react-file-line html-div" data-testid="code-cell" data-line-number="80" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.foundation.layout.size</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC81" class="react-file-line html-div" data-testid="code-cell" data-line-number="81" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.foundation.layout.sizeIn</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC82" class="react-file-line html-div" data-testid="code-cell" data-line-number="82" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.foundation.shape.RoundedCornerShape</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC83" class="react-file-line html-div" data-testid="code-cell" data-line-number="83" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.material.icons.Icons</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC84" class="react-file-line html-div" data-testid="code-cell" data-line-number="84" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.material.icons.filled.Phone</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC85" class="react-file-line html-div" data-testid="code-cell" data-line-number="85" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.material3.Button</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC86" class="react-file-line html-div" data-testid="code-cell" data-line-number="86" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.material3.Icon</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC87" class="react-file-line html-div" data-testid="code-cell" data-line-number="87" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.material3.MaterialTheme</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC88" class="react-file-line html-div" data-testid="code-cell" data-line-number="88" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.material3.Surface</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC89" class="react-file-line html-div" data-testid="code-cell" data-line-number="89" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.material3.Text</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC90" class="react-file-line html-div" data-testid="code-cell" data-line-number="90" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.runtime.Composable</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC91" class="react-file-line html-div" data-testid="code-cell" data-line-number="91" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.runtime.LaunchedEffect</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC92" class="react-file-line html-div" data-testid="code-cell" data-line-number="92" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.runtime.State</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC93" class="react-file-line html-div" data-testid="code-cell" data-line-number="93" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.runtime.getValue</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC94" class="react-file-line html-div" data-testid="code-cell" data-line-number="94" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.runtime.mutableIntStateOf</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC95" class="react-file-line html-div" data-testid="code-cell" data-line-number="95" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.runtime.mutableLongStateOf</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC96" class="react-file-line html-div" data-testid="code-cell" data-line-number="96" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.runtime.mutableStateOf</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC97" class="react-file-line html-div" data-testid="code-cell" data-line-number="97" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.runtime.remember</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC98" class="react-file-line html-div" data-testid="code-cell" data-line-number="98" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.runtime.setValue</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC99" class="react-file-line html-div" data-testid="code-cell" data-line-number="99" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.runtime.withFrameNanos</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC100" class="react-file-line html-div" data-testid="code-cell" data-line-number="100" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.ui.Alignment</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC101" class="react-file-line html-div" data-testid="code-cell" data-line-number="101" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.ui.Modifier</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC102" class="react-file-line html-div" data-testid="code-cell" data-line-number="102" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.ui.geometry.Rect</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC103" class="react-file-line html-div" data-testid="code-cell" data-line-number="103" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.ui.graphics.Color</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC104" class="react-file-line html-div" data-testid="code-cell" data-line-number="104" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.ui.graphics.graphicsLayer</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC105" class="react-file-line html-div" data-testid="code-cell" data-line-number="105" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.ui.layout.ContentScale</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC106" class="react-file-line html-div" data-testid="code-cell" data-line-number="106" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.ui.platform.LocalDensity</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC107" class="react-file-line html-div" data-testid="code-cell" data-line-number="107" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.ui.tooling.preview.Preview</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC108" class="react-file-line html-div" data-testid="code-cell" data-line-number="108" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.ui.unit.Dp</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC109" class="react-file-line html-div" data-testid="code-cell" data-line-number="109" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.ui.unit.IntSize</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC110" class="react-file-line html-div" data-testid="code-cell" data-line-number="110" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">androidx.compose.ui.unit.dp</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC111" class="react-file-line html-div" data-testid="code-cell" data-line-number="111" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">com.example.compose.snippets.R</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC112" class="react-file-line html-div" data-testid="code-cell" data-line-number="112" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">java.text.BreakIterator</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC113" class="react-file-line html-div" data-testid="code-cell" data-line-number="113" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">java.text.StringCharacterIterator</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC114" class="react-file-line html-div" data-testid="code-cell" data-line-number="114" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">kotlinx.coroutines.delay</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC115" class="react-file-line html-div" data-testid="code-cell" data-line-number="115" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC116" class="react-file-line html-div" data-testid="code-cell" data-line-number="116" style="position:relative"><span class="pl-c"><span class="pl-c">/*</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC117" class="react-file-line html-div" data-testid="code-cell" data-line-number="117" style="position:relative"><span class="pl-c">* Copyright 2023 The Android Open Source Project</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC118" class="react-file-line html-div" data-testid="code-cell" data-line-number="118" style="position:relative"><span class="pl-c">*</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC119" class="react-file-line html-div" data-testid="code-cell" data-line-number="119" style="position:relative"><span class="pl-c">* Licensed under the Apache License, Version 2.0 (the "License");</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC120" class="react-file-line html-div" data-testid="code-cell" data-line-number="120" style="position:relative"><span class="pl-c">* you may not use this file except in compliance with the License.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC121" class="react-file-line html-div" data-testid="code-cell" data-line-number="121" style="position:relative"><span class="pl-c">* You may obtain a copy of the License at</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC122" class="react-file-line html-div" data-testid="code-cell" data-line-number="122" style="position:relative"><span class="pl-c">*</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC123" class="react-file-line html-div" data-testid="code-cell" data-line-number="123" style="position:relative"><span class="pl-c">* http://www.apache.org/licenses/LICENSE-2.0</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC124" class="react-file-line html-div" data-testid="code-cell" data-line-number="124" style="position:relative"><span class="pl-c">*</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC125" class="react-file-line html-div" data-testid="code-cell" data-line-number="125" style="position:relative"><span class="pl-c">* Unless required by applicable law or agreed to in writing, software</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC126" class="react-file-line html-div" data-testid="code-cell" data-line-number="126" style="position:relative"><span class="pl-c">* distributed under the License is distributed on an "AS IS" BASIS,</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC127" class="react-file-line html-div" data-testid="code-cell" data-line-number="127" style="position:relative"><span class="pl-c">* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC128" class="react-file-line html-div" data-testid="code-cell" data-line-number="128" style="position:relative"><span class="pl-c">* See the License for the specific language governing permissions and</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC129" class="react-file-line html-div" data-testid="code-cell" data-line-number="129" style="position:relative"><span class="pl-c">* limitations under the License.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC130" class="react-file-line html-div" data-testid="code-cell" data-line-number="130" style="position:relative"><span class="pl-c"><span class="pl-c">*/</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC131" class="react-file-line html-div" data-testid="code-cell" data-line-number="131" style="position:relative">@Preview</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC132" class="react-file-line html-div" data-testid="code-cell" data-line-number="132" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC133" class="react-file-line html-div" data-testid="code-cell" data-line-number="133" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimatedVisibilitySample</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC134" class="react-file-line html-div" data-testid="code-cell" data-line-number="134" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_animated_visibility]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC135" class="react-file-line html-div" data-testid="code-cell" data-line-number="135" style="position:relative"> <span class="pl-k">var</span> editable by remember { mutableStateOf(<span class="pl-c1">true</span>) }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC136" class="react-file-line html-div" data-testid="code-cell" data-line-number="136" style="position:relative"> <span class="pl-en">AnimatedVisibility</span>(visible <span class="pl-k">=</span> editable) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC137" class="react-file-line html-div" data-testid="code-cell" data-line-number="137" style="position:relative"> <span class="pl-en">Text</span>(text <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>Edit<span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC138" class="react-file-line html-div" data-testid="code-cell" data-line-number="138" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC139" class="react-file-line html-div" data-testid="code-cell" data-line-number="139" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_animated_visibility]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC140" class="react-file-line html-div" data-testid="code-cell" data-line-number="140" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC141" class="react-file-line html-div" data-testid="code-cell" data-line-number="141" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC142" class="react-file-line html-div" data-testid="code-cell" data-line-number="142" style="position:relative">@Preview</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC143" class="react-file-line html-div" data-testid="code-cell" data-line-number="143" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC144" class="react-file-line html-div" data-testid="code-cell" data-line-number="144" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimatedVisibilityWithEnterAndExit</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC145" class="react-file-line html-div" data-testid="code-cell" data-line-number="145" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_animated_visibility_enter_exit]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC146" class="react-file-line html-div" data-testid="code-cell" data-line-number="146" style="position:relative"> <span class="pl-k">var</span> visible by remember { mutableStateOf(<span class="pl-c1">true</span>) }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC147" class="react-file-line html-div" data-testid="code-cell" data-line-number="147" style="position:relative"> <span class="pl-k">val</span> density <span class="pl-k">=</span> <span class="pl-en">LocalDensity</span>.current</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC148" class="react-file-line html-div" data-testid="code-cell" data-line-number="148" style="position:relative"> <span class="pl-en">AnimatedVisibility</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC149" class="react-file-line html-div" data-testid="code-cell" data-line-number="149" style="position:relative"> visible <span class="pl-k">=</span> visible,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC150" class="react-file-line html-div" data-testid="code-cell" data-line-number="150" style="position:relative"> enter <span class="pl-k">=</span> slideInVertically {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC151" class="react-file-line html-div" data-testid="code-cell" data-line-number="151" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Slide in from 40 dp from the top.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC152" class="react-file-line html-div" data-testid="code-cell" data-line-number="152" style="position:relative"> <span class="pl-c1">with</span>(density) { <span class="pl-k">-</span><span class="pl-c1">40</span>.dp.roundToPx() }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC153" class="react-file-line html-div" data-testid="code-cell" data-line-number="153" style="position:relative"> } <span class="pl-k">+</span> expandVertically(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC154" class="react-file-line html-div" data-testid="code-cell" data-line-number="154" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Expand from the top.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC155" class="react-file-line html-div" data-testid="code-cell" data-line-number="155" style="position:relative"> expandFrom <span class="pl-k">=</span> <span class="pl-en">Alignment</span>.<span class="pl-en">Top</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC156" class="react-file-line html-div" data-testid="code-cell" data-line-number="156" style="position:relative"> ) <span class="pl-k">+</span> fadeIn(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC157" class="react-file-line html-div" data-testid="code-cell" data-line-number="157" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Fade in with the initial alpha of 0.3f.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC158" class="react-file-line html-div" data-testid="code-cell" data-line-number="158" style="position:relative"> initialAlpha <span class="pl-k">=</span> <span class="pl-c1">0.3f</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC159" class="react-file-line html-div" data-testid="code-cell" data-line-number="159" style="position:relative"> ),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC160" class="react-file-line html-div" data-testid="code-cell" data-line-number="160" style="position:relative"> exit <span class="pl-k">=</span> slideOutVertically() <span class="pl-k">+</span> shrinkVertically() <span class="pl-k">+</span> fadeOut()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC161" class="react-file-line html-div" data-testid="code-cell" data-line-number="161" style="position:relative"> ) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC162" class="react-file-line html-div" data-testid="code-cell" data-line-number="162" style="position:relative"> <span class="pl-en">Text</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC163" class="react-file-line html-div" data-testid="code-cell" data-line-number="163" style="position:relative"> <span class="pl-s"><span class="pl-pds">"</span>Hello<span class="pl-pds">"</span></span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC164" class="react-file-line html-div" data-testid="code-cell" data-line-number="164" style="position:relative"> <span class="pl-en">Modifier</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC165" class="react-file-line html-div" data-testid="code-cell" data-line-number="165" style="position:relative"> .fillMaxWidth()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC166" class="react-file-line html-div" data-testid="code-cell" data-line-number="166" style="position:relative"> .height(<span class="pl-c1">200</span>.dp)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC167" class="react-file-line html-div" data-testid="code-cell" data-line-number="167" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC168" class="react-file-line html-div" data-testid="code-cell" data-line-number="168" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC169" class="react-file-line html-div" data-testid="code-cell" data-line-number="169" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_animated_visibility_enter_exit]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC170" class="react-file-line html-div" data-testid="code-cell" data-line-number="170" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC171" class="react-file-line html-div" data-testid="code-cell" data-line-number="171" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC172" class="react-file-line html-div" data-testid="code-cell" data-line-number="172" style="position:relative">@Preview</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC173" class="react-file-line html-div" data-testid="code-cell" data-line-number="173" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC174" class="react-file-line html-div" data-testid="code-cell" data-line-number="174" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimatedVisibilityMutable</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC175" class="react-file-line html-div" data-testid="code-cell" data-line-number="175" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_animated_visibility_mutable]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC176" class="react-file-line html-div" data-testid="code-cell" data-line-number="176" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Create a MutableTransitionState<Boolean> for the AnimatedVisibility.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC177" class="react-file-line html-div" data-testid="code-cell" data-line-number="177" style="position:relative"> <span class="pl-k">val</span> state <span class="pl-k">=</span> remember {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC178" class="react-file-line html-div" data-testid="code-cell" data-line-number="178" style="position:relative"> <span class="pl-en">MutableTransitionState</span>(<span class="pl-c1">false</span>).<span class="pl-c1">apply</span> {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC179" class="react-file-line html-div" data-testid="code-cell" data-line-number="179" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Start the animation immediately.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC180" class="react-file-line html-div" data-testid="code-cell" data-line-number="180" style="position:relative"> targetState <span class="pl-k">=</span> <span class="pl-c1">true</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC181" class="react-file-line html-div" data-testid="code-cell" data-line-number="181" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC182" class="react-file-line html-div" data-testid="code-cell" data-line-number="182" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC183" class="react-file-line html-div" data-testid="code-cell" data-line-number="183" style="position:relative"> <span class="pl-en">Column</span> {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC184" class="react-file-line html-div" data-testid="code-cell" data-line-number="184" style="position:relative"> <span class="pl-en">AnimatedVisibility</span>(visibleState <span class="pl-k">=</span> state) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC185" class="react-file-line html-div" data-testid="code-cell" data-line-number="185" style="position:relative"> <span class="pl-en">Text</span>(text <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>Hello, world!<span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC186" class="react-file-line html-div" data-testid="code-cell" data-line-number="186" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC187" class="react-file-line html-div" data-testid="code-cell" data-line-number="187" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC188" class="react-file-line html-div" data-testid="code-cell" data-line-number="188" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Use the MutableTransitionState to know the current animation state</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC189" class="react-file-line html-div" data-testid="code-cell" data-line-number="189" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> of the AnimatedVisibility.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC190" class="react-file-line html-div" data-testid="code-cell" data-line-number="190" style="position:relative"> <span class="pl-en">Text</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC191" class="react-file-line html-div" data-testid="code-cell" data-line-number="191" style="position:relative"> text <span class="pl-k">=</span> <span class="pl-k">when</span> {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC192" class="react-file-line html-div" data-testid="code-cell" data-line-number="192" style="position:relative"> state.isIdle <span class="pl-k">&&</span> state.currentState <span class="pl-k">-></span> <span class="pl-s"><span class="pl-pds">"</span>Visible<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC193" class="react-file-line html-div" data-testid="code-cell" data-line-number="193" style="position:relative"> <span class="pl-k">!</span>state.isIdle <span class="pl-k">&&</span> state.currentState <span class="pl-k">-></span> <span class="pl-s"><span class="pl-pds">"</span>Disappearing<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC194" class="react-file-line html-div" data-testid="code-cell" data-line-number="194" style="position:relative"> state.isIdle <span class="pl-k">&&</span> <span class="pl-k">!</span>state.currentState <span class="pl-k">-></span> <span class="pl-s"><span class="pl-pds">"</span>Invisible<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC195" class="react-file-line html-div" data-testid="code-cell" data-line-number="195" style="position:relative"> <span class="pl-k">else</span> <span class="pl-k">-></span> <span class="pl-s"><span class="pl-pds">"</span>Appearing<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC196" class="react-file-line html-div" data-testid="code-cell" data-line-number="196" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC197" class="react-file-line html-div" data-testid="code-cell" data-line-number="197" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC198" class="react-file-line html-div" data-testid="code-cell" data-line-number="198" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC199" class="react-file-line html-div" data-testid="code-cell" data-line-number="199" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_animated_visibility_mutable]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC200" class="react-file-line html-div" data-testid="code-cell" data-line-number="200" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC201" class="react-file-line html-div" data-testid="code-cell" data-line-number="201" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC202" class="react-file-line html-div" data-testid="code-cell" data-line-number="202" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC203" class="react-file-line html-div" data-testid="code-cell" data-line-number="203" style="position:relative">@Preview</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC204" class="react-file-line html-div" data-testid="code-cell" data-line-number="204" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimatedVisibilityAnimateEnterExitChildren</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC205" class="react-file-line html-div" data-testid="code-cell" data-line-number="205" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_animated_visibility_animate_enter_exit_children]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC206" class="react-file-line html-div" data-testid="code-cell" data-line-number="206" style="position:relative"> <span class="pl-k">var</span> visible by remember { mutableStateOf(<span class="pl-c1">true</span>) }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC207" class="react-file-line html-div" data-testid="code-cell" data-line-number="207" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC208" class="react-file-line html-div" data-testid="code-cell" data-line-number="208" style="position:relative"> <span class="pl-en">AnimatedVisibility</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC209" class="react-file-line html-div" data-testid="code-cell" data-line-number="209" style="position:relative"> visible <span class="pl-k">=</span> visible,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC210" class="react-file-line html-div" data-testid="code-cell" data-line-number="210" style="position:relative"> enter <span class="pl-k">=</span> fadeIn(),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC211" class="react-file-line html-div" data-testid="code-cell" data-line-number="211" style="position:relative"> exit <span class="pl-k">=</span> fadeOut()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC212" class="react-file-line html-div" data-testid="code-cell" data-line-number="212" style="position:relative"> ) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC213" class="react-file-line html-div" data-testid="code-cell" data-line-number="213" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Fade in/out the background and the foreground.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC214" class="react-file-line html-div" data-testid="code-cell" data-line-number="214" style="position:relative"> <span class="pl-en">Box</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC215" class="react-file-line html-div" data-testid="code-cell" data-line-number="215" style="position:relative"> <span class="pl-en">Modifier</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC216" class="react-file-line html-div" data-testid="code-cell" data-line-number="216" style="position:relative"> .fillMaxSize()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC217" class="react-file-line html-div" data-testid="code-cell" data-line-number="217" style="position:relative"> .background(<span class="pl-en">Color</span>.<span class="pl-en">DarkGray</span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC218" class="react-file-line html-div" data-testid="code-cell" data-line-number="218" style="position:relative"> ) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC219" class="react-file-line html-div" data-testid="code-cell" data-line-number="219" style="position:relative"> <span class="pl-en">Box</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC220" class="react-file-line html-div" data-testid="code-cell" data-line-number="220" style="position:relative"> <span class="pl-en">Modifier</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC221" class="react-file-line html-div" data-testid="code-cell" data-line-number="221" style="position:relative"> .align(<span class="pl-en">Alignment</span>.<span class="pl-en">Center</span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC222" class="react-file-line html-div" data-testid="code-cell" data-line-number="222" style="position:relative"> .animateEnterExit(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC223" class="react-file-line html-div" data-testid="code-cell" data-line-number="223" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Slide in/out the inner box.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC224" class="react-file-line html-div" data-testid="code-cell" data-line-number="224" style="position:relative"> enter <span class="pl-k">=</span> slideInVertically(),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC225" class="react-file-line html-div" data-testid="code-cell" data-line-number="225" style="position:relative"> exit <span class="pl-k">=</span> slideOutVertically()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC226" class="react-file-line html-div" data-testid="code-cell" data-line-number="226" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC227" class="react-file-line html-div" data-testid="code-cell" data-line-number="227" style="position:relative"> .sizeIn(minWidth <span class="pl-k">=</span> <span class="pl-c1">256</span>.dp, minHeight <span class="pl-k">=</span> <span class="pl-c1">64</span>.dp)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC228" class="react-file-line html-div" data-testid="code-cell" data-line-number="228" style="position:relative"> .background(<span class="pl-en">Color</span>.<span class="pl-en">Red</span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC229" class="react-file-line html-div" data-testid="code-cell" data-line-number="229" style="position:relative"> ) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC230" class="react-file-line html-div" data-testid="code-cell" data-line-number="230" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Content of the notification…</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC231" class="react-file-line html-div" data-testid="code-cell" data-line-number="231" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC232" class="react-file-line html-div" data-testid="code-cell" data-line-number="232" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC233" class="react-file-line html-div" data-testid="code-cell" data-line-number="233" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC234" class="react-file-line html-div" data-testid="code-cell" data-line-number="234" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_animated_visibility_animate_enter_exit_children]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC235" class="react-file-line html-div" data-testid="code-cell" data-line-number="235" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC236" class="react-file-line html-div" data-testid="code-cell" data-line-number="236" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC237" class="react-file-line html-div" data-testid="code-cell" data-line-number="237" style="position:relative">@Preview</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC238" class="react-file-line html-div" data-testid="code-cell" data-line-number="238" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC239" class="react-file-line html-div" data-testid="code-cell" data-line-number="239" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimatedVisibilityTransition</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC240" class="react-file-line html-div" data-testid="code-cell" data-line-number="240" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_animated_visibility_transition]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC241" class="react-file-line html-div" data-testid="code-cell" data-line-number="241" style="position:relative"> <span class="pl-k">var</span> visible by remember { mutableStateOf(<span class="pl-c1">true</span>) }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC242" class="react-file-line html-div" data-testid="code-cell" data-line-number="242" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC243" class="react-file-line html-div" data-testid="code-cell" data-line-number="243" style="position:relative"> <span class="pl-en">AnimatedVisibility</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC244" class="react-file-line html-div" data-testid="code-cell" data-line-number="244" style="position:relative"> visible <span class="pl-k">=</span> visible,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC245" class="react-file-line html-div" data-testid="code-cell" data-line-number="245" style="position:relative"> enter <span class="pl-k">=</span> fadeIn(),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC246" class="react-file-line html-div" data-testid="code-cell" data-line-number="246" style="position:relative"> exit <span class="pl-k">=</span> fadeOut()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC247" class="react-file-line html-div" data-testid="code-cell" data-line-number="247" style="position:relative"> ) { <span class="pl-c"><span class="pl-c">//</span> this: AnimatedVisibilityScope</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC248" class="react-file-line html-div" data-testid="code-cell" data-line-number="248" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Use AnimatedVisibilityScope#transition to add a custom animation</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC249" class="react-file-line html-div" data-testid="code-cell" data-line-number="249" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> to the AnimatedVisibility.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC250" class="react-file-line html-div" data-testid="code-cell" data-line-number="250" style="position:relative"> <span class="pl-k">val</span> background by transition.animateColor(label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>color<span class="pl-pds">"</span></span>) { state <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC251" class="react-file-line html-div" data-testid="code-cell" data-line-number="251" style="position:relative"> <span class="pl-k">if</span> (state <span class="pl-k">==</span> <span class="pl-en">EnterExitState</span>.<span class="pl-en">Visible</span>) <span class="pl-en">Color</span>.<span class="pl-en">Blue</span> <span class="pl-k">else</span> <span class="pl-en">Color</span>.<span class="pl-en">Gray</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC252" class="react-file-line html-div" data-testid="code-cell" data-line-number="252" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC253" class="react-file-line html-div" data-testid="code-cell" data-line-number="253" style="position:relative"> <span class="pl-en">Box</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC254" class="react-file-line html-div" data-testid="code-cell" data-line-number="254" style="position:relative"> modifier <span class="pl-k">=</span> <span class="pl-en">Modifier</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC255" class="react-file-line html-div" data-testid="code-cell" data-line-number="255" style="position:relative"> .size(<span class="pl-c1">128</span>.dp)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC256" class="react-file-line html-div" data-testid="code-cell" data-line-number="256" style="position:relative"> .background(background)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC257" class="react-file-line html-div" data-testid="code-cell" data-line-number="257" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC258" class="react-file-line html-div" data-testid="code-cell" data-line-number="258" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC259" class="react-file-line html-div" data-testid="code-cell" data-line-number="259" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_animated_visibility_transition]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC260" class="react-file-line html-div" data-testid="code-cell" data-line-number="260" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC261" class="react-file-line html-div" data-testid="code-cell" data-line-number="261" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC262" class="react-file-line html-div" data-testid="code-cell" data-line-number="262" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC263" class="react-file-line html-div" data-testid="code-cell" data-line-number="263" style="position:relative">@Preview</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC264" class="react-file-line html-div" data-testid="code-cell" data-line-number="264" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimateAsStateSimple</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC265" class="react-file-line html-div" data-testid="code-cell" data-line-number="265" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_animate_as_state]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC266" class="react-file-line html-div" data-testid="code-cell" data-line-number="266" style="position:relative"> <span class="pl-k">var</span> enabled by remember { mutableStateOf(<span class="pl-c1">true</span>) }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC267" class="react-file-line html-div" data-testid="code-cell" data-line-number="267" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC268" class="react-file-line html-div" data-testid="code-cell" data-line-number="268" style="position:relative"> <span class="pl-k">val</span> alpha<span class="pl-k">:</span> <span class="pl-c1">Float</span> by animateFloatAsState(<span class="pl-k">if</span> (enabled) <span class="pl-c1">1f</span> <span class="pl-k">else</span> <span class="pl-c1">0.5f</span>, label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>alpha<span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC269" class="react-file-line html-div" data-testid="code-cell" data-line-number="269" style="position:relative"> <span class="pl-en">Box</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC270" class="react-file-line html-div" data-testid="code-cell" data-line-number="270" style="position:relative"> <span class="pl-en">Modifier</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC271" class="react-file-line html-div" data-testid="code-cell" data-line-number="271" style="position:relative"> .fillMaxSize()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC272" class="react-file-line html-div" data-testid="code-cell" data-line-number="272" style="position:relative"> .graphicsLayer(alpha <span class="pl-k">=</span> alpha)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC273" class="react-file-line html-div" data-testid="code-cell" data-line-number="273" style="position:relative"> .background(<span class="pl-en">Color</span>.<span class="pl-en">Red</span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC274" class="react-file-line html-div" data-testid="code-cell" data-line-number="274" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC275" class="react-file-line html-div" data-testid="code-cell" data-line-number="275" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_animate_as_state]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC276" class="react-file-line html-div" data-testid="code-cell" data-line-number="276" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC277" class="react-file-line html-div" data-testid="code-cell" data-line-number="277" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC278" class="react-file-line html-div" data-testid="code-cell" data-line-number="278" style="position:relative">@Preview</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC279" class="react-file-line html-div" data-testid="code-cell" data-line-number="279" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC280" class="react-file-line html-div" data-testid="code-cell" data-line-number="280" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimatedContentSimple</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC281" class="react-file-line html-div" data-testid="code-cell" data-line-number="281" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_animated_content_simple]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC282" class="react-file-line html-div" data-testid="code-cell" data-line-number="282" style="position:relative"> <span class="pl-en">Row</span> {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC283" class="react-file-line html-div" data-testid="code-cell" data-line-number="283" style="position:relative"> <span class="pl-k">var</span> count by remember { mutableIntStateOf(<span class="pl-c1">0</span>) }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC284" class="react-file-line html-div" data-testid="code-cell" data-line-number="284" style="position:relative"> <span class="pl-en">Button</span>(onClick <span class="pl-k">=</span> { count<span class="pl-k">++</span> }) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC285" class="react-file-line html-div" data-testid="code-cell" data-line-number="285" style="position:relative"> <span class="pl-en">Text</span>(<span class="pl-s"><span class="pl-pds">"</span>Add<span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC286" class="react-file-line html-div" data-testid="code-cell" data-line-number="286" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC287" class="react-file-line html-div" data-testid="code-cell" data-line-number="287" style="position:relative"> <span class="pl-en">AnimatedContent</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC288" class="react-file-line html-div" data-testid="code-cell" data-line-number="288" style="position:relative"> targetState <span class="pl-k">=</span> count,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC289" class="react-file-line html-div" data-testid="code-cell" data-line-number="289" style="position:relative"> label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>animated content<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC290" class="react-file-line html-div" data-testid="code-cell" data-line-number="290" style="position:relative"> ) { targetCount <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC291" class="react-file-line html-div" data-testid="code-cell" data-line-number="291" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Make sure to use `targetCount`, not `count`.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC292" class="react-file-line html-div" data-testid="code-cell" data-line-number="292" style="position:relative"> <span class="pl-en">Text</span>(text <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>Count: <span class="pl-e">$targetCount</span><span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC293" class="react-file-line html-div" data-testid="code-cell" data-line-number="293" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC294" class="react-file-line html-div" data-testid="code-cell" data-line-number="294" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC295" class="react-file-line html-div" data-testid="code-cell" data-line-number="295" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_animated_content_simple]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC296" class="react-file-line html-div" data-testid="code-cell" data-line-number="296" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC297" class="react-file-line html-div" data-testid="code-cell" data-line-number="297" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC298" class="react-file-line html-div" data-testid="code-cell" data-line-number="298" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC299" class="react-file-line html-div" data-testid="code-cell" data-line-number="299" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimatedContentTransitionSpec</span>(<span class="pl-smi">count</span><span class="pl-k">:</span> <span class="pl-c1">Int</span>) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC300" class="react-file-line html-div" data-testid="code-cell" data-line-number="300" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_animated_content_transition_spec]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC301" class="react-file-line html-div" data-testid="code-cell" data-line-number="301" style="position:relative"> <span class="pl-en">AnimatedContent</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC302" class="react-file-line html-div" data-testid="code-cell" data-line-number="302" style="position:relative"> targetState <span class="pl-k">=</span> count,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC303" class="react-file-line html-div" data-testid="code-cell" data-line-number="303" style="position:relative"> transitionSpec <span class="pl-k">=</span> {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC304" class="react-file-line html-div" data-testid="code-cell" data-line-number="304" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Compare the incoming number with the previous number.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC305" class="react-file-line html-div" data-testid="code-cell" data-line-number="305" style="position:relative"> <span class="pl-k">if</span> (targetState <span class="pl-k">></span> initialState) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC306" class="react-file-line html-div" data-testid="code-cell" data-line-number="306" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> If the target number is larger, it slides up and fades in</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC307" class="react-file-line html-div" data-testid="code-cell" data-line-number="307" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> while the initial (smaller) number slides up and fades out.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC308" class="react-file-line html-div" data-testid="code-cell" data-line-number="308" style="position:relative"> slideInVertically { height <span class="pl-k">-></span> height } <span class="pl-k">+</span> fadeIn() togetherWith</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC309" class="react-file-line html-div" data-testid="code-cell" data-line-number="309" style="position:relative"> slideOutVertically { height <span class="pl-k">-></span> <span class="pl-k">-</span>height } <span class="pl-k">+</span> fadeOut()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC310" class="react-file-line html-div" data-testid="code-cell" data-line-number="310" style="position:relative"> } <span class="pl-k">else</span> {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC311" class="react-file-line html-div" data-testid="code-cell" data-line-number="311" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> If the target number is smaller, it slides down and fades in</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC312" class="react-file-line html-div" data-testid="code-cell" data-line-number="312" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> while the initial number slides down and fades out.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC313" class="react-file-line html-div" data-testid="code-cell" data-line-number="313" style="position:relative"> slideInVertically { height <span class="pl-k">-></span> <span class="pl-k">-</span>height } <span class="pl-k">+</span> fadeIn() togetherWith</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC314" class="react-file-line html-div" data-testid="code-cell" data-line-number="314" style="position:relative"> slideOutVertically { height <span class="pl-k">-></span> height } <span class="pl-k">+</span> fadeOut()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC315" class="react-file-line html-div" data-testid="code-cell" data-line-number="315" style="position:relative"> }.using(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC316" class="react-file-line html-div" data-testid="code-cell" data-line-number="316" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Disable clipping since the faded slide-in/out should</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC317" class="react-file-line html-div" data-testid="code-cell" data-line-number="317" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> be displayed out of bounds.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC318" class="react-file-line html-div" data-testid="code-cell" data-line-number="318" style="position:relative"> <span class="pl-en">SizeTransform</span>(clip <span class="pl-k">=</span> <span class="pl-c1">false</span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC319" class="react-file-line html-div" data-testid="code-cell" data-line-number="319" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC320" class="react-file-line html-div" data-testid="code-cell" data-line-number="320" style="position:relative"> }, label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>animated content<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC321" class="react-file-line html-div" data-testid="code-cell" data-line-number="321" style="position:relative"> ) { targetCount <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC322" class="react-file-line html-div" data-testid="code-cell" data-line-number="322" style="position:relative"> <span class="pl-en">Text</span>(text <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span><span class="pl-e">$targetCount</span><span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC323" class="react-file-line html-div" data-testid="code-cell" data-line-number="323" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC324" class="react-file-line html-div" data-testid="code-cell" data-line-number="324" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_animated_content_transition_spec]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC325" class="react-file-line html-div" data-testid="code-cell" data-line-number="325" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC326" class="react-file-line html-div" data-testid="code-cell" data-line-number="326" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC327" class="react-file-line html-div" data-testid="code-cell" data-line-number="327" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC328" class="react-file-line html-div" data-testid="code-cell" data-line-number="328" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimatedContentSizeTransform</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC329" class="react-file-line html-div" data-testid="code-cell" data-line-number="329" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_animated_content_size_transform]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC330" class="react-file-line html-div" data-testid="code-cell" data-line-number="330" style="position:relative"> <span class="pl-k">var</span> expanded by remember { mutableStateOf(<span class="pl-c1">false</span>) }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC331" class="react-file-line html-div" data-testid="code-cell" data-line-number="331" style="position:relative"> <span class="pl-en">Surface</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC332" class="react-file-line html-div" data-testid="code-cell" data-line-number="332" style="position:relative"> color <span class="pl-k">=</span> <span class="pl-en">MaterialTheme</span>.colorScheme.primary,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC333" class="react-file-line html-div" data-testid="code-cell" data-line-number="333" style="position:relative"> onClick <span class="pl-k">=</span> { expanded <span class="pl-k">=</span> <span class="pl-k">!</span>expanded }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC334" class="react-file-line html-div" data-testid="code-cell" data-line-number="334" style="position:relative"> ) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC335" class="react-file-line html-div" data-testid="code-cell" data-line-number="335" style="position:relative"> <span class="pl-en">AnimatedContent</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC336" class="react-file-line html-div" data-testid="code-cell" data-line-number="336" style="position:relative"> targetState <span class="pl-k">=</span> expanded,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC337" class="react-file-line html-div" data-testid="code-cell" data-line-number="337" style="position:relative"> transitionSpec <span class="pl-k">=</span> {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC338" class="react-file-line html-div" data-testid="code-cell" data-line-number="338" style="position:relative"> fadeIn(animationSpec <span class="pl-k">=</span> tween(<span class="pl-c1">150</span>, <span class="pl-c1">150</span>)) togetherWith</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC339" class="react-file-line html-div" data-testid="code-cell" data-line-number="339" style="position:relative"> fadeOut(animationSpec <span class="pl-k">=</span> tween(<span class="pl-c1">150</span>)) using</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC340" class="react-file-line html-div" data-testid="code-cell" data-line-number="340" style="position:relative"> <span class="pl-en">SizeTransform</span> { initialSize, targetSize <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC341" class="react-file-line html-div" data-testid="code-cell" data-line-number="341" style="position:relative"> <span class="pl-k">if</span> (targetState) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC342" class="react-file-line html-div" data-testid="code-cell" data-line-number="342" style="position:relative"> keyframes {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC343" class="react-file-line html-div" data-testid="code-cell" data-line-number="343" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Expand horizontally first.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC344" class="react-file-line html-div" data-testid="code-cell" data-line-number="344" style="position:relative"> <span class="pl-en">IntSize</span>(targetSize.width, initialSize.height) at <span class="pl-c1">150</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC345" class="react-file-line html-div" data-testid="code-cell" data-line-number="345" style="position:relative"> durationMillis <span class="pl-k">=</span> <span class="pl-c1">300</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC346" class="react-file-line html-div" data-testid="code-cell" data-line-number="346" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC347" class="react-file-line html-div" data-testid="code-cell" data-line-number="347" style="position:relative"> } <span class="pl-k">else</span> {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC348" class="react-file-line html-div" data-testid="code-cell" data-line-number="348" style="position:relative"> keyframes {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC349" class="react-file-line html-div" data-testid="code-cell" data-line-number="349" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Shrink vertically first.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC350" class="react-file-line html-div" data-testid="code-cell" data-line-number="350" style="position:relative"> <span class="pl-en">IntSize</span>(initialSize.width, targetSize.height) at <span class="pl-c1">150</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC351" class="react-file-line html-div" data-testid="code-cell" data-line-number="351" style="position:relative"> durationMillis <span class="pl-k">=</span> <span class="pl-c1">300</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC352" class="react-file-line html-div" data-testid="code-cell" data-line-number="352" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC353" class="react-file-line html-div" data-testid="code-cell" data-line-number="353" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC354" class="react-file-line html-div" data-testid="code-cell" data-line-number="354" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC355" class="react-file-line html-div" data-testid="code-cell" data-line-number="355" style="position:relative"> }, label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>size transform<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC356" class="react-file-line html-div" data-testid="code-cell" data-line-number="356" style="position:relative"> ) { targetExpanded <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC357" class="react-file-line html-div" data-testid="code-cell" data-line-number="357" style="position:relative"> <span class="pl-k">if</span> (targetExpanded) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC358" class="react-file-line html-div" data-testid="code-cell" data-line-number="358" style="position:relative"> <span class="pl-en">Expanded</span>()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC359" class="react-file-line html-div" data-testid="code-cell" data-line-number="359" style="position:relative"> } <span class="pl-k">else</span> {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC360" class="react-file-line html-div" data-testid="code-cell" data-line-number="360" style="position:relative"> <span class="pl-en">ContentIcon</span>()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC361" class="react-file-line html-div" data-testid="code-cell" data-line-number="361" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC362" class="react-file-line html-div" data-testid="code-cell" data-line-number="362" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC363" class="react-file-line html-div" data-testid="code-cell" data-line-number="363" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC364" class="react-file-line html-div" data-testid="code-cell" data-line-number="364" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_animated_content_size_transform]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC365" class="react-file-line html-div" data-testid="code-cell" data-line-number="365" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC366" class="react-file-line html-div" data-testid="code-cell" data-line-number="366" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC367" class="react-file-line html-div" data-testid="code-cell" data-line-number="367" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC368" class="react-file-line html-div" data-testid="code-cell" data-line-number="368" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimateContentSizeSimple</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC369" class="react-file-line html-div" data-testid="code-cell" data-line-number="369" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_animated_content_size_modifier_simple]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC370" class="react-file-line html-div" data-testid="code-cell" data-line-number="370" style="position:relative"> <span class="pl-k">var</span> message by remember { mutableStateOf(<span class="pl-s"><span class="pl-pds">"</span>Hello<span class="pl-pds">"</span></span>) }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC371" class="react-file-line html-div" data-testid="code-cell" data-line-number="371" style="position:relative"> <span class="pl-en">Box</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC372" class="react-file-line html-div" data-testid="code-cell" data-line-number="372" style="position:relative"> modifier <span class="pl-k">=</span> <span class="pl-en">Modifier</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC373" class="react-file-line html-div" data-testid="code-cell" data-line-number="373" style="position:relative"> .background(<span class="pl-en">Color</span>.<span class="pl-en">Blue</span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC374" class="react-file-line html-div" data-testid="code-cell" data-line-number="374" style="position:relative"> .animateContentSize()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC375" class="react-file-line html-div" data-testid="code-cell" data-line-number="375" style="position:relative"> ) { <span class="pl-en">Text</span>(text <span class="pl-k">=</span> message) }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC376" class="react-file-line html-div" data-testid="code-cell" data-line-number="376" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_animated_content_size_modifier_simple]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC377" class="react-file-line html-div" data-testid="code-cell" data-line-number="377" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC378" class="react-file-line html-div" data-testid="code-cell" data-line-number="378" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC379" class="react-file-line html-div" data-testid="code-cell" data-line-number="379" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC380" class="react-file-line html-div" data-testid="code-cell" data-line-number="380" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">CrossfadeSimple</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC381" class="react-file-line html-div" data-testid="code-cell" data-line-number="381" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_crossfade_simple]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC382" class="react-file-line html-div" data-testid="code-cell" data-line-number="382" style="position:relative"> <span class="pl-k">var</span> currentPage by remember { mutableStateOf(<span class="pl-s"><span class="pl-pds">"</span>A<span class="pl-pds">"</span></span>) }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC383" class="react-file-line html-div" data-testid="code-cell" data-line-number="383" style="position:relative"> <span class="pl-en">Crossfade</span>(targetState <span class="pl-k">=</span> currentPage, label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>cross fade<span class="pl-pds">"</span></span>) { screen <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC384" class="react-file-line html-div" data-testid="code-cell" data-line-number="384" style="position:relative"> <span class="pl-k">when</span> (screen) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC385" class="react-file-line html-div" data-testid="code-cell" data-line-number="385" style="position:relative"> <span class="pl-s"><span class="pl-pds">"</span>A<span class="pl-pds">"</span></span> <span class="pl-k">-></span> <span class="pl-en">Text</span>(<span class="pl-s"><span class="pl-pds">"</span>Page A<span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC386" class="react-file-line html-div" data-testid="code-cell" data-line-number="386" style="position:relative"> <span class="pl-s"><span class="pl-pds">"</span>B<span class="pl-pds">"</span></span> <span class="pl-k">-></span> <span class="pl-en">Text</span>(<span class="pl-s"><span class="pl-pds">"</span>Page B<span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC387" class="react-file-line html-div" data-testid="code-cell" data-line-number="387" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC388" class="react-file-line html-div" data-testid="code-cell" data-line-number="388" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC389" class="react-file-line html-div" data-testid="code-cell" data-line-number="389" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_crossfade_simple]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC390" class="react-file-line html-div" data-testid="code-cell" data-line-number="390" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC391" class="react-file-line html-div" data-testid="code-cell" data-line-number="391" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC392" class="react-file-line html-div" data-testid="code-cell" data-line-number="392" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">object</span> UpdateTransitionEnumState {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC393" class="react-file-line html-div" data-testid="code-cell" data-line-number="393" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_transitions_box_state]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC394" class="react-file-line html-div" data-testid="code-cell" data-line-number="394" style="position:relative"> <span class="pl-k">enum</span> <span class="pl-k">class</span> <span class="pl-en">BoxState</span> {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC395" class="react-file-line html-div" data-testid="code-cell" data-line-number="395" style="position:relative"> <span class="pl-en">Collapsed</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC396" class="react-file-line html-div" data-testid="code-cell" data-line-number="396" style="position:relative"> <span class="pl-en">Expanded</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC397" class="react-file-line html-div" data-testid="code-cell" data-line-number="397" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC398" class="react-file-line html-div" data-testid="code-cell" data-line-number="398" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_transitions_box_state]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC399" class="react-file-line html-div" data-testid="code-cell" data-line-number="399" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC400" class="react-file-line html-div" data-testid="code-cell" data-line-number="400" style="position:relative"> @Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC401" class="react-file-line html-div" data-testid="code-cell" data-line-number="401" style="position:relative"> <span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">UpdateTransitionInstance</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC402" class="react-file-line html-div" data-testid="code-cell" data-line-number="402" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_transitions_instance]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC403" class="react-file-line html-div" data-testid="code-cell" data-line-number="403" style="position:relative"> <span class="pl-k">var</span> currentState by remember { mutableStateOf(<span class="pl-en">BoxState</span>.<span class="pl-en">Collapsed</span>) }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC404" class="react-file-line html-div" data-testid="code-cell" data-line-number="404" style="position:relative"> <span class="pl-k">val</span> transition <span class="pl-k">=</span> updateTransition(currentState, label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>box state<span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC405" class="react-file-line html-div" data-testid="code-cell" data-line-number="405" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_transitions_instance]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC406" class="react-file-line html-div" data-testid="code-cell" data-line-number="406" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC407" class="react-file-line html-div" data-testid="code-cell" data-line-number="407" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC408" class="react-file-line html-div" data-testid="code-cell" data-line-number="408" style="position:relative"> @Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC409" class="react-file-line html-div" data-testid="code-cell" data-line-number="409" style="position:relative"> <span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">UpdateTransitionAnimationValues</span>(<span class="pl-smi">transition</span><span class="pl-k">:</span> <span class="pl-en">Transition</span><<span class="pl-en">BoxState</span>>) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC410" class="react-file-line html-div" data-testid="code-cell" data-line-number="410" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_transitions_values]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC411" class="react-file-line html-div" data-testid="code-cell" data-line-number="411" style="position:relative"> <span class="pl-k">val</span> rect by transition.animateRect(label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>rectangle<span class="pl-pds">"</span></span>) { state <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC412" class="react-file-line html-div" data-testid="code-cell" data-line-number="412" style="position:relative"> <span class="pl-k">when</span> (state) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC413" class="react-file-line html-div" data-testid="code-cell" data-line-number="413" style="position:relative"> <span class="pl-en">BoxState</span>.<span class="pl-en">Collapsed</span> <span class="pl-k">-></span> <span class="pl-en">Rect</span>(<span class="pl-c1">0f</span>, <span class="pl-c1">0f</span>, <span class="pl-c1">100f</span>, <span class="pl-c1">100f</span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC414" class="react-file-line html-div" data-testid="code-cell" data-line-number="414" style="position:relative"> <span class="pl-en">BoxState</span>.<span class="pl-en">Expanded</span> <span class="pl-k">-></span> <span class="pl-en">Rect</span>(<span class="pl-c1">100f</span>, <span class="pl-c1">100f</span>, <span class="pl-c1">300f</span>, <span class="pl-c1">300f</span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC415" class="react-file-line html-div" data-testid="code-cell" data-line-number="415" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC416" class="react-file-line html-div" data-testid="code-cell" data-line-number="416" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC417" class="react-file-line html-div" data-testid="code-cell" data-line-number="417" style="position:relative"> <span class="pl-k">val</span> borderWidth by transition.animateDp(label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>border width<span class="pl-pds">"</span></span>) { state <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC418" class="react-file-line html-div" data-testid="code-cell" data-line-number="418" style="position:relative"> <span class="pl-k">when</span> (state) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC419" class="react-file-line html-div" data-testid="code-cell" data-line-number="419" style="position:relative"> <span class="pl-en">BoxState</span>.<span class="pl-en">Collapsed</span> <span class="pl-k">-></span> <span class="pl-c1">1</span>.dp</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC420" class="react-file-line html-div" data-testid="code-cell" data-line-number="420" style="position:relative"> <span class="pl-en">BoxState</span>.<span class="pl-en">Expanded</span> <span class="pl-k">-></span> <span class="pl-c1">0</span>.dp</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC421" class="react-file-line html-div" data-testid="code-cell" data-line-number="421" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC422" class="react-file-line html-div" data-testid="code-cell" data-line-number="422" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC423" class="react-file-line html-div" data-testid="code-cell" data-line-number="423" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_transitions_values]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC424" class="react-file-line html-div" data-testid="code-cell" data-line-number="424" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC425" class="react-file-line html-div" data-testid="code-cell" data-line-number="425" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC426" class="react-file-line html-div" data-testid="code-cell" data-line-number="426" style="position:relative"> @Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC427" class="react-file-line html-div" data-testid="code-cell" data-line-number="427" style="position:relative"> <span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">UpdateTransitionTransitionSpec</span>(<span class="pl-smi">transition</span><span class="pl-k">:</span> <span class="pl-en">Transition</span><<span class="pl-en">BoxState</span>>) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC428" class="react-file-line html-div" data-testid="code-cell" data-line-number="428" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_transitions_spec]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC429" class="react-file-line html-div" data-testid="code-cell" data-line-number="429" style="position:relative"> <span class="pl-k">val</span> color by transition.animateColor(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC430" class="react-file-line html-div" data-testid="code-cell" data-line-number="430" style="position:relative"> transitionSpec <span class="pl-k">=</span> {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC431" class="react-file-line html-div" data-testid="code-cell" data-line-number="431" style="position:relative"> <span class="pl-k">when</span> {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC432" class="react-file-line html-div" data-testid="code-cell" data-line-number="432" style="position:relative"> <span class="pl-en">BoxState</span>.<span class="pl-en">Expanded</span> isTransitioningTo <span class="pl-en">BoxState</span>.<span class="pl-en">Collapsed</span> <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC433" class="react-file-line html-div" data-testid="code-cell" data-line-number="433" style="position:relative"> spring(stiffness <span class="pl-k">=</span> <span class="pl-c1">50f</span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC434" class="react-file-line html-div" data-testid="code-cell" data-line-number="434" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC435" class="react-file-line html-div" data-testid="code-cell" data-line-number="435" style="position:relative"> <span class="pl-k">else</span> <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC436" class="react-file-line html-div" data-testid="code-cell" data-line-number="436" style="position:relative"> tween(durationMillis <span class="pl-k">=</span> <span class="pl-c1">500</span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC437" class="react-file-line html-div" data-testid="code-cell" data-line-number="437" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC438" class="react-file-line html-div" data-testid="code-cell" data-line-number="438" style="position:relative"> }, label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>color<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC439" class="react-file-line html-div" data-testid="code-cell" data-line-number="439" style="position:relative"> ) { state <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC440" class="react-file-line html-div" data-testid="code-cell" data-line-number="440" style="position:relative"> <span class="pl-k">when</span> (state) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC441" class="react-file-line html-div" data-testid="code-cell" data-line-number="441" style="position:relative"> <span class="pl-en">BoxState</span>.<span class="pl-en">Collapsed</span> <span class="pl-k">-></span> <span class="pl-en">MaterialTheme</span>.colorScheme.primary</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC442" class="react-file-line html-div" data-testid="code-cell" data-line-number="442" style="position:relative"> <span class="pl-en">BoxState</span>.<span class="pl-en">Expanded</span> <span class="pl-k">-></span> <span class="pl-en">MaterialTheme</span>.colorScheme.background</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC443" class="react-file-line html-div" data-testid="code-cell" data-line-number="443" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC444" class="react-file-line html-div" data-testid="code-cell" data-line-number="444" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC445" class="react-file-line html-div" data-testid="code-cell" data-line-number="445" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_transitions_spec]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC446" class="react-file-line html-div" data-testid="code-cell" data-line-number="446" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC447" class="react-file-line html-div" data-testid="code-cell" data-line-number="447" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC448" class="react-file-line html-div" data-testid="code-cell" data-line-number="448" style="position:relative"> @Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC449" class="react-file-line html-div" data-testid="code-cell" data-line-number="449" style="position:relative"> <span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">UpdateTransitionMutableTransitionState</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC450" class="react-file-line html-div" data-testid="code-cell" data-line-number="450" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_transitions_state]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC451" class="react-file-line html-div" data-testid="code-cell" data-line-number="451" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Start in collapsed state and immediately animate to expanded</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC452" class="react-file-line html-div" data-testid="code-cell" data-line-number="452" style="position:relative"> <span class="pl-k">var</span> currentState <span class="pl-k">=</span> remember { <span class="pl-en">MutableTransitionState</span>(<span class="pl-en">BoxState</span>.<span class="pl-en">Collapsed</span>) }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC453" class="react-file-line html-div" data-testid="code-cell" data-line-number="453" style="position:relative"> currentState.targetState <span class="pl-k">=</span> <span class="pl-en">BoxState</span>.<span class="pl-en">Expanded</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC454" class="react-file-line html-div" data-testid="code-cell" data-line-number="454" style="position:relative"> <span class="pl-k">val</span> transition <span class="pl-k">=</span> rememberTransition(currentState, label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>box state<span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC455" class="react-file-line html-div" data-testid="code-cell" data-line-number="455" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> ……</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC456" class="react-file-line html-div" data-testid="code-cell" data-line-number="456" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_transitions_state]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC457" class="react-file-line html-div" data-testid="code-cell" data-line-number="457" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC458" class="react-file-line html-div" data-testid="code-cell" data-line-number="458" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC459" class="react-file-line html-div" data-testid="code-cell" data-line-number="459" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC460" class="react-file-line html-div" data-testid="code-cell" data-line-number="460" style="position:relative">@OptIn(<span class="pl-en">ExperimentalTransitionApi</span>::<span class="pl-c1">class</span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC461" class="react-file-line html-div" data-testid="code-cell" data-line-number="461" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">object</span> UpdateTransitionCreateChildTransition {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC462" class="react-file-line html-div" data-testid="code-cell" data-line-number="462" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC463" class="react-file-line html-div" data-testid="code-cell" data-line-number="463" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_transitions_dialer_example]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC464" class="react-file-line html-div" data-testid="code-cell" data-line-number="464" style="position:relative"> <span class="pl-k">enum</span> <span class="pl-k">class</span> <span class="pl-en">DialerState</span> { <span class="pl-en">DialerMinimized</span>, <span class="pl-en">NumberPad</span> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC465" class="react-file-line html-div" data-testid="code-cell" data-line-number="465" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC466" class="react-file-line html-div" data-testid="code-cell" data-line-number="466" style="position:relative"> @Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC467" class="react-file-line html-div" data-testid="code-cell" data-line-number="467" style="position:relative"> <span class="pl-k">fun</span> <span class="pl-en">DialerButton</span>(<span class="pl-smi">isVisibleTransition</span><span class="pl-k">:</span> <span class="pl-en">Transition</span><<span class="pl-en">Boolean</span>>) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC468" class="react-file-line html-div" data-testid="code-cell" data-line-number="468" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> `isVisibleTransition` spares the need for the content to know</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC469" class="react-file-line html-div" data-testid="code-cell" data-line-number="469" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> about other DialerStates. Instead, the content can focus on</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC470" class="react-file-line html-div" data-testid="code-cell" data-line-number="470" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> animating the state change between visible and not visible.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC471" class="react-file-line html-div" data-testid="code-cell" data-line-number="471" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC472" class="react-file-line html-div" data-testid="code-cell" data-line-number="472" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC473" class="react-file-line html-div" data-testid="code-cell" data-line-number="473" style="position:relative"> @Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC474" class="react-file-line html-div" data-testid="code-cell" data-line-number="474" style="position:relative"> <span class="pl-k">fun</span> <span class="pl-en">NumberPad</span>(<span class="pl-smi">isVisibleTransition</span><span class="pl-k">:</span> <span class="pl-en">Transition</span><<span class="pl-en">Boolean</span>>) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC475" class="react-file-line html-div" data-testid="code-cell" data-line-number="475" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> `isVisibleTransition` spares the need for the content to know</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC476" class="react-file-line html-div" data-testid="code-cell" data-line-number="476" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> about other DialerStates. Instead, the content can focus on</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC477" class="react-file-line html-div" data-testid="code-cell" data-line-number="477" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> animating the state change between visible and not visible.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC478" class="react-file-line html-div" data-testid="code-cell" data-line-number="478" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC479" class="react-file-line html-div" data-testid="code-cell" data-line-number="479" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC480" class="react-file-line html-div" data-testid="code-cell" data-line-number="480" style="position:relative"> @Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC481" class="react-file-line html-div" data-testid="code-cell" data-line-number="481" style="position:relative"> <span class="pl-k">fun</span> <span class="pl-en">Dialer</span>(<span class="pl-smi">dialerState</span><span class="pl-k">:</span> <span class="pl-en">DialerState</span>) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC482" class="react-file-line html-div" data-testid="code-cell" data-line-number="482" style="position:relative"> <span class="pl-k">val</span> transition <span class="pl-k">=</span> updateTransition(dialerState, label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>dialer state<span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC483" class="react-file-line html-div" data-testid="code-cell" data-line-number="483" style="position:relative"> <span class="pl-en">Box</span> {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC484" class="react-file-line html-div" data-testid="code-cell" data-line-number="484" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Creates separate child transitions of Boolean type for NumberPad</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC485" class="react-file-line html-div" data-testid="code-cell" data-line-number="485" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> and DialerButton for any content animation between visible and</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC486" class="react-file-line html-div" data-testid="code-cell" data-line-number="486" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> not visible</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC487" class="react-file-line html-div" data-testid="code-cell" data-line-number="487" style="position:relative"> <span class="pl-en">NumberPad</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC488" class="react-file-line html-div" data-testid="code-cell" data-line-number="488" style="position:relative"> transition.createChildTransition {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC489" class="react-file-line html-div" data-testid="code-cell" data-line-number="489" style="position:relative"> it <span class="pl-k">==</span> <span class="pl-en">DialerState</span>.<span class="pl-en">NumberPad</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC490" class="react-file-line html-div" data-testid="code-cell" data-line-number="490" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC491" class="react-file-line html-div" data-testid="code-cell" data-line-number="491" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC492" class="react-file-line html-div" data-testid="code-cell" data-line-number="492" style="position:relative"> <span class="pl-en">DialerButton</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC493" class="react-file-line html-div" data-testid="code-cell" data-line-number="493" style="position:relative"> transition.createChildTransition {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC494" class="react-file-line html-div" data-testid="code-cell" data-line-number="494" style="position:relative"> it <span class="pl-k">==</span> <span class="pl-en">DialerState</span>.<span class="pl-en">DialerMinimized</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC495" class="react-file-line html-div" data-testid="code-cell" data-line-number="495" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC496" class="react-file-line html-div" data-testid="code-cell" data-line-number="496" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC497" class="react-file-line html-div" data-testid="code-cell" data-line-number="497" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC498" class="react-file-line html-div" data-testid="code-cell" data-line-number="498" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC499" class="react-file-line html-div" data-testid="code-cell" data-line-number="499" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_transitions_dialer_example]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC500" class="react-file-line html-div" data-testid="code-cell" data-line-number="500" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC501" class="react-file-line html-div" data-testid="code-cell" data-line-number="501" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC502" class="react-file-line html-div" data-testid="code-cell" data-line-number="502" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC503" class="react-file-line html-div" data-testid="code-cell" data-line-number="503" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">UpdateTransitionAnimatedVisibility</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC504" class="react-file-line html-div" data-testid="code-cell" data-line-number="504" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_transitions_animated_visibility]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC505" class="react-file-line html-div" data-testid="code-cell" data-line-number="505" style="position:relative"> <span class="pl-k">var</span> selected by remember { mutableStateOf(<span class="pl-c1">false</span>) }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC506" class="react-file-line html-div" data-testid="code-cell" data-line-number="506" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Animates changes when `selected` is changed.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC507" class="react-file-line html-div" data-testid="code-cell" data-line-number="507" style="position:relative"> <span class="pl-k">val</span> transition <span class="pl-k">=</span> updateTransition(selected, label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>selected state<span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC508" class="react-file-line html-div" data-testid="code-cell" data-line-number="508" style="position:relative"> <span class="pl-k">val</span> borderColor by transition.animateColor(label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>border color<span class="pl-pds">"</span></span>) { isSelected <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC509" class="react-file-line html-div" data-testid="code-cell" data-line-number="509" style="position:relative"> <span class="pl-k">if</span> (isSelected) <span class="pl-en">Color</span>.<span class="pl-en">Magenta</span> <span class="pl-k">else</span> <span class="pl-en">Color</span>.<span class="pl-en">White</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC510" class="react-file-line html-div" data-testid="code-cell" data-line-number="510" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC511" class="react-file-line html-div" data-testid="code-cell" data-line-number="511" style="position:relative"> <span class="pl-k">val</span> elevation by transition.animateDp(label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>elevation<span class="pl-pds">"</span></span>) { isSelected <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC512" class="react-file-line html-div" data-testid="code-cell" data-line-number="512" style="position:relative"> <span class="pl-k">if</span> (isSelected) <span class="pl-c1">10</span>.dp <span class="pl-k">else</span> <span class="pl-c1">2</span>.dp</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC513" class="react-file-line html-div" data-testid="code-cell" data-line-number="513" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC514" class="react-file-line html-div" data-testid="code-cell" data-line-number="514" style="position:relative"> <span class="pl-en">Surface</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC515" class="react-file-line html-div" data-testid="code-cell" data-line-number="515" style="position:relative"> onClick <span class="pl-k">=</span> { selected <span class="pl-k">=</span> <span class="pl-k">!</span>selected },</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC516" class="react-file-line html-div" data-testid="code-cell" data-line-number="516" style="position:relative"> shape <span class="pl-k">=</span> <span class="pl-en">RoundedCornerShape</span>(<span class="pl-c1">8</span>.dp),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC517" class="react-file-line html-div" data-testid="code-cell" data-line-number="517" style="position:relative"> border <span class="pl-k">=</span> <span class="pl-en">BorderStroke</span>(<span class="pl-c1">2</span>.dp, borderColor),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC518" class="react-file-line html-div" data-testid="code-cell" data-line-number="518" style="position:relative"> shadowElevation <span class="pl-k">=</span> elevation</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC519" class="react-file-line html-div" data-testid="code-cell" data-line-number="519" style="position:relative"> ) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC520" class="react-file-line html-div" data-testid="code-cell" data-line-number="520" style="position:relative"> <span class="pl-en">Column</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC521" class="react-file-line html-div" data-testid="code-cell" data-line-number="521" style="position:relative"> modifier <span class="pl-k">=</span> <span class="pl-en">Modifier</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC522" class="react-file-line html-div" data-testid="code-cell" data-line-number="522" style="position:relative"> .fillMaxWidth()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC523" class="react-file-line html-div" data-testid="code-cell" data-line-number="523" style="position:relative"> .padding(<span class="pl-c1">16</span>.dp)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC524" class="react-file-line html-div" data-testid="code-cell" data-line-number="524" style="position:relative"> ) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC525" class="react-file-line html-div" data-testid="code-cell" data-line-number="525" style="position:relative"> <span class="pl-en">Text</span>(text <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>Hello, world!<span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC526" class="react-file-line html-div" data-testid="code-cell" data-line-number="526" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> AnimatedVisibility as a part of the transition.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC527" class="react-file-line html-div" data-testid="code-cell" data-line-number="527" style="position:relative"> transition.<span class="pl-en">AnimatedVisibility</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC528" class="react-file-line html-div" data-testid="code-cell" data-line-number="528" style="position:relative"> visible <span class="pl-k">=</span> { targetSelected <span class="pl-k">-></span> targetSelected },</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC529" class="react-file-line html-div" data-testid="code-cell" data-line-number="529" style="position:relative"> enter <span class="pl-k">=</span> expandVertically(),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC530" class="react-file-line html-div" data-testid="code-cell" data-line-number="530" style="position:relative"> exit <span class="pl-k">=</span> shrinkVertically()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC531" class="react-file-line html-div" data-testid="code-cell" data-line-number="531" style="position:relative"> ) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC532" class="react-file-line html-div" data-testid="code-cell" data-line-number="532" style="position:relative"> <span class="pl-en">Text</span>(text <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>It is fine today.<span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC533" class="react-file-line html-div" data-testid="code-cell" data-line-number="533" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC534" class="react-file-line html-div" data-testid="code-cell" data-line-number="534" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> AnimatedContent as a part of the transition.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC535" class="react-file-line html-div" data-testid="code-cell" data-line-number="535" style="position:relative"> transition.<span class="pl-en">AnimatedContent</span> { targetState <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC536" class="react-file-line html-div" data-testid="code-cell" data-line-number="536" style="position:relative"> <span class="pl-k">if</span> (targetState) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC537" class="react-file-line html-div" data-testid="code-cell" data-line-number="537" style="position:relative"> <span class="pl-en">Text</span>(text <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>Selected<span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC538" class="react-file-line html-div" data-testid="code-cell" data-line-number="538" style="position:relative"> } <span class="pl-k">else</span> {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC539" class="react-file-line html-div" data-testid="code-cell" data-line-number="539" style="position:relative"> <span class="pl-en">Icon</span>(imageVector <span class="pl-k">=</span> <span class="pl-en">Icons</span>.<span class="pl-en">Default</span>.<span class="pl-en">Phone</span>, contentDescription <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>Phone<span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC540" class="react-file-line html-div" data-testid="code-cell" data-line-number="540" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC541" class="react-file-line html-div" data-testid="code-cell" data-line-number="541" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC542" class="react-file-line html-div" data-testid="code-cell" data-line-number="542" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC543" class="react-file-line html-div" data-testid="code-cell" data-line-number="543" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC544" class="react-file-line html-div" data-testid="code-cell" data-line-number="544" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_transitions_animated_visibility]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC545" class="react-file-line html-div" data-testid="code-cell" data-line-number="545" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC546" class="react-file-line html-div" data-testid="code-cell" data-line-number="546" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC547" class="react-file-line html-div" data-testid="code-cell" data-line-number="547" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">object</span> UpdateTransitionEncapsulating {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC548" class="react-file-line html-div" data-testid="code-cell" data-line-number="548" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_transitions_encapsulating]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC549" class="react-file-line html-div" data-testid="code-cell" data-line-number="549" style="position:relative"> <span class="pl-k">enum</span> <span class="pl-k">class</span> <span class="pl-en">BoxState</span> { <span class="pl-en">Collapsed</span>, <span class="pl-en">Expanded</span> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC550" class="react-file-line html-div" data-testid="code-cell" data-line-number="550" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC551" class="react-file-line html-div" data-testid="code-cell" data-line-number="551" style="position:relative"> @Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC552" class="react-file-line html-div" data-testid="code-cell" data-line-number="552" style="position:relative"> <span class="pl-k">fun</span> <span class="pl-en">AnimatingBox</span>(<span class="pl-smi">boxState</span><span class="pl-k">:</span> <span class="pl-en">BoxState</span>) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC553" class="react-file-line html-div" data-testid="code-cell" data-line-number="553" style="position:relative"> <span class="pl-k">val</span> transitionData <span class="pl-k">=</span> updateTransitionData(boxState)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC554" class="react-file-line html-div" data-testid="code-cell" data-line-number="554" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> UI tree</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC555" class="react-file-line html-div" data-testid="code-cell" data-line-number="555" style="position:relative"> <span class="pl-en">Box</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC556" class="react-file-line html-div" data-testid="code-cell" data-line-number="556" style="position:relative"> modifier <span class="pl-k">=</span> <span class="pl-en">Modifier</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC557" class="react-file-line html-div" data-testid="code-cell" data-line-number="557" style="position:relative"> .background(transitionData.color)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC558" class="react-file-line html-div" data-testid="code-cell" data-line-number="558" style="position:relative"> .size(transitionData.size)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC559" class="react-file-line html-div" data-testid="code-cell" data-line-number="559" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC560" class="react-file-line html-div" data-testid="code-cell" data-line-number="560" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC561" class="react-file-line html-div" data-testid="code-cell" data-line-number="561" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC562" class="react-file-line html-div" data-testid="code-cell" data-line-number="562" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Holds the animation values.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC563" class="react-file-line html-div" data-testid="code-cell" data-line-number="563" style="position:relative"> <span class="pl-k">private</span> <span class="pl-k">class</span> <span class="pl-en">TransitionData</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC564" class="react-file-line html-div" data-testid="code-cell" data-line-number="564" style="position:relative"> <span class="pl-smi">color</span><span class="pl-k">:</span> <span class="pl-en">State</span><<span class="pl-en">Color</span>>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC565" class="react-file-line html-div" data-testid="code-cell" data-line-number="565" style="position:relative"> <span class="pl-smi">size</span><span class="pl-k">:</span> <span class="pl-en">State</span><<span class="pl-en">Dp</span>></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC566" class="react-file-line html-div" data-testid="code-cell" data-line-number="566" style="position:relative"> ) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC567" class="react-file-line html-div" data-testid="code-cell" data-line-number="567" style="position:relative"> <span class="pl-k">val</span> color by color</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC568" class="react-file-line html-div" data-testid="code-cell" data-line-number="568" style="position:relative"> <span class="pl-k">val</span> size by size</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC569" class="react-file-line html-div" data-testid="code-cell" data-line-number="569" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC570" class="react-file-line html-div" data-testid="code-cell" data-line-number="570" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC571" class="react-file-line html-div" data-testid="code-cell" data-line-number="571" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Create a Transition and return its animation values.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC572" class="react-file-line html-div" data-testid="code-cell" data-line-number="572" style="position:relative"> @Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC573" class="react-file-line html-div" data-testid="code-cell" data-line-number="573" style="position:relative"> <span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">updateTransitionData</span>(<span class="pl-smi">boxState</span><span class="pl-k">:</span> <span class="pl-en">BoxState</span>): <span class="pl-en">TransitionData</span> {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC574" class="react-file-line html-div" data-testid="code-cell" data-line-number="574" style="position:relative"> <span class="pl-k">val</span> transition <span class="pl-k">=</span> updateTransition(boxState, label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>box state<span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC575" class="react-file-line html-div" data-testid="code-cell" data-line-number="575" style="position:relative"> <span class="pl-k">val</span> color <span class="pl-k">=</span> transition.animateColor(label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>color<span class="pl-pds">"</span></span>) { state <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC576" class="react-file-line html-div" data-testid="code-cell" data-line-number="576" style="position:relative"> <span class="pl-k">when</span> (state) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC577" class="react-file-line html-div" data-testid="code-cell" data-line-number="577" style="position:relative"> <span class="pl-en">BoxState</span>.<span class="pl-en">Collapsed</span> <span class="pl-k">-></span> <span class="pl-en">Color</span>.<span class="pl-en">Gray</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC578" class="react-file-line html-div" data-testid="code-cell" data-line-number="578" style="position:relative"> <span class="pl-en">BoxState</span>.<span class="pl-en">Expanded</span> <span class="pl-k">-></span> <span class="pl-en">Color</span>.<span class="pl-en">Red</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC579" class="react-file-line html-div" data-testid="code-cell" data-line-number="579" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC580" class="react-file-line html-div" data-testid="code-cell" data-line-number="580" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC581" class="react-file-line html-div" data-testid="code-cell" data-line-number="581" style="position:relative"> <span class="pl-k">val</span> size <span class="pl-k">=</span> transition.animateDp(label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>size<span class="pl-pds">"</span></span>) { state <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC582" class="react-file-line html-div" data-testid="code-cell" data-line-number="582" style="position:relative"> <span class="pl-k">when</span> (state) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC583" class="react-file-line html-div" data-testid="code-cell" data-line-number="583" style="position:relative"> <span class="pl-en">BoxState</span>.<span class="pl-en">Collapsed</span> <span class="pl-k">-></span> <span class="pl-c1">64</span>.dp</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC584" class="react-file-line html-div" data-testid="code-cell" data-line-number="584" style="position:relative"> <span class="pl-en">BoxState</span>.<span class="pl-en">Expanded</span> <span class="pl-k">-></span> <span class="pl-c1">128</span>.dp</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC585" class="react-file-line html-div" data-testid="code-cell" data-line-number="585" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC586" class="react-file-line html-div" data-testid="code-cell" data-line-number="586" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC587" class="react-file-line html-div" data-testid="code-cell" data-line-number="587" style="position:relative"> <span class="pl-k">return</span> remember(transition) { <span class="pl-en">TransitionData</span>(color, size) }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC588" class="react-file-line html-div" data-testid="code-cell" data-line-number="588" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC589" class="react-file-line html-div" data-testid="code-cell" data-line-number="589" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_transitions_encapsulating]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC590" class="react-file-line html-div" data-testid="code-cell" data-line-number="590" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC591" class="react-file-line html-div" data-testid="code-cell" data-line-number="591" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC592" class="react-file-line html-div" data-testid="code-cell" data-line-number="592" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC593" class="react-file-line html-div" data-testid="code-cell" data-line-number="593" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">RememberInfiniteTransitionSimple</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC594" class="react-file-line html-div" data-testid="code-cell" data-line-number="594" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_infinite_transition_simple]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC595" class="react-file-line html-div" data-testid="code-cell" data-line-number="595" style="position:relative"> <span class="pl-k">val</span> infiniteTransition <span class="pl-k">=</span> rememberInfiniteTransition(label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>infinite<span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC596" class="react-file-line html-div" data-testid="code-cell" data-line-number="596" style="position:relative"> <span class="pl-k">val</span> color by infiniteTransition.animateColor(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC597" class="react-file-line html-div" data-testid="code-cell" data-line-number="597" style="position:relative"> initialValue <span class="pl-k">=</span> <span class="pl-en">Color</span>.<span class="pl-en">Red</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC598" class="react-file-line html-div" data-testid="code-cell" data-line-number="598" style="position:relative"> targetValue <span class="pl-k">=</span> <span class="pl-en">Color</span>.<span class="pl-en">Green</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC599" class="react-file-line html-div" data-testid="code-cell" data-line-number="599" style="position:relative"> animationSpec <span class="pl-k">=</span> infiniteRepeatable(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC600" class="react-file-line html-div" data-testid="code-cell" data-line-number="600" style="position:relative"> animation <span class="pl-k">=</span> tween(<span class="pl-c1">1000</span>, easing <span class="pl-k">=</span> <span class="pl-en">LinearEasing</span>),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC601" class="react-file-line html-div" data-testid="code-cell" data-line-number="601" style="position:relative"> repeatMode <span class="pl-k">=</span> <span class="pl-en">RepeatMode</span>.<span class="pl-en">Reverse</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC602" class="react-file-line html-div" data-testid="code-cell" data-line-number="602" style="position:relative"> ),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC603" class="react-file-line html-div" data-testid="code-cell" data-line-number="603" style="position:relative"> label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>color<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC604" class="react-file-line html-div" data-testid="code-cell" data-line-number="604" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC605" class="react-file-line html-div" data-testid="code-cell" data-line-number="605" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC606" class="react-file-line html-div" data-testid="code-cell" data-line-number="606" style="position:relative"> <span class="pl-en">Box</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC607" class="react-file-line html-div" data-testid="code-cell" data-line-number="607" style="position:relative"> <span class="pl-en">Modifier</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC608" class="react-file-line html-div" data-testid="code-cell" data-line-number="608" style="position:relative"> .fillMaxSize()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC609" class="react-file-line html-div" data-testid="code-cell" data-line-number="609" style="position:relative"> .background(color)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC610" class="react-file-line html-div" data-testid="code-cell" data-line-number="610" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC611" class="react-file-line html-div" data-testid="code-cell" data-line-number="611" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_infinite_transition_simple]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC612" class="react-file-line html-div" data-testid="code-cell" data-line-number="612" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC613" class="react-file-line html-div" data-testid="code-cell" data-line-number="613" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC614" class="react-file-line html-div" data-testid="code-cell" data-line-number="614" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC615" class="react-file-line html-div" data-testid="code-cell" data-line-number="615" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimatableSimple</span>(<span class="pl-smi">ok</span><span class="pl-k">:</span> <span class="pl-c1">Boolean</span>) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC616" class="react-file-line html-div" data-testid="code-cell" data-line-number="616" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_animatable_simple]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC617" class="react-file-line html-div" data-testid="code-cell" data-line-number="617" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Start out gray and animate to green/red based on `ok`</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC618" class="react-file-line html-div" data-testid="code-cell" data-line-number="618" style="position:relative"> <span class="pl-k">val</span> color <span class="pl-k">=</span> remember { <span class="pl-en">Animatable</span>(<span class="pl-en">Color</span>.<span class="pl-en">Gray</span>) }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC619" class="react-file-line html-div" data-testid="code-cell" data-line-number="619" style="position:relative"> <span class="pl-en">LaunchedEffect</span>(ok) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC620" class="react-file-line html-div" data-testid="code-cell" data-line-number="620" style="position:relative"> color.animateTo(<span class="pl-k">if</span> (ok) <span class="pl-en">Color</span>.<span class="pl-en">Green</span> <span class="pl-k">else</span> <span class="pl-en">Color</span>.<span class="pl-en">Red</span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC621" class="react-file-line html-div" data-testid="code-cell" data-line-number="621" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC622" class="react-file-line html-div" data-testid="code-cell" data-line-number="622" style="position:relative"> <span class="pl-en">Box</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC623" class="react-file-line html-div" data-testid="code-cell" data-line-number="623" style="position:relative"> <span class="pl-en">Modifier</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC624" class="react-file-line html-div" data-testid="code-cell" data-line-number="624" style="position:relative"> .fillMaxSize()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC625" class="react-file-line html-div" data-testid="code-cell" data-line-number="625" style="position:relative"> .background(color.value)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC626" class="react-file-line html-div" data-testid="code-cell" data-line-number="626" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC627" class="react-file-line html-div" data-testid="code-cell" data-line-number="627" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_animatable_simple]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC628" class="react-file-line html-div" data-testid="code-cell" data-line-number="628" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC629" class="react-file-line html-div" data-testid="code-cell" data-line-number="629" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC630" class="react-file-line html-div" data-testid="code-cell" data-line-number="630" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC631" class="react-file-line html-div" data-testid="code-cell" data-line-number="631" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">TargetBasedAnimationSimple</span>(<span class="pl-smi">someCustomCondition</span><span class="pl-k">:</span> () <span class="pl-k">-></span> <span class="pl-c1">Boolean</span>) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC632" class="react-file-line html-div" data-testid="code-cell" data-line-number="632" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_target_based_animation_simple]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC633" class="react-file-line html-div" data-testid="code-cell" data-line-number="633" style="position:relative"> <span class="pl-k">val</span> anim <span class="pl-k">=</span> remember {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC634" class="react-file-line html-div" data-testid="code-cell" data-line-number="634" style="position:relative"> <span class="pl-en">TargetBasedAnimation</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC635" class="react-file-line html-div" data-testid="code-cell" data-line-number="635" style="position:relative"> animationSpec <span class="pl-k">=</span> tween(<span class="pl-c1">200</span>),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC636" class="react-file-line html-div" data-testid="code-cell" data-line-number="636" style="position:relative"> typeConverter <span class="pl-k">=</span> <span class="pl-c1">Float</span>.<span class="pl-en">VectorConverter</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC637" class="react-file-line html-div" data-testid="code-cell" data-line-number="637" style="position:relative"> initialValue <span class="pl-k">=</span> <span class="pl-c1">200f</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC638" class="react-file-line html-div" data-testid="code-cell" data-line-number="638" style="position:relative"> targetValue <span class="pl-k">=</span> <span class="pl-c1">1000f</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC639" class="react-file-line html-div" data-testid="code-cell" data-line-number="639" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC640" class="react-file-line html-div" data-testid="code-cell" data-line-number="640" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC641" class="react-file-line html-div" data-testid="code-cell" data-line-number="641" style="position:relative"> <span class="pl-k">var</span> playTime by remember { mutableLongStateOf(<span class="pl-c1">0L</span>) }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC642" class="react-file-line html-div" data-testid="code-cell" data-line-number="642" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC643" class="react-file-line html-div" data-testid="code-cell" data-line-number="643" style="position:relative"> <span class="pl-en">LaunchedEffect</span>(anim) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC644" class="react-file-line html-div" data-testid="code-cell" data-line-number="644" style="position:relative"> <span class="pl-k">val</span> startTime <span class="pl-k">=</span> withFrameNanos { it }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC645" class="react-file-line html-div" data-testid="code-cell" data-line-number="645" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC646" class="react-file-line html-div" data-testid="code-cell" data-line-number="646" style="position:relative"> <span class="pl-k">do</span> {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC647" class="react-file-line html-div" data-testid="code-cell" data-line-number="647" style="position:relative"> playTime <span class="pl-k">=</span> withFrameNanos { it } <span class="pl-k">-</span> startTime</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC648" class="react-file-line html-div" data-testid="code-cell" data-line-number="648" style="position:relative"> <span class="pl-k">val</span> animationValue <span class="pl-k">=</span> anim.getValueFromNanos(playTime)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC649" class="react-file-line html-div" data-testid="code-cell" data-line-number="649" style="position:relative"> } <span class="pl-k">while</span> (someCustomCondition())</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC650" class="react-file-line html-div" data-testid="code-cell" data-line-number="650" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC651" class="react-file-line html-div" data-testid="code-cell" data-line-number="651" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_target_based_animation_simple]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC652" class="react-file-line html-div" data-testid="code-cell" data-line-number="652" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC653" class="react-file-line html-div" data-testid="code-cell" data-line-number="653" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC654" class="react-file-line html-div" data-testid="code-cell" data-line-number="654" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC655" class="react-file-line html-div" data-testid="code-cell" data-line-number="655" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimationSpecTween</span>(<span class="pl-smi">enabled</span><span class="pl-k">:</span> <span class="pl-c1">Boolean</span>) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC656" class="react-file-line html-div" data-testid="code-cell" data-line-number="656" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_spec_tween]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC657" class="react-file-line html-div" data-testid="code-cell" data-line-number="657" style="position:relative"> <span class="pl-k">val</span> alpha<span class="pl-k">:</span> <span class="pl-c1">Float</span> by animateFloatAsState(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC658" class="react-file-line html-div" data-testid="code-cell" data-line-number="658" style="position:relative"> targetValue <span class="pl-k">=</span> <span class="pl-k">if</span> (enabled) <span class="pl-c1">1f</span> <span class="pl-k">else</span> <span class="pl-c1">0.5f</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC659" class="react-file-line html-div" data-testid="code-cell" data-line-number="659" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Configure the animation duration and easing.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC660" class="react-file-line html-div" data-testid="code-cell" data-line-number="660" style="position:relative"> animationSpec <span class="pl-k">=</span> tween(durationMillis <span class="pl-k">=</span> <span class="pl-c1">300</span>, easing <span class="pl-k">=</span> <span class="pl-en">FastOutSlowInEasing</span>),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC661" class="react-file-line html-div" data-testid="code-cell" data-line-number="661" style="position:relative"> label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>alpha<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC662" class="react-file-line html-div" data-testid="code-cell" data-line-number="662" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC663" class="react-file-line html-div" data-testid="code-cell" data-line-number="663" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_spec_tween]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC664" class="react-file-line html-div" data-testid="code-cell" data-line-number="664" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC665" class="react-file-line html-div" data-testid="code-cell" data-line-number="665" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC666" class="react-file-line html-div" data-testid="code-cell" data-line-number="666" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC667" class="react-file-line html-div" data-testid="code-cell" data-line-number="667" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimationSpecSpring</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC668" class="react-file-line html-div" data-testid="code-cell" data-line-number="668" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_spec_spring]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC669" class="react-file-line html-div" data-testid="code-cell" data-line-number="669" style="position:relative"> <span class="pl-k">val</span> value by animateFloatAsState(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC670" class="react-file-line html-div" data-testid="code-cell" data-line-number="670" style="position:relative"> targetValue <span class="pl-k">=</span> <span class="pl-c1">1f</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC671" class="react-file-line html-div" data-testid="code-cell" data-line-number="671" style="position:relative"> animationSpec <span class="pl-k">=</span> spring(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC672" class="react-file-line html-div" data-testid="code-cell" data-line-number="672" style="position:relative"> dampingRatio <span class="pl-k">=</span> <span class="pl-en">Spring</span>.<span class="pl-en">DampingRatioHighBouncy</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC673" class="react-file-line html-div" data-testid="code-cell" data-line-number="673" style="position:relative"> stiffness <span class="pl-k">=</span> <span class="pl-en">Spring</span>.<span class="pl-en">StiffnessMedium</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC674" class="react-file-line html-div" data-testid="code-cell" data-line-number="674" style="position:relative"> ),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC675" class="react-file-line html-div" data-testid="code-cell" data-line-number="675" style="position:relative"> label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>spring spec<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC676" class="react-file-line html-div" data-testid="code-cell" data-line-number="676" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC677" class="react-file-line html-div" data-testid="code-cell" data-line-number="677" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_spec_spring]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC678" class="react-file-line html-div" data-testid="code-cell" data-line-number="678" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC679" class="react-file-line html-div" data-testid="code-cell" data-line-number="679" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC680" class="react-file-line html-div" data-testid="code-cell" data-line-number="680" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC681" class="react-file-line html-div" data-testid="code-cell" data-line-number="681" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimationSpecTween</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC682" class="react-file-line html-div" data-testid="code-cell" data-line-number="682" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_spec_tween_delay]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC683" class="react-file-line html-div" data-testid="code-cell" data-line-number="683" style="position:relative"> <span class="pl-k">val</span> value by animateFloatAsState(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC684" class="react-file-line html-div" data-testid="code-cell" data-line-number="684" style="position:relative"> targetValue <span class="pl-k">=</span> <span class="pl-c1">1f</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC685" class="react-file-line html-div" data-testid="code-cell" data-line-number="685" style="position:relative"> animationSpec <span class="pl-k">=</span> tween(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC686" class="react-file-line html-div" data-testid="code-cell" data-line-number="686" style="position:relative"> durationMillis <span class="pl-k">=</span> <span class="pl-c1">300</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC687" class="react-file-line html-div" data-testid="code-cell" data-line-number="687" style="position:relative"> delayMillis <span class="pl-k">=</span> <span class="pl-c1">50</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC688" class="react-file-line html-div" data-testid="code-cell" data-line-number="688" style="position:relative"> easing <span class="pl-k">=</span> <span class="pl-en">LinearOutSlowInEasing</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC689" class="react-file-line html-div" data-testid="code-cell" data-line-number="689" style="position:relative"> ),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC690" class="react-file-line html-div" data-testid="code-cell" data-line-number="690" style="position:relative"> label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>tween delay<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC691" class="react-file-line html-div" data-testid="code-cell" data-line-number="691" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC692" class="react-file-line html-div" data-testid="code-cell" data-line-number="692" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_spec_tween_delay]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC693" class="react-file-line html-div" data-testid="code-cell" data-line-number="693" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC694" class="react-file-line html-div" data-testid="code-cell" data-line-number="694" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC695" class="react-file-line html-div" data-testid="code-cell" data-line-number="695" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC696" class="react-file-line html-div" data-testid="code-cell" data-line-number="696" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimationSpecKeyframe</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC697" class="react-file-line html-div" data-testid="code-cell" data-line-number="697" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_spec_keyframe]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC698" class="react-file-line html-div" data-testid="code-cell" data-line-number="698" style="position:relative"> <span class="pl-k">val</span> value by animateFloatAsState(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC699" class="react-file-line html-div" data-testid="code-cell" data-line-number="699" style="position:relative"> targetValue <span class="pl-k">=</span> <span class="pl-c1">1f</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC700" class="react-file-line html-div" data-testid="code-cell" data-line-number="700" style="position:relative"> animationSpec <span class="pl-k">=</span> keyframes {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC701" class="react-file-line html-div" data-testid="code-cell" data-line-number="701" style="position:relative"> durationMillis <span class="pl-k">=</span> <span class="pl-c1">375</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC702" class="react-file-line html-div" data-testid="code-cell" data-line-number="702" style="position:relative"> <span class="pl-c1">0.0f</span> at <span class="pl-c1">0</span> using <span class="pl-en">LinearOutSlowInEasing</span> <span class="pl-c"><span class="pl-c">//</span> for 0-15 ms</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC703" class="react-file-line html-div" data-testid="code-cell" data-line-number="703" style="position:relative"> <span class="pl-c1">0.2f</span> at <span class="pl-c1">15</span> using <span class="pl-en">FastOutLinearInEasing</span> <span class="pl-c"><span class="pl-c">//</span> for 15-75 ms</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC704" class="react-file-line html-div" data-testid="code-cell" data-line-number="704" style="position:relative"> <span class="pl-c1">0.4f</span> at <span class="pl-c1">75</span> <span class="pl-c"><span class="pl-c">//</span> ms</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC705" class="react-file-line html-div" data-testid="code-cell" data-line-number="705" style="position:relative"> <span class="pl-c1">0.4f</span> at <span class="pl-c1">225</span> <span class="pl-c"><span class="pl-c">//</span> ms</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC706" class="react-file-line html-div" data-testid="code-cell" data-line-number="706" style="position:relative"> },</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC707" class="react-file-line html-div" data-testid="code-cell" data-line-number="707" style="position:relative"> label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>keyframe<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC708" class="react-file-line html-div" data-testid="code-cell" data-line-number="708" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC709" class="react-file-line html-div" data-testid="code-cell" data-line-number="709" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_spec_keyframe]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC710" class="react-file-line html-div" data-testid="code-cell" data-line-number="710" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC711" class="react-file-line html-div" data-testid="code-cell" data-line-number="711" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC712" class="react-file-line html-div" data-testid="code-cell" data-line-number="712" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC713" class="react-file-line html-div" data-testid="code-cell" data-line-number="713" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimationSpecRepeatable</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC714" class="react-file-line html-div" data-testid="code-cell" data-line-number="714" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_spec_repeatable]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC715" class="react-file-line html-div" data-testid="code-cell" data-line-number="715" style="position:relative"> <span class="pl-k">val</span> value by animateFloatAsState(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC716" class="react-file-line html-div" data-testid="code-cell" data-line-number="716" style="position:relative"> targetValue <span class="pl-k">=</span> <span class="pl-c1">1f</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC717" class="react-file-line html-div" data-testid="code-cell" data-line-number="717" style="position:relative"> animationSpec <span class="pl-k">=</span> repeatable(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC718" class="react-file-line html-div" data-testid="code-cell" data-line-number="718" style="position:relative"> iterations <span class="pl-k">=</span> <span class="pl-c1">3</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC719" class="react-file-line html-div" data-testid="code-cell" data-line-number="719" style="position:relative"> animation <span class="pl-k">=</span> tween(durationMillis <span class="pl-k">=</span> <span class="pl-c1">300</span>),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC720" class="react-file-line html-div" data-testid="code-cell" data-line-number="720" style="position:relative"> repeatMode <span class="pl-k">=</span> <span class="pl-en">RepeatMode</span>.<span class="pl-en">Reverse</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC721" class="react-file-line html-div" data-testid="code-cell" data-line-number="721" style="position:relative"> ),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC722" class="react-file-line html-div" data-testid="code-cell" data-line-number="722" style="position:relative"> label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>repeatable spec<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC723" class="react-file-line html-div" data-testid="code-cell" data-line-number="723" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC724" class="react-file-line html-div" data-testid="code-cell" data-line-number="724" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_spec_repeatable]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC725" class="react-file-line html-div" data-testid="code-cell" data-line-number="725" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC726" class="react-file-line html-div" data-testid="code-cell" data-line-number="726" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC727" class="react-file-line html-div" data-testid="code-cell" data-line-number="727" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC728" class="react-file-line html-div" data-testid="code-cell" data-line-number="728" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimationSpecInfiniteRepeatable</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC729" class="react-file-line html-div" data-testid="code-cell" data-line-number="729" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_spec_infinite_repeatable]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC730" class="react-file-line html-div" data-testid="code-cell" data-line-number="730" style="position:relative"> <span class="pl-k">val</span> value by animateFloatAsState(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC731" class="react-file-line html-div" data-testid="code-cell" data-line-number="731" style="position:relative"> targetValue <span class="pl-k">=</span> <span class="pl-c1">1f</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC732" class="react-file-line html-div" data-testid="code-cell" data-line-number="732" style="position:relative"> animationSpec <span class="pl-k">=</span> infiniteRepeatable(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC733" class="react-file-line html-div" data-testid="code-cell" data-line-number="733" style="position:relative"> animation <span class="pl-k">=</span> tween(durationMillis <span class="pl-k">=</span> <span class="pl-c1">300</span>),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC734" class="react-file-line html-div" data-testid="code-cell" data-line-number="734" style="position:relative"> repeatMode <span class="pl-k">=</span> <span class="pl-en">RepeatMode</span>.<span class="pl-en">Reverse</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC735" class="react-file-line html-div" data-testid="code-cell" data-line-number="735" style="position:relative"> ),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC736" class="react-file-line html-div" data-testid="code-cell" data-line-number="736" style="position:relative"> label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>infinite repeatable<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC737" class="react-file-line html-div" data-testid="code-cell" data-line-number="737" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC738" class="react-file-line html-div" data-testid="code-cell" data-line-number="738" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_spec_infinite_repeatable]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC739" class="react-file-line html-div" data-testid="code-cell" data-line-number="739" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC740" class="react-file-line html-div" data-testid="code-cell" data-line-number="740" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC741" class="react-file-line html-div" data-testid="code-cell" data-line-number="741" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC742" class="react-file-line html-div" data-testid="code-cell" data-line-number="742" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimationSpecSnap</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC743" class="react-file-line html-div" data-testid="code-cell" data-line-number="743" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_spec_snap]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC744" class="react-file-line html-div" data-testid="code-cell" data-line-number="744" style="position:relative"> <span class="pl-k">val</span> value by animateFloatAsState(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC745" class="react-file-line html-div" data-testid="code-cell" data-line-number="745" style="position:relative"> targetValue <span class="pl-k">=</span> <span class="pl-c1">1f</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC746" class="react-file-line html-div" data-testid="code-cell" data-line-number="746" style="position:relative"> animationSpec <span class="pl-k">=</span> snap(delayMillis <span class="pl-k">=</span> <span class="pl-c1">50</span>),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC747" class="react-file-line html-div" data-testid="code-cell" data-line-number="747" style="position:relative"> label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>snap spec<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC748" class="react-file-line html-div" data-testid="code-cell" data-line-number="748" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC749" class="react-file-line html-div" data-testid="code-cell" data-line-number="749" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_spec_snap]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC750" class="react-file-line html-div" data-testid="code-cell" data-line-number="750" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC751" class="react-file-line html-div" data-testid="code-cell" data-line-number="751" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC752" class="react-file-line html-div" data-testid="code-cell" data-line-number="752" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">object</span> Easing {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC753" class="react-file-line html-div" data-testid="code-cell" data-line-number="753" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_easing_usage]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC754" class="react-file-line html-div" data-testid="code-cell" data-line-number="754" style="position:relative"> <span class="pl-k">val</span> <span class="pl-en">CustomEasing</span> <span class="pl-k">=</span> <span class="pl-en">Easing</span> { fraction <span class="pl-k">-></span> fraction <span class="pl-k">*</span> fraction }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC755" class="react-file-line html-div" data-testid="code-cell" data-line-number="755" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC756" class="react-file-line html-div" data-testid="code-cell" data-line-number="756" style="position:relative"> @Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC757" class="react-file-line html-div" data-testid="code-cell" data-line-number="757" style="position:relative"> <span class="pl-k">fun</span> <span class="pl-en">EasingUsage</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC758" class="react-file-line html-div" data-testid="code-cell" data-line-number="758" style="position:relative"> <span class="pl-k">val</span> value by animateFloatAsState(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC759" class="react-file-line html-div" data-testid="code-cell" data-line-number="759" style="position:relative"> targetValue <span class="pl-k">=</span> <span class="pl-c1">1f</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC760" class="react-file-line html-div" data-testid="code-cell" data-line-number="760" style="position:relative"> animationSpec <span class="pl-k">=</span> tween(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC761" class="react-file-line html-div" data-testid="code-cell" data-line-number="761" style="position:relative"> durationMillis <span class="pl-k">=</span> <span class="pl-c1">300</span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC762" class="react-file-line html-div" data-testid="code-cell" data-line-number="762" style="position:relative"> easing <span class="pl-k">=</span> <span class="pl-en">CustomEasing</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC763" class="react-file-line html-div" data-testid="code-cell" data-line-number="763" style="position:relative"> ),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC764" class="react-file-line html-div" data-testid="code-cell" data-line-number="764" style="position:relative"> label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>custom easing<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC765" class="react-file-line html-div" data-testid="code-cell" data-line-number="765" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC766" class="react-file-line html-div" data-testid="code-cell" data-line-number="766" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> ……</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC767" class="react-file-line html-div" data-testid="code-cell" data-line-number="767" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC768" class="react-file-line html-div" data-testid="code-cell" data-line-number="768" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_easing_usage]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC769" class="react-file-line html-div" data-testid="code-cell" data-line-number="769" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC770" class="react-file-line html-div" data-testid="code-cell" data-line-number="770" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC771" class="react-file-line html-div" data-testid="code-cell" data-line-number="771" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">object</span> AnimationVectorTwoWayConverter {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC772" class="react-file-line html-div" data-testid="code-cell" data-line-number="772" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_vector_convertor]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC773" class="react-file-line html-div" data-testid="code-cell" data-line-number="773" style="position:relative"> <span class="pl-k">val</span> <span class="pl-en">IntToVector</span><span class="pl-k">:</span> <span class="pl-en">TwoWayConverter</span><<span class="pl-en">Int</span>, <span class="pl-en">AnimationVector1D</span>> <span class="pl-k">=</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC774" class="react-file-line html-div" data-testid="code-cell" data-line-number="774" style="position:relative"> <span class="pl-en">TwoWayConverter</span>({ <span class="pl-en">AnimationVector1D</span>(it.toFloat()) }, { it.value.toInt() })</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC775" class="react-file-line html-div" data-testid="code-cell" data-line-number="775" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_vector_convertor]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC776" class="react-file-line html-div" data-testid="code-cell" data-line-number="776" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC777" class="react-file-line html-div" data-testid="code-cell" data-line-number="777" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC778" class="react-file-line html-div" data-testid="code-cell" data-line-number="778" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">object</span> AnimationVectorCustomType {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC779" class="react-file-line html-div" data-testid="code-cell" data-line-number="779" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_vector_convertor_custom_type]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC780" class="react-file-line html-div" data-testid="code-cell" data-line-number="780" style="position:relative"> <span class="pl-k">data class</span> <span class="pl-en">MySize</span>(<span class="pl-k">val</span> <span class="pl-smi">width</span><span class="pl-k">:</span> <span class="pl-en">Dp</span>, <span class="pl-k">val</span> <span class="pl-smi">height</span><span class="pl-k">:</span> <span class="pl-en">Dp</span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC781" class="react-file-line html-div" data-testid="code-cell" data-line-number="781" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC782" class="react-file-line html-div" data-testid="code-cell" data-line-number="782" style="position:relative"> @Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC783" class="react-file-line html-div" data-testid="code-cell" data-line-number="783" style="position:relative"> <span class="pl-k">fun</span> <span class="pl-en">MyAnimation</span>(<span class="pl-smi">targetSize</span><span class="pl-k">:</span> <span class="pl-en">MySize</span>) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC784" class="react-file-line html-div" data-testid="code-cell" data-line-number="784" style="position:relative"> <span class="pl-k">val</span> animSize<span class="pl-k">:</span> <span class="pl-en">MySize</span> by animateValueAsState(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC785" class="react-file-line html-div" data-testid="code-cell" data-line-number="785" style="position:relative"> targetSize,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC786" class="react-file-line html-div" data-testid="code-cell" data-line-number="786" style="position:relative"> <span class="pl-en">TwoWayConverter</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC787" class="react-file-line html-div" data-testid="code-cell" data-line-number="787" style="position:relative"> convertToVector <span class="pl-k">=</span> { size<span class="pl-k">:</span> <span class="pl-en">MySize</span> <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC788" class="react-file-line html-div" data-testid="code-cell" data-line-number="788" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Extract a float value from each of the `Dp` fields.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC789" class="react-file-line html-div" data-testid="code-cell" data-line-number="789" style="position:relative"> <span class="pl-en">AnimationVector2D</span>(size.width.value, size.height.value)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC790" class="react-file-line html-div" data-testid="code-cell" data-line-number="790" style="position:relative"> },</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC791" class="react-file-line html-div" data-testid="code-cell" data-line-number="791" style="position:relative"> convertFromVector <span class="pl-k">=</span> { vector<span class="pl-k">:</span> <span class="pl-en">AnimationVector2D</span> <span class="pl-k">-></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC792" class="react-file-line html-div" data-testid="code-cell" data-line-number="792" style="position:relative"> <span class="pl-en">MySize</span>(vector.v1.dp, vector.v2.dp)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC793" class="react-file-line html-div" data-testid="code-cell" data-line-number="793" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC794" class="react-file-line html-div" data-testid="code-cell" data-line-number="794" style="position:relative"> ),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC795" class="react-file-line html-div" data-testid="code-cell" data-line-number="795" style="position:relative"> label <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>size<span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC796" class="react-file-line html-div" data-testid="code-cell" data-line-number="796" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC797" class="react-file-line html-div" data-testid="code-cell" data-line-number="797" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC798" class="react-file-line html-div" data-testid="code-cell" data-line-number="798" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_vector_convertor_custom_type]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC799" class="react-file-line html-div" data-testid="code-cell" data-line-number="799" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC800" class="react-file-line html-div" data-testid="code-cell" data-line-number="800" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC801" class="react-file-line html-div" data-testid="code-cell" data-line-number="801" style="position:relative">@OptIn(<span class="pl-en">ExperimentalAnimationGraphicsApi</span>::<span class="pl-c1">class</span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC802" class="react-file-line html-div" data-testid="code-cell" data-line-number="802" style="position:relative">@Preview</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC803" class="react-file-line html-div" data-testid="code-cell" data-line-number="803" style="position:relative"><span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_vector_drawable]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC804" class="react-file-line html-div" data-testid="code-cell" data-line-number="804" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC805" class="react-file-line html-div" data-testid="code-cell" data-line-number="805" style="position:relative"><span class="pl-k">fun</span> <span class="pl-en">AnimatedVectorDrawable</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC806" class="react-file-line html-div" data-testid="code-cell" data-line-number="806" style="position:relative"> <span class="pl-k">val</span> image <span class="pl-k">=</span> <span class="pl-en">AnimatedImageVector</span>.animatedVectorResource(<span class="pl-en">R</span>.drawable.ic_hourglass_animated)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC807" class="react-file-line html-div" data-testid="code-cell" data-line-number="807" style="position:relative"> <span class="pl-k">var</span> atEnd by remember { mutableStateOf(<span class="pl-c1">false</span>) }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC808" class="react-file-line html-div" data-testid="code-cell" data-line-number="808" style="position:relative"> <span class="pl-en">Image</span>(</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC809" class="react-file-line html-div" data-testid="code-cell" data-line-number="809" style="position:relative"> painter <span class="pl-k">=</span> rememberAnimatedVectorPainter(image, atEnd),</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC810" class="react-file-line html-div" data-testid="code-cell" data-line-number="810" style="position:relative"> contentDescription <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>Timer<span class="pl-pds">"</span></span>,</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC811" class="react-file-line html-div" data-testid="code-cell" data-line-number="811" style="position:relative"> modifier <span class="pl-k">=</span> <span class="pl-en">Modifier</span>.clickable {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC812" class="react-file-line html-div" data-testid="code-cell" data-line-number="812" style="position:relative"> atEnd <span class="pl-k">=</span> <span class="pl-k">!</span>atEnd</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC813" class="react-file-line html-div" data-testid="code-cell" data-line-number="813" style="position:relative"> },</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC814" class="react-file-line html-div" data-testid="code-cell" data-line-number="814" style="position:relative"> contentScale <span class="pl-k">=</span> <span class="pl-en">ContentScale</span>.<span class="pl-en">Crop</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC815" class="react-file-line html-div" data-testid="code-cell" data-line-number="815" style="position:relative"> )</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC816" class="react-file-line html-div" data-testid="code-cell" data-line-number="816" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC817" class="react-file-line html-div" data-testid="code-cell" data-line-number="817" style="position:relative"><span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_vector_drawable]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC818" class="react-file-line html-div" data-testid="code-cell" data-line-number="818" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC819" class="react-file-line html-div" data-testid="code-cell" data-line-number="819" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC820" class="react-file-line html-div" data-testid="code-cell" data-line-number="820" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">Expanded</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC821" class="react-file-line html-div" data-testid="code-cell" data-line-number="821" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC822" class="react-file-line html-div" data-testid="code-cell" data-line-number="822" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC823" class="react-file-line html-div" data-testid="code-cell" data-line-number="823" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC824" class="react-file-line html-div" data-testid="code-cell" data-line-number="824" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">ContentIcon</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC825" class="react-file-line html-div" data-testid="code-cell" data-line-number="825" style="position:relative">}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC826" class="react-file-line html-div" data-testid="code-cell" data-line-number="826" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC827" class="react-file-line html-div" data-testid="code-cell" data-line-number="827" style="position:relative"><span class="pl-c"><span class="pl-c">//</span> [START android_compose_animations_char_by_char]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC828" class="react-file-line html-div" data-testid="code-cell" data-line-number="828" style="position:relative">@Composable</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC829" class="react-file-line html-div" data-testid="code-cell" data-line-number="829" style="position:relative"><span class="pl-k">private</span> <span class="pl-k">fun</span> <span class="pl-en">AnimatedText</span>() {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC830" class="react-file-line html-div" data-testid="code-cell" data-line-number="830" style="position:relative"> <span class="pl-k">val</span> text <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>This text animates as though it is being typed <span class="pl-cce">\uD83E\uDDDE\u200D</span>♀<span class="pl-cce">\uFE0F</span> <span class="pl-cce">\uD83D\uDD10</span> <span class="pl-cce">\uD83D\uDC69\u200D</span>❤<span class="pl-cce">\uFE0F\u200D\uD83D\uDC68</span> <span class="pl-cce">\uD83D\uDC74\uD83C\uDFFD</span><span class="pl-pds">"</span></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC831" class="react-file-line html-div" data-testid="code-cell" data-line-number="831" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC832" class="react-file-line html-div" data-testid="code-cell" data-line-number="832" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Use BreakIterator as it correctly iterates over characters regardless of how they are</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC833" class="react-file-line html-div" data-testid="code-cell" data-line-number="833" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> stored, for example, some emojis are made up of multiple characters.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC834" class="react-file-line html-div" data-testid="code-cell" data-line-number="834" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> You don't want to break up an emoji as it animates, so using BreakIterator will ensure</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC835" class="react-file-line html-div" data-testid="code-cell" data-line-number="835" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> this is correctly handled!</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC836" class="react-file-line html-div" data-testid="code-cell" data-line-number="836" style="position:relative"> <span class="pl-k">val</span> breakIterator <span class="pl-k">=</span> remember(text) { <span class="pl-en">BreakIterator</span>.getCharacterInstance() }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC837" class="react-file-line html-div" data-testid="code-cell" data-line-number="837" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC838" class="react-file-line html-div" data-testid="code-cell" data-line-number="838" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Define how many milliseconds between each character should pause for. This will create the</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC839" class="react-file-line html-div" data-testid="code-cell" data-line-number="839" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> illusion of an animation, as we delay the job after each character is iterated on.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC840" class="react-file-line html-div" data-testid="code-cell" data-line-number="840" style="position:relative"> <span class="pl-k">val</span> typingDelayInMs <span class="pl-k">=</span> <span class="pl-c1">50L</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC841" class="react-file-line html-div" data-testid="code-cell" data-line-number="841" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC842" class="react-file-line html-div" data-testid="code-cell" data-line-number="842" style="position:relative"> <span class="pl-k">var</span> substringText by remember {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC843" class="react-file-line html-div" data-testid="code-cell" data-line-number="843" style="position:relative"> mutableStateOf(<span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC844" class="react-file-line html-div" data-testid="code-cell" data-line-number="844" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC845" class="react-file-line html-div" data-testid="code-cell" data-line-number="845" style="position:relative"> <span class="pl-en">LaunchedEffect</span>(text) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC846" class="react-file-line html-div" data-testid="code-cell" data-line-number="846" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Initial start delay of the typing animation</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC847" class="react-file-line html-div" data-testid="code-cell" data-line-number="847" style="position:relative"> delay(<span class="pl-c1">1000</span>)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC848" class="react-file-line html-div" data-testid="code-cell" data-line-number="848" style="position:relative"> breakIterator.text <span class="pl-k">=</span> <span class="pl-en">StringCharacterIterator</span>(text)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC849" class="react-file-line html-div" data-testid="code-cell" data-line-number="849" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC850" class="react-file-line html-div" data-testid="code-cell" data-line-number="850" style="position:relative"> <span class="pl-k">var</span> nextIndex <span class="pl-k">=</span> breakIterator.next()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC851" class="react-file-line html-div" data-testid="code-cell" data-line-number="851" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Iterate over the string, by index boundary</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC852" class="react-file-line html-div" data-testid="code-cell" data-line-number="852" style="position:relative"> <span class="pl-k">while</span> (nextIndex <span class="pl-k">!=</span> <span class="pl-en">BreakIterator</span>.<span class="pl-en">DONE</span>) {</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC853" class="react-file-line html-div" data-testid="code-cell" data-line-number="853" style="position:relative"> substringText <span class="pl-k">=</span> text.subSequence(<span class="pl-c1">0</span>, nextIndex).toString()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC854" class="react-file-line html-div" data-testid="code-cell" data-line-number="854" style="position:relative"> <span class="pl-c"><span class="pl-c">//</span> Go to the next logical character boundary</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC855" class="react-file-line html-div" data-testid="code-cell" data-line-number="855" style="position:relative"> nextIndex <span class="pl-k">=</span> breakIterator.next()</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC856" class="react-file-line html-div" data-testid="code-cell" data-line-number="856" style="position:relative"> delay(typingDelayInMs)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC857" class="react-file-line html-div" data-testid="code-cell" data-line-number="857" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC858" class="react-file-line html-div" data-testid="code-cell" data-line-number="858" style="position:relative"> }</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC859" class="react-file-line html-div" data-testid="code-cell" data-line-number="859" style="position:relative"> <span class="pl-en">Text</span>(substringText)</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC860" class="react-file-line html-div" data-testid="code-cell" data-line-number="860" style="position:relative"><span class="pl-c"><span class="pl-c">//</span> [END android_compose_animations_char_by_char]</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC861" class="react-file-line html-div" data-testid="code-cell" data-line-number="861" style="position:relative">}</div></div></div></div></div></div><div id="copilot-button-container"></div></div><div id="highlighted-line-menu-container"></div></div></div><button hidden="" data-testid="hotkey-button" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden=""></button></section></div></div></div> <!-- --> <!-- --> </div></div></div><div class="Box-sc-g0xbh4-0"></div></div></div></div></div><div id="find-result-marks-container" class="Box-sc-g0xbh4-0 cCoXib"></div><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden=""></button></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.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> </a> <span> © 2024 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>