CINXE.COM

<!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-8b10f05a77e6.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-2f6e722088eb.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/repository-9c77ed90200e.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_blur_item_picker_on_close","marketing_pages_search_explore_provider","react_keyboard_shortcuts_dialog","remove_child_patch","sample_network_conn_type","site_metered_billing_update","issues_react_first_time_contribution_banner","lifecycle_label_name_updates"]}</script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/wp-runtime-6657579a8825.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-93b6a0551aa9.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-a6e4c4c86bfa.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_virtualized-list_es_index_js-node_modules_github_template-parts_lib_index_js-96453a51f920.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_stacktrace-parser_dist_stack-trace-parser_esm_js-node_modules_github_bro-b0a862-4d8589138d1e.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-0e9dbe-d2bcedf65682.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_ref-selector_ts-043af64042a1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/codespaces-4158520ad4d7.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_decorators_js-node_modules_delegated-events_di-cc9bcb-ea42a360c5ae.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_github_filter--35675b-aff280068839.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/repositories-ce9ff2a57e1f.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-13971a40799a.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_tanstack_query-core_build_modern_queryClient_js-e40bb86d3e93.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-37e3d5-31653d7f2342.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-3eda30673b32.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" /> <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_tanstack_query-core_build_modern_queryClient_js-e40bb86d3e93.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-37e3d5-31653d7f2342.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-3eda30673b32.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>GitHub - adar2378/pin_code_fields at 96f3dd210f048bb10d2833ef28ecc49bd032d05e</title> <meta name="route-pattern" content="/:user_id/:repository/tree/*name(/*path)" data-turbo-transient> <meta name="route-controller" content="files" data-turbo-transient> <meta name="route-action" content="disambiguate" data-turbo-transient> <meta name="current-catalog-service-hash" content="f3abb0cc802f3d7b95fc8762b94bdcb13bf39634c40c357301c4aa1d67a256fb"> <meta name="request-id" content="E736:35ED1:D46F94:F65D18:674C4BF3" data-pjax-transient="true"/><meta name="html-safe-nonce" content="6e5cef534bdde1377c721da6fad6f5928831fba27cdf58028e7e2d13d396c5e4" data-pjax-transient="true"/><meta name="visitor-payload" content="eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJFNzM2OjM1RUQxOkQ0NkY5NDpGNjVEMTg6Njc0QzRCRjMiLCJ2aXNpdG9yX2lkIjoiNzcwODY0MzM0Nzk1OTQwMTQ1OSIsInJlZ2lvbl9lZGdlIjoic291dGhlYXN0YXNpYSIsInJlZ2lvbl9yZW5kZXIiOiJzb3V0aGVhc3Rhc2lhIn0=" data-pjax-transient="true"/><meta name="visitor-hmac" content="93893cdd905c3da1ed85125bf098055c0e4812db7248ebf9d0ee0b0a1faa602e" data-pjax-transient="true"/> <meta name="hovercard-subject-tag" content="repository:199140352" 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>/files/disambiguate" data-turbo-transient="true" /> <meta name="user-login" content=""> <meta name="viewport" content="width=device-width"> <meta name="description" content="A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs 🤓🤓 - GitHub - adar2378/pin_code_fields at 96f3dd210f048bb10d2833ef28ecc49bd032d05e"> <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/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e" /> <meta name="twitter:image" content="https://repository-images.githubusercontent.com/199140352/05ea0880-87dc-11ea-9166-be4fddbe8a7f" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="GitHub - adar2378/pin_code_fields at 96f3dd210f048bb10d2833ef28ecc49bd032d05e" /><meta name="twitter:description" content="A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs 🤓🤓 - GitHub - adar2378/pin_code_fields at 96f3dd210f..." /> <meta property="og:image" content="https://repository-images.githubusercontent.com/199140352/05ea0880-87dc-11ea-9166-be4fddbe8a7f" /><meta property="og:image:alt" content="A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs 🤓🤓 - GitHub - adar2378/pin_code_fields at 96f3dd210f..." /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="GitHub - adar2378/pin_code_fields at 96f3dd210f048bb10d2833ef28ecc49bd032d05e" /><meta property="og:url" content="https://github.com/adar2378/pin_code_fields" /><meta property="og:description" content="A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs 🤓🤓 - GitHub - adar2378/pin_code_fields at 96f3dd210f..." /> <meta name="hostname" content="github.com"> <meta name="expected-hostname" content="github.com"> <meta http-equiv="x-pjax-version" content="0361a11d6ba7285e98ad3340b1de5998c1adf9be672ff350e645684a12c5ff34" 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="3adbaefc258174e49a9472f62ba4ed262e7c0112f9e7266a3e927bd7b898716f" data-turbo-track="reload"> <meta http-equiv="x-pjax-js-version" content="58069173ba3ee40a605f317588f70346d3cda2c3c32d767dd6d2909bbe343612" data-turbo-track="reload"> <meta name="turbo-cache-control" content="no-preview" data-turbo-transient=""> <meta data-hydrostats="publish"> <meta name="go-import" content="github.com/adar2378/pin_code_fields git https://github.com/adar2378/pin_code_fields.git"> <meta name="octolytics-dimension-user_id" content="8059258" /><meta name="octolytics-dimension-user_login" content="adar2378" /><meta name="octolytics-dimension-repository_id" content="199140352" /><meta name="octolytics-dimension-repository_nwo" content="adar2378/pin_code_fields" /><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="199140352" /><meta name="octolytics-dimension-repository_network_root_nwo" content="adar2378/pin_code_fields" /> <link rel="canonical" href="https://github.com/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e" data-turbo-transient> <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/keyboard-shortcuts-dialog-f3cc184507a7.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%2Fadar2378%2Fpin_code_fields%2Ftree%2F96f3dd210f048bb10d2833ef28ecc49bd032d05e" 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/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e","user_id":null}}" data-hydro-click-hmac="30fb4be3197bbba8d1e069b43417c88a54b60b49048434375aca83f8af99f038" 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:adar2378/pin_code_fields" data-custom-scopes-path="/search/custom_scopes" data-delete-custom-scopes-csrf="jrzpxOUtt2g9kDh2dbM-MUF3qEeYNYMujLf47imUcwpsWFLUq3wcmjd0HkQuaG466D1MyThsX0s1ys18xPq5Aw" 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="adar2378/pin_code_fields" data-current-org="" data-current-owner="adar2378" 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 > </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-f72c85c4-2d5b-4396-9e28-23f41260a7f4" 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-f72c85c4-2d5b-4396-9e28-23f41260a7f4" 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"> </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="3BrMVPUmoK9dbszNQ56aP6/lo/tGmywI0T8kjHHx/Hdhkl1DL1ghxzB0TPKS8UblQpdCFWB47EPr6QqtJjA9fA==" /> <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"> </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="aCjNmjJQGYu1k3kT3DUJyIhQ799gVU7Qxfx/hix1Smac1A2RH0OCfcAW1G5w8x6WUlz3uGOw6jighudUsvi9qw==" /> <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="p8NW89ha7MRU9V5C48wQ7P+6wPOc2Z2vLbvNyeNtGdMS58NbOQ8Sza/zkQnA3gPTsmnZoBpei+NMjmI8zt8YfQ==" /> </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%2Fadar2378%2Fpin_code_fields%2Ftree%2F96f3dd210f048bb10d2833ef28ecc49bd032d05e" 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/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e","user_id":null}}" data-hydro-click-hmac="30fb4be3197bbba8d1e069b43417c88a54b60b49048434375aca83f8af99f038" 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%2Ffiles%2Fdisambiguate&source=header-repo&source_repo=adar2378%2Fpin_code_fields" 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/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e","user_id":null}}" data-hydro-click-hmac="30fb4be3197bbba8d1e069b43417c88a54b60b49048434375aca83f8af99f038" data-analytics-event="{"category":"Sign up","action":"click to sign up for account","label":"ref_page:/<user-name>/<repo-name>/files/disambiguate;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-70a8b1f1-a995-4e4d-846b-f05a0743ce32" aria-labelledby="tooltip-ead257a8-263c-4c7d-b21a-80a110d9cb50" 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-ead257a8-263c-4c7d-b21a-80a110d9cb50" for="icon-button-70a8b1f1-a995-4e4d-846b-f05a0743ce32" 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="user" data-hovercard-url="/users/adar2378/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/adar2378"> adar2378 </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="/adar2378/pin_code_fields">pin_code_fields</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=%2Fadar2378%2Fpin_code_fields" 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/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e","user_id":null}}" data-hydro-click-hmac="d01242277d1626d3ccd4a9273d081910955f3bc14f71cc42078c3af3a38e744e" 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-0c2d9cf6-1e97-4183-a2c8-f131f97f055f" 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=%2Fadar2378%2Fpin_code_fields" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"repo details fork button","repository_id":199140352,"auth_type":"LOG_IN","originating_url":"https://github.com/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e","user_id":null}}" data-hydro-click-hmac="982e4c938a5af613f146e3ef45ce3d8fea95240de02f80b976fe8f045f9e782c" 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="344" data-view-component="true" class="Counter">344</span> </a> </li> <li> <div data-view-component="true" class="BtnGroup d-flex"> <a href="/login?return_to=%2Fadar2378%2Fpin_code_fields" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":199140352,"auth_type":"LOG_IN","originating_url":"https://github.com/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e","user_id":null}}" data-hydro-click-hmac="ae990141f8745c03aa0b87d0561ad02bbd773fd73eea4c8d624602430bbb4d66" 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="705 users starred this repository" data-singular-suffix="user starred this repository" data-plural-suffix="users starred this repository" data-turbo-replace="true" title="705" data-view-component="true" class="Counter js-social-count">705</span> </a></div> </li> </ul> </div> </div> <div id="responsive-meta-container" data-turbo-replace> <div class="d-block d-md-none mb-2 px-3 px-md-4 px-lg-5"> <p class="f4 mb-3 "> A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs 🤓🤓 </p> <div class="mb-2 d-flex flex-items-center Link--secondary"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link flex-shrink-0 mr-2"> <path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path> </svg> <span class="flex-auto min-width-0 css-truncate css-truncate-target width-fit"> <a title="https://pub.dev/packages/pin_code_fields" role="link" target="_blank" class="text-bold" rel="noopener noreferrer" href="https://pub.dev/packages/pin_code_fields">pub.dev/packages/pin_code_fields</a> </span> </div> <h3 class="sr-only">License</h3> <div class="mb-2"> <a href="/adar2378/pin_code_fields/blob/master/LICENSE" class="Link--muted" data-analytics-event="{"category":"Repository Overview","action":"click","label":"location:sidebar;file:license"}" > <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-law mr-2"> <path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path> </svg> MIT license </a> </div> <div class="mb-3"> <a class="Link--secondary no-underline mr-3" href="/adar2378/pin_code_fields/stargazers"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star mr-1"> <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 class="text-bold">705</span> stars </a> <a class="Link--secondary no-underline mr-3" href="/adar2378/pin_code_fields/forks"> <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-1"> <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> <span class="text-bold">344</span> forks </a> <a class="Link--secondary no-underline mr-3 d-inline-block" href="/adar2378/pin_code_fields/branches"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-branch mr-1"> <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> <span>Branches</span> </a> <a class="Link--secondary no-underline d-inline-block" href="/adar2378/pin_code_fields/tags"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-tag mr-1"> <path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path> </svg> <span>Tags</span> </a> <a class="Link--secondary no-underline d-inline-block" href="/adar2378/pin_code_fields/activity"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pulse mr-1"> <path d="M6 2c.306 0 .582.187.696.471L10 10.731l1.304-3.26A.751.751 0 0 1 12 7h3.25a.75.75 0 0 1 0 1.5h-2.742l-1.812 4.528a.751.751 0 0 1-1.392 0L6 4.77 4.696 8.03A.75.75 0 0 1 4 8.5H.75a.75.75 0 0 1 0-1.5h2.742l1.812-4.529A.751.751 0 0 1 6 2Z"></path> </svg> <span>Activity</span> </a> </div> <div class="d-flex flex-wrap gap-2"> <div class="flex-1"> <div data-view-component="true" class="BtnGroup d-flex"> <a href="/login?return_to=%2Fadar2378%2Fpin_code_fields" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":199140352,"auth_type":"LOG_IN","originating_url":"https://github.com/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e","user_id":null}}" data-hydro-click-hmac="ae990141f8745c03aa0b87d0561ad02bbd773fd73eea4c8d624602430bbb4d66" aria-label="You must be signed in to star a repository" data-view-component="true" class="tooltipped tooltipped-sw btn-sm btn btn-block"> <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> </a></div> </div> <div class="flex-1"> <a href="/login?return_to=%2Fadar2378%2Fpin_code_fields" rel="nofollow" id="files-overview-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/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e","user_id":null}}" data-hydro-click-hmac="d01242277d1626d3ccd4a9273d081910955f3bc14f71cc42078c3af3a38e744e" aria-label="You must be signed in to change notification settings" data-view-component="true" class="btn-sm btn btn-block"> <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-d955ab13-06e3-465c-8b70-63fc7f584289" for="files-overview-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> </div> <span> </span> </div> </div> </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="/adar2378/pin_code_fields" 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 /adar2378/pin_code_fields" 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="/adar2378/pin_code_fields/issues" data-tab-item="i1issues-tab" data-selected-links="repo_issues repo_labels repo_milestones /adar2378/pin_code_fields/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="/adar2378/pin_code_fields/pulls" data-tab-item="i2pull-requests-tab" data-selected-links="repo_pulls checks /adar2378/pin_code_fields/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="1" data-view-component="true" class="Counter">1</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="discussions-tab" href="/adar2378/pin_code_fields/discussions" data-tab-item="i3discussions-tab" data-selected-links="repo_discussions /adar2378/pin_code_fields/discussions" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g g" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Discussions","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path> </svg> <span data-content="Discussions">Discussions</span> <span id="discussions-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="actions-tab" href="/adar2378/pin_code_fields/actions" data-tab-item="i4actions-tab" data-selected-links="repo_actions /adar2378/pin_code_fields/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="/adar2378/pin_code_fields/projects" data-tab-item="i5projects-tab" data-selected-links="repo_projects new_repo_project repo_project /adar2378/pin_code_fields/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="/adar2378/pin_code_fields/security" data-tab-item="i6security-tab" data-selected-links="security overview alerts policy token_scanning code_scanning /adar2378/pin_code_fields/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="/adar2378/pin_code_fields/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="/adar2378/pin_code_fields/pulse" data-tab-item="i7insights-tab" data-selected-links="repo_graphs repo_contributors dependency_graph dependabot_updates pulse people community /adar2378/pin_code_fields/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-296d3a0c-582f-4587-becb-51ec8a8b06ed-button" popovertarget="action-menu-296d3a0c-582f-4587-becb-51ec8a8b06ed-overlay" aria-controls="action-menu-296d3a0c-582f-4587-becb-51ec8a8b06ed-list" aria-haspopup="true" aria-labelledby="tooltip-5a39fb79-53d1-4cff-879c-ebcbee6d9c79" 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-5a39fb79-53d1-4cff-879c-ebcbee6d9c79" for="action-menu-296d3a0c-582f-4587-becb-51ec8a8b06ed-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-296d3a0c-582f-4587-becb-51ec8a8b06ed-overlay" anchor="action-menu-296d3a0c-582f-4587-becb-51ec8a8b06ed-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-296d3a0c-582f-4587-becb-51ec8a8b06ed-button" id="action-menu-296d3a0c-582f-4587-becb-51ec8a8b06ed-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-a29d79a8-bd64-41d8-b544-1cadb7af1e6c" href="/adar2378/pin_code_fields" 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-2cd7ee7d-c8e4-4805-ab6c-e2431c09414c" href="/adar2378/pin_code_fields/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-16350606-6238-44b5-93ba-1d31b35295c0" href="/adar2378/pin_code_fields/pulls" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Pull requests </span> </a> </li> <li hidden="hidden" data-menu-item="i3discussions-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-ccebcdb4-90b4-4940-b283-cacf3bfffe40" href="/adar2378/pin_code_fields/discussions" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion"> <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Discussions </span> </a> </li> <li hidden="hidden" data-menu-item="i4actions-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-5bf2af03-3bcb-41ba-8d4f-57c19520dd53" href="/adar2378/pin_code_fields/actions" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Actions </span> </a> </li> <li hidden="hidden" data-menu-item="i5projects-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-51f6487b-6b6c-4cfa-a70d-092b58877264" href="/adar2378/pin_code_fields/projects" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Projects </span> </a> </li> <li hidden="hidden" data-menu-item="i6security-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-8d632907-0515-48d3-b667-19e90038c9ac" href="/adar2378/pin_code_fields/security" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Security </span> </a> </li> <li hidden="hidden" data-menu-item="i7insights-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-91b3b1bf-b0ef-4014-baa9-470e4a01c383" href="/adar2378/pin_code_fields/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 " > <h1 class='sr-only'>adar2378/pin_code_fields</h1> <div class="clearfix container-xl px-md-4 px-lg-5 px-3"> <div> <div style="max-width: 100%" data-view-component="true" class="Layout Layout--flowRow-until-md react-repos-overview-margin Layout--sidebarPosition-end Layout--sidebarPosition-flowRow-end"> <div data-view-component="true" class="Layout-main"> <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_tanstack_query-core_build_modern_queryClient_js-e40bb86d3e93.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-37e3d5-31653d7f2342.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_tanstack_query-core_build_modern_queryObserver_js-node_modules_tanstack_-defd52-585c05e837f3.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-c733d4a976df.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ref-selector_RefSelector_tsx-b10086b6761e.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-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/ui_packages_commit-attribution_index_ts-ui_packages_commit-checks-status_index_ts-ui_packages-7207c9-f3f10560fb6f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/repos-overview-5b8b9c05acbf.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/repos-overview.9cc263aa0716ce801059.module.css" /> <react-partial partial-name="repos-overview" data-ssr="true" data-attempted-ssr="true" > <script type="application/json" data-target="react-partial.embeddedData">{"props":{"initialPayload":{"allShortcutsEnabled":false,"path":"/","repo":{"id":199140352,"defaultBranch":"master","name":"pin_code_fields","ownerLogin":"adar2378","currentUserCanPush":false,"isFork":false,"isEmpty":false,"createdAt":"2019-07-27T08:50:33.000Z","ownerAvatar":"https://avatars.githubusercontent.com/u/8059258?v=4","public":true,"private":false,"isOrgOwned":false},"currentUser":null,"refInfo":{"name":"96f3dd210f048bb10d2833ef28ecc49bd032d05e","listCacheKey":"v0:1627448872.057652","canEdit":false,"refType":"tree","currentOid":"96f3dd210f048bb10d2833ef28ecc49bd032d05e"},"tree":{"items":[{"name":"demo_media","path":"demo_media","contentType":"directory"},{"name":"example","path":"example","contentType":"directory"},{"name":"lib","path":"lib","contentType":"directory"},{"name":"test","path":"test","contentType":"directory"},{"name":".gitignore","path":".gitignore","contentType":"file"},{"name":".metadata","path":".metadata","contentType":"file"},{"name":"CHANGELOG.md","path":"CHANGELOG.md","contentType":"file"},{"name":"CODE_OF_CONDUCT.md","path":"CODE_OF_CONDUCT.md","contentType":"file"},{"name":"LICENSE","path":"LICENSE","contentType":"file"},{"name":"README.md","path":"README.md","contentType":"file"},{"name":"pubspec.yaml","path":"pubspec.yaml","contentType":"file"}],"templateDirectorySuggestionUrl":null,"readme":null,"totalCount":11,"showBranchInfobar":false},"fileTree":null,"fileTreeProcessingTime":null,"foldersToFetch":[],"treeExpanded":false,"symbolsExpanded":false,"isOverview":true,"overview":{"banners":{"shouldRecommendReadme":false,"isPersonalRepo":false,"showUseActionBanner":false,"actionSlug":null,"actionId":null,"showProtectBranchBanner":false,"publishBannersInfo":{"dismissActionNoticePath":"/settings/dismiss-notice/publish_action_from_repo","releasePath":"/adar2378/pin_code_fields/releases/new?marketplace=true","showPublishActionBanner":false},"interactionLimitBanner":null,"showInvitationBanner":false,"inviterName":null,"actionsMigrationBannerInfo":{"releaseTags":[],"showImmutableActionsMigrationBanner":false,"initialMigrationStatus":null}},"codeButton":{"contactPath":"/contact","isEnterprise":false,"local":{"protocolInfo":{"httpAvailable":true,"sshAvailable":null,"httpUrl":"https://github.com/adar2378/pin_code_fields.git","showCloneWarning":null,"sshUrl":null,"sshCertificatesRequired":null,"sshCertificatesAvailable":null,"ghCliUrl":"gh repo clone adar2378/pin_code_fields","defaultProtocol":"http","newSshKeyUrl":"/settings/ssh/new","setProtocolPath":"/users/set_protocol"},"platformInfo":{"cloneUrl":"https://desktop.github.com","showVisualStudioCloneButton":false,"visualStudioCloneUrl":"https://windows.github.com","showXcodeCloneButton":false,"xcodeCloneUrl":"xcode://clone?repo=https%3A%2F%2Fgithub.com%2Fadar2378%2Fpin_code_fields","zipballUrl":"/adar2378/pin_code_fields/archive/96f3dd210f048bb10d2833ef28ecc49bd032d05e.zip"}},"newCodespacePath":"/codespaces/new?hide_repo_select=true\u0026ref=96f3dd210f048bb10d2833ef28ecc49bd032d05e\u0026repo=199140352"},"popovers":{"rename":null,"renamedParentRepo":null},"commitCount":"264","overviewFiles":[{"displayName":"README.md","repoName":"pin_code_fields","refName":"96f3dd210f048bb10d2833ef28ecc49bd032d05e","path":"README.md","preferredFileType":"readme","tabName":"README","richText":"\u003carticle class=\"markdown-body entry-content container-lg\" itemprop=\"text\"\u003e\u003cp align=\"center\" dir=\"auto\"\u003e\n \u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/5d3cfa57a9c6e584be8152da2b1d39f70f5921f3034ebed63fe83a384f6b3705/68747470733a2f2f692e6962622e636f2f583571784637782f6578706f72742d62616e6e65722e706e67\"\u003e\u003cimg width=\"460\" src=\"https://camo.githubusercontent.com/5d3cfa57a9c6e584be8152da2b1d39f70f5921f3034ebed63fe83a384f6b3705/68747470733a2f2f692e6962622e636f2f583571784637782f6578706f72742d62616e6e65722e706e67\" data-canonical-src=\"https://i.ibb.co/X5qxF7x/export-banner.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://pub.dev/packages/pin_code_fields\" rel=\"nofollow\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/fdddccb88018137a3abb14ddad8cd5a3cdef4b2262d27451fa7f2035b9299d9a/68747470733a2f2f696d672e736869656c64732e696f2f7075622f762f70696e5f636f64655f6669656c6473\" data-canonical-src=\"https://img.shields.io/pub/v/pin_code_fields\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://www.patreon.com/bePatron?u=26622525\" rel=\"nofollow\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/671020107c9688451b5d495af4e4a9807e8550d452d2411aa8f134858e71afb3/68747470733a2f2f63352e70617472656f6e2e636f6d2f65787465726e616c2f6c6f676f2f6265636f6d655f615f706174726f6e5f627574746f6e4032782e706e67\" width=\"250\" data-canonical-src=\"https://c5.patreon.com/external/logo/become_a_patron_button@2x.png\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eA flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs 🤓🤓\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eFeatures 💚\u003c/h2\u003e\u003ca id=\"user-content-features-\" class=\"anchor\" aria-label=\"Permalink: Features 💚\" href=\"#features-\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eAutomatically focuses the next field on typing and focuses previous field on deletation\u003c/li\u003e\n\u003cli\u003eCursor support ⚡️\u003c/li\u003e\n\u003cli\u003eCan be set to any length. (3-6 fields recommended)\u003c/li\u003e\n\u003cli\u003e3 different shapes for text fields\u003c/li\u003e\n\u003cli\u003eHighly customizable\u003c/li\u003e\n\u003cli\u003e3 different types of animation for input texts\u003c/li\u003e\n\u003cli\u003eAnimated active, inactive, selected and disabled field color switching\u003c/li\u003e\n\u003cli\u003eAutofocus option\u003c/li\u003e\n\u003cli\u003eOtp-code pasting from clipboard\u003c/li\u003e\n\u003cli\u003eiOS autofill support\u003c/li\u003e\n\u003cli\u003eError animation. Currently have shake animation only. Watch the example app for how to integrate.\u003c/li\u003e\n\u003cli\u003eWorks with Flutter's Form. You can use Form validator right off the bat.\u003c/li\u003e\n\u003cli\u003eGet currently typed text and use your condition to validate it. (for example: if (currentText.length != 6 || currentText != \"your desired code\"))\u003c/li\u003e\n\u003cli\u003eHaptic Feedback support\u003c/li\u003e\n\u003cli\u003eAnimated obscure widget support\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eGetting Started ⚡️\u003c/h2\u003e\u003ca id=\"user-content-getting-started-️\" class=\"anchor\" aria-label=\"Permalink: Getting Started ⚡️\" href=\"#getting-started-️\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDemo\u003c/h4\u003e\u003ca id=\"user-content-demo\" class=\"anchor\" aria-label=\"Permalink: Demo\" href=\"#demo\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/example.gif\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/example.gif\" width=\"320\" height=\"480\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e \u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/paste_android.gif\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/paste_android.gif\" width=\"240\" height=\"480\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e \u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/paste_ios.gif\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/paste_ios.gif\" width=\"240\" height=\"480\" data-animated-image=\"\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eDifferent Shapes\u003c/h4\u003e\u003ca id=\"user-content-different-shapes\" class=\"anchor\" aria-label=\"Permalink: Different Shapes\" href=\"#different-shapes\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/box.png\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/box.png\" width=\"250\" height=\"480\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/circle.png\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/circle.png\" width=\"250\" height=\"480\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/underline.png\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/underline.png\" width=\"250\" height=\"480\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eNotes\u003c/h2\u003e\u003ca id=\"user-content-notes\" class=\"anchor\" aria-label=\"Permalink: Notes\" href=\"#notes\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eTo enable \"Fill color\" for each cells, \u003ccode\u003eenableActiveFill\u003c/code\u003e must be set to \u003ccode\u003etrue\u003c/code\u003e. The default value is \u003ccode\u003efalse\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eTo change the keyboard type, for example to use only number keyboard, or only for email use \u003ccode\u003ekeyboardType\u003c/code\u003e parameter, default is [TextInputType.visiblePassword]\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eFocosNode\u003c/code\u003e and \u003ccode\u003eTextEditingController\u003c/code\u003e will get disposed automatically. Use \u003ccode\u003eautoDisposeControllers = false\u003c/code\u003e to disable it.\u003c/li\u003e\n\u003cli\u003eto use v5.0.0 or above, developers must have Flutter SDK 1.20.0 or above.\u003c/li\u003e\n\u003cli\u003eto use v6.0.0 or above, developers must have Flutter SDK 1.22.0 or above.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eProperties 🔖\u003c/h2\u003e\u003ca id=\"user-content-properties-\" class=\"anchor\" aria-label=\"Permalink: Properties 🔖\" href=\"#properties-\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv class=\"highlight highlight-source-dart notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\" /// The [BuildContext] of the application\n final BuildContext appContext;\n\n ///Box Shadow for Pincode\n final List\u0026lt;BoxShadow\u0026gt;? boxShadows;\n\n /// length of how many cells there should be. 3-8 is recommended by me\n final int length;\n\n /// you already know what it does i guess :P default is false\n final bool obscureText;\n\n /// Character used for obscuring text if obscureText is true.\n ///\n /// Must not be empty. Single character is recommended.\n ///\n /// Default is ● - 'Black Circle' (U+25CF)\n final String obscuringCharacter;\n\n /// Widget used to obscure text\n ///\n /// it overrides the obscuringCharacter\n final Widget? obscuringWidget;\n\n /// Whether to use haptic feedback or not\n ///\n ///\n final bool useHapticFeedback;\n\n /// Haptic Feedback Types\n ///\n /// heavy, medium, light links to respective impacts\n /// selection - selectionClick, vibrate - vibrate\n /// check [HapticFeedback] for more\n final HapticFeedbackTypes hapticFeedbackTypes;\n\n /// Decides whether typed character should be\n /// briefly shown before being obscured\n final bool blinkWhenObscuring;\n\n /// Blink Duration if blinkWhenObscuring is set to true\n final Duration blinkDuration;\n\n /// returns the current typed text in the fields\n final ValueChanged\u0026lt;String\u0026gt; onChanged;\n\n /// returns the typed text when all pins are set\n final ValueChanged\u0026lt;String\u0026gt;? onCompleted;\n\n /// returns the typed text when user presses done/next action on the keyboard\n final ValueChanged\u0026lt;String\u0026gt;? onSubmitted;\n\n /// the style of the text, default is [ fontSize: 20, fontWeight: FontWeight.bold]\n final TextStyle? textStyle;\n\n /// the style of the pasted text, default is [fontWeight: FontWeight.bold] while\n /// [TextStyle.color] is [ThemeData.accentColor]\n final TextStyle? pastedTextStyle;\n\n /// background color for the whole row of pin code fields.\n final Color? backgroundColor;\n\n /// This defines how the elements in the pin code field align. Default to [MainAxisAlignment.spaceBetween]\n final MainAxisAlignment mainAxisAlignment;\n\n /// [AnimationType] for the text to appear in the pin code field. Default is [AnimationType.slide]\n final AnimationType animationType;\n\n /// Duration for the animation. Default is [Duration(milliseconds: 150)]\n final Duration animationDuration;\n\n /// [Curve] for the animation. Default is [Curves.easeInOut]\n final Curve animationCurve;\n\n /// [TextInputType] for the pin code fields. default is [TextInputType.visiblePassword]\n final TextInputType keyboardType;\n\n /// If the pin code field should be autofocused or not. Default is [false]\n final bool autoFocus;\n\n /// Should pass a [FocusNode] to manage it from the parent\n final FocusNode? focusNode;\n\n /// A list of [TextInputFormatter] that goes to the TextField\n final List\u0026lt;TextInputFormatter\u0026gt; inputFormatters;\n\n /// Enable or disable the Field. Default is [true]\n final bool enabled;\n\n /// [TextEditingController] to control the text manually. Sets a default [TextEditingController()] object if none given\n final TextEditingController? controller;\n\n /// Enabled Color fill for individual pin fields, default is [false]\n final bool enableActiveFill;\n\n /// Auto dismiss the keyboard upon inputting the value for the last field. Default is [true]\n final bool autoDismissKeyboard;\n\n /// Auto dispose the [controller] and [FocusNode] upon the destruction of widget from the widget tree. Default is [true]\n final bool autoDisposeControllers;\n\n /// Configures how the platform keyboard will select an uppercase or lowercase keyboard.\n /// Only supports text keyboards, other keyboard types will ignore this configuration. Capitalization is locale-aware.\n /// - Copied from 'https://api.flutter.dev/flutter/services/TextCapitalization-class.html'\n /// Default is [TextCapitalization.none]\n final TextCapitalization textCapitalization;\n\n final TextInputAction textInputAction;\n\n /// Triggers the error animation\n final StreamController\u0026lt;ErrorAnimationType\u0026gt;? errorAnimationController;\n\n /// Callback method to validate if text can be pasted. This is helpful when we need to validate text before pasting.\n /// e.g. validate if text is number. Default will be pasted as received.\n final bool Function(String? text)? beforeTextPaste;\n\n /// Method for detecting a pin_code form tap\n /// work with all form windows\n final Function? onTap;\n\n /// Configuration for paste dialog. Read more [DialogConfig]\n final DialogConfig? dialogConfig;\n\n /// Theme for the pin cells. Read more [PinTheme]\n final PinTheme pinTheme;\n\n /// Brightness dark or light choices for iOS keyboard.\n final Brightness? keyboardAppearance;\n\n /// Validator for the [TextFormField]\n final FormFieldValidator\u0026lt;String\u0026gt;? validator;\n\n /// An optional method to call with the final value when the form is saved via\n /// [FormState.save].\n final FormFieldSetter\u0026lt;String\u0026gt;? onSaved;\n\n /// enables auto validation for the [TextFormField]\n /// Default is false\n final AutovalidateMode autovalidateMode;\n\n /// The vertical padding from the [PinCodeTextField] to the error text\n /// Default is 16.\n final double errorTextSpace;\n\n /// Enables pin autofill for TextFormField.\n /// Default is true\n final bool enablePinAutofill;\n\n /// Error animation duration\n final int errorAnimationDuration;\n\n /// Whether to show cursor or not\n final bool showCursor;\n\n /// The color of the cursor, default to Theme.of(context).accentColor\n final Color? cursorColor;\n\n /// width of the cursor, default to 2\n final double cursorWidth;\n\n /// Height of the cursor, default to FontSize + 8;\n final double? cursorHeight;\n\n /// Autofill cleanup action\n final AutofillContextAction onAutoFillDisposeAction;\n\n /// Use external [AutoFillGroup]\n final bool useExternalAutoFillGroup;\n\"\u003e\u003cpre\u003e \u003cspan class=\"pl-c\"\u003e/// The \u003cspan class=\"pl-v\"\u003e[BuildContext]\u003c/span\u003e of the application\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eBuildContext\u003c/span\u003e appContext;\n\n \u003cspan class=\"pl-c\"\u003e///Box Shadow for Pincode\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eList\u003c/span\u003e\u0026lt;\u003cspan class=\"pl-c1\"\u003eBoxShadow\u003c/span\u003e\u0026gt;\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e boxShadows;\n\n \u003cspan class=\"pl-c\"\u003e/// length of how many cells there should be. 3-8 is recommended by me\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eint\u003c/span\u003e length;\n\n \u003cspan class=\"pl-c\"\u003e/// you already know what it does i guess :P default is false\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ebool\u003c/span\u003e obscureText;\n\n \u003cspan class=\"pl-c\"\u003e/// Character used for obscuring text if obscureText is true.\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e ///\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e /// Must not be empty. Single character is recommended.\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e ///\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e /// Default is ● - 'Black Circle' (U+25CF)\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eString\u003c/span\u003e obscuringCharacter;\n\n \u003cspan class=\"pl-c\"\u003e/// Widget used to obscure text\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e ///\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e /// it overrides the obscuringCharacter\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eWidget\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e obscuringWidget;\n\n \u003cspan class=\"pl-c\"\u003e/// Whether to use haptic feedback or not\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e ///\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e ///\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ebool\u003c/span\u003e useHapticFeedback;\n\n \u003cspan class=\"pl-c\"\u003e/// Haptic Feedback Types\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e ///\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e /// heavy, medium, light links to respective impacts\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e /// selection - selectionClick, vibrate - vibrate\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e /// check \u003cspan class=\"pl-v\"\u003e[HapticFeedback]\u003c/span\u003e for more\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eHapticFeedbackTypes\u003c/span\u003e hapticFeedbackTypes;\n\n \u003cspan class=\"pl-c\"\u003e/// Decides whether typed character should be\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e /// briefly shown before being obscured\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ebool\u003c/span\u003e blinkWhenObscuring;\n\n \u003cspan class=\"pl-c\"\u003e/// Blink Duration if blinkWhenObscuring is set to true\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eDuration\u003c/span\u003e blinkDuration;\n\n \u003cspan class=\"pl-c\"\u003e/// returns the current typed text in the fields\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eValueChanged\u003c/span\u003e\u0026lt;\u003cspan class=\"pl-c1\"\u003eString\u003c/span\u003e\u0026gt; onChanged;\n\n \u003cspan class=\"pl-c\"\u003e/// returns the typed text when all pins are set\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eValueChanged\u003c/span\u003e\u0026lt;\u003cspan class=\"pl-c1\"\u003eString\u003c/span\u003e\u0026gt;\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e onCompleted;\n\n \u003cspan class=\"pl-c\"\u003e/// returns the typed text when user presses done/next action on the keyboard\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eValueChanged\u003c/span\u003e\u0026lt;\u003cspan class=\"pl-c1\"\u003eString\u003c/span\u003e\u0026gt;\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e onSubmitted;\n\n \u003cspan class=\"pl-c\"\u003e/// the style of the text, default is \u003cspan class=\"pl-v\"\u003e[ fontSize: 20, fontWeight: FontWeight.bold]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextStyle\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e textStyle;\n\n \u003cspan class=\"pl-c\"\u003e/// the style of the pasted text, default is \u003cspan class=\"pl-v\"\u003e[fontWeight: FontWeight.bold]\u003c/span\u003e while\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e /// \u003cspan class=\"pl-v\"\u003e[TextStyle.color]\u003c/span\u003e is \u003cspan class=\"pl-v\"\u003e[ThemeData.accentColor]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextStyle\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e pastedTextStyle;\n\n \u003cspan class=\"pl-c\"\u003e/// background color for the whole row of pin code fields.\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColor\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e backgroundColor;\n\n \u003cspan class=\"pl-c\"\u003e/// This defines how the elements in the pin code field align. Default to \u003cspan class=\"pl-v\"\u003e[MainAxisAlignment.spaceBetween]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eMainAxisAlignment\u003c/span\u003e mainAxisAlignment;\n\n \u003cspan class=\"pl-c\"\u003e/// \u003cspan class=\"pl-v\"\u003e[AnimationType]\u003c/span\u003e for the text to appear in the pin code field. Default is \u003cspan class=\"pl-v\"\u003e[AnimationType.slide]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eAnimationType\u003c/span\u003e animationType;\n\n \u003cspan class=\"pl-c\"\u003e/// Duration for the animation. Default is \u003cspan class=\"pl-v\"\u003e[Duration(milliseconds: 150)]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eDuration\u003c/span\u003e animationDuration;\n\n \u003cspan class=\"pl-c\"\u003e/// \u003cspan class=\"pl-v\"\u003e[Curve]\u003c/span\u003e for the animation. Default is \u003cspan class=\"pl-v\"\u003e[Curves.easeInOut]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eCurve\u003c/span\u003e animationCurve;\n\n \u003cspan class=\"pl-c\"\u003e/// \u003cspan class=\"pl-v\"\u003e[TextInputType]\u003c/span\u003e for the pin code fields. default is \u003cspan class=\"pl-v\"\u003e[TextInputType.visiblePassword]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextInputType\u003c/span\u003e keyboardType;\n\n \u003cspan class=\"pl-c\"\u003e/// If the pin code field should be autofocused or not. Default is \u003cspan class=\"pl-v\"\u003e[false]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ebool\u003c/span\u003e autoFocus;\n\n \u003cspan class=\"pl-c\"\u003e/// Should pass a \u003cspan class=\"pl-v\"\u003e[FocusNode]\u003c/span\u003e to manage it from the parent\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eFocusNode\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e focusNode;\n\n \u003cspan class=\"pl-c\"\u003e/// A list of \u003cspan class=\"pl-v\"\u003e[TextInputFormatter]\u003c/span\u003e that goes to the TextField\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eList\u003c/span\u003e\u0026lt;\u003cspan class=\"pl-c1\"\u003eTextInputFormatter\u003c/span\u003e\u0026gt; inputFormatters;\n\n \u003cspan class=\"pl-c\"\u003e/// Enable or disable the Field. Default is \u003cspan class=\"pl-v\"\u003e[true]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ebool\u003c/span\u003e enabled;\n\n \u003cspan class=\"pl-c\"\u003e/// \u003cspan class=\"pl-v\"\u003e[TextEditingController]\u003c/span\u003e to control the text manually. Sets a default \u003cspan class=\"pl-v\"\u003e[TextEditingController()]\u003c/span\u003e object if none given\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextEditingController\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e controller;\n\n \u003cspan class=\"pl-c\"\u003e/// Enabled Color fill for individual pin fields, default is \u003cspan class=\"pl-v\"\u003e[false]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ebool\u003c/span\u003e enableActiveFill;\n\n \u003cspan class=\"pl-c\"\u003e/// Auto dismiss the keyboard upon inputting the value for the last field. Default is \u003cspan class=\"pl-v\"\u003e[true]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ebool\u003c/span\u003e autoDismissKeyboard;\n\n \u003cspan class=\"pl-c\"\u003e/// Auto dispose the \u003cspan class=\"pl-v\"\u003e[controller]\u003c/span\u003e and \u003cspan class=\"pl-v\"\u003e[FocusNode]\u003c/span\u003e upon the destruction of widget from the widget tree. Default is \u003cspan class=\"pl-v\"\u003e[true]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ebool\u003c/span\u003e autoDisposeControllers;\n\n \u003cspan class=\"pl-c\"\u003e/// Configures how the platform keyboard will select an uppercase or lowercase keyboard.\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e /// Only supports text keyboards, other keyboard types will ignore this configuration. Capitalization is locale-aware.\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e /// - Copied from 'https://api.flutter.dev/flutter/services/TextCapitalization-class.html'\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e /// Default is \u003cspan class=\"pl-v\"\u003e[TextCapitalization.none]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextCapitalization\u003c/span\u003e textCapitalization;\n\n \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextInputAction\u003c/span\u003e textInputAction;\n\n \u003cspan class=\"pl-c\"\u003e/// Triggers the error animation\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eStreamController\u003c/span\u003e\u0026lt;\u003cspan class=\"pl-c1\"\u003eErrorAnimationType\u003c/span\u003e\u0026gt;\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e errorAnimationController;\n\n \u003cspan class=\"pl-c\"\u003e/// Callback method to validate if text can be pasted. This is helpful when we need to validate text before pasting.\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e /// e.g. validate if text is number. Default will be pasted as received.\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ebool\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eFunction\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003eString\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e text)\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e beforeTextPaste;\n\n \u003cspan class=\"pl-c\"\u003e/// Method for detecting a pin_code form tap\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e /// work with all form windows\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eFunction\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e onTap;\n\n \u003cspan class=\"pl-c\"\u003e/// Configuration for paste dialog. Read more \u003cspan class=\"pl-v\"\u003e[DialogConfig]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eDialogConfig\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e dialogConfig;\n\n \u003cspan class=\"pl-c\"\u003e/// Theme for the pin cells. Read more \u003cspan class=\"pl-v\"\u003e[PinTheme]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ePinTheme\u003c/span\u003e pinTheme;\n\n \u003cspan class=\"pl-c\"\u003e/// Brightness dark or light choices for iOS keyboard.\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eBrightness\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e keyboardAppearance;\n\n \u003cspan class=\"pl-c\"\u003e/// Validator for the \u003cspan class=\"pl-v\"\u003e[TextFormField]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eFormFieldValidator\u003c/span\u003e\u0026lt;\u003cspan class=\"pl-c1\"\u003eString\u003c/span\u003e\u0026gt;\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e validator;\n\n \u003cspan class=\"pl-c\"\u003e/// An optional method to call with the final value when the form is saved via\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e /// \u003cspan class=\"pl-v\"\u003e[FormState.save]\u003c/span\u003e.\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eFormFieldSetter\u003c/span\u003e\u0026lt;\u003cspan class=\"pl-c1\"\u003eString\u003c/span\u003e\u0026gt;\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e onSaved;\n\n \u003cspan class=\"pl-c\"\u003e/// enables auto validation for the \u003cspan class=\"pl-v\"\u003e[TextFormField]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e /// Default is false\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eAutovalidateMode\u003c/span\u003e autovalidateMode;\n\n \u003cspan class=\"pl-c\"\u003e/// The vertical padding from the \u003cspan class=\"pl-v\"\u003e[PinCodeTextField]\u003c/span\u003e to the error text\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e /// Default is 16.\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003edouble\u003c/span\u003e errorTextSpace;\n\n \u003cspan class=\"pl-c\"\u003e/// Enables pin autofill for TextFormField.\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e /// Default is true\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ebool\u003c/span\u003e enablePinAutofill;\n\n \u003cspan class=\"pl-c\"\u003e/// Error animation duration\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eint\u003c/span\u003e errorAnimationDuration;\n\n \u003cspan class=\"pl-c\"\u003e/// Whether to show cursor or not\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ebool\u003c/span\u003e showCursor;\n\n \u003cspan class=\"pl-c\"\u003e/// The color of the cursor, default to Theme.of(context).accentColor\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColor\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e cursorColor;\n\n \u003cspan class=\"pl-c\"\u003e/// width of the cursor, default to 2\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003edouble\u003c/span\u003e cursorWidth;\n\n \u003cspan class=\"pl-c\"\u003e/// Height of the cursor, default to FontSize + 8;\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003edouble\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e cursorHeight;\n\n \u003cspan class=\"pl-c\"\u003e/// Autofill cleanup action\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eAutofillContextAction\u003c/span\u003e onAutoFillDisposeAction;\n\n \u003cspan class=\"pl-c\"\u003e/// Use external \u003cspan class=\"pl-v\"\u003e[AutoFillGroup]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ebool\u003c/span\u003e useExternalAutoFillGroup;\n\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003ePinTheme\u003c/strong\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-dart notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"/// Colors of the input fields which have inputs. Default is [Colors.green]\n final Color activeColor;\n\n /// Color of the input field which is currently selected. Default is [Colors.blue]\n final Color selectedColor;\n\n /// Colors of the input fields which don't have inputs. Default is [Colors.red]\n final Color inactiveColor;\n\n /// Colors of the input fields if the [PinCodeTextField] is disabled. Default is [Colors.grey]\n final Color disabledColor;\n\n /// Colors of the input fields which have inputs. Default is [Colors.green]\n final Color activeFillColor;\n\n /// Color of the input field which is currently selected. Default is [Colors.blue]\n final Color selectedFillColor;\n\n /// Colors of the input fields which don't have inputs. Default is [Colors.red]\n final Color inactiveFillColor;\n\n /// Border radius of each pin code field\n final BorderRadius borderRadius;\n\n /// [height] for the pin code field. default is [50.0]\n final double fieldHeight;\n\n /// [width] for the pin code field. default is [40.0]\n final double fieldWidth;\n\n /// Border width for the each input fields. Default is [2.0]\n final double borderWidth;\n\n /// this defines the shape of the input fields. Default is underlined\n final PinCodeFieldShape shape;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e/// Colors of the input fields which have inputs. Default is \u003cspan class=\"pl-v\"\u003e[Colors.green]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColor\u003c/span\u003e activeColor;\n\n \u003cspan class=\"pl-c\"\u003e/// Color of the input field which is currently selected. Default is \u003cspan class=\"pl-v\"\u003e[Colors.blue]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColor\u003c/span\u003e selectedColor;\n\n \u003cspan class=\"pl-c\"\u003e/// Colors of the input fields which don't have inputs. Default is \u003cspan class=\"pl-v\"\u003e[Colors.red]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColor\u003c/span\u003e inactiveColor;\n\n \u003cspan class=\"pl-c\"\u003e/// Colors of the input fields if the \u003cspan class=\"pl-v\"\u003e[PinCodeTextField]\u003c/span\u003e is disabled. Default is \u003cspan class=\"pl-v\"\u003e[Colors.grey]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColor\u003c/span\u003e disabledColor;\n\n \u003cspan class=\"pl-c\"\u003e/// Colors of the input fields which have inputs. Default is \u003cspan class=\"pl-v\"\u003e[Colors.green]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColor\u003c/span\u003e activeFillColor;\n\n \u003cspan class=\"pl-c\"\u003e/// Color of the input field which is currently selected. Default is \u003cspan class=\"pl-v\"\u003e[Colors.blue]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColor\u003c/span\u003e selectedFillColor;\n\n \u003cspan class=\"pl-c\"\u003e/// Colors of the input fields which don't have inputs. Default is \u003cspan class=\"pl-v\"\u003e[Colors.red]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColor\u003c/span\u003e inactiveFillColor;\n\n \u003cspan class=\"pl-c\"\u003e/// Border radius of each pin code field\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eBorderRadius\u003c/span\u003e borderRadius;\n\n \u003cspan class=\"pl-c\"\u003e/// \u003cspan class=\"pl-v\"\u003e[height]\u003c/span\u003e for the pin code field. default is \u003cspan class=\"pl-v\"\u003e[50.0]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003edouble\u003c/span\u003e fieldHeight;\n\n \u003cspan class=\"pl-c\"\u003e/// \u003cspan class=\"pl-v\"\u003e[width]\u003c/span\u003e for the pin code field. default is \u003cspan class=\"pl-v\"\u003e[40.0]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003edouble\u003c/span\u003e fieldWidth;\n\n \u003cspan class=\"pl-c\"\u003e/// Border width for the each input fields. Default is \u003cspan class=\"pl-v\"\u003e[2.0]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003edouble\u003c/span\u003e borderWidth;\n\n \u003cspan class=\"pl-c\"\u003e/// this defines the shape of the input fields. Default is underlined\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ePinCodeFieldShape\u003c/span\u003e shape;\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eDialogConfig\u003c/strong\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-dart notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"/// title of the [AlertDialog] while pasting the code. Default to [Paste Code]\n final String dialogTitle;\n\n /// content of the [AlertDialog] while pasting the code. Default to [\u0026quot;Do you want to paste this code \u0026quot;]\n final String dialogContent;\n\n /// Affirmative action text for the [AlertDialog]. Default to \u0026quot;Paste\u0026quot;\n final String affirmativeText;\n\n /// Negative action text for the [AlertDialog]. Default to \u0026quot;Cancel\u0026quot;\n final String negativeText;\n\n /// The default dialog theme, should it be iOS or other(including web and Android)\n final Platform platform; //enum Platform { iOS, other } other indicates for web and android\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e/// title of the \u003cspan class=\"pl-v\"\u003e[AlertDialog]\u003c/span\u003e while pasting the code. Default to \u003cspan class=\"pl-v\"\u003e[Paste Code]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eString\u003c/span\u003e dialogTitle;\n\n \u003cspan class=\"pl-c\"\u003e/// content of the \u003cspan class=\"pl-v\"\u003e[AlertDialog]\u003c/span\u003e while pasting the code. Default to \u003cspan class=\"pl-v\"\u003e[\"Do you want to paste this code \"]\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eString\u003c/span\u003e dialogContent;\n\n \u003cspan class=\"pl-c\"\u003e/// Affirmative action text for the \u003cspan class=\"pl-v\"\u003e[AlertDialog]\u003c/span\u003e. Default to \"Paste\"\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eString\u003c/span\u003e affirmativeText;\n\n \u003cspan class=\"pl-c\"\u003e/// Negative action text for the \u003cspan class=\"pl-v\"\u003e[AlertDialog]\u003c/span\u003e. Default to \"Cancel\"\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eString\u003c/span\u003e negativeText;\n\n \u003cspan class=\"pl-c\"\u003e/// The default dialog theme, should it be iOS or other(including web and Android)\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e\u003c/span\u003e \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ePlatform\u003c/span\u003e platform; \u003cspan class=\"pl-c\"\u003e//enum Platform { iOS, other } other indicates for web and android\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eContributors ✨\u003c/h2\u003e\u003ca id=\"user-content-contributors-\" class=\"anchor\" aria-label=\"Permalink: Contributors ✨\" href=\"#contributors-\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThanks to everyone whoever suggested their thoughts to improve this package. And special thanks goes to these people:\u003c/p\u003e\n\u003cmarkdown-accessiblity-table\u003e\u003ctable\u003e\n \u003ctbody\u003e\u003ctr\u003e\n \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/EmmanuelVlad\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/21370666?v=3\" width=\"100px;\" alt=\"Emmanuel Vlad\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eEmmanuel Vlad\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=EmmanuelVlad\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca href=\"https://atiq.info/\" rel=\"nofollow\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/a5237424d06461c904bca58e200581bb8921046017ab5dcedd8e796b6c6ceebb/68747470733a2f2f617469712e696e666f2f696d616765732f6c6f676f2e706e67\" width=\"100px;\" alt=\"Atiq\" data-canonical-src=\"https://atiq.info/images/logo.png\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eAtiqur Rahaman\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://www.2dimensions.com/a/atiq31416/files/flare/otp-verification/preview\" title=\"UX \u0026amp; Flare Animation\" rel=\"nofollow\"\u003e🎨\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/milind-mevada-stl\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/29375516?v=3\" width=\"100px;\" alt=\"Milind Mevada\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eMilind Mevada\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=milind-mevada-stl\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/RemeJuan\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/864552?v=3\" width=\"100px;\" alt=\"Reme Le Hane\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eReme Le Hane\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=RemeJuan\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/TabooSun\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/31196825?v=3\" width=\"100px;\" alt=\"TabooSun\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eTabooSun\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=TabooSun\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/thallessantos\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/13054457?v=3\" width=\"100px;\" alt=\"Thalles Santos\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eThalles Santos\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=thallessantos\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ItamarMu\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/27651221?v=3\" width=\"100px;\" alt=\"ItamarMu\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eItamarMu\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=ItamarMu\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ThinkDigitalSoftware\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/23037821?v=3\" width=\"100px;\" alt=\"Jonathan White\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eThinkDigitalSoftware\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=ThinkDigitalSoftware\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/JeffryHermanto\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/35820325?v=3\" width=\"100px;\" alt=\"Jeffry Hermanto\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eJeffry Hermanto\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=JeffryHermanto\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ItamarMu\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/27651221?v=3\" width=\"100px;\" alt=\"ItamarMu\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eItamarMu\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=ItamarMu\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ened\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/269860?v=3\" width=\"100px;\" alt=\"Sebastian Roth\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eSebastian Roth\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=ened\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/darkang3lz92\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/33158127?v=3\" width=\"100px;\" alt=\"Dango Mango\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eDango Mango\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=darkang3lz92\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Frezyx\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/40857927?v=3\" width=\"100px;\" alt=\"Stanislav Ilin\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eStanislav Ilin\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=Frezyx\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/VarunBarad\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/8678857?v=3\" width=\"100px;\" alt=\"Varun Barad\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eVarun Barad\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=VarunBarad\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/mohak852\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/58987025?v=3\" width=\"100px;\" alt=\"Mohak Shrivastava\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eMohak Shrivastava\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=mohak852\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ItamarMu\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/27651221?v=3\" width=\"100px;\" alt=\"ItamarMu\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eItamarMu\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=ItamarMu\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Margarets00\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/39041161?v=3\" width=\"100px;\" alt=\"Kim Minju\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eKim Minju\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=Margarets00\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/JSBmanD\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/5402335?s=400\u0026amp;v=4\" width=\"100px;\" alt=\"Dmitry Vakhnin\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eDmitry Vakhnin\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=JSBmanD\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/serendipity1004\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/20388249?s=400\" width=\"100px;\" alt=\"serendipity1004\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eJiho Choi\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=serendipity1004\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/jobfeikens\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/25356841?s=400\u0026amp;u=3f23a86b454b541fbcd88c9ed4a5f36df914dd03\u0026amp;v=4\" width=\"100px;\" alt=\"jobfeikens\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eJob\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=jobfeikens\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/BrunoEleodoro\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/20596317?s=400\" width=\"100px;\" alt=\"BrunoEleodoro\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eBruno Eleodoro Roza\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=BrunoEleodoro\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/tgbarker\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/2621350?s=400\u0026amp;v=4\" width=\"100px;\" alt=\"tgbarker\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003etgbarker\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=tgbarker\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/karabanovbs\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/14288495?s=400\u0026amp;v=4\" width=\"100px;\" alt=\"karabanovbs\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003ekarabanovbs\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=karabanovbs\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/adarsh-technocrat\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/14288495?s=400\u0026amp;v=4\" width=\"100px;\" alt=\"adarsh-technocrat\" style=\"max-width: 100%;\"\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eAdarsh kumar singh\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"https://github.com/adar2378/pin_code_fields/commits?author=adarsh-technocrat\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\u003c/markdown-accessiblity-table\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eThe pin code text field widget example\u003c/strong\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-dart notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"PinCodeTextField(\n length: 6,\n obscureText: false,\n animationType: AnimationType.fade,\n pinTheme: PinTheme(\n shape: PinCodeFieldShape.box,\n borderRadius: BorderRadius.circular(5),\n fieldHeight: 50,\n fieldWidth: 40,\n activeFillColor: Colors.white,\n ),\n animationDuration: Duration(milliseconds: 300),\n backgroundColor: Colors.blue.shade50,\n enableActiveFill: true,\n errorAnimationController: errorController,\n controller: textEditingController,\n onCompleted: (v) {\n print(\u0026quot;Completed\u0026quot;);\n },\n onChanged: (value) {\n print(value);\n setState(() {\n currentText = value;\n });\n },\n beforeTextPaste: (text) {\n print(\u0026quot;Allowing to paste $text\u0026quot;);\n //if you return true then it will show the paste confirmation dialog. Otherwise if false, then nothing will happen.\n //but you can show anything you want here, like your pop up saying wrong paste format or etc\n return true;\n },\n)\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c1\"\u003ePinCodeTextField\u003c/span\u003e(\n length\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e6\u003c/span\u003e,\n obscureText\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003efalse\u003c/span\u003e,\n animationType\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eAnimationType\u003c/span\u003e.fade,\n pinTheme\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ePinTheme\u003c/span\u003e(\n shape\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ePinCodeFieldShape\u003c/span\u003e.box,\n borderRadius\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eBorderRadius\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003ecircular\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e5\u003c/span\u003e),\n fieldHeight\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e50\u003c/span\u003e,\n fieldWidth\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e40\u003c/span\u003e,\n activeFillColor\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.white,\n ),\n animationDuration\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eDuration\u003c/span\u003e(milliseconds\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e300\u003c/span\u003e),\n backgroundColor\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.blue.shade50,\n enableActiveFill\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e,\n errorAnimationController\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e errorController,\n controller\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e textEditingController,\n onCompleted\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e (v) {\n \u003cspan class=\"pl-en\"\u003eprint\u003c/span\u003e(\u003cspan class=\"pl-s\"\u003e\"Completed\"\u003c/span\u003e);\n },\n onChanged\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e (value) {\n \u003cspan class=\"pl-en\"\u003eprint\u003c/span\u003e(value);\n \u003cspan class=\"pl-en\"\u003esetState\u003c/span\u003e(() {\n currentText \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e value;\n });\n },\n beforeTextPaste\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e (text) {\n \u003cspan class=\"pl-en\"\u003eprint\u003c/span\u003e(\u003cspan class=\"pl-s\"\u003e\"Allowing to paste $\u003cspan class=\"pl-v\"\u003etext\u003c/span\u003e\"\u003c/span\u003e);\n \u003cspan class=\"pl-c\"\u003e//if you return true then it will show the paste confirmation dialog. Otherwise if false, then nothing will happen.\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e//but you can show anything you want here, like your pop up saying wrong paste format or etc\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e;\n },\n)\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eShape can be among these 3 types\u003c/strong\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-dart notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"enum PinCodeFieldShape { box, underline, circle }\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eenum\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ePinCodeFieldShape\u003c/span\u003e { box, underline, circle }\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eAnimations can be among these 3 types\u003c/strong\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-dart notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"enum AnimationType { scale, slide, fade, none }\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eenum\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eAnimationType\u003c/span\u003e { scale, slide, fade, none }\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eHaptic Feedbacks can be among these 5 types\u003c/strong\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-dart notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"enum HapticFeedbackTypes {\n heavy,\n light,\n medium,\n selection,\n vibrate,\n}\n\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eenum\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eHapticFeedbackTypes\u003c/span\u003e {\n heavy,\n light,\n medium,\n selection,\n vibrate,\n}\n\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eTrigger Error animation\u003c/strong\u003e\u003cbr\u003e\u003c/p\u003e\n\u003col dir=\"auto\"\u003e\n\u003cli\u003eCreate a StreamController\u003c/li\u003e\n\u003c/ol\u003e\n\u003cdiv class=\"highlight highlight-source-dart notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"StreamController\u0026lt;ErrorAnimationType\u0026gt; errorController = StreamController\u0026lt;ErrorAnimationType\u0026gt;();\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c1\"\u003eStreamController\u003c/span\u003e\u0026lt;\u003cspan class=\"pl-c1\"\u003eErrorAnimationType\u003c/span\u003e\u0026gt; errorController \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eStreamController\u003c/span\u003e\u0026lt;\u003cspan class=\"pl-c1\"\u003eErrorAnimationType\u003c/span\u003e\u0026gt;();\u003c/pre\u003e\u003c/div\u003e\n\u003col start=\"2\" dir=\"auto\"\u003e\n\u003cli\u003eAnd pass the controller like this.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cdiv class=\"highlight highlight-source-dart notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"PinCodeTextField(\n length: 6,\n obscureText: false,\n animationType: AnimationType.fade,\n animationDuration: Duration(milliseconds: 300),\n errorAnimationController: errorController, // Pass it here\n onChanged: (value) {\n setState(() {\n currentText = value;\n });\n },\n)\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c1\"\u003ePinCodeTextField\u003c/span\u003e(\n length\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e6\u003c/span\u003e,\n obscureText\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003efalse\u003c/span\u003e,\n animationType\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eAnimationType\u003c/span\u003e.fade,\n animationDuration\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eDuration\u003c/span\u003e(milliseconds\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e300\u003c/span\u003e),\n errorAnimationController\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e errorController, \u003cspan class=\"pl-c\"\u003e// Pass it here\u003c/span\u003e\n onChanged\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e (value) {\n \u003cspan class=\"pl-en\"\u003esetState\u003c/span\u003e(() {\n currentText \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e value;\n });\n },\n)\u003c/pre\u003e\u003c/div\u003e\n\u003col start=\"3\" dir=\"auto\"\u003e\n\u003cli\u003eThen you can trigger the animation just by writing this:\u003c/li\u003e\n\u003c/ol\u003e\n\u003cdiv class=\"highlight highlight-source-dart notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"errorController.add(ErrorAnimationType.shake); // This will shake the pin code field\"\u003e\u003cpre\u003eerrorController.\u003cspan class=\"pl-en\"\u003eadd\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003eErrorAnimationType\u003c/span\u003e.shake); \u003cspan class=\"pl-c\"\u003e// This will shake the pin code field\u003c/span\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003e\u003cstrong\u003eThis full code is from the example folder. You can run the example to see.\u003c/strong\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-dart notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"class MyApp extends StatelessWidget {\n // This widget is the root of your application.\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n title: 'Flutter Demo',\n theme: ThemeData(\n primarySwatch: Colors.blue,\n ),\n home: PinCodeVerificationScreen(\n \u0026quot;+8801376221100\u0026quot;), // a random number, please don't call xD\n );\n }\n}\n\nclass PinCodeVerificationScreen extends StatefulWidget {\n final String phoneNumber;\n\n PinCodeVerificationScreen(this.phoneNumber);\n\n @override\n _PinCodeVerificationScreenState createState() =\u0026gt;\n _PinCodeVerificationScreenState();\n}\n\nclass _PinCodeVerificationScreenState extends State\u0026lt;PinCodeVerificationScreen\u0026gt; {\n var onTapRecognizer;\n\n TextEditingController textEditingController = TextEditingController();\n // ..text = \u0026quot;123456\u0026quot;;\n\n StreamController\u0026lt;ErrorAnimationType\u0026gt; errorController;\n\n bool hasError = false;\n String currentText = \u0026quot;\u0026quot;;\n final GlobalKey\u0026lt;ScaffoldState\u0026gt; scaffoldKey = GlobalKey\u0026lt;ScaffoldState\u0026gt;();\n final formKey = GlobalKey\u0026lt;FormState\u0026gt;();\n\n @override\n void initState() {\n onTapRecognizer = TapGestureRecognizer()\n ..onTap = () {\n Navigator.pop(context);\n };\n errorController = StreamController\u0026lt;ErrorAnimationType\u0026gt;();\n super.initState();\n }\n\n @override\n void dispose() {\n errorController.close();\n\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n backgroundColor: Colors.blue.shade50,\n key: scaffoldKey,\n body: GestureDetector(\n onTap: () {},\n child: Container(\n height: MediaQuery.of(context).size.height,\n width: MediaQuery.of(context).size.width,\n child: ListView(\n children: \u0026lt;Widget\u0026gt;[\n SizedBox(height: 30),\n Container(\n height: MediaQuery.of(context).size.height / 3,\n child: FlareActor(\n \u0026quot;assets/otp.flr\u0026quot;,\n animation: \u0026quot;otp\u0026quot;,\n fit: BoxFit.fitHeight,\n alignment: Alignment.center,\n ),\n ),\n SizedBox(height: 8),\n Padding(\n padding: const EdgeInsets.symmetric(vertical: 8.0),\n child: Text(\n 'Phone Number Verification',\n style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22),\n textAlign: TextAlign.center,\n ),\n ),\n Padding(\n padding:\n const EdgeInsets.symmetric(horizontal: 30.0, vertical: 8),\n child: RichText(\n text: TextSpan(\n text: \u0026quot;Enter the code sent to \u0026quot;,\n children: [\n TextSpan(\n text: widget.phoneNumber,\n style: TextStyle(\n color: Colors.black,\n fontWeight: FontWeight.bold,\n fontSize: 15)),\n ],\n style: TextStyle(color: Colors.black54, fontSize: 15)),\n textAlign: TextAlign.center,\n ),\n ),\n SizedBox(\n height: 20,\n ),\n Form(\n key: formKey,\n child: Padding(\n padding: const EdgeInsets.symmetric(\n vertical: 8.0, horizontal: 30),\n child: PinCodeTextField(\n appContext: context,\n pastedTextStyle: TextStyle(\n color: Colors.green.shade600,\n fontWeight: FontWeight.bold,\n ),\n length: 6,\n obscureText: false,\n obscuringCharacter: '*',\n animationType: AnimationType.fade,\n validator: (v) {\n if (v.length \u0026lt; 3) {\n return \u0026quot;I'm from validator\u0026quot;;\n } else {\n return null;\n }\n },\n pinTheme: PinTheme(\n shape: PinCodeFieldShape.box,\n borderRadius: BorderRadius.circular(5),\n fieldHeight: 60,\n fieldWidth: 50,\n activeFillColor:\n hasError ? Colors.orange : Colors.white,\n ),\n cursorColor: Colors.black,\n animationDuration: Duration(milliseconds: 300),\n textStyle: TextStyle(fontSize: 20, height: 1.6),\n backgroundColor: Colors.blue.shade50,\n enableActiveFill: true,\n errorAnimationController: errorController,\n controller: textEditingController,\n keyboardType: TextInputType.number,\n boxShadows: [\n BoxShadow(\n offset: Offset(0, 1),\n color: Colors.black12,\n blurRadius: 10,\n )\n ],\n onCompleted: (v) {\n print(\u0026quot;Completed\u0026quot;);\n },\n // onTap: () {\n // print(\u0026quot;Pressed\u0026quot;);\n // },\n onChanged: (value) {\n print(value);\n setState(() {\n currentText = value;\n });\n },\n beforeTextPaste: (text) {\n print(\u0026quot;Allowing to paste $text\u0026quot;);\n //if you return true then it will show the paste confirmation dialog. Otherwise if false, then nothing will happen.\n //but you can show anything you want here, like your pop up saying wrong paste format or etc\n return true;\n },\n )),\n ),\n Padding(\n padding: const EdgeInsets.symmetric(horizontal: 30.0),\n child: Text(\n hasError ? \u0026quot;*Please fill up all the cells properly\u0026quot; : \u0026quot;\u0026quot;,\n style: TextStyle(\n color: Colors.red,\n fontSize: 12,\n fontWeight: FontWeight.w400),\n ),\n ),\n SizedBox(\n height: 20,\n ),\n RichText(\n textAlign: TextAlign.center,\n text: TextSpan(\n text: \u0026quot;Didn't receive the code? \u0026quot;,\n style: TextStyle(color: Colors.black54, fontSize: 15),\n children: [\n TextSpan(\n text: \u0026quot; RESEND\u0026quot;,\n recognizer: onTapRecognizer,\n style: TextStyle(\n color: Color(0xFF91D3B3),\n fontWeight: FontWeight.bold,\n fontSize: 16))\n ]),\n ),\n SizedBox(\n height: 14,\n ),\n Container(\n margin:\n const EdgeInsets.symmetric(vertical: 16.0, horizontal: 30),\n child: ButtonTheme(\n height: 50,\n child: FlatButton(\n onPressed: () {\n formKey.currentState.validate();\n // conditions for validating\n if (currentText.length != 6 || currentText != \u0026quot;towtow\u0026quot;) {\n errorController.add(ErrorAnimationType\n .shake); // Triggering error shake animation\n setState(() {\n hasError = true;\n });\n } else {\n setState(() {\n hasError = false;\n scaffoldKey.currentState.showSnackBar(SnackBar(\n content: Text(\u0026quot;Aye!!\u0026quot;),\n duration: Duration(seconds: 2),\n ));\n });\n }\n },\n child: Center(\n child: Text(\n \u0026quot;VERIFY\u0026quot;.toUpperCase(),\n style: TextStyle(\n color: Colors.white,\n fontSize: 18,\n fontWeight: FontWeight.bold),\n )),\n ),\n ),\n decoration: BoxDecoration(\n color: Colors.green.shade300,\n borderRadius: BorderRadius.circular(5),\n boxShadow: [\n BoxShadow(\n color: Colors.green.shade200,\n offset: Offset(1, -2),\n blurRadius: 5),\n BoxShadow(\n color: Colors.green.shade200,\n offset: Offset(-1, 2),\n blurRadius: 5)\n ]),\n ),\n SizedBox(\n height: 16,\n ),\n Row(\n mainAxisAlignment: MainAxisAlignment.center,\n children: \u0026lt;Widget\u0026gt;[\n FlatButton(\n child: Text(\u0026quot;Clear\u0026quot;),\n onPressed: () {\n textEditingController.clear();\n },\n ),\n FlatButton(\n child: Text(\u0026quot;Set Text\u0026quot;),\n onPressed: () {\n textEditingController.text = \u0026quot;123456\u0026quot;;\n },\n ),\n ],\n )\n ],\n ),\n ),\n ),\n );\n }\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eclass\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eMyApp\u003c/span\u003e \u003cspan class=\"pl-k\"\u003eextends\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eStatelessWidget\u003c/span\u003e {\n \u003cspan class=\"pl-c\"\u003e// This widget is the root of your application.\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003e@override\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eWidget\u003c/span\u003e \u003cspan class=\"pl-en\"\u003ebuild\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003eBuildContext\u003c/span\u003e context) {\n \u003cspan class=\"pl-k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eMaterialApp\u003c/span\u003e(\n title\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e'Flutter Demo'\u003c/span\u003e,\n theme\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eThemeData\u003c/span\u003e(\n primarySwatch\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.blue,\n ),\n home\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ePinCodeVerificationScreen\u003c/span\u003e(\n \u003cspan class=\"pl-s\"\u003e\"+8801376221100\"\u003c/span\u003e), \u003cspan class=\"pl-c\"\u003e// a random number, please don't call xD\u003c/span\u003e\n );\n }\n}\n\n\u003cspan class=\"pl-k\"\u003eclass\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ePinCodeVerificationScreen\u003c/span\u003e \u003cspan class=\"pl-k\"\u003eextends\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eStatefulWidget\u003c/span\u003e {\n \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eString\u003c/span\u003e phoneNumber;\n\n \u003cspan class=\"pl-c1\"\u003ePinCodeVerificationScreen\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003ethis\u003c/span\u003e.phoneNumber);\n\n \u003cspan class=\"pl-k\"\u003e@override\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e_PinCodeVerificationScreenState\u003c/span\u003e \u003cspan class=\"pl-en\"\u003ecreateState\u003c/span\u003e() \u003cspan class=\"pl-k\"\u003e=\u0026gt;\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003e_PinCodeVerificationScreenState\u003c/span\u003e();\n}\n\n\u003cspan class=\"pl-k\"\u003eclass\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e_PinCodeVerificationScreenState\u003c/span\u003e \u003cspan class=\"pl-k\"\u003eextends\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eState\u003c/span\u003e\u0026lt;\u003cspan class=\"pl-c1\"\u003ePinCodeVerificationScreen\u003c/span\u003e\u0026gt; {\n \u003cspan class=\"pl-k\"\u003evar\u003c/span\u003e onTapRecognizer;\n\n \u003cspan class=\"pl-c1\"\u003eTextEditingController\u003c/span\u003e textEditingController \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextEditingController\u003c/span\u003e();\n \u003cspan class=\"pl-c\"\u003e// ..text = \"123456\";\u003c/span\u003e\n\n \u003cspan class=\"pl-c1\"\u003eStreamController\u003c/span\u003e\u0026lt;\u003cspan class=\"pl-c1\"\u003eErrorAnimationType\u003c/span\u003e\u0026gt; errorController;\n\n \u003cspan class=\"pl-c1\"\u003ebool\u003c/span\u003e hasError \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003efalse\u003c/span\u003e;\n \u003cspan class=\"pl-c1\"\u003eString\u003c/span\u003e currentText \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"\"\u003c/span\u003e;\n \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eGlobalKey\u003c/span\u003e\u0026lt;\u003cspan class=\"pl-c1\"\u003eScaffoldState\u003c/span\u003e\u0026gt; scaffoldKey \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eGlobalKey\u003c/span\u003e\u0026lt;\u003cspan class=\"pl-c1\"\u003eScaffoldState\u003c/span\u003e\u0026gt;();\n \u003cspan class=\"pl-k\"\u003efinal\u003c/span\u003e formKey \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eGlobalKey\u003c/span\u003e\u0026lt;\u003cspan class=\"pl-c1\"\u003eFormState\u003c/span\u003e\u0026gt;();\n\n \u003cspan class=\"pl-k\"\u003e@override\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003evoid\u003c/span\u003e \u003cspan class=\"pl-en\"\u003einitState\u003c/span\u003e() {\n onTapRecognizer \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTapGestureRecognizer\u003c/span\u003e()\n ..onTap \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e () {\n \u003cspan class=\"pl-c1\"\u003eNavigator\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003epop\u003c/span\u003e(context);\n };\n errorController \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eStreamController\u003c/span\u003e\u0026lt;\u003cspan class=\"pl-c1\"\u003eErrorAnimationType\u003c/span\u003e\u0026gt;();\n \u003cspan class=\"pl-c1\"\u003esuper\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003einitState\u003c/span\u003e();\n }\n\n \u003cspan class=\"pl-k\"\u003e@override\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003evoid\u003c/span\u003e \u003cspan class=\"pl-en\"\u003edispose\u003c/span\u003e() {\n errorController.\u003cspan class=\"pl-en\"\u003eclose\u003c/span\u003e();\n\n \u003cspan class=\"pl-c1\"\u003esuper\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003edispose\u003c/span\u003e();\n }\n\n \u003cspan class=\"pl-k\"\u003e@override\u003c/span\u003e\n \u003cspan class=\"pl-c1\"\u003eWidget\u003c/span\u003e \u003cspan class=\"pl-en\"\u003ebuild\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003eBuildContext\u003c/span\u003e context) {\n \u003cspan class=\"pl-k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eScaffold\u003c/span\u003e(\n backgroundColor\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.blue.shade50,\n key\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e scaffoldKey,\n body\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eGestureDetector\u003c/span\u003e(\n onTap\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e () {},\n child\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eContainer\u003c/span\u003e(\n height\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eMediaQuery\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eof\u003c/span\u003e(context).size.height,\n width\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eMediaQuery\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eof\u003c/span\u003e(context).size.width,\n child\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eListView\u003c/span\u003e(\n children\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-k\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eWidget\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e\u0026gt;\u003c/span\u003e[\n \u003cspan class=\"pl-c1\"\u003eSizedBox\u003c/span\u003e(height\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e30\u003c/span\u003e),\n \u003cspan class=\"pl-c1\"\u003eContainer\u003c/span\u003e(\n height\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eMediaQuery\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003eof\u003c/span\u003e(context).size.height \u003cspan class=\"pl-k\"\u003e/\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e3\u003c/span\u003e,\n child\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eFlareActor\u003c/span\u003e(\n \u003cspan class=\"pl-s\"\u003e\"assets/otp.flr\"\u003c/span\u003e,\n animation\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"otp\"\u003c/span\u003e,\n fit\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eBoxFit\u003c/span\u003e.fitHeight,\n alignment\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eAlignment\u003c/span\u003e.center,\n ),\n ),\n \u003cspan class=\"pl-c1\"\u003eSizedBox\u003c/span\u003e(height\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e8\u003c/span\u003e),\n \u003cspan class=\"pl-c1\"\u003ePadding\u003c/span\u003e(\n padding\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eEdgeInsets\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003esymmetric\u003c/span\u003e(vertical\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e8.0\u003c/span\u003e),\n child\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eText\u003c/span\u003e(\n \u003cspan class=\"pl-s\"\u003e'Phone Number Verification'\u003c/span\u003e,\n style\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextStyle\u003c/span\u003e(fontWeight\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eFontWeight\u003c/span\u003e.bold, fontSize\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e22\u003c/span\u003e),\n textAlign\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextAlign\u003c/span\u003e.center,\n ),\n ),\n \u003cspan class=\"pl-c1\"\u003ePadding\u003c/span\u003e(\n padding\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eEdgeInsets\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003esymmetric\u003c/span\u003e(horizontal\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e30.0\u003c/span\u003e, vertical\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e8\u003c/span\u003e),\n child\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eRichText\u003c/span\u003e(\n text\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextSpan\u003c/span\u003e(\n text\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"Enter the code sent to \"\u003c/span\u003e,\n children\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e [\n \u003cspan class=\"pl-c1\"\u003eTextSpan\u003c/span\u003e(\n text\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e widget.phoneNumber,\n style\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextStyle\u003c/span\u003e(\n color\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.black,\n fontWeight\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eFontWeight\u003c/span\u003e.bold,\n fontSize\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e15\u003c/span\u003e)),\n ],\n style\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextStyle\u003c/span\u003e(color\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.black54, fontSize\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e15\u003c/span\u003e)),\n textAlign\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextAlign\u003c/span\u003e.center,\n ),\n ),\n \u003cspan class=\"pl-c1\"\u003eSizedBox\u003c/span\u003e(\n height\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e20\u003c/span\u003e,\n ),\n \u003cspan class=\"pl-c1\"\u003eForm\u003c/span\u003e(\n key\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e formKey,\n child\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ePadding\u003c/span\u003e(\n padding\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eEdgeInsets\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003esymmetric\u003c/span\u003e(\n vertical\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e8.0\u003c/span\u003e, horizontal\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e30\u003c/span\u003e),\n child\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ePinCodeTextField\u003c/span\u003e(\n appContext\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e context,\n pastedTextStyle\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextStyle\u003c/span\u003e(\n color\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.green.shade600,\n fontWeight\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eFontWeight\u003c/span\u003e.bold,\n ),\n length\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e6\u003c/span\u003e,\n obscureText\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003efalse\u003c/span\u003e,\n obscuringCharacter\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e'*'\u003c/span\u003e,\n animationType\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eAnimationType\u003c/span\u003e.fade,\n validator\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e (v) {\n \u003cspan class=\"pl-k\"\u003eif\u003c/span\u003e (v.length \u003cspan class=\"pl-k\"\u003e\u0026lt;\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e3\u003c/span\u003e) {\n \u003cspan class=\"pl-k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"I'm from validator\"\u003c/span\u003e;\n } \u003cspan class=\"pl-k\"\u003eelse\u003c/span\u003e {\n \u003cspan class=\"pl-k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003enull\u003c/span\u003e;\n }\n },\n pinTheme\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ePinTheme\u003c/span\u003e(\n shape\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003ePinCodeFieldShape\u003c/span\u003e.box,\n borderRadius\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eBorderRadius\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003ecircular\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e5\u003c/span\u003e),\n fieldHeight\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e60\u003c/span\u003e,\n fieldWidth\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e50\u003c/span\u003e,\n activeFillColor\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e\n hasError \u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.orange \u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.white,\n ),\n cursorColor\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.black,\n animationDuration\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eDuration\u003c/span\u003e(milliseconds\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e300\u003c/span\u003e),\n textStyle\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextStyle\u003c/span\u003e(fontSize\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e20\u003c/span\u003e, height\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e1.6\u003c/span\u003e),\n backgroundColor\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.blue.shade50,\n enableActiveFill\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e,\n errorAnimationController\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e errorController,\n controller\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e textEditingController,\n keyboardType\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextInputType\u003c/span\u003e.number,\n boxShadows\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e [\n \u003cspan class=\"pl-c1\"\u003eBoxShadow\u003c/span\u003e(\n offset\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eOffset\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e1\u003c/span\u003e),\n color\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.black12,\n blurRadius\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e10\u003c/span\u003e,\n )\n ],\n onCompleted\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e (v) {\n \u003cspan class=\"pl-en\"\u003eprint\u003c/span\u003e(\u003cspan class=\"pl-s\"\u003e\"Completed\"\u003c/span\u003e);\n },\n \u003cspan class=\"pl-c\"\u003e// onTap: () {\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e// print(\"Pressed\");\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e// },\u003c/span\u003e\n onChanged\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e (value) {\n \u003cspan class=\"pl-en\"\u003eprint\u003c/span\u003e(value);\n \u003cspan class=\"pl-en\"\u003esetState\u003c/span\u003e(() {\n currentText \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e value;\n });\n },\n beforeTextPaste\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e (text) {\n \u003cspan class=\"pl-en\"\u003eprint\u003c/span\u003e(\u003cspan class=\"pl-s\"\u003e\"Allowing to paste $\u003cspan class=\"pl-v\"\u003etext\u003c/span\u003e\"\u003c/span\u003e);\n \u003cspan class=\"pl-c\"\u003e//if you return true then it will show the paste confirmation dialog. Otherwise if false, then nothing will happen.\u003c/span\u003e\n \u003cspan class=\"pl-c\"\u003e//but you can show anything you want here, like your pop up saying wrong paste format or etc\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e;\n },\n )),\n ),\n \u003cspan class=\"pl-c1\"\u003ePadding\u003c/span\u003e(\n padding\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eEdgeInsets\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003esymmetric\u003c/span\u003e(horizontal\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e30.0\u003c/span\u003e),\n child\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eText\u003c/span\u003e(\n hasError \u003cspan class=\"pl-k\"\u003e?\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"*Please fill up all the cells properly\"\u003c/span\u003e \u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"\"\u003c/span\u003e,\n style\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextStyle\u003c/span\u003e(\n color\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.red,\n fontSize\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e12\u003c/span\u003e,\n fontWeight\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eFontWeight\u003c/span\u003e.w400),\n ),\n ),\n \u003cspan class=\"pl-c1\"\u003eSizedBox\u003c/span\u003e(\n height\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e20\u003c/span\u003e,\n ),\n \u003cspan class=\"pl-c1\"\u003eRichText\u003c/span\u003e(\n textAlign\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextAlign\u003c/span\u003e.center,\n text\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextSpan\u003c/span\u003e(\n text\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"Didn't receive the code? \"\u003c/span\u003e,\n style\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextStyle\u003c/span\u003e(color\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.black54, fontSize\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e15\u003c/span\u003e),\n children\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e [\n \u003cspan class=\"pl-c1\"\u003eTextSpan\u003c/span\u003e(\n text\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\" RESEND\"\u003c/span\u003e,\n recognizer\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e onTapRecognizer,\n style\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextStyle\u003c/span\u003e(\n color\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColor\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e0xFF91D3B3\u003c/span\u003e),\n fontWeight\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eFontWeight\u003c/span\u003e.bold,\n fontSize\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e16\u003c/span\u003e))\n ]),\n ),\n \u003cspan class=\"pl-c1\"\u003eSizedBox\u003c/span\u003e(\n height\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e14\u003c/span\u003e,\n ),\n \u003cspan class=\"pl-c1\"\u003eContainer\u003c/span\u003e(\n margin\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003econst\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eEdgeInsets\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003esymmetric\u003c/span\u003e(vertical\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e16.0\u003c/span\u003e, horizontal\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e30\u003c/span\u003e),\n child\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eButtonTheme\u003c/span\u003e(\n height\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e50\u003c/span\u003e,\n child\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eFlatButton\u003c/span\u003e(\n onPressed\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e () {\n formKey.currentState.\u003cspan class=\"pl-en\"\u003evalidate\u003c/span\u003e();\n \u003cspan class=\"pl-c\"\u003e// conditions for validating\u003c/span\u003e\n \u003cspan class=\"pl-k\"\u003eif\u003c/span\u003e (currentText.length \u003cspan class=\"pl-k\"\u003e!=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e6\u003c/span\u003e \u003cspan class=\"pl-k\"\u003e||\u003c/span\u003e currentText \u003cspan class=\"pl-k\"\u003e!=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"towtow\"\u003c/span\u003e) {\n errorController.\u003cspan class=\"pl-en\"\u003eadd\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003eErrorAnimationType\u003c/span\u003e\n .shake); \u003cspan class=\"pl-c\"\u003e// Triggering error shake animation\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003esetState\u003c/span\u003e(() {\n hasError \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003etrue\u003c/span\u003e;\n });\n } \u003cspan class=\"pl-k\"\u003eelse\u003c/span\u003e {\n \u003cspan class=\"pl-en\"\u003esetState\u003c/span\u003e(() {\n hasError \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003efalse\u003c/span\u003e;\n scaffoldKey.currentState.\u003cspan class=\"pl-en\"\u003eshowSnackBar\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003eSnackBar\u003c/span\u003e(\n content\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eText\u003c/span\u003e(\u003cspan class=\"pl-s\"\u003e\"Aye!!\"\u003c/span\u003e),\n duration\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eDuration\u003c/span\u003e(seconds\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e2\u003c/span\u003e),\n ));\n });\n }\n },\n child\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eCenter\u003c/span\u003e(\n child\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eText\u003c/span\u003e(\n \u003cspan class=\"pl-s\"\u003e\"VERIFY\"\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003etoUpperCase\u003c/span\u003e(),\n style\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eTextStyle\u003c/span\u003e(\n color\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.white,\n fontSize\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e18\u003c/span\u003e,\n fontWeight\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eFontWeight\u003c/span\u003e.bold),\n )),\n ),\n ),\n decoration\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eBoxDecoration\u003c/span\u003e(\n color\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.green.shade300,\n borderRadius\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eBorderRadius\u003c/span\u003e.\u003cspan class=\"pl-en\"\u003ecircular\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e5\u003c/span\u003e),\n boxShadow\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e [\n \u003cspan class=\"pl-c1\"\u003eBoxShadow\u003c/span\u003e(\n color\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.green.shade200,\n offset\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eOffset\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e1\u003c/span\u003e, \u003cspan class=\"pl-k\"\u003e-\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e2\u003c/span\u003e),\n blurRadius\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e5\u003c/span\u003e),\n \u003cspan class=\"pl-c1\"\u003eBoxShadow\u003c/span\u003e(\n color\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eColors\u003c/span\u003e.green.shade200,\n offset\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eOffset\u003c/span\u003e(\u003cspan class=\"pl-k\"\u003e-\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e1\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e2\u003c/span\u003e),\n blurRadius\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e5\u003c/span\u003e)\n ]),\n ),\n \u003cspan class=\"pl-c1\"\u003eSizedBox\u003c/span\u003e(\n height\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e16\u003c/span\u003e,\n ),\n \u003cspan class=\"pl-c1\"\u003eRow\u003c/span\u003e(\n mainAxisAlignment\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eMainAxisAlignment\u003c/span\u003e.center,\n children\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-k\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eWidget\u003c/span\u003e\u003cspan class=\"pl-k\"\u003e\u0026gt;\u003c/span\u003e[\n \u003cspan class=\"pl-c1\"\u003eFlatButton\u003c/span\u003e(\n child\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eText\u003c/span\u003e(\u003cspan class=\"pl-s\"\u003e\"Clear\"\u003c/span\u003e),\n onPressed\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e () {\n textEditingController.\u003cspan class=\"pl-en\"\u003eclear\u003c/span\u003e();\n },\n ),\n \u003cspan class=\"pl-c1\"\u003eFlatButton\u003c/span\u003e(\n child\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eText\u003c/span\u003e(\u003cspan class=\"pl-s\"\u003e\"Set Text\"\u003c/span\u003e),\n onPressed\u003cspan class=\"pl-k\"\u003e:\u003c/span\u003e () {\n textEditingController.text \u003cspan class=\"pl-k\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\"123456\"\u003c/span\u003e;\n },\n ),\n ],\n )\n ],\n ),\n ),\n ),\n );\n }\n}\u003c/pre\u003e\u003c/div\u003e\n\u003c/article\u003e","loaded":true,"timedOut":false,"errorMessage":null,"headerInfo":{"toc":[{"level":2,"text":"Features 💚","anchor":"features-","htmlText":"Features 💚"},{"level":2,"text":"Getting Started ⚡️","anchor":"getting-started-️","htmlText":"Getting Started ⚡️"},{"level":4,"text":"Demo","anchor":"demo","htmlText":"Demo"},{"level":4,"text":"Different Shapes","anchor":"different-shapes","htmlText":"Different Shapes"},{"level":2,"text":"Notes","anchor":"notes","htmlText":"Notes"},{"level":2,"text":"Properties 🔖","anchor":"properties-","htmlText":"Properties 🔖"},{"level":2,"text":"Contributors ✨","anchor":"contributors-","htmlText":"Contributors ✨"}],"siteNavLoginPath":"/login?return_to=https%3A%2F%2Fgithub.com%2Fadar2378%2Fpin_code_fields%2Ftree%2F96f3dd210f048bb10d2833ef28ecc49bd032d05e"}},{"displayName":"CODE_OF_CONDUCT.md","repoName":"pin_code_fields","refName":"96f3dd210f048bb10d2833ef28ecc49bd032d05e","path":"CODE_OF_CONDUCT.md","preferredFileType":"code_of_conduct","tabName":"Code of conduct","richText":null,"loaded":false,"timedOut":false,"errorMessage":null,"headerInfo":{"toc":null,"siteNavLoginPath":"/login?return_to=https%3A%2F%2Fgithub.com%2Fadar2378%2Fpin_code_fields%2Ftree%2F96f3dd210f048bb10d2833ef28ecc49bd032d05e"}},{"displayName":"LICENSE","repoName":"pin_code_fields","refName":"96f3dd210f048bb10d2833ef28ecc49bd032d05e","path":"LICENSE","preferredFileType":"license","tabName":"License","richText":null,"loaded":false,"timedOut":false,"errorMessage":null,"headerInfo":{"toc":null,"siteNavLoginPath":"/login?return_to=https%3A%2F%2Fgithub.com%2Fadar2378%2Fpin_code_fields%2Ftree%2F96f3dd210f048bb10d2833ef28ecc49bd032d05e"}}],"overviewFilesProcessingTime":0}},"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,"accessible_code_button":true}}}}</script> <div data-target="react-partial.reactRoot"><style data-styled="true" data-styled-version="5.3.11">.iVEunk{margin-top:16px;margin-bottom:16px;}/*!sc*/ .jzuOtQ{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-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;}/*!sc*/ .bGojzy{margin-bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;row-gap:16px;}/*!sc*/ .iNSVHo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding-bottom:16px;padding-top:8px;}/*!sc*/ .bVgnfw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:8px;}/*!sc*/ @media screen and (max-width:320px){.bVgnfw{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}}/*!sc*/ .CEgMp{position:relative;}/*!sc*/ @media screen and (max-width:380px){.CEgMp .ref-selector-button-text-container{max-width:80px;}}/*!sc*/ @media screen and (max-width:320px){.CEgMp{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}.CEgMp .overview-ref-selector{width:100%;}.CEgMp .overview-ref-selector > span{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;}.CEgMp .overview-ref-selector > span > span[data-component="text"]{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}}/*!sc*/ .gUkoLg{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}/*!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*/ .ffLUq{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}/*!sc*/ .hzSPyu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;pointer-events:none;}/*!sc*/ .fLXEGX{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (max-width:1079px){.fLXEGX{display:none;}}/*!sc*/ .dqfxud{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (min-width:1080px){.dqfxud{display:none;}}/*!sc*/ @media screen and (max-width:543px){.dqfxud{display:none;}}/*!sc*/ .jxTzTd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-left:8px;gap:8px;}/*!sc*/ .gqqBXN{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:8px;}/*!sc*/ @media screen and (max-width:543px){.gqqBXN{display:none;}}/*!sc*/ .dzXgxt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (max-width:1011px){.dzXgxt{display:none;}}/*!sc*/ .iWFGlI{margin-left:8px;margin-right:8px;margin:0;}/*!sc*/ .YUPas{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (min-width:1012px){.YUPas{display:none;}}/*!sc*/ .izFOf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media screen and (min-width:544px){.izFOf{display:none;}}/*!sc*/ .vIPPs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:16px;}/*!sc*/ .fdROMU{width:100%;border-collapse:separate;border-spacing:0;border:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));border-radius:6px;table-layout:fixed;overflow:unset;}/*!sc*/ .jGKpsv{height:0px;line-height:0px;}/*!sc*/ .jGKpsv tr{height:0px;font-size:0px;}/*!sc*/ .jdgHnn{padding:16px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-size:12px;text-align:left;height:40px;}/*!sc*/ .jdgHnn th{padding-left:16px;background-color:var(--bgColor-muted,var(--color-canvas-subtle,#f6f8fa));}/*!sc*/ .bQivRW{width:100%;border-top-left-radius:6px;}/*!sc*/ @media screen and (min-width:544px){.bQivRW{display:none;}}/*!sc*/ .ldkMIO{width:40%;border-top-left-radius:6px;}/*!sc*/ @media screen and (max-width:543px){.ldkMIO{display:none;}}/*!sc*/ .jMbWeI{text-align:right;padding-right:16px;width:136px;border-top-right-radius:6px;}/*!sc*/ .gpqjiB{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-size:12px;height:40px;}/*!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*/ .eNCcrz{text-align:center;vertical-align:center;height:40px;border-top:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));}/*!sc*/ .bHTcCe{border-top:1px solid var(--borderColor-default,var(--color-border-default));cursor:pointer;}/*!sc*/ .csrIcr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;gap:16px;}/*!sc*/ .bUQNHB{border:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));border-radius:6px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}/*!sc*/ @media screen and (max-width:543px){.bUQNHB{margin-left:-16px;margin-right:-16px;max-width:calc(100% + 32px);}}/*!sc*/ @media screen and (min-width:544px){.bUQNHB{max-width:100%;}}/*!sc*/ .jPdcfu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom:1px solid;border-bottom-color:var(--borderColor-default,var(--color-border-default,#d0d7de));-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-right:8px;position:-webkit-sticky;position:sticky;top:0;background-color:var(--bgColor-default,var(--color-canvas-default,#ffffff));z-index:1;border-top-left-radius:6px;border-top-right-radius:6px;}/*!sc*/ .hUCRAk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ .QkQOb{padding:32px;overflow:auto;}/*!sc*/ data-styled.g1[id="Box-sc-g0xbh4-0"]{content:"iVEunk,jzuOtQ,bGojzy,iNSVHo,bVgnfw,CEgMp,gUkoLg,bZBlpz,lhTYNA,ffLUq,hzSPyu,fLXEGX,dqfxud,jxTzTd,gqqBXN,dzXgxt,iWFGlI,YUPas,izFOf,vIPPs,fdROMU,jGKpsv,jdgHnn,bQivRW,ldkMIO,jMbWeI,gpqjiB,dzCJzi,eNCcrz,bHTcCe,csrIcr,bUQNHB,jPdcfu,hUCRAk,QkQOb,"}/*!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*/ data-styled.g3[id="Text__StyledText-sc-17v1xeu-0"]{content:"eMMFM,"}/*!sc*/ .brGdpi{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}/*!sc*/ data-styled.g4[id="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0"]{content:"brGdpi,"}/*!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*/ .gVXRRg{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*/ .gVXRRg:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .gVXRRg:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .gVXRRg:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .gVXRRg[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .gVXRRg[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .gVXRRg:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .gVXRRg:active{-webkit-transition:none;transition:none;}/*!sc*/ .gVXRRg[data-inactive]{cursor:auto;}/*!sc*/ .gVXRRg: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*/ .gVXRRg:disabled [data-component=ButtonCounter]{color:inherit;}/*!sc*/ @media (forced-colors:active){.gVXRRg:focus{outline:solid 1px transparent;}}/*!sc*/ .gVXRRg [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*/ .gVXRRg[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .gVXRRg[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .gVXRRg[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .gVXRRg[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .gVXRRg[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .gVXRRg[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .gVXRRg[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .gVXRRg[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .gVXRRg[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .gVXRRg[data-block="block"]{width:100%;}/*!sc*/ .gVXRRg[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*/ .gVXRRg[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*/ .gVXRRg[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .gVXRRg[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .gVXRRg[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .gVXRRg[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*/ .gVXRRg[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .gVXRRg[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*/ .gVXRRg[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .gVXRRg [data-component="leadingVisual"]{grid-area:leadingVisual;}/*!sc*/ .gVXRRg [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .gVXRRg [data-component="trailingVisual"]{grid-area:trailingVisual;}/*!sc*/ .gVXRRg [data-component="trailingAction"]{margin-right:-4px;}/*!sc*/ .gVXRRg [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*/ .gVXRRg [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .gVXRRg [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .gVXRRg [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .gVXRRg: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*/ .gVXRRg: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*/ .gVXRRg[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*/ .gVXRRg [data-component="leadingVisual"],.gVXRRg [data-component="trailingVisual"],.gVXRRg [data-component="trailingAction"]{color:var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gVXRRg[data-component="IconButton"][data-no-visuals]:not(:disabled){color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .gVXRRg[data-size="medium"]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:0;}/*!sc*/ .gVXRRg[data-size="medium"] svg{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .gVXRRg[data-size="medium"] > span{width:inherit;}/*!sc*/ .loAzyw{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*/ .loAzyw:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .loAzyw:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .loAzyw:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .loAzyw[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .loAzyw[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .loAzyw:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .loAzyw:active{-webkit-transition:none;transition:none;}/*!sc*/ .loAzyw[data-inactive]{cursor:auto;}/*!sc*/ .loAzyw: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*/ .loAzyw:disabled [data-component=ButtonCounter],.loAzyw:disabled [data-component="leadingVisual"],.loAzyw:disabled [data-component="trailingAction"]{color:inherit;}/*!sc*/ @media (forced-colors:active){.loAzyw:focus{outline:solid 1px transparent;}}/*!sc*/ .loAzyw [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .loAzyw[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .loAzyw[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .loAzyw[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .loAzyw[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .loAzyw[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .loAzyw[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .loAzyw[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .loAzyw[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .loAzyw[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .loAzyw[data-block="block"]{width:100%;}/*!sc*/ .loAzyw[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*/ .loAzyw[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*/ .loAzyw[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .loAzyw[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .loAzyw[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .loAzyw[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*/ .loAzyw[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .loAzyw[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*/ .loAzyw[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .loAzyw [data-component="leadingVisual"]{grid-area:leadingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .loAzyw [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .loAzyw [data-component="trailingVisual"]{grid-area:trailingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .loAzyw [data-component="trailingAction"]{margin-right:-4px;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .loAzyw [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*/ .loAzyw [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .loAzyw [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .loAzyw [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .loAzyw: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*/ .loAzyw: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*/ .loAzyw[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*/ .loAzyw[data-component="IconButton"][data-no-visuals]{color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .loAzyw[data-no-visuals]{color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .loAzyw:has([data-component="ButtonCounter"]){color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .loAzyw:disabled[data-no-visuals]{color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));}/*!sc*/ .loAzyw:disabled[data-no-visuals] [data-component=ButtonCounter]{color:inherit;}/*!sc*/ .loAzyw[data-size="medium"]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));padding-left:4px;padding-right:4px;}/*!sc*/ .loAzyw[data-size="medium"] span[data-component="leadingVisual"]{margin-right:4px !important;}/*!sc*/ .cXsOlJ{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*/ .cXsOlJ:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .cXsOlJ:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .cXsOlJ:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .cXsOlJ[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .cXsOlJ[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .cXsOlJ:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .cXsOlJ:active{-webkit-transition:none;transition:none;}/*!sc*/ .cXsOlJ[data-inactive]{cursor:auto;}/*!sc*/ .cXsOlJ: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*/ .cXsOlJ:disabled [data-component=ButtonCounter],.cXsOlJ:disabled [data-component="leadingVisual"],.cXsOlJ:disabled [data-component="trailingAction"]{color:inherit;}/*!sc*/ @media (forced-colors:active){.cXsOlJ:focus{outline:solid 1px transparent;}}/*!sc*/ .cXsOlJ [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .cXsOlJ[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .cXsOlJ[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .cXsOlJ[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .cXsOlJ[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .cXsOlJ[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .cXsOlJ[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .cXsOlJ[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .cXsOlJ[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .cXsOlJ[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .cXsOlJ[data-block="block"]{width:100%;}/*!sc*/ .cXsOlJ[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*/ .cXsOlJ[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*/ .cXsOlJ[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .cXsOlJ[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .cXsOlJ[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .cXsOlJ[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*/ .cXsOlJ[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .cXsOlJ[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*/ .cXsOlJ[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .cXsOlJ [data-component="leadingVisual"]{grid-area:leadingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .cXsOlJ [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .cXsOlJ [data-component="trailingVisual"]{grid-area:trailingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .cXsOlJ [data-component="trailingAction"]{margin-right:-4px;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .cXsOlJ [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*/ .cXsOlJ [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .cXsOlJ [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .cXsOlJ [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .cXsOlJ: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*/ .cXsOlJ: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*/ .cXsOlJ[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*/ .cXsOlJ[data-component="IconButton"][data-no-visuals]{color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .cXsOlJ[data-no-visuals]{color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .cXsOlJ:has([data-component="ButtonCounter"]){color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .cXsOlJ:disabled[data-no-visuals]{color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));}/*!sc*/ .cXsOlJ:disabled[data-no-visuals] [data-component=ButtonCounter]{color:inherit;}/*!sc*/ .cXsOlJ[data-size="medium"][data-no-visuals]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!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*/ .bmlmSe{border-radius:6px;border:1px solid;border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-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-primary-fgColor-rest,var(--color-btn-primary-text,#ffffff));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg,#1f883d));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow,0 1px 0 rgba(31,35,40,0.1)));}/*!sc*/ .bmlmSe:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .bmlmSe:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .bmlmSe:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .bmlmSe[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .bmlmSe[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .bmlmSe:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .bmlmSe:active{-webkit-transition:none;transition:none;}/*!sc*/ .bmlmSe[data-inactive]{cursor:auto;}/*!sc*/ .bmlmSe:disabled{cursor:not-allowed;box-shadow:none;color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text,rgba(255,255,255,0.8)));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg,#94d3a2));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border,rgba(31,35,40,0.15)));}/*!sc*/ .bmlmSe:disabled [data-component=ButtonCounter]{color:inherit;}/*!sc*/ @media (forced-colors:active){.bmlmSe:focus{outline:solid 1px transparent;}}/*!sc*/ .bmlmSe [data-component=ButtonCounter]{font-size:12px;background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg,rgba(0,45,17,0.2)));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text,#ffffff));}/*!sc*/ .bmlmSe[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .bmlmSe[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .bmlmSe[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .bmlmSe[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .bmlmSe[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .bmlmSe[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .bmlmSe[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .bmlmSe[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .bmlmSe[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .bmlmSe[data-block="block"]{width:100%;}/*!sc*/ .bmlmSe[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*/ .bmlmSe[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*/ .bmlmSe[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .bmlmSe[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .bmlmSe[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .bmlmSe[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*/ .bmlmSe[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .bmlmSe[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*/ .bmlmSe[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .bmlmSe [data-component="leadingVisual"]{grid-area:leadingVisual;}/*!sc*/ .bmlmSe [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .bmlmSe [data-component="trailingVisual"]{grid-area:trailingVisual;}/*!sc*/ .bmlmSe [data-component="trailingAction"]{margin-right:-4px;}/*!sc*/ .bmlmSe [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*/ .bmlmSe [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .bmlmSe [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .bmlmSe [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .bmlmSe:hover:not([disabled]):not([data-inactive]){color:btn.primary.hoverText;background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg,#1a7f37));}/*!sc*/ .bmlmSe:focus:not([disabled]){box-shadow:inset 0 0 0 3px;}/*!sc*/ .bmlmSe:focus-visible:not([disabled]){box-shadow:inset 0 0 0 3px;}/*!sc*/ .bmlmSe:active:not([disabled]):not([data-inactive]){background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg,hsla(137,66%,28%,1)));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow,inset 0 1px 0 rgba(0,45,17,0.2)));}/*!sc*/ .bmlmSe[aria-expanded=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg,hsla(137,66%,28%,1)));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow,inset 0 1px 0 rgba(0,45,17,0.2)));}/*!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*/ .gXPTqA{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*/ .gXPTqA:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .gXPTqA:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .gXPTqA:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .gXPTqA[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .gXPTqA[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .gXPTqA:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .gXPTqA:active{-webkit-transition:none;transition:none;}/*!sc*/ .gXPTqA[data-inactive]{cursor:auto;}/*!sc*/ .gXPTqA: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*/ .gXPTqA:disabled [data-component=ButtonCounter],.gXPTqA:disabled [data-component="leadingVisual"],.gXPTqA:disabled [data-component="trailingAction"]{color:inherit;}/*!sc*/ @media (forced-colors:active){.gXPTqA:focus{outline:solid 1px transparent;}}/*!sc*/ .gXPTqA [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .gXPTqA[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .gXPTqA[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .gXPTqA[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .gXPTqA[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .gXPTqA[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .gXPTqA[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .gXPTqA[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .gXPTqA[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .gXPTqA[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .gXPTqA[data-block="block"]{width:100%;}/*!sc*/ .gXPTqA[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*/ .gXPTqA[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*/ .gXPTqA[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .gXPTqA[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .gXPTqA[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .gXPTqA[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*/ .gXPTqA[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .gXPTqA[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*/ .gXPTqA[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .gXPTqA [data-component="leadingVisual"]{grid-area:leadingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gXPTqA [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .gXPTqA [data-component="trailingVisual"]{grid-area:trailingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gXPTqA [data-component="trailingAction"]{margin-right:-4px;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gXPTqA [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*/ .gXPTqA [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .gXPTqA [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .gXPTqA [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .gXPTqA: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*/ .gXPTqA: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*/ .gXPTqA[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*/ .gXPTqA[data-component="IconButton"][data-no-visuals]{color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gXPTqA[data-no-visuals]{color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .gXPTqA:has([data-component="ButtonCounter"]){color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .gXPTqA:disabled[data-no-visuals]{color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));}/*!sc*/ .gXPTqA:disabled[data-no-visuals] [data-component=ButtonCounter]{color:inherit;}/*!sc*/ .gXPTqA[data-size="medium"]{color:var(--fgColor-muted,var(--color-fg-subtle,#6e7781));padding-left:8px;padding-right:8px;}/*!sc*/ data-styled.g11[id="types__StyledButton-sc-ws60qy-0"]{content:"gVXRRg,loAzyw,cXsOlJ,gGdPyq,bmlmSe,dPmZyJ,gXPTqA,"}/*!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*/ .liVpTx{display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:top;white-space:nowrap;max-width:125px;}/*!sc*/ data-styled.g17[id="Truncate__StyledTruncate-sc-23o1d2-0"]{content:"liVpTx,"}/*!sc*/ .iBVwpg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-inline:var(--stack-padding-normal,16px);-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:var(--control-xlarge-size,48px);box-shadow:inset 0px -1px var(--borderColor-muted,var(--borderColor-muted,var(--color-border-muted,hsla(210,18%,87%,1))));-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;border-bottom:none;max-width:100%;padding-left:8px;padding-right:8px;}/*!sc*/ data-styled.g92[id="UnderlineTabbedInterface__StyledUnderlineWrapper-sc-4ilrg0-0"]{content:"iBVwpg,"}/*!sc*/ .gJyWUl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;white-space:nowrap;padding:0;margin:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;position:relative;}/*!sc*/ data-styled.g93[id="UnderlineTabbedInterface__StyledUnderlineItemList-sc-4ilrg0-1"]{content:"gJyWUl,"}/*!sc*/ .beOdPj{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;cursor:pointer;font:inherit;position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;color:var(--fgColor-default,var(--color-fg-default,#1F2328));text-align:center;-webkit-text-decoration:none;text-decoration:none;line-height:var(--text-body-lineHeight-medium,1.4285);border-radius:var(--borderRadius-medium,6px);font-size:var(--text-body-size-medium,14px);padding-inline:var(--control-medium-paddingInline-condensed,8px);padding-block:var(--control-medium-paddingBlock,6px);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ @media (hover:hover){.beOdPj:hover{background-color:var(--bgColor-neutral-muted,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))));-webkit-transition:background 0.12s ease-out;transition:background 0.12s ease-out;-webkit-text-decoration:none;text-decoration:none;}}/*!sc*/ .beOdPj:focus:{outline:2px solid transparent;box-shadow:inset 0 0 0 2px var(--fgColor-accent,var(--fgColor-accent,var(--color-accent-fg,#0969da)));}/*!sc*/ .beOdPj:focus::not(:focus-visible){box-shadow:none;}/*!sc*/ .beOdPj:focus-visible{outline:2px solid transparent;box-shadow:inset 0 0 0 2px var(--fgColor-accent,var(--fgColor-accent,var(--color-accent-fg,#0969da)));}/*!sc*/ .beOdPj [data-content]::before{content:attr(data-content);display:block;height:0;font-weight:var(--base-text-weight-semibold,500);visibility:hidden;white-space:nowrap;}/*!sc*/ .beOdPj [data-component='icon']{color:var(--fgColor-muted,var(--fgColor-muted,var(--color-fg-muted,#656d76)));-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-inline-end:var(--control-medium-gap,8px);}/*!sc*/ .beOdPj [data-component='counter']{margin-inline-start:var(--control-medium-gap,8px);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*/ .beOdPj::after{position:absolute;right:50%;bottom:calc(50% - calc(var(--control-xlarge-size,48px) / 2 + 1px));width:100%;height:2px;content:'';background-color:transparent;border-radius:0;-webkit-transform:translate(50%,-50%);-ms-transform:translate(50%,-50%);transform:translate(50%,-50%);}/*!sc*/ .beOdPj[aria-current]:not([aria-current='false']) [data-component='text'],.beOdPj[aria-selected='true'] [data-component='text']{font-weight:var(--base-text-weight-semibold,500);}/*!sc*/ .beOdPj[aria-current]:not([aria-current='false'])::after,.beOdPj[aria-selected='true']::after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73));}/*!sc*/ @media (forced-colors:active){.beOdPj[aria-current]:not([aria-current='false'])::after,.beOdPj[aria-selected='true']::after{background-color:LinkText;}}/*!sc*/ data-styled.g94[id="UnderlineTabbedInterface__StyledUnderlineItem-sc-4ilrg0-2"]{content:"beOdPj,"}/*!sc*/ </style>   <div class="Box-sc-g0xbh4-0 iVEunk"><div class="Box-sc-g0xbh4-0 jzuOtQ"><div class="Box-sc-g0xbh4-0 bGojzy"></div></div><div class="Box-sc-g0xbh4-0 iNSVHo"><div class="Box-sc-g0xbh4-0 bVgnfw"><div class="Box-sc-g0xbh4-0 CEgMp"><button type="button" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-label="96f3dd2 branch" data-testid="anchor-button" class="types__StyledButton-sc-ws60qy-0 gVXRRg overview-ref-selector width-full" 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 ffLUq ref-selector-button-text-container"><span class="Text__StyledText-sc-17v1xeu-0 eMMFM"> 96f3dd2</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 fLXEGX"><a style="--button-color:fg.muted" type="button" href="/adar2378/pin_code_fields/branches" class="types__StyledButton-sc-ws60qy-0 loAzyw" data-loading="false" data-size="medium" aria-describedby=":Rclab:-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-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></span><span data-component="text">Branches</span></span></a><a style="--button-color:fg.muted" type="button" href="/adar2378/pin_code_fields/tags" class="types__StyledButton-sc-ws60qy-0 loAzyw" data-loading="false" data-size="medium" aria-describedby=":Rklab:-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-tag" 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="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path></svg></span><span data-component="text">Tags</span></span></a></div><div class="Box-sc-g0xbh4-0 dqfxud"><a style="--button-color:fg.muted" type="button" aria-label="Go to Branches page" href="/adar2378/pin_code_fields/branches" class="types__StyledButton-sc-ws60qy-0 cXsOlJ" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":Relab:-loading-announcement"><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></a><a style="--button-color:fg.muted" type="button" aria-label="Go to Tags page" href="/adar2378/pin_code_fields/tags" class="types__StyledButton-sc-ws60qy-0 cXsOlJ" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":Rmlab:-loading-announcement"><svg aria-hidden="true" focusable="false" class="octicon octicon-tag" 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="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path></svg></a></div></div><div class="Box-sc-g0xbh4-0 jxTzTd"><div class="Box-sc-g0xbh4-0 gqqBXN"><div class="Box-sc-g0xbh4-0 dzXgxt"><div class="Box-sc-g0xbh4-0 iWFGlI"><span class="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0 TextInputWrapper-sc-1mqhpbi-1 gwqFqs decvaq TextInput-wrapper" aria-busy="false"><span class="TextInput-icon" id=":R2j5ab:" 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=":R2j5ab: :R2j5abH1:" data-component="input" class="UnstyledTextInput-sc-14ypya-0 kbCLEG" value=""/><span class="TextInput-icon" id=":R2j5abH1:" aria-hidden="true"></span></span></div></div><div class="Box-sc-g0xbh4-0 YUPas"><button type="button" class="types__StyledButton-sc-ws60qy-0 gGdPyq" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":Rr5ab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="text">Go to file</span></span></button></div><div class="react-directory-add-file-icon"></div><div class="react-directory-remove-file-icon"></div></div><button type="button" aria-haspopup="true" aria-expanded="false" tabindex="0" class="types__StyledButton-sc-ws60qy-0 bmlmSe" data-loading="false" data-size="medium" aria-describedby=":R55ab:-loading-announcement" id=":R55ab:"><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="hide-sm" 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="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-component="text">Code</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><div class="Box-sc-g0xbh4-0 izFOf"><button data-component="IconButton" type="button" aria-label="Open more actions menu" aria-haspopup="true" aria-expanded="false" tabindex="0" class="types__StyledButton-sc-ws60qy-0 gGdPyq prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":R75ab:-loading-announcement" id=":R75ab:"><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="Box-sc-g0xbh4-0 vIPPs"><div data-hpc="true"><button hidden="" data-testid="focus-next-element-button" data-hotkey="j"></button><button hidden="" data-testid="focus-previous-element-button" data-hotkey="k"></button><h2 class="sr-only prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading" id="folders-and-files">Folders and files</h2><table aria-labelledby="folders-and-files" class="Box-sc-g0xbh4-0 fdROMU"><thead class="Box-sc-g0xbh4-0 jGKpsv"><tr class="Box-sc-g0xbh4-0 jdgHnn"><th colSpan="2" class="Box-sc-g0xbh4-0 bQivRW"><span class="text-bold">Name</span></th><th colSpan="1" class="Box-sc-g0xbh4-0 ldkMIO"><span class="text-bold">Name</span></th><th class="hide-sm"><div title="Last commit message" class="Truncate__StyledTruncate-sc-23o1d2-0 liVpTx width-fit"><span class="text-bold">Last commit message</span></div></th><th colSpan="1" class="Box-sc-g0xbh4-0 jMbWeI"><div title="Last commit date" class="Truncate__StyledTruncate-sc-23o1d2-0 liVpTx width-fit"><span class="text-bold">Last commit date</span></div></th></tr></thead><tbody><tr class="Box-sc-g0xbh4-0 gpqjiB"><td colSpan="3" class="bgColor-muted p-1 rounded-top-2"><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="/adar2378/pin_code_fields/commits/96f3dd210f048bb10d2833ef28ecc49bd032d05e/" 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=":Raqj8pab:-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">264 Commits</span></span></span></a><div class="d-sm-none"></div><div class="d-flex d-lg-none"><span role="tooltip" aria-label="264 Commits" id="history-icon-button-tooltip" class="Tooltip__TooltipBase-sc-17tf59c-0 hWlpPn tooltipped-n"><a href="/adar2378/pin_code_fields/commits/96f3dd210f048bb10d2833ef28ecc49bd032d05e/" 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=":R1iqj8pab:-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></td></tr><tr class="react-directory-row undefined" id="folder-row-0"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" 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="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="demo_media" aria-label="demo_media, (Directory)" class="Link--primary" href="/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e/demo_media">demo_media</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" 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="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="demo_media" aria-label="demo_media, (Directory)" class="Link--primary" href="/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e/demo_media">demo_media</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-1"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" 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="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="example" aria-label="example, (Directory)" class="Link--primary" href="/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e/example">example</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" 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="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="example" aria-label="example, (Directory)" class="Link--primary" href="/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e/example">example</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-2"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" 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="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="lib" aria-label="lib, (Directory)" class="Link--primary" href="/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e/lib">lib</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" 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="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="lib" aria-label="lib, (Directory)" class="Link--primary" href="/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e/lib">lib</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-3"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" 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="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="test" aria-label="test, (Directory)" class="Link--primary" href="/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e/test">test</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="icon-directory" 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="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="test" aria-label="test, (Directory)" class="Link--primary" href="/adar2378/pin_code_fields/tree/96f3dd210f048bb10d2833ef28ecc49bd032d05e/test">test</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-4"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" 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 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".gitignore" aria-label=".gitignore, (File)" class="Link--primary" href="/adar2378/pin_code_fields/blob/96f3dd210f048bb10d2833ef28ecc49bd032d05e/.gitignore">.gitignore</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" 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 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".gitignore" aria-label=".gitignore, (File)" class="Link--primary" href="/adar2378/pin_code_fields/blob/96f3dd210f048bb10d2833ef28ecc49bd032d05e/.gitignore">.gitignore</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-5"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" 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 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".metadata" aria-label=".metadata, (File)" class="Link--primary" href="/adar2378/pin_code_fields/blob/96f3dd210f048bb10d2833ef28ecc49bd032d05e/.metadata">.metadata</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" 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 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title=".metadata" aria-label=".metadata, (File)" class="Link--primary" href="/adar2378/pin_code_fields/blob/96f3dd210f048bb10d2833ef28ecc49bd032d05e/.metadata">.metadata</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-6"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" 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 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="CHANGELOG.md" aria-label="CHANGELOG.md, (File)" class="Link--primary" href="/adar2378/pin_code_fields/blob/96f3dd210f048bb10d2833ef28ecc49bd032d05e/CHANGELOG.md">CHANGELOG.md</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" 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 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="CHANGELOG.md" aria-label="CHANGELOG.md, (File)" class="Link--primary" href="/adar2378/pin_code_fields/blob/96f3dd210f048bb10d2833ef28ecc49bd032d05e/CHANGELOG.md">CHANGELOG.md</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-7"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" 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 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="CODE_OF_CONDUCT.md" aria-label="CODE_OF_CONDUCT.md, (File)" class="Link--primary" href="/adar2378/pin_code_fields/blob/96f3dd210f048bb10d2833ef28ecc49bd032d05e/CODE_OF_CONDUCT.md">CODE_OF_CONDUCT.md</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" 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 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="CODE_OF_CONDUCT.md" aria-label="CODE_OF_CONDUCT.md, (File)" class="Link--primary" href="/adar2378/pin_code_fields/blob/96f3dd210f048bb10d2833ef28ecc49bd032d05e/CODE_OF_CONDUCT.md">CODE_OF_CONDUCT.md</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-8"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" 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 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="LICENSE" aria-label="LICENSE, (File)" class="Link--primary" href="/adar2378/pin_code_fields/blob/96f3dd210f048bb10d2833ef28ecc49bd032d05e/LICENSE">LICENSE</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" 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 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="LICENSE" aria-label="LICENSE, (File)" class="Link--primary" href="/adar2378/pin_code_fields/blob/96f3dd210f048bb10d2833ef28ecc49bd032d05e/LICENSE">LICENSE</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row undefined" id="folder-row-9"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" 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 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="README.md" aria-label="README.md, (File)" class="Link--primary" href="/adar2378/pin_code_fields/blob/96f3dd210f048bb10d2833ef28ecc49bd032d05e/README.md">README.md</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" 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 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="README.md" aria-label="README.md, (File)" class="Link--primary" href="/adar2378/pin_code_fields/blob/96f3dd210f048bb10d2833ef28ecc49bd032d05e/README.md">README.md</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="react-directory-row truncate-for-mobile" id="folder-row-10"><td class="react-directory-row-name-cell-small-screen" colSpan="2"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" 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 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="pubspec.yaml" aria-label="pubspec.yaml, (File)" class="Link--primary" href="/adar2378/pin_code_fields/blob/96f3dd210f048bb10d2833ef28ecc49bd032d05e/pubspec.yaml">pubspec.yaml</a></div></div></div></div></td><td class="react-directory-row-name-cell-large-screen" colSpan="1"><div class="react-directory-filename-column"><svg aria-hidden="true" focusable="false" class="color-fg-muted" 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 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg><div class="overflow-hidden"><div class="react-directory-filename-cell"><div class="react-directory-truncate"><a title="pubspec.yaml" aria-label="pubspec.yaml, (File)" class="Link--primary" href="/adar2378/pin_code_fields/blob/96f3dd210f048bb10d2833ef28ecc49bd032d05e/pubspec.yaml">pubspec.yaml</a></div></div></div></div></td><td class="react-directory-row-commit-cell"><div class="Skeleton Skeleton--text"> </div></td><td><div class="Skeleton Skeleton--text"> </div></td></tr><tr class="Box-sc-g0xbh4-0 eNCcrz show-for-mobile" data-testid="view-all-files-row"><td colSpan="3" class="Box-sc-g0xbh4-0 bHTcCe"><div><button class="prc-Link-Link-85e08">View all files</button></div></td></tr></tbody></table></div><div class="Box-sc-g0xbh4-0 csrIcr"><div class="Box-sc-g0xbh4-0 bUQNHB"><div itemscope="" itemType="https://schema.org/abstract" class="Box-sc-g0xbh4-0 jPdcfu"><h2 class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 brGdpi">Repository files navigation</h2><nav aria-label="Repository files" class="UnderlineTabbedInterface__StyledUnderlineWrapper-sc-4ilrg0-0 iBVwpg"><ul role="list" class="UnderlineTabbedInterface__StyledUnderlineItemList-sc-4ilrg0-1 gJyWUl"><li class="Box-sc-g0xbh4-0 hUCRAk"><a href="#" aria-current="page" class="UnderlineTabbedInterface__StyledUnderlineItem-sc-4ilrg0-2 beOdPj"><span data-component="icon"><svg aria-hidden="true" focusable="false" class="octicon octicon-book" 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.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></span><span data-component="text" data-content="README">README</span></a></li><li class="Box-sc-g0xbh4-0 hUCRAk"><a href="#" class="UnderlineTabbedInterface__StyledUnderlineItem-sc-4ilrg0-2 beOdPj"><span data-component="icon"><svg aria-hidden="true" focusable="false" class="octicon octicon-code-of-conduct" 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.048 2.241c.964-.709 2.079-1.238 3.325-1.241a4.616 4.616 0 0 1 3.282 1.355c.41.408.757.86.996 1.428.238.568.348 1.206.347 1.968 0 2.193-1.505 4.254-3.081 5.862-1.496 1.526-3.213 2.796-4.249 3.563l-.22.163a.749.749 0 0 1-.895 0l-.221-.163c-1.036-.767-2.753-2.037-4.249-3.563C1.51 10.008.007 7.952.002 5.762a4.614 4.614 0 0 1 1.353-3.407C3.123.585 6.223.537 8.048 2.24Zm-1.153.983c-1.25-1.033-3.321-.967-4.48.191a3.115 3.115 0 0 0-.913 2.335c0 1.556 1.109 3.24 2.652 4.813C5.463 11.898 6.96 13.032 8 13.805c.353-.262.758-.565 1.191-.905l-1.326-1.223a.75.75 0 0 1 1.018-1.102l1.48 1.366c.328-.281.659-.577.984-.887L9.99 9.802a.75.75 0 1 1 1.019-1.103l1.384 1.28c.295-.329.566-.661.81-.995L12.92 8.7l-1.167-1.168c-.674-.671-1.78-.664-2.474.03-.268.269-.538.537-.802.797-.893.882-2.319.843-3.185-.032-.346-.35-.693-.697-1.043-1.047a.75.75 0 0 1-.04-1.016c.162-.191.336-.401.52-.623.62-.748 1.356-1.637 2.166-2.417Zm7.112 4.442c.313-.65.491-1.293.491-1.916v-.001c0-.614-.088-1.045-.23-1.385-.143-.339-.357-.633-.673-.949a3.111 3.111 0 0 0-2.218-.915c-1.092.003-2.165.627-3.226 1.602-.823.755-1.554 1.637-2.228 2.45l-.127.154.562.566a.755.755 0 0 0 1.066.02l.794-.79c1.258-1.258 3.312-1.31 4.594-.032.396.394.792.791 1.173 1.173Z"></path></svg></span><span data-component="text" data-content="Code of conduct">Code of conduct</span></a></li><li class="Box-sc-g0xbh4-0 hUCRAk"><a href="#" class="UnderlineTabbedInterface__StyledUnderlineItem-sc-4ilrg0-2 beOdPj"><span data-component="icon"><svg aria-hidden="true" focusable="false" class="octicon octicon-law" 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.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path></svg></span><span data-component="text" data-content="License">License</span></a></li></ul></nav><button style="--button-color:fg.subtle" type="button" aria-label="Outline" aria-haspopup="true" aria-expanded="false" tabindex="0" class="types__StyledButton-sc-ws60qy-0 gXPTqA" data-loading="false" data-size="medium" aria-describedby=":Rr9ab:-loading-announcement" id=":Rr9ab:"><svg aria-hidden="true" focusable="false" class="octicon octicon-list-unordered" 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="M5.75 2.5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5ZM2 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-6a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM2 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg></button></div><div class="Box-sc-g0xbh4-0 QkQOb js-snippet-clipboard-copy-unpositioned" data-hpc="true"><article class="markdown-body entry-content container-lg" itemprop="text"><p align="center" dir="auto"> <a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/5d3cfa57a9c6e584be8152da2b1d39f70f5921f3034ebed63fe83a384f6b3705/68747470733a2f2f692e6962622e636f2f583571784637782f6578706f72742d62616e6e65722e706e67"><img width="460" src="https://camo.githubusercontent.com/5d3cfa57a9c6e584be8152da2b1d39f70f5921f3034ebed63fe83a384f6b3705/68747470733a2f2f692e6962622e636f2f583571784637782f6578706f72742d62616e6e65722e706e67" data-canonical-src="https://i.ibb.co/X5qxF7x/export-banner.png" style="max-width: 100%;"></a> </p> <p dir="auto"><a href="https://pub.dev/packages/pin_code_fields" rel="nofollow"><img src="https://camo.githubusercontent.com/fdddccb88018137a3abb14ddad8cd5a3cdef4b2262d27451fa7f2035b9299d9a/68747470733a2f2f696d672e736869656c64732e696f2f7075622f762f70696e5f636f64655f6669656c6473" data-canonical-src="https://img.shields.io/pub/v/pin_code_fields" style="max-width: 100%;"></a></p> <p dir="auto"><a href="https://www.patreon.com/bePatron?u=26622525" rel="nofollow"><img src="https://camo.githubusercontent.com/671020107c9688451b5d495af4e4a9807e8550d452d2411aa8f134858e71afb3/68747470733a2f2f63352e70617472656f6e2e636f6d2f65787465726e616c2f6c6f676f2f6265636f6d655f615f706174726f6e5f627574746f6e4032782e706e67" width="250" data-canonical-src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" style="max-width: 100%;"></a></p> <p dir="auto">A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs 🤓🤓</p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Features 💚</h2><a id="user-content-features-" class="anchor" aria-label="Permalink: Features 💚" href="#features-"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li>Automatically focuses the next field on typing and focuses previous field on deletation</li> <li>Cursor support ⚡️</li> <li>Can be set to any length. (3-6 fields recommended)</li> <li>3 different shapes for text fields</li> <li>Highly customizable</li> <li>3 different types of animation for input texts</li> <li>Animated active, inactive, selected and disabled field color switching</li> <li>Autofocus option</li> <li>Otp-code pasting from clipboard</li> <li>iOS autofill support</li> <li>Error animation. Currently have shake animation only. Watch the example app for how to integrate.</li> <li>Works with Flutter's Form. You can use Form validator right off the bat.</li> <li>Get currently typed text and use your condition to validate it. (for example: if (currentText.length != 6 || currentText != "your desired code"))</li> <li>Haptic Feedback support</li> <li>Animated obscure widget support</li> </ul> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Getting Started ⚡️</h2><a id="user-content-getting-started-️" class="anchor" aria-label="Permalink: Getting Started ⚡️" href="#getting-started-️"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Demo</h4><a id="user-content-demo" class="anchor" aria-label="Permalink: Demo" href="#demo"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/example.gif"><img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/example.gif" width="320" height="480" data-animated-image="" style="max-width: 100%;"></a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/paste_android.gif"><img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/paste_android.gif" width="240" height="480" data-animated-image="" style="max-width: 100%;"></a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/paste_ios.gif"><img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/paste_ios.gif" width="240" height="480" data-animated-image="" style="max-width: 100%;"></a></p> <div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto">Different Shapes</h4><a id="user-content-different-shapes" class="anchor" aria-label="Permalink: Different Shapes" href="#different-shapes"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/box.png"><img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/box.png" width="250" height="480" style="max-width: 100%;"></a><a target="_blank" rel="noopener noreferrer nofollow" href="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/circle.png"><img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/circle.png" width="250" height="480" style="max-width: 100%;"></a><a target="_blank" rel="noopener noreferrer nofollow" href="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/underline.png"><img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/underline.png" width="250" height="480" style="max-width: 100%;"></a></p> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Notes</h2><a id="user-content-notes" class="anchor" aria-label="Permalink: Notes" href="#notes"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <ul dir="auto"> <li>To enable "Fill color" for each cells, <code>enableActiveFill</code> must be set to <code>true</code>. The default value is <code>false</code>.</li> <li>To change the keyboard type, for example to use only number keyboard, or only for email use <code>keyboardType</code> parameter, default is [TextInputType.visiblePassword]</li> <li><code>FocosNode</code> and <code>TextEditingController</code> will get disposed automatically. Use <code>autoDisposeControllers = false</code> to disable it.</li> <li>to use v5.0.0 or above, developers must have Flutter SDK 1.20.0 or above.</li> <li>to use v6.0.0 or above, developers must have Flutter SDK 1.22.0 or above.</li> </ul> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Properties 🔖</h2><a id="user-content-properties-" class="anchor" aria-label="Permalink: Properties 🔖" href="#properties-"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" /// The [BuildContext] of the application final BuildContext appContext; ///Box Shadow for Pincode final List<BoxShadow>? boxShadows; /// length of how many cells there should be. 3-8 is recommended by me final int length; /// you already know what it does i guess :P default is false final bool obscureText; /// Character used for obscuring text if obscureText is true. /// /// Must not be empty. Single character is recommended. /// /// Default is ● - 'Black Circle' (U+25CF) final String obscuringCharacter; /// Widget used to obscure text /// /// it overrides the obscuringCharacter final Widget? obscuringWidget; /// Whether to use haptic feedback or not /// /// final bool useHapticFeedback; /// Haptic Feedback Types /// /// heavy, medium, light links to respective impacts /// selection - selectionClick, vibrate - vibrate /// check [HapticFeedback] for more final HapticFeedbackTypes hapticFeedbackTypes; /// Decides whether typed character should be /// briefly shown before being obscured final bool blinkWhenObscuring; /// Blink Duration if blinkWhenObscuring is set to true final Duration blinkDuration; /// returns the current typed text in the fields final ValueChanged<String> onChanged; /// returns the typed text when all pins are set final ValueChanged<String>? onCompleted; /// returns the typed text when user presses done/next action on the keyboard final ValueChanged<String>? onSubmitted; /// the style of the text, default is [ fontSize: 20, fontWeight: FontWeight.bold] final TextStyle? textStyle; /// the style of the pasted text, default is [fontWeight: FontWeight.bold] while /// [TextStyle.color] is [ThemeData.accentColor] final TextStyle? pastedTextStyle; /// background color for the whole row of pin code fields. final Color? backgroundColor; /// This defines how the elements in the pin code field align. Default to [MainAxisAlignment.spaceBetween] final MainAxisAlignment mainAxisAlignment; /// [AnimationType] for the text to appear in the pin code field. Default is [AnimationType.slide] final AnimationType animationType; /// Duration for the animation. Default is [Duration(milliseconds: 150)] final Duration animationDuration; /// [Curve] for the animation. Default is [Curves.easeInOut] final Curve animationCurve; /// [TextInputType] for the pin code fields. default is [TextInputType.visiblePassword] final TextInputType keyboardType; /// If the pin code field should be autofocused or not. Default is [false] final bool autoFocus; /// Should pass a [FocusNode] to manage it from the parent final FocusNode? focusNode; /// A list of [TextInputFormatter] that goes to the TextField final List<TextInputFormatter> inputFormatters; /// Enable or disable the Field. Default is [true] final bool enabled; /// [TextEditingController] to control the text manually. Sets a default [TextEditingController()] object if none given final TextEditingController? controller; /// Enabled Color fill for individual pin fields, default is [false] final bool enableActiveFill; /// Auto dismiss the keyboard upon inputting the value for the last field. Default is [true] final bool autoDismissKeyboard; /// Auto dispose the [controller] and [FocusNode] upon the destruction of widget from the widget tree. Default is [true] final bool autoDisposeControllers; /// Configures how the platform keyboard will select an uppercase or lowercase keyboard. /// Only supports text keyboards, other keyboard types will ignore this configuration. Capitalization is locale-aware. /// - Copied from 'https://api.flutter.dev/flutter/services/TextCapitalization-class.html' /// Default is [TextCapitalization.none] final TextCapitalization textCapitalization; final TextInputAction textInputAction; /// Triggers the error animation final StreamController<ErrorAnimationType>? errorAnimationController; /// Callback method to validate if text can be pasted. This is helpful when we need to validate text before pasting. /// e.g. validate if text is number. Default will be pasted as received. final bool Function(String? text)? beforeTextPaste; /// Method for detecting a pin_code form tap /// work with all form windows final Function? onTap; /// Configuration for paste dialog. Read more [DialogConfig] final DialogConfig? dialogConfig; /// Theme for the pin cells. Read more [PinTheme] final PinTheme pinTheme; /// Brightness dark or light choices for iOS keyboard. final Brightness? keyboardAppearance; /// Validator for the [TextFormField] final FormFieldValidator<String>? validator; /// An optional method to call with the final value when the form is saved via /// [FormState.save]. final FormFieldSetter<String>? onSaved; /// enables auto validation for the [TextFormField] /// Default is false final AutovalidateMode autovalidateMode; /// The vertical padding from the [PinCodeTextField] to the error text /// Default is 16. final double errorTextSpace; /// Enables pin autofill for TextFormField. /// Default is true final bool enablePinAutofill; /// Error animation duration final int errorAnimationDuration; /// Whether to show cursor or not final bool showCursor; /// The color of the cursor, default to Theme.of(context).accentColor final Color? cursorColor; /// width of the cursor, default to 2 final double cursorWidth; /// Height of the cursor, default to FontSize + 8; final double? cursorHeight; /// Autofill cleanup action final AutofillContextAction onAutoFillDisposeAction; /// Use external [AutoFillGroup] final bool useExternalAutoFillGroup; "><pre> <span class="pl-c">/// The <span class="pl-v">[BuildContext]</span> of the application</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">BuildContext</span> appContext; <span class="pl-c">///Box Shadow for Pincode</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">List</span><<span class="pl-c1">BoxShadow</span>><span class="pl-k">?</span> boxShadows; <span class="pl-c">/// length of how many cells there should be. 3-8 is recommended by me</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">int</span> length; <span class="pl-c">/// you already know what it does i guess :P default is false</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">bool</span> obscureText; <span class="pl-c">/// Character used for obscuring text if obscureText is true.</span> <span class="pl-c"> ///</span> <span class="pl-c"> /// Must not be empty. Single character is recommended.</span> <span class="pl-c"> ///</span> <span class="pl-c"> /// Default is ● - 'Black Circle' (U+25CF)</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">String</span> obscuringCharacter; <span class="pl-c">/// Widget used to obscure text</span> <span class="pl-c"> ///</span> <span class="pl-c"> /// it overrides the obscuringCharacter</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">Widget</span><span class="pl-k">?</span> obscuringWidget; <span class="pl-c">/// Whether to use haptic feedback or not</span> <span class="pl-c"> ///</span> <span class="pl-c"> ///</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">bool</span> useHapticFeedback; <span class="pl-c">/// Haptic Feedback Types</span> <span class="pl-c"> ///</span> <span class="pl-c"> /// heavy, medium, light links to respective impacts</span> <span class="pl-c"> /// selection - selectionClick, vibrate - vibrate</span> <span class="pl-c"> /// check <span class="pl-v">[HapticFeedback]</span> for more</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">HapticFeedbackTypes</span> hapticFeedbackTypes; <span class="pl-c">/// Decides whether typed character should be</span> <span class="pl-c"> /// briefly shown before being obscured</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">bool</span> blinkWhenObscuring; <span class="pl-c">/// Blink Duration if blinkWhenObscuring is set to true</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">Duration</span> blinkDuration; <span class="pl-c">/// returns the current typed text in the fields</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">ValueChanged</span><<span class="pl-c1">String</span>> onChanged; <span class="pl-c">/// returns the typed text when all pins are set</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">ValueChanged</span><<span class="pl-c1">String</span>><span class="pl-k">?</span> onCompleted; <span class="pl-c">/// returns the typed text when user presses done/next action on the keyboard</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">ValueChanged</span><<span class="pl-c1">String</span>><span class="pl-k">?</span> onSubmitted; <span class="pl-c">/// the style of the text, default is <span class="pl-v">[ fontSize: 20, fontWeight: FontWeight.bold]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">TextStyle</span><span class="pl-k">?</span> textStyle; <span class="pl-c">/// the style of the pasted text, default is <span class="pl-v">[fontWeight: FontWeight.bold]</span> while</span> <span class="pl-c"> /// <span class="pl-v">[TextStyle.color]</span> is <span class="pl-v">[ThemeData.accentColor]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">TextStyle</span><span class="pl-k">?</span> pastedTextStyle; <span class="pl-c">/// background color for the whole row of pin code fields.</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">Color</span><span class="pl-k">?</span> backgroundColor; <span class="pl-c">/// This defines how the elements in the pin code field align. Default to <span class="pl-v">[MainAxisAlignment.spaceBetween]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">MainAxisAlignment</span> mainAxisAlignment; <span class="pl-c">/// <span class="pl-v">[AnimationType]</span> for the text to appear in the pin code field. Default is <span class="pl-v">[AnimationType.slide]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">AnimationType</span> animationType; <span class="pl-c">/// Duration for the animation. Default is <span class="pl-v">[Duration(milliseconds: 150)]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">Duration</span> animationDuration; <span class="pl-c">/// <span class="pl-v">[Curve]</span> for the animation. Default is <span class="pl-v">[Curves.easeInOut]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">Curve</span> animationCurve; <span class="pl-c">/// <span class="pl-v">[TextInputType]</span> for the pin code fields. default is <span class="pl-v">[TextInputType.visiblePassword]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">TextInputType</span> keyboardType; <span class="pl-c">/// If the pin code field should be autofocused or not. Default is <span class="pl-v">[false]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">bool</span> autoFocus; <span class="pl-c">/// Should pass a <span class="pl-v">[FocusNode]</span> to manage it from the parent</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">FocusNode</span><span class="pl-k">?</span> focusNode; <span class="pl-c">/// A list of <span class="pl-v">[TextInputFormatter]</span> that goes to the TextField</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">List</span><<span class="pl-c1">TextInputFormatter</span>> inputFormatters; <span class="pl-c">/// Enable or disable the Field. Default is <span class="pl-v">[true]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">bool</span> enabled; <span class="pl-c">/// <span class="pl-v">[TextEditingController]</span> to control the text manually. Sets a default <span class="pl-v">[TextEditingController()]</span> object if none given</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">TextEditingController</span><span class="pl-k">?</span> controller; <span class="pl-c">/// Enabled Color fill for individual pin fields, default is <span class="pl-v">[false]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">bool</span> enableActiveFill; <span class="pl-c">/// Auto dismiss the keyboard upon inputting the value for the last field. Default is <span class="pl-v">[true]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">bool</span> autoDismissKeyboard; <span class="pl-c">/// Auto dispose the <span class="pl-v">[controller]</span> and <span class="pl-v">[FocusNode]</span> upon the destruction of widget from the widget tree. Default is <span class="pl-v">[true]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">bool</span> autoDisposeControllers; <span class="pl-c">/// Configures how the platform keyboard will select an uppercase or lowercase keyboard.</span> <span class="pl-c"> /// Only supports text keyboards, other keyboard types will ignore this configuration. Capitalization is locale-aware.</span> <span class="pl-c"> /// - Copied from 'https://api.flutter.dev/flutter/services/TextCapitalization-class.html'</span> <span class="pl-c"> /// Default is <span class="pl-v">[TextCapitalization.none]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">TextCapitalization</span> textCapitalization; <span class="pl-k">final</span> <span class="pl-c1">TextInputAction</span> textInputAction; <span class="pl-c">/// Triggers the error animation</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">StreamController</span><<span class="pl-c1">ErrorAnimationType</span>><span class="pl-k">?</span> errorAnimationController; <span class="pl-c">/// Callback method to validate if text can be pasted. This is helpful when we need to validate text before pasting.</span> <span class="pl-c"> /// e.g. validate if text is number. Default will be pasted as received.</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">bool</span> <span class="pl-c1">Function</span>(<span class="pl-c1">String</span><span class="pl-k">?</span> text)<span class="pl-k">?</span> beforeTextPaste; <span class="pl-c">/// Method for detecting a pin_code form tap</span> <span class="pl-c"> /// work with all form windows</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">Function</span><span class="pl-k">?</span> onTap; <span class="pl-c">/// Configuration for paste dialog. Read more <span class="pl-v">[DialogConfig]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">DialogConfig</span><span class="pl-k">?</span> dialogConfig; <span class="pl-c">/// Theme for the pin cells. Read more <span class="pl-v">[PinTheme]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">PinTheme</span> pinTheme; <span class="pl-c">/// Brightness dark or light choices for iOS keyboard.</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">Brightness</span><span class="pl-k">?</span> keyboardAppearance; <span class="pl-c">/// Validator for the <span class="pl-v">[TextFormField]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">FormFieldValidator</span><<span class="pl-c1">String</span>><span class="pl-k">?</span> validator; <span class="pl-c">/// An optional method to call with the final value when the form is saved via</span> <span class="pl-c"> /// <span class="pl-v">[FormState.save]</span>.</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">FormFieldSetter</span><<span class="pl-c1">String</span>><span class="pl-k">?</span> onSaved; <span class="pl-c">/// enables auto validation for the <span class="pl-v">[TextFormField]</span></span> <span class="pl-c"> /// Default is false</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">AutovalidateMode</span> autovalidateMode; <span class="pl-c">/// The vertical padding from the <span class="pl-v">[PinCodeTextField]</span> to the error text</span> <span class="pl-c"> /// Default is 16.</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">double</span> errorTextSpace; <span class="pl-c">/// Enables pin autofill for TextFormField.</span> <span class="pl-c"> /// Default is true</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">bool</span> enablePinAutofill; <span class="pl-c">/// Error animation duration</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">int</span> errorAnimationDuration; <span class="pl-c">/// Whether to show cursor or not</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">bool</span> showCursor; <span class="pl-c">/// The color of the cursor, default to Theme.of(context).accentColor</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">Color</span><span class="pl-k">?</span> cursorColor; <span class="pl-c">/// width of the cursor, default to 2</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">double</span> cursorWidth; <span class="pl-c">/// Height of the cursor, default to FontSize + 8;</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">double</span><span class="pl-k">?</span> cursorHeight; <span class="pl-c">/// Autofill cleanup action</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">AutofillContextAction</span> onAutoFillDisposeAction; <span class="pl-c">/// Use external <span class="pl-v">[AutoFillGroup]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">bool</span> useExternalAutoFillGroup; </pre></div> <p dir="auto"><strong>PinTheme</strong></p> <div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/// Colors of the input fields which have inputs. Default is [Colors.green] final Color activeColor; /// Color of the input field which is currently selected. Default is [Colors.blue] final Color selectedColor; /// Colors of the input fields which don't have inputs. Default is [Colors.red] final Color inactiveColor; /// Colors of the input fields if the [PinCodeTextField] is disabled. Default is [Colors.grey] final Color disabledColor; /// Colors of the input fields which have inputs. Default is [Colors.green] final Color activeFillColor; /// Color of the input field which is currently selected. Default is [Colors.blue] final Color selectedFillColor; /// Colors of the input fields which don't have inputs. Default is [Colors.red] final Color inactiveFillColor; /// Border radius of each pin code field final BorderRadius borderRadius; /// [height] for the pin code field. default is [50.0] final double fieldHeight; /// [width] for the pin code field. default is [40.0] final double fieldWidth; /// Border width for the each input fields. Default is [2.0] final double borderWidth; /// this defines the shape of the input fields. Default is underlined final PinCodeFieldShape shape;"><pre><span class="pl-c">/// Colors of the input fields which have inputs. Default is <span class="pl-v">[Colors.green]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">Color</span> activeColor; <span class="pl-c">/// Color of the input field which is currently selected. Default is <span class="pl-v">[Colors.blue]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">Color</span> selectedColor; <span class="pl-c">/// Colors of the input fields which don't have inputs. Default is <span class="pl-v">[Colors.red]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">Color</span> inactiveColor; <span class="pl-c">/// Colors of the input fields if the <span class="pl-v">[PinCodeTextField]</span> is disabled. Default is <span class="pl-v">[Colors.grey]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">Color</span> disabledColor; <span class="pl-c">/// Colors of the input fields which have inputs. Default is <span class="pl-v">[Colors.green]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">Color</span> activeFillColor; <span class="pl-c">/// Color of the input field which is currently selected. Default is <span class="pl-v">[Colors.blue]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">Color</span> selectedFillColor; <span class="pl-c">/// Colors of the input fields which don't have inputs. Default is <span class="pl-v">[Colors.red]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">Color</span> inactiveFillColor; <span class="pl-c">/// Border radius of each pin code field</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">BorderRadius</span> borderRadius; <span class="pl-c">/// <span class="pl-v">[height]</span> for the pin code field. default is <span class="pl-v">[50.0]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">double</span> fieldHeight; <span class="pl-c">/// <span class="pl-v">[width]</span> for the pin code field. default is <span class="pl-v">[40.0]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">double</span> fieldWidth; <span class="pl-c">/// Border width for the each input fields. Default is <span class="pl-v">[2.0]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">double</span> borderWidth; <span class="pl-c">/// this defines the shape of the input fields. Default is underlined</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">PinCodeFieldShape</span> shape;</pre></div> <p dir="auto"><strong>DialogConfig</strong></p> <div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/// title of the [AlertDialog] while pasting the code. Default to [Paste Code] final String dialogTitle; /// content of the [AlertDialog] while pasting the code. Default to ["Do you want to paste this code "] final String dialogContent; /// Affirmative action text for the [AlertDialog]. Default to "Paste" final String affirmativeText; /// Negative action text for the [AlertDialog]. Default to "Cancel" final String negativeText; /// The default dialog theme, should it be iOS or other(including web and Android) final Platform platform; //enum Platform { iOS, other } other indicates for web and android"><pre><span class="pl-c">/// title of the <span class="pl-v">[AlertDialog]</span> while pasting the code. Default to <span class="pl-v">[Paste Code]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">String</span> dialogTitle; <span class="pl-c">/// content of the <span class="pl-v">[AlertDialog]</span> while pasting the code. Default to <span class="pl-v">["Do you want to paste this code "]</span></span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">String</span> dialogContent; <span class="pl-c">/// Affirmative action text for the <span class="pl-v">[AlertDialog]</span>. Default to "Paste"</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">String</span> affirmativeText; <span class="pl-c">/// Negative action text for the <span class="pl-v">[AlertDialog]</span>. Default to "Cancel"</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">String</span> negativeText; <span class="pl-c">/// The default dialog theme, should it be iOS or other(including web and Android)</span> <span class="pl-c"></span> <span class="pl-k">final</span> <span class="pl-c1">Platform</span> platform; <span class="pl-c">//enum Platform { iOS, other } other indicates for web and android</span></pre></div> <div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Contributors ✨</h2><a id="user-content-contributors-" class="anchor" aria-label="Permalink: Contributors ✨" href="#contributors-"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Thanks to everyone whoever suggested their thoughts to improve this package. And special thanks goes to these people:</p> <markdown-accessiblity-table><table> <tbody><tr> <td align="center"><a href="https://github.com/EmmanuelVlad"><img src="https://avatars0.githubusercontent.com/u/21370666?v=3" width="100px;" alt="Emmanuel Vlad" style="max-width: 100%;"><br><sub><b>Emmanuel Vlad</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields" title="Documentation">📖</a><a href="https://github.com/adar2378/pin_code_fields/commits?author=EmmanuelVlad" title="Code">💻</a></td> <td align="center"><a href="https://atiq.info/" rel="nofollow"><img src="https://camo.githubusercontent.com/a5237424d06461c904bca58e200581bb8921046017ab5dcedd8e796b6c6ceebb/68747470733a2f2f617469712e696e666f2f696d616765732f6c6f676f2e706e67" width="100px;" alt="Atiq" data-canonical-src="https://atiq.info/images/logo.png" style="max-width: 100%;"><br><sub><b>Atiqur Rahaman</b></sub></a><br><a href="https://www.2dimensions.com/a/atiq31416/files/flare/otp-verification/preview" title="UX & Flare Animation" rel="nofollow">🎨</a></td> <td align="center"><a href="https://github.com/milind-mevada-stl"><img src="https://avatars2.githubusercontent.com/u/29375516?v=3" width="100px;" alt="Milind Mevada" style="max-width: 100%;"><br><sub><b>Milind Mevada</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields" title="Documentation">📖</a><a href="https://github.com/adar2378/pin_code_fields/commits?author=milind-mevada-stl" title="Code">💻</a></td> <td align="center"><a href="https://github.com/RemeJuan"><img src="https://avatars1.githubusercontent.com/u/864552?v=3" width="100px;" alt="Reme Le Hane" style="max-width: 100%;"><br><sub><b>Reme Le Hane</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields" title="Documentation">📖</a><a href="https://github.com/adar2378/pin_code_fields/commits?author=RemeJuan" title="Code">💻</a></td> <td align="center"><a href="https://github.com/TabooSun"><img src="https://avatars2.githubusercontent.com/u/31196825?v=3" width="100px;" alt="TabooSun" style="max-width: 100%;"><br><sub><b>TabooSun</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=TabooSun" title="Code">💻</a></td> <td align="center"><a href="https://github.com/thallessantos"><img src="https://avatars2.githubusercontent.com/u/13054457?v=3" width="100px;" alt="Thalles Santos" style="max-width: 100%;"><br><sub><b>Thalles Santos</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=thallessantos" title="Code">💻</a></td> <td align="center"><a href="https://github.com/ItamarMu"><img src="https://avatars2.githubusercontent.com/u/27651221?v=3" width="100px;" alt="ItamarMu" style="max-width: 100%;"><br><sub><b>ItamarMu</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=ItamarMu" title="Code">💻</a></td> <td align="center"><a href="https://github.com/ThinkDigitalSoftware"><img src="https://avatars3.githubusercontent.com/u/23037821?v=3" width="100px;" alt="Jonathan White" style="max-width: 100%;"><br><sub><b>ThinkDigitalSoftware</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=ThinkDigitalSoftware" title="Code">💻</a></td> </tr> <tr> <td align="center"><a href="https://github.com/JeffryHermanto"><img src="https://avatars0.githubusercontent.com/u/35820325?v=3" width="100px;" alt="Jeffry Hermanto" style="max-width: 100%;"><br><sub><b>Jeffry Hermanto</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=JeffryHermanto" title="Code">💻</a></td> <td align="center"><a href="https://github.com/ItamarMu"><img src="https://avatars3.githubusercontent.com/u/27651221?v=3" width="100px;" alt="ItamarMu" style="max-width: 100%;"><br><sub><b>ItamarMu</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=ItamarMu" title="Code">💻</a></td> <td align="center"><a href="https://github.com/ened"><img src="https://avatars0.githubusercontent.com/u/269860?v=3" width="100px;" alt="Sebastian Roth" style="max-width: 100%;"><br><sub><b>Sebastian Roth</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=ened" title="Code">💻</a></td> <td align="center"><a href="https://github.com/darkang3lz92"><img src="https://avatars3.githubusercontent.com/u/33158127?v=3" width="100px;" alt="Dango Mango" style="max-width: 100%;"><br><sub><b>Dango Mango</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=darkang3lz92" title="Code">💻</a></td> <td align="center"><a href="https://github.com/Frezyx"><img src="https://avatars1.githubusercontent.com/u/40857927?v=3" width="100px;" alt="Stanislav Ilin" style="max-width: 100%;"><br><sub><b>Stanislav Ilin</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=Frezyx" title="Code">💻</a></td> <td align="center"><a href="https://github.com/VarunBarad"><img src="https://avatars0.githubusercontent.com/u/8678857?v=3" width="100px;" alt="Varun Barad" style="max-width: 100%;"><br><sub><b>Varun Barad</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=VarunBarad" title="Code">💻</a></td> <td align="center"><a href="https://github.com/mohak852"><img src="https://avatars0.githubusercontent.com/u/58987025?v=3" width="100px;" alt="Mohak Shrivastava" style="max-width: 100%;"><br><sub><b>Mohak Shrivastava</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=mohak852" title="Code">💻</a></td> <td align="center"><a href="https://github.com/ItamarMu"><img src="https://avatars0.githubusercontent.com/u/27651221?v=3" width="100px;" alt="ItamarMu" style="max-width: 100%;"><br><sub><b>ItamarMu</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=ItamarMu" title="Code">💻</a></td> <td align="center"><a href="https://github.com/Margarets00"><img src="https://avatars0.githubusercontent.com/u/39041161?v=3" width="100px;" alt="Kim Minju" style="max-width: 100%;"><br><sub><b>Kim Minju</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=Margarets00" title="Code">💻</a></td> </tr> <tr> <td align="center"><a href="https://github.com/JSBmanD"><img src="https://avatars3.githubusercontent.com/u/5402335?s=400&v=4" width="100px;" alt="Dmitry Vakhnin" style="max-width: 100%;"><br><sub><b>Dmitry Vakhnin</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=JSBmanD" title="Code">💻</a></td> <td align="center"><a href="https://github.com/serendipity1004"><img src="https://avatars3.githubusercontent.com/u/20388249?s=400" width="100px;" alt="serendipity1004" style="max-width: 100%;"><br><sub><b>Jiho Choi</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=serendipity1004" title="Code">💻</a></td> <td align="center"><a href="https://github.com/jobfeikens"><img src="https://avatars.githubusercontent.com/u/25356841?s=400&u=3f23a86b454b541fbcd88c9ed4a5f36df914dd03&v=4" width="100px;" alt="jobfeikens" style="max-width: 100%;"><br><sub><b>Job</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=jobfeikens" title="Code">💻</a></td> <td align="center"><a href="https://github.com/BrunoEleodoro"><img src="https://avatars2.githubusercontent.com/u/20596317?s=400" width="100px;" alt="BrunoEleodoro" style="max-width: 100%;"><br><sub><b>Bruno Eleodoro Roza</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=BrunoEleodoro" title="Code">💻</a></td> <td align="center"><a href="https://github.com/tgbarker"><img src="https://avatars.githubusercontent.com/u/2621350?s=400&v=4" width="100px;" alt="tgbarker" style="max-width: 100%;"><br><sub><b>tgbarker</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=tgbarker" title="Code">💻</a></td> <td align="center"><a href="https://github.com/karabanovbs"><img src="https://avatars.githubusercontent.com/u/14288495?s=400&v=4" width="100px;" alt="karabanovbs" style="max-width: 100%;"><br><sub><b>karabanovbs</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=karabanovbs" title="Code">💻</a></td> <td align="center"><a href="https://github.com/adarsh-technocrat"><img src="https://avatars.githubusercontent.com/u/14288495?s=400&v=4" width="100px;" alt="adarsh-technocrat" style="max-width: 100%;"><br><sub><b>Adarsh kumar singh</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=adarsh-technocrat" title="Code">💻</a></td> </tr> </tbody></table></markdown-accessiblity-table> <p dir="auto"><strong>The pin code text field widget example</strong></p> <div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="PinCodeTextField( length: 6, obscureText: false, animationType: AnimationType.fade, pinTheme: PinTheme( shape: PinCodeFieldShape.box, borderRadius: BorderRadius.circular(5), fieldHeight: 50, fieldWidth: 40, activeFillColor: Colors.white, ), animationDuration: Duration(milliseconds: 300), backgroundColor: Colors.blue.shade50, enableActiveFill: true, errorAnimationController: errorController, controller: textEditingController, onCompleted: (v) { print("Completed"); }, onChanged: (value) { print(value); setState(() { currentText = value; }); }, beforeTextPaste: (text) { print("Allowing to paste $text"); //if you return true then it will show the paste confirmation dialog. Otherwise if false, then nothing will happen. //but you can show anything you want here, like your pop up saying wrong paste format or etc return true; }, )"><pre><span class="pl-c1">PinCodeTextField</span>( length<span class="pl-k">:</span> <span class="pl-c1">6</span>, obscureText<span class="pl-k">:</span> <span class="pl-c1">false</span>, animationType<span class="pl-k">:</span> <span class="pl-c1">AnimationType</span>.fade, pinTheme<span class="pl-k">:</span> <span class="pl-c1">PinTheme</span>( shape<span class="pl-k">:</span> <span class="pl-c1">PinCodeFieldShape</span>.box, borderRadius<span class="pl-k">:</span> <span class="pl-c1">BorderRadius</span>.<span class="pl-en">circular</span>(<span class="pl-c1">5</span>), fieldHeight<span class="pl-k">:</span> <span class="pl-c1">50</span>, fieldWidth<span class="pl-k">:</span> <span class="pl-c1">40</span>, activeFillColor<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.white, ), animationDuration<span class="pl-k">:</span> <span class="pl-c1">Duration</span>(milliseconds<span class="pl-k">:</span> <span class="pl-c1">300</span>), backgroundColor<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.blue.shade50, enableActiveFill<span class="pl-k">:</span> <span class="pl-c1">true</span>, errorAnimationController<span class="pl-k">:</span> errorController, controller<span class="pl-k">:</span> textEditingController, onCompleted<span class="pl-k">:</span> (v) { <span class="pl-en">print</span>(<span class="pl-s">"Completed"</span>); }, onChanged<span class="pl-k">:</span> (value) { <span class="pl-en">print</span>(value); <span class="pl-en">setState</span>(() { currentText <span class="pl-k">=</span> value; }); }, beforeTextPaste<span class="pl-k">:</span> (text) { <span class="pl-en">print</span>(<span class="pl-s">"Allowing to paste $<span class="pl-v">text</span>"</span>); <span class="pl-c">//if you return true then it will show the paste confirmation dialog. Otherwise if false, then nothing will happen.</span> <span class="pl-c">//but you can show anything you want here, like your pop up saying wrong paste format or etc</span> <span class="pl-k">return</span> <span class="pl-c1">true</span>; }, )</pre></div> <p dir="auto"><strong>Shape can be among these 3 types</strong></p> <div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="enum PinCodeFieldShape { box, underline, circle }"><pre><span class="pl-k">enum</span> <span class="pl-c1">PinCodeFieldShape</span> { box, underline, circle }</pre></div> <p dir="auto"><strong>Animations can be among these 3 types</strong></p> <div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="enum AnimationType { scale, slide, fade, none }"><pre><span class="pl-k">enum</span> <span class="pl-c1">AnimationType</span> { scale, slide, fade, none }</pre></div> <p dir="auto"><strong>Haptic Feedbacks can be among these 5 types</strong></p> <div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="enum HapticFeedbackTypes { heavy, light, medium, selection, vibrate, } "><pre><span class="pl-k">enum</span> <span class="pl-c1">HapticFeedbackTypes</span> { heavy, light, medium, selection, vibrate, } </pre></div> <p dir="auto"><strong>Trigger Error animation</strong><br></p> <ol dir="auto"> <li>Create a StreamController</li> </ol> <div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="StreamController<ErrorAnimationType> errorController = StreamController<ErrorAnimationType>();"><pre><span class="pl-c1">StreamController</span><<span class="pl-c1">ErrorAnimationType</span>> errorController <span class="pl-k">=</span> <span class="pl-c1">StreamController</span><<span class="pl-c1">ErrorAnimationType</span>>();</pre></div> <ol start="2" dir="auto"> <li>And pass the controller like this.</li> </ol> <div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="PinCodeTextField( length: 6, obscureText: false, animationType: AnimationType.fade, animationDuration: Duration(milliseconds: 300), errorAnimationController: errorController, // Pass it here onChanged: (value) { setState(() { currentText = value; }); }, )"><pre><span class="pl-c1">PinCodeTextField</span>( length<span class="pl-k">:</span> <span class="pl-c1">6</span>, obscureText<span class="pl-k">:</span> <span class="pl-c1">false</span>, animationType<span class="pl-k">:</span> <span class="pl-c1">AnimationType</span>.fade, animationDuration<span class="pl-k">:</span> <span class="pl-c1">Duration</span>(milliseconds<span class="pl-k">:</span> <span class="pl-c1">300</span>), errorAnimationController<span class="pl-k">:</span> errorController, <span class="pl-c">// Pass it here</span> onChanged<span class="pl-k">:</span> (value) { <span class="pl-en">setState</span>(() { currentText <span class="pl-k">=</span> value; }); }, )</pre></div> <ol start="3" dir="auto"> <li>Then you can trigger the animation just by writing this:</li> </ol> <div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="errorController.add(ErrorAnimationType.shake); // This will shake the pin code field"><pre>errorController.<span class="pl-en">add</span>(<span class="pl-c1">ErrorAnimationType</span>.shake); <span class="pl-c">// This will shake the pin code field</span></pre></div> <p dir="auto"><strong>This full code is from the example folder. You can run the example to see.</strong></p> <div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: PinCodeVerificationScreen( "+8801376221100"), // a random number, please don't call xD ); } } class PinCodeVerificationScreen extends StatefulWidget { final String phoneNumber; PinCodeVerificationScreen(this.phoneNumber); @override _PinCodeVerificationScreenState createState() => _PinCodeVerificationScreenState(); } class _PinCodeVerificationScreenState extends State<PinCodeVerificationScreen> { var onTapRecognizer; TextEditingController textEditingController = TextEditingController(); // ..text = "123456"; StreamController<ErrorAnimationType> errorController; bool hasError = false; String currentText = ""; final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>(); final formKey = GlobalKey<FormState>(); @override void initState() { onTapRecognizer = TapGestureRecognizer() ..onTap = () { Navigator.pop(context); }; errorController = StreamController<ErrorAnimationType>(); super.initState(); } @override void dispose() { errorController.close(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.blue.shade50, key: scaffoldKey, body: GestureDetector( onTap: () {}, child: Container( height: MediaQuery.of(context).size.height, width: MediaQuery.of(context).size.width, child: ListView( children: <Widget>[ SizedBox(height: 30), Container( height: MediaQuery.of(context).size.height / 3, child: FlareActor( "assets/otp.flr", animation: "otp", fit: BoxFit.fitHeight, alignment: Alignment.center, ), ), SizedBox(height: 8), Padding( padding: const EdgeInsets.symmetric(vertical: 8.0), child: Text( 'Phone Number Verification', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22), textAlign: TextAlign.center, ), ), Padding( padding: const EdgeInsets.symmetric(horizontal: 30.0, vertical: 8), child: RichText( text: TextSpan( text: "Enter the code sent to ", children: [ TextSpan( text: widget.phoneNumber, style: TextStyle( color: Colors.black, fontWeight: FontWeight.bold, fontSize: 15)), ], style: TextStyle(color: Colors.black54, fontSize: 15)), textAlign: TextAlign.center, ), ), SizedBox( height: 20, ), Form( key: formKey, child: Padding( padding: const EdgeInsets.symmetric( vertical: 8.0, horizontal: 30), child: PinCodeTextField( appContext: context, pastedTextStyle: TextStyle( color: Colors.green.shade600, fontWeight: FontWeight.bold, ), length: 6, obscureText: false, obscuringCharacter: '*', animationType: AnimationType.fade, validator: (v) { if (v.length < 3) { return "I'm from validator"; } else { return null; } }, pinTheme: PinTheme( shape: PinCodeFieldShape.box, borderRadius: BorderRadius.circular(5), fieldHeight: 60, fieldWidth: 50, activeFillColor: hasError ? Colors.orange : Colors.white, ), cursorColor: Colors.black, animationDuration: Duration(milliseconds: 300), textStyle: TextStyle(fontSize: 20, height: 1.6), backgroundColor: Colors.blue.shade50, enableActiveFill: true, errorAnimationController: errorController, controller: textEditingController, keyboardType: TextInputType.number, boxShadows: [ BoxShadow( offset: Offset(0, 1), color: Colors.black12, blurRadius: 10, ) ], onCompleted: (v) { print("Completed"); }, // onTap: () { // print("Pressed"); // }, onChanged: (value) { print(value); setState(() { currentText = value; }); }, beforeTextPaste: (text) { print("Allowing to paste $text"); //if you return true then it will show the paste confirmation dialog. Otherwise if false, then nothing will happen. //but you can show anything you want here, like your pop up saying wrong paste format or etc return true; }, )), ), Padding( padding: const EdgeInsets.symmetric(horizontal: 30.0), child: Text( hasError ? "*Please fill up all the cells properly" : "", style: TextStyle( color: Colors.red, fontSize: 12, fontWeight: FontWeight.w400), ), ), SizedBox( height: 20, ), RichText( textAlign: TextAlign.center, text: TextSpan( text: "Didn't receive the code? ", style: TextStyle(color: Colors.black54, fontSize: 15), children: [ TextSpan( text: " RESEND", recognizer: onTapRecognizer, style: TextStyle( color: Color(0xFF91D3B3), fontWeight: FontWeight.bold, fontSize: 16)) ]), ), SizedBox( height: 14, ), Container( margin: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 30), child: ButtonTheme( height: 50, child: FlatButton( onPressed: () { formKey.currentState.validate(); // conditions for validating if (currentText.length != 6 || currentText != "towtow") { errorController.add(ErrorAnimationType .shake); // Triggering error shake animation setState(() { hasError = true; }); } else { setState(() { hasError = false; scaffoldKey.currentState.showSnackBar(SnackBar( content: Text("Aye!!"), duration: Duration(seconds: 2), )); }); } }, child: Center( child: Text( "VERIFY".toUpperCase(), style: TextStyle( color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold), )), ), ), decoration: BoxDecoration( color: Colors.green.shade300, borderRadius: BorderRadius.circular(5), boxShadow: [ BoxShadow( color: Colors.green.shade200, offset: Offset(1, -2), blurRadius: 5), BoxShadow( color: Colors.green.shade200, offset: Offset(-1, 2), blurRadius: 5) ]), ), SizedBox( height: 16, ), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ FlatButton( child: Text("Clear"), onPressed: () { textEditingController.clear(); }, ), FlatButton( child: Text("Set Text"), onPressed: () { textEditingController.text = "123456"; }, ), ], ) ], ), ), ), ); } }"><pre><span class="pl-k">class</span> <span class="pl-c1">MyApp</span> <span class="pl-k">extends</span> <span class="pl-c1">StatelessWidget</span> { <span class="pl-c">// This widget is the root of your application.</span> <span class="pl-k">@override</span> <span class="pl-c1">Widget</span> <span class="pl-en">build</span>(<span class="pl-c1">BuildContext</span> context) { <span class="pl-k">return</span> <span class="pl-c1">MaterialApp</span>( title<span class="pl-k">:</span> <span class="pl-s">'Flutter Demo'</span>, theme<span class="pl-k">:</span> <span class="pl-c1">ThemeData</span>( primarySwatch<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.blue, ), home<span class="pl-k">:</span> <span class="pl-c1">PinCodeVerificationScreen</span>( <span class="pl-s">"+8801376221100"</span>), <span class="pl-c">// a random number, please don't call xD</span> ); } } <span class="pl-k">class</span> <span class="pl-c1">PinCodeVerificationScreen</span> <span class="pl-k">extends</span> <span class="pl-c1">StatefulWidget</span> { <span class="pl-k">final</span> <span class="pl-c1">String</span> phoneNumber; <span class="pl-c1">PinCodeVerificationScreen</span>(<span class="pl-c1">this</span>.phoneNumber); <span class="pl-k">@override</span> <span class="pl-c1">_PinCodeVerificationScreenState</span> <span class="pl-en">createState</span>() <span class="pl-k">=></span> <span class="pl-c1">_PinCodeVerificationScreenState</span>(); } <span class="pl-k">class</span> <span class="pl-c1">_PinCodeVerificationScreenState</span> <span class="pl-k">extends</span> <span class="pl-c1">State</span><<span class="pl-c1">PinCodeVerificationScreen</span>> { <span class="pl-k">var</span> onTapRecognizer; <span class="pl-c1">TextEditingController</span> textEditingController <span class="pl-k">=</span> <span class="pl-c1">TextEditingController</span>(); <span class="pl-c">// ..text = "123456";</span> <span class="pl-c1">StreamController</span><<span class="pl-c1">ErrorAnimationType</span>> errorController; <span class="pl-c1">bool</span> hasError <span class="pl-k">=</span> <span class="pl-c1">false</span>; <span class="pl-c1">String</span> currentText <span class="pl-k">=</span> <span class="pl-s">""</span>; <span class="pl-k">final</span> <span class="pl-c1">GlobalKey</span><<span class="pl-c1">ScaffoldState</span>> scaffoldKey <span class="pl-k">=</span> <span class="pl-c1">GlobalKey</span><<span class="pl-c1">ScaffoldState</span>>(); <span class="pl-k">final</span> formKey <span class="pl-k">=</span> <span class="pl-c1">GlobalKey</span><<span class="pl-c1">FormState</span>>(); <span class="pl-k">@override</span> <span class="pl-k">void</span> <span class="pl-en">initState</span>() { onTapRecognizer <span class="pl-k">=</span> <span class="pl-c1">TapGestureRecognizer</span>() ..onTap <span class="pl-k">=</span> () { <span class="pl-c1">Navigator</span>.<span class="pl-en">pop</span>(context); }; errorController <span class="pl-k">=</span> <span class="pl-c1">StreamController</span><<span class="pl-c1">ErrorAnimationType</span>>(); <span class="pl-c1">super</span>.<span class="pl-en">initState</span>(); } <span class="pl-k">@override</span> <span class="pl-k">void</span> <span class="pl-en">dispose</span>() { errorController.<span class="pl-en">close</span>(); <span class="pl-c1">super</span>.<span class="pl-en">dispose</span>(); } <span class="pl-k">@override</span> <span class="pl-c1">Widget</span> <span class="pl-en">build</span>(<span class="pl-c1">BuildContext</span> context) { <span class="pl-k">return</span> <span class="pl-c1">Scaffold</span>( backgroundColor<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.blue.shade50, key<span class="pl-k">:</span> scaffoldKey, body<span class="pl-k">:</span> <span class="pl-c1">GestureDetector</span>( onTap<span class="pl-k">:</span> () {}, child<span class="pl-k">:</span> <span class="pl-c1">Container</span>( height<span class="pl-k">:</span> <span class="pl-c1">MediaQuery</span>.<span class="pl-en">of</span>(context).size.height, width<span class="pl-k">:</span> <span class="pl-c1">MediaQuery</span>.<span class="pl-en">of</span>(context).size.width, child<span class="pl-k">:</span> <span class="pl-c1">ListView</span>( children<span class="pl-k">:</span> <span class="pl-k"><</span><span class="pl-c1">Widget</span><span class="pl-k">></span>[ <span class="pl-c1">SizedBox</span>(height<span class="pl-k">:</span> <span class="pl-c1">30</span>), <span class="pl-c1">Container</span>( height<span class="pl-k">:</span> <span class="pl-c1">MediaQuery</span>.<span class="pl-en">of</span>(context).size.height <span class="pl-k">/</span> <span class="pl-c1">3</span>, child<span class="pl-k">:</span> <span class="pl-c1">FlareActor</span>( <span class="pl-s">"assets/otp.flr"</span>, animation<span class="pl-k">:</span> <span class="pl-s">"otp"</span>, fit<span class="pl-k">:</span> <span class="pl-c1">BoxFit</span>.fitHeight, alignment<span class="pl-k">:</span> <span class="pl-c1">Alignment</span>.center, ), ), <span class="pl-c1">SizedBox</span>(height<span class="pl-k">:</span> <span class="pl-c1">8</span>), <span class="pl-c1">Padding</span>( padding<span class="pl-k">:</span> <span class="pl-k">const</span> <span class="pl-c1">EdgeInsets</span>.<span class="pl-en">symmetric</span>(vertical<span class="pl-k">:</span> <span class="pl-c1">8.0</span>), child<span class="pl-k">:</span> <span class="pl-c1">Text</span>( <span class="pl-s">'Phone Number Verification'</span>, style<span class="pl-k">:</span> <span class="pl-c1">TextStyle</span>(fontWeight<span class="pl-k">:</span> <span class="pl-c1">FontWeight</span>.bold, fontSize<span class="pl-k">:</span> <span class="pl-c1">22</span>), textAlign<span class="pl-k">:</span> <span class="pl-c1">TextAlign</span>.center, ), ), <span class="pl-c1">Padding</span>( padding<span class="pl-k">:</span> <span class="pl-k">const</span> <span class="pl-c1">EdgeInsets</span>.<span class="pl-en">symmetric</span>(horizontal<span class="pl-k">:</span> <span class="pl-c1">30.0</span>, vertical<span class="pl-k">:</span> <span class="pl-c1">8</span>), child<span class="pl-k">:</span> <span class="pl-c1">RichText</span>( text<span class="pl-k">:</span> <span class="pl-c1">TextSpan</span>( text<span class="pl-k">:</span> <span class="pl-s">"Enter the code sent to "</span>, children<span class="pl-k">:</span> [ <span class="pl-c1">TextSpan</span>( text<span class="pl-k">:</span> widget.phoneNumber, style<span class="pl-k">:</span> <span class="pl-c1">TextStyle</span>( color<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.black, fontWeight<span class="pl-k">:</span> <span class="pl-c1">FontWeight</span>.bold, fontSize<span class="pl-k">:</span> <span class="pl-c1">15</span>)), ], style<span class="pl-k">:</span> <span class="pl-c1">TextStyle</span>(color<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.black54, fontSize<span class="pl-k">:</span> <span class="pl-c1">15</span>)), textAlign<span class="pl-k">:</span> <span class="pl-c1">TextAlign</span>.center, ), ), <span class="pl-c1">SizedBox</span>( height<span class="pl-k">:</span> <span class="pl-c1">20</span>, ), <span class="pl-c1">Form</span>( key<span class="pl-k">:</span> formKey, child<span class="pl-k">:</span> <span class="pl-c1">Padding</span>( padding<span class="pl-k">:</span> <span class="pl-k">const</span> <span class="pl-c1">EdgeInsets</span>.<span class="pl-en">symmetric</span>( vertical<span class="pl-k">:</span> <span class="pl-c1">8.0</span>, horizontal<span class="pl-k">:</span> <span class="pl-c1">30</span>), child<span class="pl-k">:</span> <span class="pl-c1">PinCodeTextField</span>( appContext<span class="pl-k">:</span> context, pastedTextStyle<span class="pl-k">:</span> <span class="pl-c1">TextStyle</span>( color<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.green.shade600, fontWeight<span class="pl-k">:</span> <span class="pl-c1">FontWeight</span>.bold, ), length<span class="pl-k">:</span> <span class="pl-c1">6</span>, obscureText<span class="pl-k">:</span> <span class="pl-c1">false</span>, obscuringCharacter<span class="pl-k">:</span> <span class="pl-s">'*'</span>, animationType<span class="pl-k">:</span> <span class="pl-c1">AnimationType</span>.fade, validator<span class="pl-k">:</span> (v) { <span class="pl-k">if</span> (v.length <span class="pl-k"><</span> <span class="pl-c1">3</span>) { <span class="pl-k">return</span> <span class="pl-s">"I'm from validator"</span>; } <span class="pl-k">else</span> { <span class="pl-k">return</span> <span class="pl-c1">null</span>; } }, pinTheme<span class="pl-k">:</span> <span class="pl-c1">PinTheme</span>( shape<span class="pl-k">:</span> <span class="pl-c1">PinCodeFieldShape</span>.box, borderRadius<span class="pl-k">:</span> <span class="pl-c1">BorderRadius</span>.<span class="pl-en">circular</span>(<span class="pl-c1">5</span>), fieldHeight<span class="pl-k">:</span> <span class="pl-c1">60</span>, fieldWidth<span class="pl-k">:</span> <span class="pl-c1">50</span>, activeFillColor<span class="pl-k">:</span> hasError <span class="pl-k">?</span> <span class="pl-c1">Colors</span>.orange <span class="pl-k">:</span> <span class="pl-c1">Colors</span>.white, ), cursorColor<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.black, animationDuration<span class="pl-k">:</span> <span class="pl-c1">Duration</span>(milliseconds<span class="pl-k">:</span> <span class="pl-c1">300</span>), textStyle<span class="pl-k">:</span> <span class="pl-c1">TextStyle</span>(fontSize<span class="pl-k">:</span> <span class="pl-c1">20</span>, height<span class="pl-k">:</span> <span class="pl-c1">1.6</span>), backgroundColor<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.blue.shade50, enableActiveFill<span class="pl-k">:</span> <span class="pl-c1">true</span>, errorAnimationController<span class="pl-k">:</span> errorController, controller<span class="pl-k">:</span> textEditingController, keyboardType<span class="pl-k">:</span> <span class="pl-c1">TextInputType</span>.number, boxShadows<span class="pl-k">:</span> [ <span class="pl-c1">BoxShadow</span>( offset<span class="pl-k">:</span> <span class="pl-c1">Offset</span>(<span class="pl-c1">0</span>, <span class="pl-c1">1</span>), color<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.black12, blurRadius<span class="pl-k">:</span> <span class="pl-c1">10</span>, ) ], onCompleted<span class="pl-k">:</span> (v) { <span class="pl-en">print</span>(<span class="pl-s">"Completed"</span>); }, <span class="pl-c">// onTap: () {</span> <span class="pl-c">// print("Pressed");</span> <span class="pl-c">// },</span> onChanged<span class="pl-k">:</span> (value) { <span class="pl-en">print</span>(value); <span class="pl-en">setState</span>(() { currentText <span class="pl-k">=</span> value; }); }, beforeTextPaste<span class="pl-k">:</span> (text) { <span class="pl-en">print</span>(<span class="pl-s">"Allowing to paste $<span class="pl-v">text</span>"</span>); <span class="pl-c">//if you return true then it will show the paste confirmation dialog. Otherwise if false, then nothing will happen.</span> <span class="pl-c">//but you can show anything you want here, like your pop up saying wrong paste format or etc</span> <span class="pl-k">return</span> <span class="pl-c1">true</span>; }, )), ), <span class="pl-c1">Padding</span>( padding<span class="pl-k">:</span> <span class="pl-k">const</span> <span class="pl-c1">EdgeInsets</span>.<span class="pl-en">symmetric</span>(horizontal<span class="pl-k">:</span> <span class="pl-c1">30.0</span>), child<span class="pl-k">:</span> <span class="pl-c1">Text</span>( hasError <span class="pl-k">?</span> <span class="pl-s">"*Please fill up all the cells properly"</span> <span class="pl-k">:</span> <span class="pl-s">""</span>, style<span class="pl-k">:</span> <span class="pl-c1">TextStyle</span>( color<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.red, fontSize<span class="pl-k">:</span> <span class="pl-c1">12</span>, fontWeight<span class="pl-k">:</span> <span class="pl-c1">FontWeight</span>.w400), ), ), <span class="pl-c1">SizedBox</span>( height<span class="pl-k">:</span> <span class="pl-c1">20</span>, ), <span class="pl-c1">RichText</span>( textAlign<span class="pl-k">:</span> <span class="pl-c1">TextAlign</span>.center, text<span class="pl-k">:</span> <span class="pl-c1">TextSpan</span>( text<span class="pl-k">:</span> <span class="pl-s">"Didn't receive the code? "</span>, style<span class="pl-k">:</span> <span class="pl-c1">TextStyle</span>(color<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.black54, fontSize<span class="pl-k">:</span> <span class="pl-c1">15</span>), children<span class="pl-k">:</span> [ <span class="pl-c1">TextSpan</span>( text<span class="pl-k">:</span> <span class="pl-s">" RESEND"</span>, recognizer<span class="pl-k">:</span> onTapRecognizer, style<span class="pl-k">:</span> <span class="pl-c1">TextStyle</span>( color<span class="pl-k">:</span> <span class="pl-c1">Color</span>(<span class="pl-c1">0xFF91D3B3</span>), fontWeight<span class="pl-k">:</span> <span class="pl-c1">FontWeight</span>.bold, fontSize<span class="pl-k">:</span> <span class="pl-c1">16</span>)) ]), ), <span class="pl-c1">SizedBox</span>( height<span class="pl-k">:</span> <span class="pl-c1">14</span>, ), <span class="pl-c1">Container</span>( margin<span class="pl-k">:</span> <span class="pl-k">const</span> <span class="pl-c1">EdgeInsets</span>.<span class="pl-en">symmetric</span>(vertical<span class="pl-k">:</span> <span class="pl-c1">16.0</span>, horizontal<span class="pl-k">:</span> <span class="pl-c1">30</span>), child<span class="pl-k">:</span> <span class="pl-c1">ButtonTheme</span>( height<span class="pl-k">:</span> <span class="pl-c1">50</span>, child<span class="pl-k">:</span> <span class="pl-c1">FlatButton</span>( onPressed<span class="pl-k">:</span> () { formKey.currentState.<span class="pl-en">validate</span>(); <span class="pl-c">// conditions for validating</span> <span class="pl-k">if</span> (currentText.length <span class="pl-k">!=</span> <span class="pl-c1">6</span> <span class="pl-k">||</span> currentText <span class="pl-k">!=</span> <span class="pl-s">"towtow"</span>) { errorController.<span class="pl-en">add</span>(<span class="pl-c1">ErrorAnimationType</span> .shake); <span class="pl-c">// Triggering error shake animation</span> <span class="pl-en">setState</span>(() { hasError <span class="pl-k">=</span> <span class="pl-c1">true</span>; }); } <span class="pl-k">else</span> { <span class="pl-en">setState</span>(() { hasError <span class="pl-k">=</span> <span class="pl-c1">false</span>; scaffoldKey.currentState.<span class="pl-en">showSnackBar</span>(<span class="pl-c1">SnackBar</span>( content<span class="pl-k">:</span> <span class="pl-c1">Text</span>(<span class="pl-s">"Aye!!"</span>), duration<span class="pl-k">:</span> <span class="pl-c1">Duration</span>(seconds<span class="pl-k">:</span> <span class="pl-c1">2</span>), )); }); } }, child<span class="pl-k">:</span> <span class="pl-c1">Center</span>( child<span class="pl-k">:</span> <span class="pl-c1">Text</span>( <span class="pl-s">"VERIFY"</span>.<span class="pl-en">toUpperCase</span>(), style<span class="pl-k">:</span> <span class="pl-c1">TextStyle</span>( color<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.white, fontSize<span class="pl-k">:</span> <span class="pl-c1">18</span>, fontWeight<span class="pl-k">:</span> <span class="pl-c1">FontWeight</span>.bold), )), ), ), decoration<span class="pl-k">:</span> <span class="pl-c1">BoxDecoration</span>( color<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.green.shade300, borderRadius<span class="pl-k">:</span> <span class="pl-c1">BorderRadius</span>.<span class="pl-en">circular</span>(<span class="pl-c1">5</span>), boxShadow<span class="pl-k">:</span> [ <span class="pl-c1">BoxShadow</span>( color<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.green.shade200, offset<span class="pl-k">:</span> <span class="pl-c1">Offset</span>(<span class="pl-c1">1</span>, <span class="pl-k">-</span><span class="pl-c1">2</span>), blurRadius<span class="pl-k">:</span> <span class="pl-c1">5</span>), <span class="pl-c1">BoxShadow</span>( color<span class="pl-k">:</span> <span class="pl-c1">Colors</span>.green.shade200, offset<span class="pl-k">:</span> <span class="pl-c1">Offset</span>(<span class="pl-k">-</span><span class="pl-c1">1</span>, <span class="pl-c1">2</span>), blurRadius<span class="pl-k">:</span> <span class="pl-c1">5</span>) ]), ), <span class="pl-c1">SizedBox</span>( height<span class="pl-k">:</span> <span class="pl-c1">16</span>, ), <span class="pl-c1">Row</span>( mainAxisAlignment<span class="pl-k">:</span> <span class="pl-c1">MainAxisAlignment</span>.center, children<span class="pl-k">:</span> <span class="pl-k"><</span><span class="pl-c1">Widget</span><span class="pl-k">></span>[ <span class="pl-c1">FlatButton</span>( child<span class="pl-k">:</span> <span class="pl-c1">Text</span>(<span class="pl-s">"Clear"</span>), onPressed<span class="pl-k">:</span> () { textEditingController.<span class="pl-en">clear</span>(); }, ), <span class="pl-c1">FlatButton</span>( child<span class="pl-k">:</span> <span class="pl-c1">Text</span>(<span class="pl-s">"Set Text"</span>), onPressed<span class="pl-k">:</span> () { textEditingController.text <span class="pl-k">=</span> <span class="pl-s">"123456"</span>; }, ), ], ) ], ), ), ), ); } }</pre></div> </article></div></div></div></div></div>   <script type="application/json" id="__PRIMER_DATA_:R0:__">{"resolvedServerColorMode":"day"}</script></div> </react-partial> <input type="hidden" data-csrf="true" value="q9B0fE7+OJRzvZNVLgQxpwj8U+yBHW6+StToPfWYKfLDcsQAOFmdydSV/NUvKOVNSFxCpTmPTzVWJdRZSybe6Q==" /> </div> <div data-view-component="true" class="Layout-sidebar"> <div class="BorderGrid about-margin" data-pjax> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <div class="hide-sm hide-md"> <h2 class="mb-3 h4">About</h2> <p class="f4 my-3"> A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs 🤓🤓 </p> <div class="my-3 d-flex flex-items-center"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link flex-shrink-0 mr-2"> <path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path> </svg> <span class="flex-auto min-width-0 css-truncate css-truncate-target width-fit"> <a title="https://pub.dev/packages/pin_code_fields" role="link" target="_blank" rel="noopener noreferrer nofollow" class="text-bold" href="https://pub.dev/packages/pin_code_fields">pub.dev/packages/pin_code_fields</a> </span> </div> <h3 class="sr-only">Topics</h3> <div class="my-3"> <div class="f6"> <a data-ga-click="Topic, repository page" data-octo-click="topic_click" data-octo-dimensions="topic:android" href="/topics/android" title="Topic: android" data-view-component="true" class="topic-tag topic-tag-link"> android </a> <a data-ga-click="Topic, repository page" data-octo-click="topic_click" data-octo-dimensions="topic:dart" href="/topics/dart" title="Topic: dart" data-view-component="true" class="topic-tag topic-tag-link"> dart </a> <a data-ga-click="Topic, repository page" data-octo-click="topic_click" data-octo-dimensions="topic:ios" href="/topics/ios" title="Topic: ios" data-view-component="true" class="topic-tag topic-tag-link"> ios </a> <a data-ga-click="Topic, repository page" data-octo-click="topic_click" data-octo-dimensions="topic:otp" href="/topics/otp" title="Topic: otp" data-view-component="true" class="topic-tag topic-tag-link"> otp </a> <a data-ga-click="Topic, repository page" data-octo-click="topic_click" data-octo-dimensions="topic:shapes" href="/topics/shapes" title="Topic: shapes" data-view-component="true" class="topic-tag topic-tag-link"> shapes </a> <a data-ga-click="Topic, repository page" data-octo-click="topic_click" data-octo-dimensions="topic:animation" href="/topics/animation" title="Topic: animation" data-view-component="true" class="topic-tag topic-tag-link"> animation </a> <a data-ga-click="Topic, repository page" data-octo-click="topic_click" data-octo-dimensions="topic:flutter" href="/topics/flutter" title="Topic: flutter" data-view-component="true" class="topic-tag topic-tag-link"> flutter </a> <a data-ga-click="Topic, repository page" data-octo-click="topic_click" data-octo-dimensions="topic:pin" href="/topics/pin" title="Topic: pin" data-view-component="true" class="topic-tag topic-tag-link"> pin </a> </div> </div> <h3 class="sr-only">Resources</h3> <div class="mt-2"> <a class="Link--muted" data-analytics-event="{"category":"Repository Overview","action":"click","label":"location:sidebar;file:readme"}" href="#readme-ov-file"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-book mr-2"> <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> Readme </a> </div> <h3 class="sr-only">License</h3> <div class="mt-2"> <a href="/adar2378/pin_code_fields/blob/master/LICENSE" class="Link--muted" data-analytics-event="{"category":"Repository Overview","action":"click","label":"location:sidebar;file:license"}" > <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-law mr-2"> <path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path> </svg> MIT license </a> </div> <h3 class="sr-only">Code of conduct</h3> <div class="mt-2"> <a href="#coc-ov-file" class="Link--muted" data-analytics-event="{"category":"Repository Overview","action":"click","label":"location:sidebar;file:code of conduct"}" > <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-of-conduct mr-2"> <path d="M8.048 2.241c.964-.709 2.079-1.238 3.325-1.241a4.616 4.616 0 0 1 3.282 1.355c.41.408.757.86.996 1.428.238.568.348 1.206.347 1.968 0 2.193-1.505 4.254-3.081 5.862-1.496 1.526-3.213 2.796-4.249 3.563l-.22.163a.749.749 0 0 1-.895 0l-.221-.163c-1.036-.767-2.753-2.037-4.249-3.563C1.51 10.008.007 7.952.002 5.762a4.614 4.614 0 0 1 1.353-3.407C3.123.585 6.223.537 8.048 2.24Zm-1.153.983c-1.25-1.033-3.321-.967-4.48.191a3.115 3.115 0 0 0-.913 2.335c0 1.556 1.109 3.24 2.652 4.813C5.463 11.898 6.96 13.032 8 13.805c.353-.262.758-.565 1.191-.905l-1.326-1.223a.75.75 0 0 1 1.018-1.102l1.48 1.366c.328-.281.659-.577.984-.887L9.99 9.802a.75.75 0 1 1 1.019-1.103l1.384 1.28c.295-.329.566-.661.81-.995L12.92 8.7l-1.167-1.168c-.674-.671-1.78-.664-2.474.03-.268.269-.538.537-.802.797-.893.882-2.319.843-3.185-.032-.346-.35-.693-.697-1.043-1.047a.75.75 0 0 1-.04-1.016c.162-.191.336-.401.52-.623.62-.748 1.356-1.637 2.166-2.417Zm7.112 4.442c.313-.65.491-1.293.491-1.916v-.001c0-.614-.088-1.045-.23-1.385-.143-.339-.357-.633-.673-.949a3.111 3.111 0 0 0-2.218-.915c-1.092.003-2.165.627-3.226 1.602-.823.755-1.554 1.637-2.228 2.45l-.127.154.562.566a.755.755 0 0 0 1.066.02l.794-.79c1.258-1.258 3.312-1.31 4.594-.032.396.394.792.791 1.173 1.173Z"></path> </svg> Code of conduct </a> </div> <include-fragment src="/adar2378/pin_code_fields/hovercards/citation/sidebar_partial"> </include-fragment> <div class="mt-2"> <a href="/adar2378/pin_code_fields/activity" data-view-component="true" class="Link Link--muted"> <svg text="gray" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pulse mr-2"> <path d="M6 2c.306 0 .582.187.696.471L10 10.731l1.304-3.26A.751.751 0 0 1 12 7h3.25a.75.75 0 0 1 0 1.5h-2.742l-1.812 4.528a.751.751 0 0 1-1.392 0L6 4.77 4.696 8.03A.75.75 0 0 1 4 8.5H.75a.75.75 0 0 1 0-1.5h2.742l1.812-4.529A.751.751 0 0 1 6 2Z"></path> </svg> <span class="color-fg-muted">Activity</span> </a> </div> <h3 class="sr-only">Stars</h3> <div class="mt-2"> <a href="/adar2378/pin_code_fields/stargazers" data-view-component="true" class="Link Link--muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star 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> <strong>705</strong> stars </a> </div> <h3 class="sr-only">Watchers</h3> <div class="mt-2"> <a href="/adar2378/pin_code_fields/watchers" data-view-component="true" class="Link Link--muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-eye mr-2"> <path d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"></path> </svg> <strong>10</strong> watching </a> </div> <h3 class="sr-only">Forks</h3> <div class="mt-2"> <a href="/adar2378/pin_code_fields/forks" data-view-component="true" class="Link Link--muted"> <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> <strong>344</strong> forks </a> </div> <div class="mt-2"> <a class="Link--muted" href="/contact/report-content?content_url=https%3A%2F%2Fgithub.com%2Fadar2378%2Fpin_code_fields&report=adar2378+%28user%29"> Report repository </a> </div> </div> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame"> <a href="/adar2378/pin_code_fields/releases" data-view-component="true" class="Link--primary no-underline Link"> Releases <span title="14" data-view-component="true" class="Counter">14</span> </a></h2> <a class="Link--primary d-flex no-underline" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" href="/adar2378/pin_code_fields/releases/tag/V7.3.0"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-tag flex-shrink-0 mt-1 color-fg-success"> <path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path> </svg> <div class="ml-2 min-width-0"> <div class="d-flex"> <span class="css-truncate css-truncate-target text-bold mr-2" style="max-width: none;">Version 7.3.0</span> <span title="Label: Latest" data-view-component="true" class="Label Label--success flex-shrink-0"> Latest </span> </div> <div class="text-small color-fg-muted"><relative-time datetime="2021-07-28T05:07:52Z" class="no-wrap">Jul 28, 2021</relative-time></div> </div> </a> <div data-view-component="true" class="mt-3"> <a text="small" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" href="/adar2378/pin_code_fields/releases" data-view-component="true" class="Link"> + 13 releases </a></div> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3"> <a href="/users/adar2378/packages?repo_name=pin_code_fields" data-view-component="true" class="Link--primary no-underline Link d-flex flex-items-center"> Packages <span title="0" hidden="hidden" data-view-component="true" class="Counter ml-1">0</span> </a></h2> <div class="text-small color-fg-muted" > No packages published <br> </div> </div> </div> <div class="BorderGrid-row" hidden> <div class="BorderGrid-cell"> <include-fragment src="/adar2378/pin_code_fields/used_by_list" accept="text/fragment+html"> </include-fragment> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3"> <a href="/adar2378/pin_code_fields/graphs/contributors" data-view-component="true" class="Link--primary no-underline Link d-flex flex-items-center"> Contributors <span title="42" data-view-component="true" class="Counter ml-1">42</span> </a></h2> <ul class="list-style-none d-flex flex-wrap mb-n2"> <li class="mb-2 mr-2" > <a href="https://github.com/adar2378" class="" data-hovercard-type="user" data-hovercard-url="/users/adar2378/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/8059258?s=64&v=4" alt="@adar2378" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/darkang3lz92" class="" data-hovercard-type="user" data-hovercard-url="/users/darkang3lz92/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/33158127?s=64&v=4" alt="@darkang3lz92" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/emmanuelvlad" class="" data-hovercard-type="user" data-hovercard-url="/users/emmanuelvlad/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/21370666?s=64&v=4" alt="@emmanuelvlad" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/ened" class="" data-hovercard-type="user" data-hovercard-url="/users/ened/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/269860?s=64&v=4" alt="@ened" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/OutdatedGuy" class="" data-hovercard-type="user" data-hovercard-url="/users/OutdatedGuy/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/74326345?s=64&v=4" alt="@OutdatedGuy" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/tgbarker" class="" data-hovercard-type="user" data-hovercard-url="/users/tgbarker/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/2621350?s=64&v=4" alt="@tgbarker" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/serendipity1004" class="" data-hovercard-type="user" data-hovercard-url="/users/serendipity1004/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/20388249?s=64&v=4" alt="@serendipity1004" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/ItzNotABug" class="" data-hovercard-type="user" data-hovercard-url="/users/ItzNotABug/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/20625965?s=64&v=4" alt="@ItzNotABug" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/Add00w" class="" data-hovercard-type="user" data-hovercard-url="/users/Add00w/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/35359329?s=64&v=4" alt="@Add00w" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/dhruvanbhalara" class="" data-hovercard-type="user" data-hovercard-url="/users/dhruvanbhalara/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/53393418?s=64&v=4" alt="@dhruvanbhalara" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/mohak852" class="" data-hovercard-type="user" data-hovercard-url="/users/mohak852/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/58987025?s=64&v=4" alt="@mohak852" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/superakabo" class="" data-hovercard-type="user" data-hovercard-url="/users/superakabo/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/11073056?s=64&v=4" alt="@superakabo" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/LulleBulle" class="" data-hovercard-type="user" data-hovercard-url="/users/LulleBulle/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/11162271?s=64&v=4" alt="@LulleBulle" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> <li class="mb-2 mr-2" > <a href="https://github.com/karabanovbs" class="" data-hovercard-type="user" data-hovercard-url="/users/karabanovbs/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" > <img src="https://avatars.githubusercontent.com/u/14288495?s=64&v=4" alt="@karabanovbs" size="32" height="32" width="32" data-view-component="true" class="avatar circle" /> </a> </li> </ul> <div data-view-component="true" class="mt-3"> <a text="small" href="/adar2378/pin_code_fields/graphs/contributors" data-view-component="true" class="Link--inTextBlock Link"> + 28 contributors </a></div> </div> </div> <div class="BorderGrid-row"> <div class="BorderGrid-cell"> <h2 class="h4 mb-3">Languages</h2> <div class="mb-2"> <span data-view-component="true" class="Progress"> <span style="background-color:#00B4AB !important;;width: 65.5%;" itemprop="keywords" aria-label="Dart 65.5" data-view-component="true" class="Progress-item color-bg-success-emphasis"></span> <span style="background-color:#f34b7d !important;;width: 19.2%;" itemprop="keywords" aria-label="C++ 19.2" data-view-component="true" class="Progress-item color-bg-success-emphasis"></span> <span style="background-color:#DA3434 !important;;width: 9.4%;" itemprop="keywords" aria-label="CMake 9.4" data-view-component="true" class="Progress-item color-bg-success-emphasis"></span> <span style="background-color:#e34c26 !important;;width: 4.5%;" itemprop="keywords" aria-label="HTML 4.5" data-view-component="true" class="Progress-item color-bg-success-emphasis"></span> <span style="background-color:#555555 !important;;width: 0.8%;" itemprop="keywords" aria-label="C 0.8" data-view-component="true" class="Progress-item color-bg-success-emphasis"></span> <span style="background-color:#F05138 !important;;width: 0.5%;" itemprop="keywords" aria-label="Swift 0.5" data-view-component="true" class="Progress-item color-bg-success-emphasis"></span> <span style="background-color:#ededed !important;;width: 0.1%;" itemprop="keywords" aria-label="Other 0.1" data-view-component="true" class="Progress-item color-bg-success-emphasis"></span> </span></div> <ul class="list-style-none"> <li class="d-inline"> <a class="d-inline-flex flex-items-center flex-nowrap Link--secondary no-underline text-small mr-3" href="/adar2378/pin_code_fields/search?l=dart" data-ga-click="Repository, language stats search click, location:repo overview"> <svg style="color:#00B4AB;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill mr-2"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> <span class="color-fg-default text-bold mr-1">Dart</span> <span>65.5%</span> </a> </li> <li class="d-inline"> <a class="d-inline-flex flex-items-center flex-nowrap Link--secondary no-underline text-small mr-3" href="/adar2378/pin_code_fields/search?l=c%2B%2B" data-ga-click="Repository, language stats search click, location:repo overview"> <svg style="color:#f34b7d;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill mr-2"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> <span class="color-fg-default text-bold mr-1">C++</span> <span>19.2%</span> </a> </li> <li class="d-inline"> <a class="d-inline-flex flex-items-center flex-nowrap Link--secondary no-underline text-small mr-3" href="/adar2378/pin_code_fields/search?l=cmake" data-ga-click="Repository, language stats search click, location:repo overview"> <svg style="color:#DA3434;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill mr-2"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> <span class="color-fg-default text-bold mr-1">CMake</span> <span>9.4%</span> </a> </li> <li class="d-inline"> <a class="d-inline-flex flex-items-center flex-nowrap Link--secondary no-underline text-small mr-3" href="/adar2378/pin_code_fields/search?l=html" data-ga-click="Repository, language stats search click, location:repo overview"> <svg style="color:#e34c26;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill mr-2"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> <span class="color-fg-default text-bold mr-1">HTML</span> <span>4.5%</span> </a> </li> <li class="d-inline"> <a class="d-inline-flex flex-items-center flex-nowrap Link--secondary no-underline text-small mr-3" href="/adar2378/pin_code_fields/search?l=c" data-ga-click="Repository, language stats search click, location:repo overview"> <svg style="color:#555555;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill mr-2"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> <span class="color-fg-default text-bold mr-1">C</span> <span>0.8%</span> </a> </li> <li class="d-inline"> <a class="d-inline-flex flex-items-center flex-nowrap Link--secondary no-underline text-small mr-3" href="/adar2378/pin_code_fields/search?l=swift" data-ga-click="Repository, language stats search click, location:repo overview"> <svg style="color:#F05138;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill mr-2"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> <span class="color-fg-default text-bold mr-1">Swift</span> <span>0.5%</span> </a> </li> <li class="d-inline"> <span class="d-inline-flex flex-items-center flex-nowrap text-small mr-3"> <svg style="color:#ededed;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill mr-2"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> <span class="color-fg-default text-bold mr-1">Other</span> <span>0.1%</span> </span> </li> </ul> </div> </div> </div> </div> </div></div> </div> </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>