From 56cf16d4d383aa6dabb7462bdc0fdb3a97609c64 Mon Sep 17 00:00:00 2001 From: mfranzke Date: Fri, 6 Oct 2023 05:19:01 +0000 Subject: [PATCH] deploy: 96674b1b132dc251db4af9fc1d8eb41fac7bf4a5 --- review/1654-focus-state-dev-research/404.html | 1 + .../XxNpdvEhtSDcE2ZbgB7Uo/_buildManifest.js | 1 + .../XxNpdvEhtSDcE2ZbgB7Uo/_ssgManifest.js | 1 + .../static/chunks/1028-cb304ad622d208e6.js | 1 + .../static/chunks/1142-931f5e9813b1ff4e.js | 1 + .../static/chunks/1295-fcc68c6157d8e000.js | 1 + .../static/chunks/1346-8b1a4c21de01a23c.js | 1 + .../static/chunks/1390-a1d6d4f8d8ca3d01.js | 1 + .../static/chunks/1454-5ad81f21ea7c2236.js | 1 + .../static/chunks/1500-e2260931ddba758a.js | 1 + .../static/chunks/1520-9e773e640442a949.js | 1 + .../static/chunks/1871-76c125bc3774607c.js | 1 + .../static/chunks/2005-4e7ffd0ced7eb1ab.js | 1 + .../static/chunks/2087-1fb63d3639216d70.js | 1 + .../static/chunks/2158-69318b6de42b4b92.js | 1 + .../static/chunks/2233-a1920f23cfb178b1.js | 1 + .../static/chunks/2273-dbce26176a66431b.js | 1 + .../static/chunks/2306-fb25f03b8d6e05d4.js | 1 + .../static/chunks/2434-f0edeb25b43ae1e2.js | 1 + .../static/chunks/2454-0c5cf4128abde3a6.js | 1 + .../static/chunks/2482-d0b08b21a4659a27.js | 1 + .../static/chunks/256-92cb1f9030c8e315.js | 1 + .../static/chunks/2588-1a3cb97fb3627ad5.js | 1 + .../static/chunks/2647-95906a56f59a9371.js | 1 + .../static/chunks/2666-4dac242a69d2a7cf.js | 1 + .../static/chunks/2690-c5f5302d785c9b3f.js | 1 + .../static/chunks/2770-0329c515cff5ac37.js | 1 + .../static/chunks/2818-8be41e8134cac5e6.js | 1 + .../static/chunks/290-573cbd06d629f0af.js | 1 + .../static/chunks/2954-378c1a3b64b39302.js | 1 + .../static/chunks/2992-ae645d58bb3ae82c.js | 1 + .../static/chunks/3017-e011d1e4b9527cd4.js | 1 + .../static/chunks/3142-34398fa96f6a2011.js | 1 + .../static/chunks/3189-4595f860ed305580.js | 1 + .../static/chunks/3191-3983e743ca40e7b9.js | 1 + .../static/chunks/3332-57d1cec14bf5e6d4.js | 1 + .../static/chunks/3458-e31edabe81dad7ae.js | 1 + .../static/chunks/3495-e298f53e70e70fe5.js | 1 + .../static/chunks/3512-018eb94dfa2a1a72.js | 1 + .../static/chunks/3570-dffb874b9103a761.js | 1 + .../static/chunks/3585-20fa366217c710af.js | 1 + .../static/chunks/36-10589576abcde7c5.js | 1 + .../static/chunks/3630-9a009d0fd190eae8.js | 1 + .../static/chunks/364-e6c0b80cd783a9e3.js | 1 + .../static/chunks/365-5fa003555de1c83e.js | 1 + .../static/chunks/3686-521b9c112066e016.js | 1 + .../static/chunks/3921-b3de3212e4a58127.js | 1 + .../static/chunks/3937-fd868b780783d2d4.js | 1 + .../static/chunks/3956-f4e7eab0f3e2c560.js | 1 + .../static/chunks/3990-6650316443206374.js | 1 + .../static/chunks/4105-179626c80997128b.js | 1 + .../static/chunks/4202-0b5cd18734d96c36.js | 1 + .../static/chunks/4375-38c8fe05e0f3891f.js | 1 + .../static/chunks/4383-776a493549f60f30.js | 1 + .../static/chunks/4469-96db0b2f078c40ff.js | 1 + .../static/chunks/4781-93e1f9e5d1723c4e.js | 1 + .../static/chunks/4813-ff68c591ac3c0a58.js | 1 + .../static/chunks/4847-83ac30d6ad040030.js | 1 + .../static/chunks/4948-b20f12a47a775fdb.js | 1 + .../static/chunks/4958-a1052e27ee967c59.js | 1 + .../static/chunks/500-ede2bbeb7ee081c7.js | 1 + .../static/chunks/5028-f5f57e650f4e4d80.js | 1 + .../static/chunks/5133-66cb887bdebf07f7.js | 1 + .../static/chunks/5168-3ede3b980e46aeee.js | 1 + .../static/chunks/5206-fa6d0e4ffafd9bb8.js | 1 + .../static/chunks/5292-af62fb66e5d94646.js | 1 + .../static/chunks/530-5b6d3347d0ea2337.js | 1 + .../static/chunks/5306-57eb6f156ca3fcaa.js | 1 + .../static/chunks/5316-4911f26baef7cded.js | 1 + .../static/chunks/5407-513c7acef7d39a20.js | 1 + .../static/chunks/5479-69850a626ec152b0.js | 1 + .../static/chunks/5691-37b13098a8e1ed54.js | 1 + .../static/chunks/5778-d012ed2fac07ab65.js | 1 + .../static/chunks/5805-2d0ba79bd51b5804.js | 1 + .../static/chunks/5946-c80632dcd9559718.js | 1 + .../static/chunks/5994-573ccf9ac18cfff9.js | 1 + .../static/chunks/6006-db6f7796350b87a4.js | 1 + .../static/chunks/6087-8bd460c20170c6d3.js | 1 + .../static/chunks/6151-6498d39158104056.js | 1 + .../static/chunks/6299-9b02b328895dae9e.js | 1 + .../static/chunks/6303-b48b162ba20d677a.js | 1 + .../static/chunks/641-b4a41c2d89dd36e1.js | 1 + .../static/chunks/6484-4f610dd78196675a.js | 1 + .../chunks/65a8b803-86ff7f4c730af09b.js | 1 + .../static/chunks/6673-d1b7b628fc31af7e.js | 1 + .../static/chunks/6675-b54baf9ee7aa462c.js | 1 + .../static/chunks/676-f328c6f01e4d7ba0.js | 1 + .../static/chunks/6796-32bb8b136c52a92a.js | 1 + .../static/chunks/6841-18211fd95a7af01e.js | 1 + .../static/chunks/6866-2c8ab65524758b11.js | 1 + .../static/chunks/7047-6554644a9a59d0eb.js | 1 + .../static/chunks/7092-fc3d75d4db59f91c.js | 1 + .../static/chunks/7134-8510f0641993dd0c.js | 1 + .../static/chunks/7284-77d36e0a37494b96.js | 1 + .../static/chunks/7299-895f3c9848b94ab8.js | 1 + .../static/chunks/7312-0e7357d235722e07.js | 1 + .../static/chunks/7376-e311d044f6092e90.js | 1 + .../static/chunks/7406-8fb6fb97c0f06b34.js | 1 + .../static/chunks/7506-ab180532863620a2.js | 1 + .../static/chunks/7588-b123dda5cad0f051.js | 1 + .../static/chunks/7628-66eafa40b3e1df10.js | 1 + .../static/chunks/7682-d1e1f1dfd3b59ff9.js | 1 + .../static/chunks/7789-c36eb3a6e7e16fb8.js | 1 + .../static/chunks/7905-a9b184c4487fb3c1.js | 1 + .../static/chunks/7916-3a152626be1afa25.js | 1 + .../static/chunks/7992-0ac8b8b0b156618d.js | 1 + .../static/chunks/8016-f4668058c2aef291.js | 1 + .../static/chunks/8080-2fa73a955e575ba1.js | 1 + .../static/chunks/8097-9f3f53ec30c02e3f.js | 1 + .../static/chunks/8120-c04403ca4fc8e723.js | 1 + .../static/chunks/8158-1fc038bb9ee2a586.js | 1 + .../static/chunks/8260-00ec3abc7ecd5f5c.js | 1 + .../static/chunks/8265-587bdcd1995a79b0.js | 1 + .../static/chunks/827-58e59c8954843e31.js | 1 + .../static/chunks/8302-377ece682c92b1a8.js | 1 + .../static/chunks/8448-515ceaff0ab1e4ab.js | 1 + .../static/chunks/8454-4faeffc34d883697.js | 1 + .../static/chunks/8465-9cfb4feb2c81c09c.js | 1 + .../static/chunks/852-f66c6eac087cfcf4.js | 1 + .../static/chunks/8556-1ec3aa5caec80f57.js | 1 + .../static/chunks/8563-706ac4dab823c690.js | 1 + .../static/chunks/8621-abe321fafaed44d6.js | 1 + .../static/chunks/869-23bb0610190e046e.js | 1 + .../static/chunks/8834-1c3fb34b58f86bfe.js | 6 + .../static/chunks/8951-5f201649c30dd9af.js | 1 + .../static/chunks/903-75bd248af98f3090.js | 1 + .../static/chunks/9053-9d4204607a076f85.js | 1 + .../static/chunks/9122-e6b4b77385729f74.js | 1 + .../static/chunks/9167-3791293dd6af7aa8.js | 1 + .../static/chunks/9180-3fc492d9dd745a47.js | 1 + .../static/chunks/9189-427f185900a65678.js | 1 + .../static/chunks/9235-b7c8ae4ab61b64ac.js | 1 + .../static/chunks/9310-3a42359dfca6b6b3.js | 1 + .../static/chunks/9313-07fa25e775e474d8.js | 1 + .../static/chunks/9388-95c661363f4785a8.js | 1 + .../static/chunks/9466-4dd723837d501e55.js | 1 + .../static/chunks/9467-d91e6cdb2dc66553.js | 1 + .../static/chunks/951-d79239227e049007.js | 1 + .../static/chunks/9596-43268ade4b975477.js | 1 + .../static/chunks/9620-7afe8cf6b23ae4fb.js | 1 + .../static/chunks/9793-530c0cd7de306ce2.js | 1 + .../static/chunks/9864-f0000dff20dd9427.js | 1 + .../static/chunks/9931-3dff82448a5dbe7e.js | 1 + .../static/chunks/9977-d9ff0bbcc1f9e07f.js | 1 + .../chunks/framework-f211a704e11e65a7.js | 33 + .../static/chunks/main-f522407335e857b1.js | 1 + .../chunks/pages/404-57ad5664cd6f1fb4.js | 1 + .../chunks/pages/_app-500fa1e3d8bab734.js | 1 + .../chunks/pages/_error-76385da1cf67b566.js | 1 + .../chunks/pages/base64-0a24a67edc9a9825.js | 1 + .../components/accordion-61ad012cddee8c88.js | 1 + .../accordion-item-3f157c3cb38975e2.js | 1 + .../code/States-45345919b355d687.js | 1 + .../code/Tonality-e52c4ddf1cfd91f8.js | 1 + .../docs/Angular-b67428925785fa30.js | 1 + .../docs/HTML-302de585746bd495.js | 1 + .../docs/Migration-fc7746b489c12584.js | 1 + .../docs/React-5951447756049ec9.js | 1 + .../docs/Vue-4cb40d24dbc5cc11.js | 1 + .../examples-41a1d465f1b87720.js | 1 + .../how-to-use-f743bad6290181f6.js | 1 + .../migration-bb8be5d6420bea42.js | 1 + .../overview-271d833f954014ad.js | 1 + .../properties-ad3fff579fc16868.js | 1 + .../code/Behaviour-aac8a347ea68c0df.js | 1 + .../code/Tonality-3e68e33f53080faa.js | 1 + .../docs/Angular-e589419df764c599.js | 1 + .../accordion/docs/HTML-e62f98c211c3d1b0.js | 1 + .../docs/Migration-eabbd267b0f0b1bc.js | 1 + .../accordion/docs/React-5c20f180641c51de.js | 1 + .../accordion/docs/Vue-15475bf3d2aea62b.js | 1 + .../accordion/examples-29a37fea75cea946.js | 1 + .../accordion/how-to-use-d6a180e4cb365670.js | 1 + .../accordion/migration-dfe8636cee60b1ea.js | 1 + .../accordion/overview-e825200fd9cd8c7d.js | 1 + .../accordion/properties-8b2a7bfbb57ea1f1.js | 1 + .../components/alert-bba909b1003e81c3.js | 1 + .../alert/code/Behaviour-4cb9fb4c162ebe4f.js | 1 + .../alert/code/Content-8300b862624af36b.js | 1 + .../alert/code/Tonality-830b31735b013fd6.js | 1 + .../alert/code/Type-24ee74aa2ace6868.js | 1 + .../alert/code/Variant-79d7873ca40ac4b9.js | 1 + .../alert/docs/Angular-e910ecd25884f259.js | 1 + .../alert/docs/HTML-8647e1c2e8031567.js | 1 + .../alert/docs/Migration-7d2d7faf8152b4f3.js | 1 + .../alert/docs/React-79ed29911ec85057.js | 1 + .../alert/docs/Vue-7fef7ffed06872c8.js | 1 + .../alert/examples-b4f56ec57a024f15.js | 1 + .../alert/how-to-use-37ab18d36348bfea.js | 1 + .../alert/migration-8b97023fbaaba3fd.js | 1 + .../alert/overview-2ecc4791181ae44d.js | 1 + .../alert/properties-327f4af558f9931a.js | 1 + .../components/badge-6424e353decd5e52.js | 1 + .../badge/code/Content-e60331792e3f9a14.js | 1 + .../badge/code/Emphasis-32af294259af3a70.js | 1 + .../badge/code/Examples-e3d2029cfd3bbdd4.js | 1 + .../badge/code/Placement-fd8febeccd752b38.js | 1 + .../badge/code/Size-dbda1230eacb6642.js | 1 + .../badge/code/Tonality-672f99e244300ffd.js | 1 + .../badge/code/Variant-ea69409b62bc3562.js | 1 + .../badge/docs/Angular-0c522ad963f4a88a.js | 1 + .../badge/docs/HTML-943634ad1af85e7a.js | 1 + .../badge/docs/Migration-076f9bdbc4a8bc82.js | 1 + .../badge/docs/React-bb6195cfcf7a1fac.js | 1 + .../badge/docs/Vue-978de1d7cae53708.js | 1 + .../badge/examples-9adf249661b82e00.js | 1 + .../badge/how-to-use-03a434975d67642a.js | 1 + .../badge/migration-6281764dddf0e9b9.js | 1 + .../badge/overview-af7ec9320a5cefc9.js | 1 + .../badge/properties-72e952d0b0583e98.js | 1 + .../brand/docs/Angular-32af9d7ccfda4947.js | 1 + .../brand/docs/HTML-2b3737aaa9906a82.js | 1 + .../brand/docs/React-0565d9f03f3f88a4.js | 1 + .../brand/docs/Vue-f949fdc4b3ec1063.js | 1 + .../brand/examples-ae3a198c20c3497e.js | 1 + .../brand/how-to-use-c60f0f8e7be178f5.js | 1 + .../brand/migration-76800f2b54c7bee0.js | 1 + .../brand/properties-9b67eb992123814b.js | 1 + .../components/button-de486a878566ff49.js | 1 + .../button/code/Behaviour-ef52979d096c0642.js | 1 + .../button/code/Content-ccc98682eb1dc681.js | 1 + .../button/code/Size-1cc25c0402df6b30.js | 1 + .../button/code/State-7253b7d3124bd4df.js | 1 + .../button/code/Tonality-d390d8a4c375335c.js | 1 + .../button/code/Variant-e1ac05b194a246c4.js | 1 + .../button/docs/Angular-ab1914d21de74b9a.js | 1 + .../button/docs/HTML-1b29b460c0a7dbbb.js | 1 + .../button/docs/Migration-baee808c76f6830e.js | 1 + .../button/docs/React-03c9838d2b54d7b3.js | 1 + .../button/docs/Vue-d032c4e600be7e74.js | 1 + .../button/examples-0e1afb9c90bc36ef.js | 1 + .../button/how-to-use-b4a52a0ece7046a8.js | 1 + .../button/migration-6716695f09ef6cf2.js | 1 + .../button/overview-357fb8ddd964a29e.js | 1 + .../button/properties-40b900f693552a14.js | 1 + .../pages/components/card-4a2f36f2f6f52a31.js | 1 + .../code/ColorVariant-50b04b4a51ae7e01.js | 1 + .../card/code/Spacing-77c8411a74821cca.js | 1 + .../card/code/Tonality-3c19b2d93de03154.js | 1 + .../card/code/Variant-1a00d7d00fe16e52.js | 1 + .../card/docs/Angular-6b158d1b5caedda8.js | 1 + .../card/docs/HTML-0cb180c8fd91a6c9.js | 1 + .../card/docs/Migration-c35463273c88ebe9.js | 1 + .../card/docs/React-e350787a3c55cf46.js | 1 + .../card/docs/Vue-77130bd40e1e5951.js | 1 + .../card/examples-8fcdde24591fc5bb.js | 1 + .../card/how-to-use-60501434891af926.js | 1 + .../card/migration-c09db3d3415f927d.js | 1 + .../card/overview-f9f42578d8bef23a.js | 1 + .../card/properties-84841a136fb348d2.js | 1 + .../components/checkbox-7cf29d38e660bbe9.js | 1 + .../checkbox/code/Size-24cdab5bf07cb3c5.js | 1 + .../checkbox/code/States-c309a25cd8e66628.js | 1 + .../code/Tonality-90a7bfd7ce1038b7.js | 1 + .../checkbox/docs/Angular-06bd11e30923679a.js | 1 + .../checkbox/docs/HTML-d020242325cb6fbf.js | 1 + .../checkbox/docs/React-c3f65f2f857985bd.js | 1 + .../checkbox/docs/Vue-8778690ca9617948.js | 1 + .../checkbox/examples-3d6528069dafe85f.js | 1 + .../checkbox/how-to-use-64bd6ae01a269f71.js | 1 + .../checkbox/migration-5ff177f5d3c3ab57.js | 1 + .../checkbox/overview-4c9617e334d4d8ee.js | 1 + .../checkbox/properties-0dccc243a10fe918.js | 1 + .../docs/Angular-71e1023526bd140f.js | 1 + .../code-docs/docs/HTML-5abaea10a0bd00a8.js | 1 + .../code-docs/docs/React-8c331e3cad37caa2.js | 1 + .../code-docs/docs/Vue-bf4ee430eb9009dc.js | 1 + .../code-docs/examples-79d1f398ad392b39.js | 1 + .../code-docs/how-to-use-da3a67b826c15d23.js | 1 + .../code-docs/migration-ee9c510ba94cfc94.js | 1 + .../code-docs/properties-8ce9c141603d242f.js | 1 + .../components/divider-c8235e869d79bf5f.js | 1 + .../divider/code/Emphasis-5b9b6e46b0f591f7.js | 1 + .../divider/code/Tonality-f9eef91ad18f3cbc.js | 1 + .../divider/code/Variant-3553943058fb508e.js | 1 + .../divider/docs/Angular-6c20f791bfd600a7.js | 1 + .../divider/docs/HTML-d3ffb96167d9bd5a.js | 1 + .../docs/Migration-5b4e3759897248e2.js | 1 + .../divider/docs/React-b28ce4e260cb0e8e.js | 1 + .../divider/docs/Vue-5bdd1fe5f7fcbab0.js | 1 + .../divider/examples-5fc88a569f48917c.js | 1 + .../divider/how-to-use-f0425923311cd376.js | 1 + .../divider/migration-78b1b6d48cf47755.js | 1 + .../divider/overview-643e20b7f00346ba.js | 1 + .../divider/properties-b2336ee326c2a258.js | 1 + .../components/drawer-ec628b84a1c271b3.js | 1 + .../drawer/code/Backdrop-218664f2f5a8e269.js | 1 + .../code/Directions-6005a211d83e18ec.js | 1 + .../drawer/code/Rounded-dac73f6402f672d5.js | 1 + .../drawer/code/Size-936d8a0c222de656.js | 1 + .../drawer/code/Spacing-b786357a54373af6.js | 1 + .../drawer/code/Tonality-e4e4f73c210e166b.js | 1 + .../drawer/docs/Angular-454394480857d4c4.js | 1 + .../drawer/docs/HTML-cf291d2cc55aee0d.js | 1 + .../drawer/docs/Migration-6699333e2aa43788.js | 1 + .../drawer/docs/React-f9a6124f7e33ff2a.js | 1 + .../drawer/docs/Vue-831ecc8be0ac4dc6.js | 1 + .../drawer/examples-7c52c4c481eeef78.js | 1 + .../drawer/how-to-use-c39ae7136fad3e9a.js | 1 + .../drawer/migration-f9c8290729a3f73d.js | 1 + .../drawer/overview-a52ef47b7b043468.js | 1 + .../drawer/properties-0c68ac748a178b63.js | 1 + .../header/docs/Angular-5c0476723d3d1430.js | 1 + .../header/docs/HTML-d37fe6dd2a895850.js | 1 + .../header/docs/React-e6d076509b66bb53.js | 1 + .../header/docs/Vue-7733b79eb006c710.js | 1 + .../header/examples-c99f01a6539c7476.js | 1 + .../header/how-to-use-fc69e6c37a16b411.js | 1 + .../header/migration-6108aeaa40b5bb52.js | 1 + .../header/properties-de075a41f2b759d2.js | 1 + .../icon/docs/Angular-c21d26c8d46cbde2.js | 1 + .../icon/docs/HTML-f858a5a0cb1188b2.js | 1 + .../icon/docs/React-7c28559835165040.js | 1 + .../icon/docs/Vue-09c3e3ab734459f1.js | 1 + .../icon/examples-5a22e07109dedd65.js | 1 + .../icon/how-to-use-065a45c7d9ee5fd7.js | 1 + .../icon/migration-f7a17b9d521b193e.js | 1 + .../icon/properties-8f1f526109ab81dd.js | 1 + .../components/infotext-d5268f2775d2ae57.js | 1 + .../infotext/code/Size-752151408bfabf1d.js | 1 + .../code/Tonality-fb277473e28a9db9.js | 1 + .../infotext/code/Variant-d21302a1d2e806ec.js | 1 + .../infotext/docs/Angular-a7252440e5791145.js | 1 + .../infotext/docs/HTML-4abddfacaa69ade7.js | 1 + .../docs/Migration-511474c0a019b862.js | 1 + .../infotext/docs/React-08dd74e439f488f0.js | 1 + .../infotext/docs/Vue-e65d2a4bdcac11af.js | 1 + .../infotext/examples-48f3ec368cbb3199.js | 1 + .../infotext/how-to-use-509440b6d142e69a.js | 1 + .../infotext/migration-59c1d33583c448f8.js | 1 + .../infotext/overview-be070bbe60a42f12.js | 1 + .../infotext/properties-ce83fc93d01bec33.js | 1 + .../components/input-01705f35a52d5bc3.js | 1 + .../input/code/Content-546dad4e01cd42d0.js | 1 + .../input/code/States-5b45e7d0c5114916.js | 1 + .../input/code/Tonality-f58959e1f1e191a3.js | 1 + .../input/code/Types-014ae4ad61164a1f.js | 1 + .../input/code/Variant-bd12971ae79f3d86.js | 1 + .../input/docs/Angular-5c740915be423ec9.js | 1 + .../input/docs/HTML-2e0cbca207c1e814.js | 1 + .../input/docs/React-d59cb904b1e96095.js | 1 + .../input/docs/Vue-d1a3cf394ae7400d.js | 1 + .../input/examples-141d9190782d597c.js | 1 + .../input/how-to-use-e4537c1477495a60.js | 1 + .../input/migration-e78b2ea63df8a229.js | 1 + .../input/overview-7d4ee98e95aa8126.js | 1 + .../input/properties-ef5dcdce590f7239.js | 1 + .../pages/components/link-3e4da5aba8dd8c28.js | 1 + .../link/code/Content-7a05123729e2ab1d.js | 1 + .../link/code/Size-68d0d0c0036e1d9f.js | 1 + .../link/code/State-7cd286c82e61be93.js | 1 + .../link/code/Tonality-d6a737d8e58ac56b.js | 1 + .../link/code/Variant-be005ae8978b3162.js | 1 + .../link/docs/Angular-10a052255838bf64.js | 1 + .../link/docs/HTML-15aa0677d29a1d8c.js | 1 + .../link/docs/React-2b23eb2c081d513c.js | 1 + .../link/docs/Vue-a9f264345cd87e80.js | 1 + .../link/examples-b0baf51f406dbd3a.js | 1 + .../link/how-to-use-3e496cf4ad070ea1.js | 1 + .../link/migration-9a5b81b030af6af5.js | 1 + .../link/overview-5b383a568a616a6a.js | 1 + .../link/properties-720715344a316c1d.js | 1 + .../main-navigation-79d068d316f2f1f2.js | 1 + .../code/Tonality-18ee0b89ba9d2186.js | 1 + .../docs/Angular-33be8ac5f1f4b461.js | 1 + .../docs/HTML-91aed99245ca807c.js | 1 + .../docs/React-d53127ae49b61bd5.js | 1 + .../docs/Vue-a3e3c8446f388704.js | 1 + .../examples-8000e57ca3b32104.js | 1 + .../how-to-use-51dd7d9d44ba287a.js | 1 + .../migration-fe311a09f0676786.js | 1 + .../overview-9f86d2d9593503ee.js | 1 + .../properties-1bf88abde7b1edfd.js | 1 + .../navigation-item-e18d5ae4e0497223.js | 1 + .../code/Content-6a44ab2ad696b652.js | 1 + .../code/States-fbea98014dafed47.js | 1 + .../code/Tonality-96fb4712b3ec9bb5.js | 1 + .../code/Width-86c3ec98ef82d05e.js | 1 + .../docs/Angular-cef78a4ef91db52a.js | 1 + .../docs/HTML-930b448e4865a4de.js | 1 + .../docs/Migration-c316de31f04ae8a2.js | 1 + .../docs/React-991b01381dff4073.js | 1 + .../docs/Vue-b9a2b57c0b600a18.js | 1 + .../examples-8696cf0b617df140.js | 1 + .../how-to-use-8e9689882801df78.js | 1 + .../migration-35efdd2148a43a5b.js | 1 + .../overview-74b046ad4b377cc3.js | 1 + .../properties-e5abf79736abae5c.js | 1 + .../page/docs/Angular-4b6d116bfe0870ce.js | 1 + .../page/docs/HTML-f47c63d4fb07d0bb.js | 1 + .../page/docs/React-20a126f6db8c3fd2.js | 1 + .../page/docs/Vue-3053292bc531eb99.js | 1 + .../page/examples-427d5f64125af5a1.js | 1 + .../page/how-to-use-5618d3bc505ba37a.js | 1 + .../page/migration-12d5d5e64587da67.js | 1 + .../page/properties-b1705f423b44d9d3.js | 1 + .../components/radio-16ee8ee9831c3aa3.js | 1 + .../radio/code/Size-33a8f73f22757c97.js | 1 + .../radio/code/States-1b9d06c583553e5d.js | 1 + .../radio/code/Tonality-1e8931447fdb45d9.js | 1 + .../radio/docs/Angular-25f03730e0920150.js | 1 + .../radio/docs/HTML-0e3cdb7a46c54147.js | 1 + .../radio/docs/React-3653cdbee1afeb5e.js | 1 + .../radio/docs/Vue-f16391bd189584a9.js | 1 + .../radio/examples-be5663c608024830.js | 1 + .../radio/how-to-use-78c5b6264c0102e8.js | 1 + .../radio/migration-ab0af713ba752fcf.js | 1 + .../radio/overview-00a831552f82379c.js | 1 + .../radio/properties-fc646878b33da121.js | 1 + .../components/readme-ae69dbd3064e5521.js | 1 + .../components/section-b35b31a942863fa9.js | 1 + .../section/code/Size-1faa34db8d8522c9.js | 1 + .../section/code/Tonality-b7125d4af40f71b4.js | 1 + .../section/code/Variant-abff6b1746d04420.js | 1 + .../section/docs/Angular-0641461e6ab2b313.js | 1 + .../section/docs/HTML-ae2e8b1c808ecd71.js | 1 + .../docs/Migration-53cce929802091a0.js | 1 + .../section/docs/React-ec661e0f98d3e404.js | 1 + .../section/docs/Vue-c8377ab6be5a86f8.js | 1 + .../section/examples-2d5c018e79738aa4.js | 1 + .../section/how-to-use-99b41d385c2bfcab.js | 1 + .../section/migration-81d2c6962a7232bb.js | 1 + .../section/overview-ef2cce1770fc62ac.js | 1 + .../section/properties-99a04f76427ac235.js | 1 + .../components/select-4f895171a87c0724.js | 1 + .../select/code/Content-6f41052bdd6604bb.js | 1 + .../select/code/States-4d7f728d30fb4c54.js | 1 + .../select/code/Tonality-e1294f66d392a686.js | 1 + .../select/code/Variant-bcaf030a4882880e.js | 1 + .../select/docs/Angular-3463234f602e7878.js | 1 + .../select/docs/HTML-95b9925cc50d2602.js | 1 + .../select/docs/Migration-3ce6809ee8704bfe.js | 1 + .../select/docs/React-0c688a80bc16d86f.js | 1 + .../select/docs/Vue-f65e112ac6915f38.js | 1 + .../select/examples-7cb44672ce34daa6.js | 1 + .../select/how-to-use-1e82ef3bb9c230c0.js | 1 + .../select/migration-ecb6f8261fb9fa19.js | 1 + .../select/overview-157b5325b29748ba.js | 1 + .../select/properties-152d0ec973cdfbc6.js | 1 + .../tab-bar/docs/Angular-eb7ac02ff278d38e.js | 1 + .../tab-bar/docs/HTML-87f51bf95dd1c3b8.js | 1 + .../tab-bar/docs/React-21cfb6e0a5e825b1.js | 1 + .../tab-bar/docs/Vue-1dfb4e534a3f656f.js | 1 + .../tab-bar/examples-8315178abada4ff4.js | 1 + .../tab-bar/how-to-use-c0f62c48d5026293.js | 1 + .../tab-bar/migration-5e039fd4114fd4bb.js | 1 + .../tab-bar/properties-09120b6fe39f6778.js | 1 + .../tab/docs/Angular-028a3a66b80698ac.js | 1 + .../tab/docs/HTML-bb74f611cf2f20b8.js | 1 + .../tab/docs/React-14ee0b9c415c12dd.js | 1 + .../tab/docs/Vue-88d5b93f8bb9d0d2.js | 1 + .../tab/examples-d42da458e099b676.js | 1 + .../tab/how-to-use-71bc93075c95173d.js | 1 + .../tab/migration-6a284b20184cdafb.js | 1 + .../tab/properties-755a8ac0fd1a91ea.js | 1 + .../pages/components/tag-6a047732fc42d609.js | 1 + .../tag/code/Behaviour-703c2db5818fd956.js | 1 + .../tag/code/Content-0111c70f108280c6.js | 1 + .../tag/code/Emphasis-fea550762eaa7139.js | 1 + .../tag/code/Example-d619cfcfba3ac989.js | 1 + .../tag/code/Overflow-e0a464e0f281913c.js | 1 + .../tag/code/State-3ed9a7a71891244c.js | 1 + .../tag/code/Tonality-948604e012f92463.js | 1 + .../tag/code/Variant-37f1d31be1fc3619.js | 1 + .../tag/docs/Angular-4cac6942b392aea4.js | 1 + .../tag/docs/HTML-3c5c3af4163e58c3.js | 1 + .../tag/docs/Migration-0d926c633333df58.js | 1 + .../tag/docs/React-d7e8f9bad0ce3231.js | 1 + .../tag/docs/Vue-285b8547ead50457.js | 1 + .../tag/examples-a810a2d91b38c5a8.js | 1 + .../tag/how-to-use-6cb8495193920f5b.js | 1 + .../tag/migration-6fe27c8710142a7d.js | 1 + .../tag/overview-d8f7180e12488a8b.js | 1 + .../tag/properties-d670bb466ecc3341.js | 1 + .../components/textarea-396e840634757e9f.js | 1 + .../textarea/code/Message-0f407bbb8878f773.js | 1 + .../code/Requirement-46e45ecb9fe5ae28.js | 1 + .../textarea/code/Rows-00c5c3a16d5d77d5.js | 1 + .../textarea/code/States-daf0b7fe9a3ca893.js | 1 + .../code/Tonality-e0d38af73691bc0c.js | 1 + .../textarea/code/Variant-ca8252c912b9112a.js | 1 + .../textarea/docs/Angular-e2e01526d8f666c3.js | 1 + .../textarea/docs/HTML-8a43543174f55945.js | 1 + .../docs/Migration-b547995b9abda00c.js | 1 + .../textarea/docs/React-5d268fdccfd8a7a6.js | 1 + .../textarea/docs/Vue-c5243b1508529efa.js | 1 + .../textarea/examples-0af7acadaa59f533.js | 1 + .../textarea/how-to-use-f3fd05114a05c1b4.js | 1 + .../textarea/migration-c010ec573ac2a652.js | 1 + .../textarea/overview-a62e9b1519d50199.js | 1 + .../textarea/properties-6630ff94d33ea2d7.js | 1 + .../colors/examples-22c66442baf61bf5.js | 1 + .../colors/readme-2e392de400b93af8.js | 1 + .../foundations/icons-36c5d2a14cd4bf32.js | 1 + .../foundations/readme-f934c8b85742c138.js | 1 + .../chunks/pages/iframe-639b0a3c78d2ac26.js | 1 + .../chunks/pages/index-f776383edb98bbd4.js | 1 + .../chunks/polyfills-c67a75d1b6f99dc8.js | 1 + .../static/chunks/webpack-6834ada03631353c.js | 1 + .../_next/static/css/e147445c67212afc.css | 1 + .../_next/static/media/db-ux.13280829.woff2 | Bin 0 -> 38344 bytes .../_next/static/media/db-ux.23363048.woff2 | Bin 0 -> 38372 bytes .../_next/static/media/db-ux.3373fc07.woff2 | Bin 0 -> 12040 bytes .../_next/static/media/db-ux.4d619fc4.woff2 | Bin 0 -> 12024 bytes .../_next/static/media/db-ux.4f7c59c1.woff2 | Bin 0 -> 11544 bytes .../_next/static/media/db-ux.536359ae.woff2 | Bin 0 -> 7408 bytes .../_next/static/media/db-ux.67ff1d5b.woff2 | Bin 0 -> 12048 bytes .../_next/static/media/db-ux.6f286205.woff2 | Bin 0 -> 11544 bytes .../_next/static/media/db-ux.7a5451d6.woff2 | Bin 0 -> 33692 bytes .../_next/static/media/db-ux.879b1db9.woff2 | Bin 0 -> 38356 bytes .../_next/static/media/db-ux.a86cb5cc.woff2 | Bin 0 -> 11872 bytes .../_next/static/media/db-ux.ab1ecea2.woff2 | Bin 0 -> 12052 bytes .../_next/static/media/db-ux.aef711e8.woff2 | Bin 0 -> 8420 bytes .../_next/static/media/db-ux.d14e3e2d.woff2 | Bin 0 -> 38360 bytes .../_next/static/media/db-ux.e366e01e.woff2 | Bin 0 -> 33484 bytes .../_next/static/media/db-ux.e986f52e.woff2 | Bin 0 -> 40704 bytes .../_next/static/media/db-ux.fdad4e84.woff2 | Bin 0 -> 8416 bytes .../_next/static/media/db-ux.fdafc88b.woff2 | Bin 0 -> 9028 bytes .../static/media/db_ic_cancel_24.6027b52b.svg | 1 + .../media/dbscreenhead-black.8003423d.woff2 | Bin 0 -> 35428 bytes .../media/dbscreenhead-light.f43da5c1.woff2 | Bin 0 -> 33520 bytes .../media/dbscreensans-bold.97637e71.woff2 | Bin 0 -> 24332 bytes ...dbscreensans-digitalregular.06a7ba06.woff2 | Bin 0 -> 24572 bytes .../media/dbscreensans-regular.6ef88637.woff2 | Bin 0 -> 24188 bytes .../1654-focus-state-dev-research/base64.html | 1 + .../components/accordion-item.html | 1 + .../accordion-item/code/States.html | 5 + .../accordion-item/code/Tonality.html | 4 + .../accordion-item/docs/Angular.html | 10 + .../components/accordion-item/docs/HTML.html | 5 + .../accordion-item/docs/Migration.html | 10 + .../components/accordion-item/docs/React.html | 8 + .../components/accordion-item/docs/Vue.html | 8 + .../components/accordion-item/examples.html | 1 + .../components/accordion-item/how-to-use.html | 1 + .../components/accordion-item/migration.html | 1 + .../components/accordion-item/overview.html | 1 + .../components/accordion-item/properties.html | 1 + .../components/accordion.html | 1 + .../components/accordion/code/Behaviour.html | 3 + .../components/accordion/code/Tonality.html | 4 + .../components/accordion/docs/Angular.html | 7 + .../components/accordion/docs/HTML.html | 5 + .../components/accordion/docs/Migration.html | 7 + .../components/accordion/docs/React.html | 5 + .../components/accordion/docs/Vue.html | 5 + .../components/accordion/examples.html | 1 + .../components/accordion/how-to-use.html | 1 + .../components/accordion/migration.html | 1 + .../components/accordion/overview.html | 1 + .../components/accordion/properties.html | 1 + .../components/alert.html | 1 + .../components/alert/code/Behaviour.html | 3 + .../components/alert/code/Content.html | 5 + .../components/alert/code/Tonality.html | 4 + .../components/alert/code/Type.html | 3 + .../components/alert/code/Variant.html | 6 + .../components/alert/docs/Angular.html | 7 + .../components/alert/docs/HTML.html | 5 + .../components/alert/docs/Migration.html | 12 + .../components/alert/docs/React.html | 5 + .../components/alert/docs/Vue.html | 5 + .../components/alert/examples.html | 1 + .../components/alert/how-to-use.html | 1 + .../components/alert/migration.html | 1 + .../components/alert/overview.html | 1 + .../components/alert/properties.html | 1 + .../components/badge.html | 1 + .../components/badge/code/Content.html | 6 + .../components/badge/code/Emphasis.html | 3 + .../components/badge/code/Examples.html | 2 + .../components/badge/code/Placement.html | 8 + .../components/badge/code/Size.html | 3 + .../components/badge/code/Tonality.html | 4 + .../components/badge/code/Variant.html | 11 + .../components/badge/docs/Angular.html | 7 + .../components/badge/docs/HTML.html | 5 + .../components/badge/docs/Migration.html | 7 + .../components/badge/docs/React.html | 5 + .../components/badge/docs/Vue.html | 5 + .../components/badge/examples.html | 1 + .../components/badge/how-to-use.html | 1 + .../components/badge/migration.html | 1 + .../components/badge/overview.html | 1 + .../components/badge/properties.html | 1 + .../components/brand/docs/Angular.html | 7 + .../components/brand/docs/HTML.html | 5 + .../components/brand/docs/React.html | 5 + .../components/brand/docs/Vue.html | 5 + .../components/brand/examples.html | 1 + .../components/brand/how-to-use.html | 1 + .../components/brand/migration.html | 1 + .../components/brand/properties.html | 1 + .../components/button.html | 1 + .../components/button/code/Behaviour.html | 3 + .../components/button/code/Content.html | 4 + .../components/button/code/Size.html | 3 + .../components/button/code/State.html | 3 + .../components/button/code/Tonality.html | 4 + .../components/button/code/Variant.html | 5 + .../components/button/docs/Angular.html | 7 + .../components/button/docs/HTML.html | 5 + .../components/button/docs/Migration.html | 14 + .../components/button/docs/React.html | 5 + .../components/button/docs/Vue.html | 5 + .../components/button/examples.html | 1 + .../components/button/how-to-use.html | 1 + .../components/button/migration.html | 1 + .../components/button/overview.html | 1 + .../components/button/properties.html | 1 + .../components/card.html | 1 + .../components/card/code/ColorVariant.html | 8 + .../components/card/code/Spacing.html | 4 + .../components/card/code/Tonality.html | 4 + .../components/card/code/Variant.html | 3 + .../components/card/docs/Angular.html | 7 + .../components/card/docs/HTML.html | 5 + .../components/card/docs/Migration.html | 12 + .../components/card/docs/React.html | 5 + .../components/card/docs/Vue.html | 5 + .../components/card/examples.html | 1 + .../components/card/how-to-use.html | 1 + .../components/card/migration.html | 1 + .../components/card/overview.html | 1 + .../components/card/properties.html | 1 + .../components/checkbox.html | 1 + .../components/checkbox/code/Size.html | 3 + .../components/checkbox/code/States.html | 7 + .../components/checkbox/code/Tonality.html | 4 + .../components/checkbox/docs/Angular.html | 16 + .../components/checkbox/docs/HTML.html | 5 + .../components/checkbox/docs/React.html | 5 + .../components/checkbox/docs/Vue.html | 5 + .../components/checkbox/examples.html | 1 + .../components/checkbox/how-to-use.html | 1 + .../components/checkbox/migration.html | 1 + .../components/checkbox/overview.html | 1 + .../components/checkbox/properties.html | 1 + .../components/code-docs/docs/Angular.html | 2 + .../components/code-docs/docs/HTML.html | 2 + .../components/code-docs/docs/React.html | 3 + .../components/code-docs/docs/Vue.html | 2 + .../components/code-docs/examples.html | 1 + .../components/code-docs/how-to-use.html | 1 + .../components/code-docs/migration.html | 1 + .../components/code-docs/properties.html | 1 + .../components/divider.html | 1 + .../components/divider/code/Emphasis.html | 3 + .../components/divider/code/Tonality.html | 4 + .../components/divider/code/Variant.html | 3 + .../components/divider/docs/Angular.html | 7 + .../components/divider/docs/HTML.html | 5 + .../components/divider/docs/Migration.html | 7 + .../components/divider/docs/React.html | 5 + .../components/divider/docs/Vue.html | 5 + .../components/divider/examples.html | 1 + .../components/divider/how-to-use.html | 1 + .../components/divider/migration.html | 1 + .../components/divider/overview.html | 1 + .../components/divider/properties.html | 1 + .../components/drawer.html | 1 + .../components/drawer/code/Backdrop.html | 4 + .../components/drawer/code/Directions.html | 5 + .../components/drawer/code/Rounded.html | 3 + .../components/drawer/code/Size.html | 3 + .../components/drawer/code/Spacing.html | 5 + .../components/drawer/code/Tonality.html | 4 + .../components/drawer/docs/Angular.html | 10 + .../components/drawer/docs/HTML.html | 7 + .../components/drawer/docs/Migration.html | 7 + .../components/drawer/docs/React.html | 7 + .../components/drawer/docs/Vue.html | 7 + .../components/drawer/examples.html | 1 + .../components/drawer/how-to-use.html | 1 + .../components/drawer/migration.html | 1 + .../components/drawer/overview.html | 1 + .../components/drawer/properties.html | 1 + .../components/header/docs/Angular.html | 11 + .../components/header/docs/HTML.html | 5 + .../components/header/docs/React.html | 8 + .../components/header/docs/Vue.html | 8 + .../components/header/examples.html | 1 + .../components/header/how-to-use.html | 1 + .../components/header/migration.html | 1 + .../components/header/properties.html | 1 + .../components/icon/docs/Angular.html | 7 + .../components/icon/docs/HTML.html | 6 + .../components/icon/docs/React.html | 5 + .../components/icon/docs/Vue.html | 5 + .../components/icon/examples.html | 1 + .../components/icon/how-to-use.html | 1 + .../components/icon/migration.html | 1 + .../components/icon/properties.html | 1 + .../components/infotext.html | 1 + .../components/infotext/code/Size.html | 3 + .../components/infotext/code/Tonality.html | 4 + .../components/infotext/code/Variant.html | 6 + .../components/infotext/docs/Angular.html | 7 + .../components/infotext/docs/HTML.html | 5 + .../components/infotext/docs/Migration.html | 7 + .../components/infotext/docs/React.html | 5 + .../components/infotext/docs/Vue.html | 5 + .../components/infotext/examples.html | 1 + .../components/infotext/how-to-use.html | 1 + .../components/infotext/migration.html | 1 + .../components/infotext/overview.html | 1 + .../components/infotext/properties.html | 1 + .../components/input.html | 1 + .../components/input/code/Content.html | 6 + .../components/input/code/States.html | 8 + .../components/input/code/Tonality.html | 4 + .../components/input/code/Types.html | 13 + .../components/input/code/Variant.html | 6 + .../components/input/docs/Angular.html | 23 + .../components/input/docs/HTML.html | 6 + .../components/input/docs/React.html | 6 + .../components/input/docs/Vue.html | 10 + .../components/input/examples.html | 1 + .../components/input/how-to-use.html | 1 + .../components/input/migration.html | 1 + .../components/input/overview.html | 1 + .../components/input/properties.html | 1 + .../components/link.html | 1 + .../components/link/code/Content.html | 3 + .../components/link/code/Size.html | 3 + .../components/link/code/State.html | 3 + .../components/link/code/Tonality.html | 4 + .../components/link/code/Variant.html | 3 + .../components/link/docs/Angular.html | 7 + .../components/link/docs/HTML.html | 5 + .../components/link/docs/React.html | 5 + .../components/link/docs/Vue.html | 5 + .../components/link/examples.html | 1 + .../components/link/how-to-use.html | 1 + .../components/link/migration.html | 1 + .../components/link/overview.html | 1 + .../components/link/properties.html | 1 + .../components/main-navigation.html | 1 + .../main-navigation/code/Tonality.html | 4 + .../main-navigation/docs/Angular.html | 7 + .../components/main-navigation/docs/HTML.html | 5 + .../main-navigation/docs/React.html | 5 + .../components/main-navigation/docs/Vue.html | 5 + .../components/main-navigation/examples.html | 1 + .../main-navigation/how-to-use.html | 1 + .../components/main-navigation/migration.html | 1 + .../components/main-navigation/overview.html | 1 + .../main-navigation/properties.html | 1 + .../components/navigation-item.html | 1 + .../navigation-item/code/Content.html | 5 + .../navigation-item/code/States.html | 4 + .../navigation-item/code/Tonality.html | 4 + .../navigation-item/code/Width.html | 3 + .../navigation-item/docs/Angular.html | 8 + .../components/navigation-item/docs/HTML.html | 6 + .../navigation-item/docs/Migration.html | 7 + .../navigation-item/docs/React.html | 6 + .../components/navigation-item/docs/Vue.html | 6 + .../components/navigation-item/examples.html | 1 + .../navigation-item/how-to-use.html | 1 + .../components/navigation-item/migration.html | 1 + .../components/navigation-item/overview.html | 1 + .../navigation-item/properties.html | 1 + .../components/page/docs/Angular.html | 7 + .../components/page/docs/HTML.html | 5 + .../components/page/docs/React.html | 5 + .../components/page/docs/Vue.html | 5 + .../components/page/examples.html | 1 + .../components/page/how-to-use.html | 1 + .../components/page/migration.html | 1 + .../components/page/properties.html | 1 + .../components/radio.html | 1 + .../components/radio/code/Size.html | 3 + .../components/radio/code/States.html | 7 + .../components/radio/code/Tonality.html | 4 + .../components/radio/docs/Angular.html | 16 + .../components/radio/docs/HTML.html | 5 + .../components/radio/docs/React.html | 5 + .../components/radio/docs/Vue.html | 5 + .../components/radio/examples.html | 1 + .../components/radio/how-to-use.html | 1 + .../components/radio/migration.html | 1 + .../components/radio/overview.html | 1 + .../components/radio/properties.html | 1 + .../components/readme.html | 1 + .../components/section.html | 1 + .../components/section/code/Size.html | 4 + .../components/section/code/Tonality.html | 4 + .../components/section/code/Variant.html | 4 + .../components/section/docs/Angular.html | 7 + .../components/section/docs/HTML.html | 5 + .../components/section/docs/Migration.html | 7 + .../components/section/docs/React.html | 5 + .../components/section/docs/Vue.html | 5 + .../components/section/examples.html | 1 + .../components/section/how-to-use.html | 1 + .../components/section/migration.html | 1 + .../components/section/overview.html | 1 + .../components/section/properties.html | 1 + .../components/select.html | 1 + .../components/select/code/Content.html | 4 + .../components/select/code/States.html | 7 + .../components/select/code/Tonality.html | 4 + .../components/select/code/Variant.html | 6 + .../components/select/docs/Angular.html | 7 + .../components/select/docs/HTML.html | 5 + .../components/select/docs/Migration.html | 10 + .../components/select/docs/React.html | 5 + .../components/select/docs/Vue.html | 5 + .../components/select/examples.html | 1 + .../components/select/how-to-use.html | 1 + .../components/select/migration.html | 1 + .../components/select/overview.html | 1 + .../components/select/properties.html | 1 + .../components/tab-bar/docs/Angular.html | 2 + .../components/tab-bar/docs/HTML.html | 2 + .../components/tab-bar/docs/React.html | 2 + .../components/tab-bar/docs/Vue.html | 2 + .../components/tab-bar/examples.html | 1 + .../components/tab-bar/how-to-use.html | 1 + .../components/tab-bar/migration.html | 1 + .../components/tab-bar/properties.html | 1 + .../components/tab/docs/Angular.html | 2 + .../components/tab/docs/HTML.html | 2 + .../components/tab/docs/React.html | 2 + .../components/tab/docs/Vue.html | 2 + .../components/tab/examples.html | 1 + .../components/tab/how-to-use.html | 1 + .../components/tab/migration.html | 1 + .../components/tab/properties.html | 1 + .../components/tag.html | 1 + .../components/tag/code/Behaviour.html | 8 + .../components/tag/code/Content.html | 4 + .../components/tag/code/Emphasis.html | 3 + .../components/tag/code/Example.html | 6 + .../components/tag/code/Overflow.html | 3 + .../components/tag/code/State.html | 4 + .../components/tag/code/Tonality.html | 4 + .../components/tag/code/Variant.html | 11 + .../components/tag/docs/Angular.html | 7 + .../components/tag/docs/HTML.html | 5 + .../components/tag/docs/Migration.html | 19 + .../components/tag/docs/React.html | 5 + .../components/tag/docs/Vue.html | 5 + .../components/tag/examples.html | 1 + .../components/tag/how-to-use.html | 1 + .../components/tag/migration.html | 1 + .../components/tag/overview.html | 1 + .../components/tag/properties.html | 1 + .../components/textarea.html | 1 + .../components/textarea/code/Message.html | 3 + .../components/textarea/code/Requirement.html | 4 + .../components/textarea/code/Rows.html | 3 + .../components/textarea/code/States.html | 5 + .../components/textarea/code/Tonality.html | 4 + .../components/textarea/code/Variant.html | 6 + .../components/textarea/docs/Angular.html | 8 + .../components/textarea/docs/HTML.html | 5 + .../components/textarea/docs/Migration.html | 12 + .../components/textarea/docs/React.html | 5 + .../components/textarea/docs/Vue.html | 8 + .../components/textarea/examples.html | 1 + .../components/textarea/how-to-use.html | 1 + .../components/textarea/migration.html | 1 + .../components/textarea/overview.html | 1 + .../components/textarea/properties.html | 1 + .../docs/adr-xx-Template.md | 35 + .../docs/definition-of-done-pr.md | 10 + .../docs/how-to-develop-a-component.md | 119 ++ .../Contributor_Covenant204baaaa.licence | 1 + .../download/Contributor_Covenant204baaaa.svg | 1 + .../Conventional_Commits100yellow.licence | 1 + .../Conventional_Commits100yellow.svg | 1 + .../download/LicenseApache20blue.licence | 1 + .../images/download/LicenseApache20blue.svg | 1 + ...swelcomebrightgreenstyleflatsquare.licence | 1 + .../PRswelcomebrightgreenstyleflatsquare.svg | 1 + ...t_ofDB_UX_Design_System_Cored7dce1.licence | 1 + .../Part_ofDB_UX_Design_System_Cored7dce1.svg | 1 + .../images/download/codestyleXO5ed9c7.licence | 1 + .../images/download/codestyleXO5ed9c7.svg | 1 + ...styleprettierff69b4styleflatsquare.licence | 1 + ...codestyleprettierff69b4styleflatsquare.svg | 1 + .../tagnamelabelnpmcolored1c24.licence | 1 + .../download/tagnamelabelnpmcolored1c24.svg | 1 + .../docs/images/header_image_0.guetzli.2x.jpg | Bin 0 -> 252819 bytes .../docs/images/header_image_0.guetzli.3x.jpg | Bin 0 -> 434304 bytes .../docs/images/header_image_0.guetzli.jpg | Bin 0 -> 88231 bytes .../docs/migration-template.md | 20 + .../docs/package.json | 18 + .../docs/research-other-design-systems.md | 48 + .../docs/research/README.md | 17 + .../docs/research/switch-and-toggle.md | 47 + .../docs/research/tooltip.md | 54 + .../component-research/design-systems.js | 99 ++ .../generate-component-research.js | 46 + .../1654-focus-state-dev-research/favicon.ico | Bin 0 -> 5430 bytes .../foundations/colors/examples.html | 1 + .../foundations/colors/readme.html | 1 + .../foundations/icons.html | 1 + .../foundations/readme.html | 1 + .../iframeResizer.contentWindow.js | 1305 +++++++++++++++ .../iframeResizer.contentWindow.map | 1 + .../iframeResizer.contentWindow.min.js | 9 + .../iframe-resizer/iframeResizer.js | 1466 +++++++++++++++++ .../iframe-resizer/iframeResizer.map | 1 + .../iframe-resizer/iframeResizer.min.js | 8 + .../1654-focus-state-dev-research/iframe.html | 1 + .../images/db_logo.svg | 1 + .../1654-focus-state-dev-research/index.html | 1 + .../1654-focus-state-dev-research/robots.txt | 6 + .../site.webmanifest | 14 + 912 files changed, 5139 insertions(+) create mode 100644 review/1654-focus-state-dev-research/404.html create mode 100644 review/1654-focus-state-dev-research/_next/static/XxNpdvEhtSDcE2ZbgB7Uo/_buildManifest.js create mode 100644 review/1654-focus-state-dev-research/_next/static/XxNpdvEhtSDcE2ZbgB7Uo/_ssgManifest.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/1028-cb304ad622d208e6.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/1142-931f5e9813b1ff4e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/1295-fcc68c6157d8e000.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/1346-8b1a4c21de01a23c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/1390-a1d6d4f8d8ca3d01.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/1454-5ad81f21ea7c2236.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/1500-e2260931ddba758a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/1520-9e773e640442a949.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/1871-76c125bc3774607c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/2005-4e7ffd0ced7eb1ab.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/2087-1fb63d3639216d70.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/2158-69318b6de42b4b92.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/2233-a1920f23cfb178b1.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/2273-dbce26176a66431b.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/2306-fb25f03b8d6e05d4.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/2434-f0edeb25b43ae1e2.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/2454-0c5cf4128abde3a6.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/2482-d0b08b21a4659a27.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/256-92cb1f9030c8e315.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/2588-1a3cb97fb3627ad5.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/2647-95906a56f59a9371.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/2666-4dac242a69d2a7cf.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/2690-c5f5302d785c9b3f.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/2770-0329c515cff5ac37.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/2818-8be41e8134cac5e6.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/290-573cbd06d629f0af.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/2954-378c1a3b64b39302.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/2992-ae645d58bb3ae82c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/3017-e011d1e4b9527cd4.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/3142-34398fa96f6a2011.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/3189-4595f860ed305580.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/3191-3983e743ca40e7b9.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/3332-57d1cec14bf5e6d4.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/3458-e31edabe81dad7ae.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/3495-e298f53e70e70fe5.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/3512-018eb94dfa2a1a72.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/3570-dffb874b9103a761.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/3585-20fa366217c710af.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/36-10589576abcde7c5.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/3630-9a009d0fd190eae8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/364-e6c0b80cd783a9e3.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/365-5fa003555de1c83e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/3686-521b9c112066e016.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/3921-b3de3212e4a58127.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/3937-fd868b780783d2d4.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/3956-f4e7eab0f3e2c560.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/3990-6650316443206374.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/4105-179626c80997128b.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/4202-0b5cd18734d96c36.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/4375-38c8fe05e0f3891f.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/4383-776a493549f60f30.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/4469-96db0b2f078c40ff.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/4781-93e1f9e5d1723c4e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/4813-ff68c591ac3c0a58.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/4847-83ac30d6ad040030.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/4948-b20f12a47a775fdb.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/4958-a1052e27ee967c59.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/500-ede2bbeb7ee081c7.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/5028-f5f57e650f4e4d80.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/5133-66cb887bdebf07f7.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/5168-3ede3b980e46aeee.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/5206-fa6d0e4ffafd9bb8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/5292-af62fb66e5d94646.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/530-5b6d3347d0ea2337.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/5306-57eb6f156ca3fcaa.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/5316-4911f26baef7cded.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/5407-513c7acef7d39a20.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/5479-69850a626ec152b0.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/5691-37b13098a8e1ed54.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/5778-d012ed2fac07ab65.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/5805-2d0ba79bd51b5804.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/5946-c80632dcd9559718.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/5994-573ccf9ac18cfff9.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/6006-db6f7796350b87a4.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/6087-8bd460c20170c6d3.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/6151-6498d39158104056.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/6299-9b02b328895dae9e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/6303-b48b162ba20d677a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/641-b4a41c2d89dd36e1.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/6484-4f610dd78196675a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/65a8b803-86ff7f4c730af09b.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/6673-d1b7b628fc31af7e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/6675-b54baf9ee7aa462c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/676-f328c6f01e4d7ba0.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/6796-32bb8b136c52a92a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/6841-18211fd95a7af01e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/6866-2c8ab65524758b11.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/7047-6554644a9a59d0eb.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/7092-fc3d75d4db59f91c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/7134-8510f0641993dd0c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/7284-77d36e0a37494b96.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/7299-895f3c9848b94ab8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/7312-0e7357d235722e07.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/7376-e311d044f6092e90.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/7406-8fb6fb97c0f06b34.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/7506-ab180532863620a2.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/7588-b123dda5cad0f051.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/7628-66eafa40b3e1df10.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/7682-d1e1f1dfd3b59ff9.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/7789-c36eb3a6e7e16fb8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/7905-a9b184c4487fb3c1.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/7916-3a152626be1afa25.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/7992-0ac8b8b0b156618d.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/8016-f4668058c2aef291.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/8080-2fa73a955e575ba1.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/8097-9f3f53ec30c02e3f.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/8120-c04403ca4fc8e723.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/8158-1fc038bb9ee2a586.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/8260-00ec3abc7ecd5f5c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/8265-587bdcd1995a79b0.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/827-58e59c8954843e31.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/8302-377ece682c92b1a8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/8448-515ceaff0ab1e4ab.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/8454-4faeffc34d883697.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/8465-9cfb4feb2c81c09c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/852-f66c6eac087cfcf4.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/8556-1ec3aa5caec80f57.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/8563-706ac4dab823c690.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/8621-abe321fafaed44d6.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/869-23bb0610190e046e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/8834-1c3fb34b58f86bfe.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/8951-5f201649c30dd9af.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/903-75bd248af98f3090.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/9053-9d4204607a076f85.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/9122-e6b4b77385729f74.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/9167-3791293dd6af7aa8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/9180-3fc492d9dd745a47.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/9189-427f185900a65678.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/9235-b7c8ae4ab61b64ac.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/9310-3a42359dfca6b6b3.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/9313-07fa25e775e474d8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/9388-95c661363f4785a8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/9466-4dd723837d501e55.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/9467-d91e6cdb2dc66553.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/951-d79239227e049007.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/9596-43268ade4b975477.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/9620-7afe8cf6b23ae4fb.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/9793-530c0cd7de306ce2.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/9864-f0000dff20dd9427.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/9931-3dff82448a5dbe7e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/9977-d9ff0bbcc1f9e07f.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/framework-f211a704e11e65a7.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/main-f522407335e857b1.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/404-57ad5664cd6f1fb4.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/_app-500fa1e3d8bab734.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/_error-76385da1cf67b566.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/base64-0a24a67edc9a9825.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion-61ad012cddee8c88.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion-item-3f157c3cb38975e2.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion-item/code/States-45345919b355d687.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion-item/code/Tonality-e52c4ddf1cfd91f8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion-item/docs/Angular-b67428925785fa30.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion-item/docs/HTML-302de585746bd495.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion-item/docs/Migration-fc7746b489c12584.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion-item/docs/React-5951447756049ec9.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion-item/docs/Vue-4cb40d24dbc5cc11.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion-item/examples-41a1d465f1b87720.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion-item/how-to-use-f743bad6290181f6.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion-item/migration-bb8be5d6420bea42.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion-item/overview-271d833f954014ad.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion-item/properties-ad3fff579fc16868.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion/code/Behaviour-aac8a347ea68c0df.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion/code/Tonality-3e68e33f53080faa.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion/docs/Angular-e589419df764c599.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion/docs/HTML-e62f98c211c3d1b0.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion/docs/Migration-eabbd267b0f0b1bc.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion/docs/React-5c20f180641c51de.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion/docs/Vue-15475bf3d2aea62b.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion/examples-29a37fea75cea946.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion/how-to-use-d6a180e4cb365670.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion/migration-dfe8636cee60b1ea.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion/overview-e825200fd9cd8c7d.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/accordion/properties-8b2a7bfbb57ea1f1.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/alert-bba909b1003e81c3.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/alert/code/Behaviour-4cb9fb4c162ebe4f.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/alert/code/Content-8300b862624af36b.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/alert/code/Tonality-830b31735b013fd6.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/alert/code/Type-24ee74aa2ace6868.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/alert/code/Variant-79d7873ca40ac4b9.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/alert/docs/Angular-e910ecd25884f259.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/alert/docs/HTML-8647e1c2e8031567.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/alert/docs/Migration-7d2d7faf8152b4f3.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/alert/docs/React-79ed29911ec85057.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/alert/docs/Vue-7fef7ffed06872c8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/alert/examples-b4f56ec57a024f15.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/alert/how-to-use-37ab18d36348bfea.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/alert/migration-8b97023fbaaba3fd.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/alert/overview-2ecc4791181ae44d.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/alert/properties-327f4af558f9931a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge-6424e353decd5e52.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge/code/Content-e60331792e3f9a14.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge/code/Emphasis-32af294259af3a70.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge/code/Examples-e3d2029cfd3bbdd4.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge/code/Placement-fd8febeccd752b38.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge/code/Size-dbda1230eacb6642.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge/code/Tonality-672f99e244300ffd.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge/code/Variant-ea69409b62bc3562.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge/docs/Angular-0c522ad963f4a88a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge/docs/HTML-943634ad1af85e7a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge/docs/Migration-076f9bdbc4a8bc82.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge/docs/React-bb6195cfcf7a1fac.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge/docs/Vue-978de1d7cae53708.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge/examples-9adf249661b82e00.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge/how-to-use-03a434975d67642a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge/migration-6281764dddf0e9b9.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge/overview-af7ec9320a5cefc9.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/badge/properties-72e952d0b0583e98.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/brand/docs/Angular-32af9d7ccfda4947.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/brand/docs/HTML-2b3737aaa9906a82.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/brand/docs/React-0565d9f03f3f88a4.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/brand/docs/Vue-f949fdc4b3ec1063.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/brand/examples-ae3a198c20c3497e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/brand/how-to-use-c60f0f8e7be178f5.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/brand/migration-76800f2b54c7bee0.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/brand/properties-9b67eb992123814b.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/button-de486a878566ff49.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/button/code/Behaviour-ef52979d096c0642.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/button/code/Content-ccc98682eb1dc681.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/button/code/Size-1cc25c0402df6b30.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/button/code/State-7253b7d3124bd4df.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/button/code/Tonality-d390d8a4c375335c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/button/code/Variant-e1ac05b194a246c4.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/button/docs/Angular-ab1914d21de74b9a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/button/docs/HTML-1b29b460c0a7dbbb.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/button/docs/Migration-baee808c76f6830e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/button/docs/React-03c9838d2b54d7b3.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/button/docs/Vue-d032c4e600be7e74.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/button/examples-0e1afb9c90bc36ef.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/button/how-to-use-b4a52a0ece7046a8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/button/migration-6716695f09ef6cf2.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/button/overview-357fb8ddd964a29e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/button/properties-40b900f693552a14.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/card-4a2f36f2f6f52a31.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/card/code/ColorVariant-50b04b4a51ae7e01.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/card/code/Spacing-77c8411a74821cca.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/card/code/Tonality-3c19b2d93de03154.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/card/code/Variant-1a00d7d00fe16e52.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/card/docs/Angular-6b158d1b5caedda8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/card/docs/HTML-0cb180c8fd91a6c9.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/card/docs/Migration-c35463273c88ebe9.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/card/docs/React-e350787a3c55cf46.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/card/docs/Vue-77130bd40e1e5951.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/card/examples-8fcdde24591fc5bb.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/card/how-to-use-60501434891af926.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/card/migration-c09db3d3415f927d.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/card/overview-f9f42578d8bef23a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/card/properties-84841a136fb348d2.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/checkbox-7cf29d38e660bbe9.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/checkbox/code/Size-24cdab5bf07cb3c5.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/checkbox/code/States-c309a25cd8e66628.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/checkbox/code/Tonality-90a7bfd7ce1038b7.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/checkbox/docs/Angular-06bd11e30923679a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/checkbox/docs/HTML-d020242325cb6fbf.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/checkbox/docs/React-c3f65f2f857985bd.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/checkbox/docs/Vue-8778690ca9617948.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/checkbox/examples-3d6528069dafe85f.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/checkbox/how-to-use-64bd6ae01a269f71.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/checkbox/migration-5ff177f5d3c3ab57.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/checkbox/overview-4c9617e334d4d8ee.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/checkbox/properties-0dccc243a10fe918.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/code-docs/docs/Angular-71e1023526bd140f.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/code-docs/docs/HTML-5abaea10a0bd00a8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/code-docs/docs/React-8c331e3cad37caa2.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/code-docs/docs/Vue-bf4ee430eb9009dc.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/code-docs/examples-79d1f398ad392b39.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/code-docs/how-to-use-da3a67b826c15d23.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/code-docs/migration-ee9c510ba94cfc94.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/code-docs/properties-8ce9c141603d242f.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/divider-c8235e869d79bf5f.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/divider/code/Emphasis-5b9b6e46b0f591f7.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/divider/code/Tonality-f9eef91ad18f3cbc.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/divider/code/Variant-3553943058fb508e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/divider/docs/Angular-6c20f791bfd600a7.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/divider/docs/HTML-d3ffb96167d9bd5a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/divider/docs/Migration-5b4e3759897248e2.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/divider/docs/React-b28ce4e260cb0e8e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/divider/docs/Vue-5bdd1fe5f7fcbab0.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/divider/examples-5fc88a569f48917c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/divider/how-to-use-f0425923311cd376.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/divider/migration-78b1b6d48cf47755.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/divider/overview-643e20b7f00346ba.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/divider/properties-b2336ee326c2a258.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/drawer-ec628b84a1c271b3.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/drawer/code/Backdrop-218664f2f5a8e269.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/drawer/code/Directions-6005a211d83e18ec.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/drawer/code/Rounded-dac73f6402f672d5.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/drawer/code/Size-936d8a0c222de656.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/drawer/code/Spacing-b786357a54373af6.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/drawer/code/Tonality-e4e4f73c210e166b.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/drawer/docs/Angular-454394480857d4c4.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/drawer/docs/HTML-cf291d2cc55aee0d.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/drawer/docs/Migration-6699333e2aa43788.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/drawer/docs/React-f9a6124f7e33ff2a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/drawer/docs/Vue-831ecc8be0ac4dc6.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/drawer/examples-7c52c4c481eeef78.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/drawer/how-to-use-c39ae7136fad3e9a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/drawer/migration-f9c8290729a3f73d.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/drawer/overview-a52ef47b7b043468.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/drawer/properties-0c68ac748a178b63.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/header/docs/Angular-5c0476723d3d1430.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/header/docs/HTML-d37fe6dd2a895850.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/header/docs/React-e6d076509b66bb53.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/header/docs/Vue-7733b79eb006c710.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/header/examples-c99f01a6539c7476.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/header/how-to-use-fc69e6c37a16b411.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/header/migration-6108aeaa40b5bb52.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/header/properties-de075a41f2b759d2.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/icon/docs/Angular-c21d26c8d46cbde2.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/icon/docs/HTML-f858a5a0cb1188b2.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/icon/docs/React-7c28559835165040.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/icon/docs/Vue-09c3e3ab734459f1.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/icon/examples-5a22e07109dedd65.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/icon/how-to-use-065a45c7d9ee5fd7.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/icon/migration-f7a17b9d521b193e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/icon/properties-8f1f526109ab81dd.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/infotext-d5268f2775d2ae57.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/infotext/code/Size-752151408bfabf1d.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/infotext/code/Tonality-fb277473e28a9db9.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/infotext/code/Variant-d21302a1d2e806ec.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/infotext/docs/Angular-a7252440e5791145.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/infotext/docs/HTML-4abddfacaa69ade7.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/infotext/docs/Migration-511474c0a019b862.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/infotext/docs/React-08dd74e439f488f0.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/infotext/docs/Vue-e65d2a4bdcac11af.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/infotext/examples-48f3ec368cbb3199.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/infotext/how-to-use-509440b6d142e69a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/infotext/migration-59c1d33583c448f8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/infotext/overview-be070bbe60a42f12.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/infotext/properties-ce83fc93d01bec33.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/input-01705f35a52d5bc3.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/input/code/Content-546dad4e01cd42d0.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/input/code/States-5b45e7d0c5114916.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/input/code/Tonality-f58959e1f1e191a3.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/input/code/Types-014ae4ad61164a1f.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/input/code/Variant-bd12971ae79f3d86.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/input/docs/Angular-5c740915be423ec9.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/input/docs/HTML-2e0cbca207c1e814.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/input/docs/React-d59cb904b1e96095.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/input/docs/Vue-d1a3cf394ae7400d.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/input/examples-141d9190782d597c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/input/how-to-use-e4537c1477495a60.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/input/migration-e78b2ea63df8a229.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/input/overview-7d4ee98e95aa8126.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/input/properties-ef5dcdce590f7239.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/link-3e4da5aba8dd8c28.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/link/code/Content-7a05123729e2ab1d.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/link/code/Size-68d0d0c0036e1d9f.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/link/code/State-7cd286c82e61be93.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/link/code/Tonality-d6a737d8e58ac56b.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/link/code/Variant-be005ae8978b3162.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/link/docs/Angular-10a052255838bf64.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/link/docs/HTML-15aa0677d29a1d8c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/link/docs/React-2b23eb2c081d513c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/link/docs/Vue-a9f264345cd87e80.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/link/examples-b0baf51f406dbd3a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/link/how-to-use-3e496cf4ad070ea1.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/link/migration-9a5b81b030af6af5.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/link/overview-5b383a568a616a6a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/link/properties-720715344a316c1d.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/main-navigation-79d068d316f2f1f2.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/main-navigation/code/Tonality-18ee0b89ba9d2186.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/main-navigation/docs/Angular-33be8ac5f1f4b461.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/main-navigation/docs/HTML-91aed99245ca807c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/main-navigation/docs/React-d53127ae49b61bd5.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/main-navigation/docs/Vue-a3e3c8446f388704.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/main-navigation/examples-8000e57ca3b32104.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/main-navigation/how-to-use-51dd7d9d44ba287a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/main-navigation/migration-fe311a09f0676786.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/main-navigation/overview-9f86d2d9593503ee.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/main-navigation/properties-1bf88abde7b1edfd.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/navigation-item-e18d5ae4e0497223.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/navigation-item/code/Content-6a44ab2ad696b652.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/navigation-item/code/States-fbea98014dafed47.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/navigation-item/code/Tonality-96fb4712b3ec9bb5.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/navigation-item/code/Width-86c3ec98ef82d05e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/navigation-item/docs/Angular-cef78a4ef91db52a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/navigation-item/docs/HTML-930b448e4865a4de.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/navigation-item/docs/Migration-c316de31f04ae8a2.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/navigation-item/docs/React-991b01381dff4073.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/navigation-item/docs/Vue-b9a2b57c0b600a18.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/navigation-item/examples-8696cf0b617df140.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/navigation-item/how-to-use-8e9689882801df78.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/navigation-item/migration-35efdd2148a43a5b.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/navigation-item/overview-74b046ad4b377cc3.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/navigation-item/properties-e5abf79736abae5c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/page/docs/Angular-4b6d116bfe0870ce.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/page/docs/HTML-f47c63d4fb07d0bb.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/page/docs/React-20a126f6db8c3fd2.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/page/docs/Vue-3053292bc531eb99.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/page/examples-427d5f64125af5a1.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/page/how-to-use-5618d3bc505ba37a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/page/migration-12d5d5e64587da67.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/page/properties-b1705f423b44d9d3.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/radio-16ee8ee9831c3aa3.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/radio/code/Size-33a8f73f22757c97.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/radio/code/States-1b9d06c583553e5d.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/radio/code/Tonality-1e8931447fdb45d9.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/radio/docs/Angular-25f03730e0920150.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/radio/docs/HTML-0e3cdb7a46c54147.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/radio/docs/React-3653cdbee1afeb5e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/radio/docs/Vue-f16391bd189584a9.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/radio/examples-be5663c608024830.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/radio/how-to-use-78c5b6264c0102e8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/radio/migration-ab0af713ba752fcf.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/radio/overview-00a831552f82379c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/radio/properties-fc646878b33da121.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/readme-ae69dbd3064e5521.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/section-b35b31a942863fa9.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/section/code/Size-1faa34db8d8522c9.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/section/code/Tonality-b7125d4af40f71b4.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/section/code/Variant-abff6b1746d04420.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/section/docs/Angular-0641461e6ab2b313.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/section/docs/HTML-ae2e8b1c808ecd71.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/section/docs/Migration-53cce929802091a0.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/section/docs/React-ec661e0f98d3e404.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/section/docs/Vue-c8377ab6be5a86f8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/section/examples-2d5c018e79738aa4.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/section/how-to-use-99b41d385c2bfcab.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/section/migration-81d2c6962a7232bb.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/section/overview-ef2cce1770fc62ac.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/section/properties-99a04f76427ac235.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/select-4f895171a87c0724.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/select/code/Content-6f41052bdd6604bb.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/select/code/States-4d7f728d30fb4c54.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/select/code/Tonality-e1294f66d392a686.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/select/code/Variant-bcaf030a4882880e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/select/docs/Angular-3463234f602e7878.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/select/docs/HTML-95b9925cc50d2602.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/select/docs/Migration-3ce6809ee8704bfe.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/select/docs/React-0c688a80bc16d86f.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/select/docs/Vue-f65e112ac6915f38.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/select/examples-7cb44672ce34daa6.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/select/how-to-use-1e82ef3bb9c230c0.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/select/migration-ecb6f8261fb9fa19.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/select/overview-157b5325b29748ba.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/select/properties-152d0ec973cdfbc6.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tab-bar/docs/Angular-eb7ac02ff278d38e.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tab-bar/docs/HTML-87f51bf95dd1c3b8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tab-bar/docs/React-21cfb6e0a5e825b1.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tab-bar/docs/Vue-1dfb4e534a3f656f.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tab-bar/examples-8315178abada4ff4.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tab-bar/how-to-use-c0f62c48d5026293.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tab-bar/migration-5e039fd4114fd4bb.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tab-bar/properties-09120b6fe39f6778.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tab/docs/Angular-028a3a66b80698ac.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tab/docs/HTML-bb74f611cf2f20b8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tab/docs/React-14ee0b9c415c12dd.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tab/docs/Vue-88d5b93f8bb9d0d2.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tab/examples-d42da458e099b676.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tab/how-to-use-71bc93075c95173d.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tab/migration-6a284b20184cdafb.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tab/properties-755a8ac0fd1a91ea.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag-6a047732fc42d609.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/code/Behaviour-703c2db5818fd956.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/code/Content-0111c70f108280c6.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/code/Emphasis-fea550762eaa7139.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/code/Example-d619cfcfba3ac989.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/code/Overflow-e0a464e0f281913c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/code/State-3ed9a7a71891244c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/code/Tonality-948604e012f92463.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/code/Variant-37f1d31be1fc3619.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/docs/Angular-4cac6942b392aea4.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/docs/HTML-3c5c3af4163e58c3.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/docs/Migration-0d926c633333df58.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/docs/React-d7e8f9bad0ce3231.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/docs/Vue-285b8547ead50457.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/examples-a810a2d91b38c5a8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/how-to-use-6cb8495193920f5b.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/migration-6fe27c8710142a7d.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/overview-d8f7180e12488a8b.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/tag/properties-d670bb466ecc3341.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/textarea-396e840634757e9f.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/textarea/code/Message-0f407bbb8878f773.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/textarea/code/Requirement-46e45ecb9fe5ae28.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/textarea/code/Rows-00c5c3a16d5d77d5.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/textarea/code/States-daf0b7fe9a3ca893.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/textarea/code/Tonality-e0d38af73691bc0c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/textarea/code/Variant-ca8252c912b9112a.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/textarea/docs/Angular-e2e01526d8f666c3.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/textarea/docs/HTML-8a43543174f55945.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/textarea/docs/Migration-b547995b9abda00c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/textarea/docs/React-5d268fdccfd8a7a6.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/textarea/docs/Vue-c5243b1508529efa.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/textarea/examples-0af7acadaa59f533.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/textarea/how-to-use-f3fd05114a05c1b4.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/textarea/migration-c010ec573ac2a652.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/textarea/overview-a62e9b1519d50199.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/components/textarea/properties-6630ff94d33ea2d7.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/foundations/colors/examples-22c66442baf61bf5.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/foundations/colors/readme-2e392de400b93af8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/foundations/icons-36c5d2a14cd4bf32.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/foundations/readme-f934c8b85742c138.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/iframe-639b0a3c78d2ac26.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/pages/index-f776383edb98bbd4.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js create mode 100644 review/1654-focus-state-dev-research/_next/static/chunks/webpack-6834ada03631353c.js create mode 100644 review/1654-focus-state-dev-research/_next/static/css/e147445c67212afc.css create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.13280829.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.23363048.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.3373fc07.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.4d619fc4.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.4f7c59c1.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.536359ae.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.67ff1d5b.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.6f286205.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.7a5451d6.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.879b1db9.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.a86cb5cc.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.ab1ecea2.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.aef711e8.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.d14e3e2d.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.e366e01e.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.e986f52e.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.fdad4e84.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db-ux.fdafc88b.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/db_ic_cancel_24.6027b52b.svg create mode 100644 review/1654-focus-state-dev-research/_next/static/media/dbscreenhead-black.8003423d.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/dbscreenhead-light.f43da5c1.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/dbscreensans-bold.97637e71.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/dbscreensans-digitalregular.06a7ba06.woff2 create mode 100644 review/1654-focus-state-dev-research/_next/static/media/dbscreensans-regular.6ef88637.woff2 create mode 100644 review/1654-focus-state-dev-research/base64.html create mode 100644 review/1654-focus-state-dev-research/components/accordion-item.html create mode 100644 review/1654-focus-state-dev-research/components/accordion-item/code/States.html create mode 100644 review/1654-focus-state-dev-research/components/accordion-item/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/accordion-item/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/accordion-item/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/accordion-item/docs/Migration.html create mode 100644 review/1654-focus-state-dev-research/components/accordion-item/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/accordion-item/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/accordion-item/examples.html create mode 100644 review/1654-focus-state-dev-research/components/accordion-item/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/accordion-item/migration.html create mode 100644 review/1654-focus-state-dev-research/components/accordion-item/overview.html create mode 100644 review/1654-focus-state-dev-research/components/accordion-item/properties.html create mode 100644 review/1654-focus-state-dev-research/components/accordion.html create mode 100644 review/1654-focus-state-dev-research/components/accordion/code/Behaviour.html create mode 100644 review/1654-focus-state-dev-research/components/accordion/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/accordion/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/accordion/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/accordion/docs/Migration.html create mode 100644 review/1654-focus-state-dev-research/components/accordion/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/accordion/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/accordion/examples.html create mode 100644 review/1654-focus-state-dev-research/components/accordion/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/accordion/migration.html create mode 100644 review/1654-focus-state-dev-research/components/accordion/overview.html create mode 100644 review/1654-focus-state-dev-research/components/accordion/properties.html create mode 100644 review/1654-focus-state-dev-research/components/alert.html create mode 100644 review/1654-focus-state-dev-research/components/alert/code/Behaviour.html create mode 100644 review/1654-focus-state-dev-research/components/alert/code/Content.html create mode 100644 review/1654-focus-state-dev-research/components/alert/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/alert/code/Type.html create mode 100644 review/1654-focus-state-dev-research/components/alert/code/Variant.html create mode 100644 review/1654-focus-state-dev-research/components/alert/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/alert/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/alert/docs/Migration.html create mode 100644 review/1654-focus-state-dev-research/components/alert/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/alert/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/alert/examples.html create mode 100644 review/1654-focus-state-dev-research/components/alert/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/alert/migration.html create mode 100644 review/1654-focus-state-dev-research/components/alert/overview.html create mode 100644 review/1654-focus-state-dev-research/components/alert/properties.html create mode 100644 review/1654-focus-state-dev-research/components/badge.html create mode 100644 review/1654-focus-state-dev-research/components/badge/code/Content.html create mode 100644 review/1654-focus-state-dev-research/components/badge/code/Emphasis.html create mode 100644 review/1654-focus-state-dev-research/components/badge/code/Examples.html create mode 100644 review/1654-focus-state-dev-research/components/badge/code/Placement.html create mode 100644 review/1654-focus-state-dev-research/components/badge/code/Size.html create mode 100644 review/1654-focus-state-dev-research/components/badge/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/badge/code/Variant.html create mode 100644 review/1654-focus-state-dev-research/components/badge/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/badge/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/badge/docs/Migration.html create mode 100644 review/1654-focus-state-dev-research/components/badge/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/badge/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/badge/examples.html create mode 100644 review/1654-focus-state-dev-research/components/badge/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/badge/migration.html create mode 100644 review/1654-focus-state-dev-research/components/badge/overview.html create mode 100644 review/1654-focus-state-dev-research/components/badge/properties.html create mode 100644 review/1654-focus-state-dev-research/components/brand/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/brand/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/brand/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/brand/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/brand/examples.html create mode 100644 review/1654-focus-state-dev-research/components/brand/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/brand/migration.html create mode 100644 review/1654-focus-state-dev-research/components/brand/properties.html create mode 100644 review/1654-focus-state-dev-research/components/button.html create mode 100644 review/1654-focus-state-dev-research/components/button/code/Behaviour.html create mode 100644 review/1654-focus-state-dev-research/components/button/code/Content.html create mode 100644 review/1654-focus-state-dev-research/components/button/code/Size.html create mode 100644 review/1654-focus-state-dev-research/components/button/code/State.html create mode 100644 review/1654-focus-state-dev-research/components/button/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/button/code/Variant.html create mode 100644 review/1654-focus-state-dev-research/components/button/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/button/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/button/docs/Migration.html create mode 100644 review/1654-focus-state-dev-research/components/button/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/button/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/button/examples.html create mode 100644 review/1654-focus-state-dev-research/components/button/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/button/migration.html create mode 100644 review/1654-focus-state-dev-research/components/button/overview.html create mode 100644 review/1654-focus-state-dev-research/components/button/properties.html create mode 100644 review/1654-focus-state-dev-research/components/card.html create mode 100644 review/1654-focus-state-dev-research/components/card/code/ColorVariant.html create mode 100644 review/1654-focus-state-dev-research/components/card/code/Spacing.html create mode 100644 review/1654-focus-state-dev-research/components/card/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/card/code/Variant.html create mode 100644 review/1654-focus-state-dev-research/components/card/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/card/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/card/docs/Migration.html create mode 100644 review/1654-focus-state-dev-research/components/card/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/card/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/card/examples.html create mode 100644 review/1654-focus-state-dev-research/components/card/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/card/migration.html create mode 100644 review/1654-focus-state-dev-research/components/card/overview.html create mode 100644 review/1654-focus-state-dev-research/components/card/properties.html create mode 100644 review/1654-focus-state-dev-research/components/checkbox.html create mode 100644 review/1654-focus-state-dev-research/components/checkbox/code/Size.html create mode 100644 review/1654-focus-state-dev-research/components/checkbox/code/States.html create mode 100644 review/1654-focus-state-dev-research/components/checkbox/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/checkbox/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/checkbox/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/checkbox/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/checkbox/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/checkbox/examples.html create mode 100644 review/1654-focus-state-dev-research/components/checkbox/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/checkbox/migration.html create mode 100644 review/1654-focus-state-dev-research/components/checkbox/overview.html create mode 100644 review/1654-focus-state-dev-research/components/checkbox/properties.html create mode 100644 review/1654-focus-state-dev-research/components/code-docs/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/code-docs/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/code-docs/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/code-docs/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/code-docs/examples.html create mode 100644 review/1654-focus-state-dev-research/components/code-docs/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/code-docs/migration.html create mode 100644 review/1654-focus-state-dev-research/components/code-docs/properties.html create mode 100644 review/1654-focus-state-dev-research/components/divider.html create mode 100644 review/1654-focus-state-dev-research/components/divider/code/Emphasis.html create mode 100644 review/1654-focus-state-dev-research/components/divider/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/divider/code/Variant.html create mode 100644 review/1654-focus-state-dev-research/components/divider/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/divider/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/divider/docs/Migration.html create mode 100644 review/1654-focus-state-dev-research/components/divider/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/divider/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/divider/examples.html create mode 100644 review/1654-focus-state-dev-research/components/divider/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/divider/migration.html create mode 100644 review/1654-focus-state-dev-research/components/divider/overview.html create mode 100644 review/1654-focus-state-dev-research/components/divider/properties.html create mode 100644 review/1654-focus-state-dev-research/components/drawer.html create mode 100644 review/1654-focus-state-dev-research/components/drawer/code/Backdrop.html create mode 100644 review/1654-focus-state-dev-research/components/drawer/code/Directions.html create mode 100644 review/1654-focus-state-dev-research/components/drawer/code/Rounded.html create mode 100644 review/1654-focus-state-dev-research/components/drawer/code/Size.html create mode 100644 review/1654-focus-state-dev-research/components/drawer/code/Spacing.html create mode 100644 review/1654-focus-state-dev-research/components/drawer/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/drawer/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/drawer/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/drawer/docs/Migration.html create mode 100644 review/1654-focus-state-dev-research/components/drawer/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/drawer/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/drawer/examples.html create mode 100644 review/1654-focus-state-dev-research/components/drawer/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/drawer/migration.html create mode 100644 review/1654-focus-state-dev-research/components/drawer/overview.html create mode 100644 review/1654-focus-state-dev-research/components/drawer/properties.html create mode 100644 review/1654-focus-state-dev-research/components/header/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/header/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/header/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/header/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/header/examples.html create mode 100644 review/1654-focus-state-dev-research/components/header/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/header/migration.html create mode 100644 review/1654-focus-state-dev-research/components/header/properties.html create mode 100644 review/1654-focus-state-dev-research/components/icon/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/icon/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/icon/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/icon/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/icon/examples.html create mode 100644 review/1654-focus-state-dev-research/components/icon/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/icon/migration.html create mode 100644 review/1654-focus-state-dev-research/components/icon/properties.html create mode 100644 review/1654-focus-state-dev-research/components/infotext.html create mode 100644 review/1654-focus-state-dev-research/components/infotext/code/Size.html create mode 100644 review/1654-focus-state-dev-research/components/infotext/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/infotext/code/Variant.html create mode 100644 review/1654-focus-state-dev-research/components/infotext/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/infotext/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/infotext/docs/Migration.html create mode 100644 review/1654-focus-state-dev-research/components/infotext/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/infotext/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/infotext/examples.html create mode 100644 review/1654-focus-state-dev-research/components/infotext/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/infotext/migration.html create mode 100644 review/1654-focus-state-dev-research/components/infotext/overview.html create mode 100644 review/1654-focus-state-dev-research/components/infotext/properties.html create mode 100644 review/1654-focus-state-dev-research/components/input.html create mode 100644 review/1654-focus-state-dev-research/components/input/code/Content.html create mode 100644 review/1654-focus-state-dev-research/components/input/code/States.html create mode 100644 review/1654-focus-state-dev-research/components/input/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/input/code/Types.html create mode 100644 review/1654-focus-state-dev-research/components/input/code/Variant.html create mode 100644 review/1654-focus-state-dev-research/components/input/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/input/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/input/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/input/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/input/examples.html create mode 100644 review/1654-focus-state-dev-research/components/input/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/input/migration.html create mode 100644 review/1654-focus-state-dev-research/components/input/overview.html create mode 100644 review/1654-focus-state-dev-research/components/input/properties.html create mode 100644 review/1654-focus-state-dev-research/components/link.html create mode 100644 review/1654-focus-state-dev-research/components/link/code/Content.html create mode 100644 review/1654-focus-state-dev-research/components/link/code/Size.html create mode 100644 review/1654-focus-state-dev-research/components/link/code/State.html create mode 100644 review/1654-focus-state-dev-research/components/link/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/link/code/Variant.html create mode 100644 review/1654-focus-state-dev-research/components/link/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/link/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/link/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/link/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/link/examples.html create mode 100644 review/1654-focus-state-dev-research/components/link/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/link/migration.html create mode 100644 review/1654-focus-state-dev-research/components/link/overview.html create mode 100644 review/1654-focus-state-dev-research/components/link/properties.html create mode 100644 review/1654-focus-state-dev-research/components/main-navigation.html create mode 100644 review/1654-focus-state-dev-research/components/main-navigation/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/main-navigation/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/main-navigation/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/main-navigation/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/main-navigation/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/main-navigation/examples.html create mode 100644 review/1654-focus-state-dev-research/components/main-navigation/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/main-navigation/migration.html create mode 100644 review/1654-focus-state-dev-research/components/main-navigation/overview.html create mode 100644 review/1654-focus-state-dev-research/components/main-navigation/properties.html create mode 100644 review/1654-focus-state-dev-research/components/navigation-item.html create mode 100644 review/1654-focus-state-dev-research/components/navigation-item/code/Content.html create mode 100644 review/1654-focus-state-dev-research/components/navigation-item/code/States.html create mode 100644 review/1654-focus-state-dev-research/components/navigation-item/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/navigation-item/code/Width.html create mode 100644 review/1654-focus-state-dev-research/components/navigation-item/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/navigation-item/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/navigation-item/docs/Migration.html create mode 100644 review/1654-focus-state-dev-research/components/navigation-item/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/navigation-item/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/navigation-item/examples.html create mode 100644 review/1654-focus-state-dev-research/components/navigation-item/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/navigation-item/migration.html create mode 100644 review/1654-focus-state-dev-research/components/navigation-item/overview.html create mode 100644 review/1654-focus-state-dev-research/components/navigation-item/properties.html create mode 100644 review/1654-focus-state-dev-research/components/page/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/page/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/page/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/page/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/page/examples.html create mode 100644 review/1654-focus-state-dev-research/components/page/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/page/migration.html create mode 100644 review/1654-focus-state-dev-research/components/page/properties.html create mode 100644 review/1654-focus-state-dev-research/components/radio.html create mode 100644 review/1654-focus-state-dev-research/components/radio/code/Size.html create mode 100644 review/1654-focus-state-dev-research/components/radio/code/States.html create mode 100644 review/1654-focus-state-dev-research/components/radio/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/radio/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/radio/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/radio/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/radio/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/radio/examples.html create mode 100644 review/1654-focus-state-dev-research/components/radio/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/radio/migration.html create mode 100644 review/1654-focus-state-dev-research/components/radio/overview.html create mode 100644 review/1654-focus-state-dev-research/components/radio/properties.html create mode 100644 review/1654-focus-state-dev-research/components/readme.html create mode 100644 review/1654-focus-state-dev-research/components/section.html create mode 100644 review/1654-focus-state-dev-research/components/section/code/Size.html create mode 100644 review/1654-focus-state-dev-research/components/section/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/section/code/Variant.html create mode 100644 review/1654-focus-state-dev-research/components/section/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/section/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/section/docs/Migration.html create mode 100644 review/1654-focus-state-dev-research/components/section/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/section/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/section/examples.html create mode 100644 review/1654-focus-state-dev-research/components/section/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/section/migration.html create mode 100644 review/1654-focus-state-dev-research/components/section/overview.html create mode 100644 review/1654-focus-state-dev-research/components/section/properties.html create mode 100644 review/1654-focus-state-dev-research/components/select.html create mode 100644 review/1654-focus-state-dev-research/components/select/code/Content.html create mode 100644 review/1654-focus-state-dev-research/components/select/code/States.html create mode 100644 review/1654-focus-state-dev-research/components/select/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/select/code/Variant.html create mode 100644 review/1654-focus-state-dev-research/components/select/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/select/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/select/docs/Migration.html create mode 100644 review/1654-focus-state-dev-research/components/select/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/select/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/select/examples.html create mode 100644 review/1654-focus-state-dev-research/components/select/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/select/migration.html create mode 100644 review/1654-focus-state-dev-research/components/select/overview.html create mode 100644 review/1654-focus-state-dev-research/components/select/properties.html create mode 100644 review/1654-focus-state-dev-research/components/tab-bar/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/tab-bar/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/tab-bar/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/tab-bar/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/tab-bar/examples.html create mode 100644 review/1654-focus-state-dev-research/components/tab-bar/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/tab-bar/migration.html create mode 100644 review/1654-focus-state-dev-research/components/tab-bar/properties.html create mode 100644 review/1654-focus-state-dev-research/components/tab/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/tab/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/tab/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/tab/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/tab/examples.html create mode 100644 review/1654-focus-state-dev-research/components/tab/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/tab/migration.html create mode 100644 review/1654-focus-state-dev-research/components/tab/properties.html create mode 100644 review/1654-focus-state-dev-research/components/tag.html create mode 100644 review/1654-focus-state-dev-research/components/tag/code/Behaviour.html create mode 100644 review/1654-focus-state-dev-research/components/tag/code/Content.html create mode 100644 review/1654-focus-state-dev-research/components/tag/code/Emphasis.html create mode 100644 review/1654-focus-state-dev-research/components/tag/code/Example.html create mode 100644 review/1654-focus-state-dev-research/components/tag/code/Overflow.html create mode 100644 review/1654-focus-state-dev-research/components/tag/code/State.html create mode 100644 review/1654-focus-state-dev-research/components/tag/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/tag/code/Variant.html create mode 100644 review/1654-focus-state-dev-research/components/tag/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/tag/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/tag/docs/Migration.html create mode 100644 review/1654-focus-state-dev-research/components/tag/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/tag/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/tag/examples.html create mode 100644 review/1654-focus-state-dev-research/components/tag/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/tag/migration.html create mode 100644 review/1654-focus-state-dev-research/components/tag/overview.html create mode 100644 review/1654-focus-state-dev-research/components/tag/properties.html create mode 100644 review/1654-focus-state-dev-research/components/textarea.html create mode 100644 review/1654-focus-state-dev-research/components/textarea/code/Message.html create mode 100644 review/1654-focus-state-dev-research/components/textarea/code/Requirement.html create mode 100644 review/1654-focus-state-dev-research/components/textarea/code/Rows.html create mode 100644 review/1654-focus-state-dev-research/components/textarea/code/States.html create mode 100644 review/1654-focus-state-dev-research/components/textarea/code/Tonality.html create mode 100644 review/1654-focus-state-dev-research/components/textarea/code/Variant.html create mode 100644 review/1654-focus-state-dev-research/components/textarea/docs/Angular.html create mode 100644 review/1654-focus-state-dev-research/components/textarea/docs/HTML.html create mode 100644 review/1654-focus-state-dev-research/components/textarea/docs/Migration.html create mode 100644 review/1654-focus-state-dev-research/components/textarea/docs/React.html create mode 100644 review/1654-focus-state-dev-research/components/textarea/docs/Vue.html create mode 100644 review/1654-focus-state-dev-research/components/textarea/examples.html create mode 100644 review/1654-focus-state-dev-research/components/textarea/how-to-use.html create mode 100644 review/1654-focus-state-dev-research/components/textarea/migration.html create mode 100644 review/1654-focus-state-dev-research/components/textarea/overview.html create mode 100644 review/1654-focus-state-dev-research/components/textarea/properties.html create mode 100644 review/1654-focus-state-dev-research/docs/adr-xx-Template.md create mode 100644 review/1654-focus-state-dev-research/docs/definition-of-done-pr.md create mode 100644 review/1654-focus-state-dev-research/docs/how-to-develop-a-component.md create mode 100644 review/1654-focus-state-dev-research/docs/images/download/Contributor_Covenant204baaaa.licence create mode 100644 review/1654-focus-state-dev-research/docs/images/download/Contributor_Covenant204baaaa.svg create mode 100644 review/1654-focus-state-dev-research/docs/images/download/Conventional_Commits100yellow.licence create mode 100644 review/1654-focus-state-dev-research/docs/images/download/Conventional_Commits100yellow.svg create mode 100644 review/1654-focus-state-dev-research/docs/images/download/LicenseApache20blue.licence create mode 100644 review/1654-focus-state-dev-research/docs/images/download/LicenseApache20blue.svg create mode 100644 review/1654-focus-state-dev-research/docs/images/download/PRswelcomebrightgreenstyleflatsquare.licence create mode 100644 review/1654-focus-state-dev-research/docs/images/download/PRswelcomebrightgreenstyleflatsquare.svg create mode 100644 review/1654-focus-state-dev-research/docs/images/download/Part_ofDB_UX_Design_System_Cored7dce1.licence create mode 100644 review/1654-focus-state-dev-research/docs/images/download/Part_ofDB_UX_Design_System_Cored7dce1.svg create mode 100644 review/1654-focus-state-dev-research/docs/images/download/codestyleXO5ed9c7.licence create mode 100644 review/1654-focus-state-dev-research/docs/images/download/codestyleXO5ed9c7.svg create mode 100644 review/1654-focus-state-dev-research/docs/images/download/codestyleprettierff69b4styleflatsquare.licence create mode 100644 review/1654-focus-state-dev-research/docs/images/download/codestyleprettierff69b4styleflatsquare.svg create mode 100644 review/1654-focus-state-dev-research/docs/images/download/tagnamelabelnpmcolored1c24.licence create mode 100644 review/1654-focus-state-dev-research/docs/images/download/tagnamelabelnpmcolored1c24.svg create mode 100644 review/1654-focus-state-dev-research/docs/images/header_image_0.guetzli.2x.jpg create mode 100644 review/1654-focus-state-dev-research/docs/images/header_image_0.guetzli.3x.jpg create mode 100644 review/1654-focus-state-dev-research/docs/images/header_image_0.guetzli.jpg create mode 100644 review/1654-focus-state-dev-research/docs/migration-template.md create mode 100644 review/1654-focus-state-dev-research/docs/package.json create mode 100644 review/1654-focus-state-dev-research/docs/research-other-design-systems.md create mode 100644 review/1654-focus-state-dev-research/docs/research/README.md create mode 100644 review/1654-focus-state-dev-research/docs/research/switch-and-toggle.md create mode 100644 review/1654-focus-state-dev-research/docs/research/tooltip.md create mode 100644 review/1654-focus-state-dev-research/docs/scripts/component-research/design-systems.js create mode 100644 review/1654-focus-state-dev-research/docs/scripts/component-research/generate-component-research.js create mode 100644 review/1654-focus-state-dev-research/favicon.ico create mode 100644 review/1654-focus-state-dev-research/foundations/colors/examples.html create mode 100644 review/1654-focus-state-dev-research/foundations/colors/readme.html create mode 100644 review/1654-focus-state-dev-research/foundations/icons.html create mode 100644 review/1654-focus-state-dev-research/foundations/readme.html create mode 100644 review/1654-focus-state-dev-research/iframe-resizer/iframeResizer.contentWindow.js create mode 100644 review/1654-focus-state-dev-research/iframe-resizer/iframeResizer.contentWindow.map create mode 100644 review/1654-focus-state-dev-research/iframe-resizer/iframeResizer.contentWindow.min.js create mode 100644 review/1654-focus-state-dev-research/iframe-resizer/iframeResizer.js create mode 100644 review/1654-focus-state-dev-research/iframe-resizer/iframeResizer.map create mode 100644 review/1654-focus-state-dev-research/iframe-resizer/iframeResizer.min.js create mode 100644 review/1654-focus-state-dev-research/iframe.html create mode 100644 review/1654-focus-state-dev-research/images/db_logo.svg create mode 100644 review/1654-focus-state-dev-research/index.html create mode 100644 review/1654-focus-state-dev-research/robots.txt create mode 100644 review/1654-focus-state-dev-research/site.webmanifest diff --git a/review/1654-focus-state-dev-research/404.html b/review/1654-focus-state-dev-research/404.html new file mode 100644 index 00000000000..01fe9a6be78 --- /dev/null +++ b/review/1654-focus-state-dev-research/404.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/XxNpdvEhtSDcE2ZbgB7Uo/_buildManifest.js b/review/1654-focus-state-dev-research/_next/static/XxNpdvEhtSDcE2ZbgB7Uo/_buildManifest.js new file mode 100644 index 00000000000..e7c746489be --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/XxNpdvEhtSDcE2ZbgB7Uo/_buildManifest.js @@ -0,0 +1 @@ +self.__BUILD_MANIFEST=function(o,c,e,s,n,t,a,i,p,d,m,r,u,g,b,h,k,f,j,l,v,x,w,T,M,V,R,A,L,H,y,S,C,z,B,E,_,D,I,F,P,q,N,O,U,W,G,J,K,Q,X,Y,Z,$,oo,oc,oe,os,on,ot,oa,oi,op,od,om,or,ou,og,ob,oh,ok,of,oj,ol,ov,ox,ow,oT,oM,oV,oR,oA,oL,oH,oy,oS,oC,oz,oB,oE,o_,oD,oI,oF,oP,oq,oN,oO,oU,oW,oG,oJ,oK,oQ,oX,oY,oZ,o$,o6,o4,o2,o1,o0,o8,o5,o7,o9,o3,co,cc,ce,cs,cn,ct,ca,ci,cp,cd,cm,cr,cu,cg,cb,ch,ck,cf,cj,cl,cv,cx,cw){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[o,c,e,"static/chunks/pages/index-f776383edb98bbd4.js"],"/404":["static/chunks/pages/404-57ad5664cd6f1fb4.js"],"/_error":["static/chunks/pages/_error-76385da1cf67b566.js"],"/base64":[oy,"static/chunks/pages/base64-0a24a67edc9a9825.js"],"/components/accordion":[o,c,e,s,n,t,"static/chunks/pages/components/accordion-61ad012cddee8c88.js"],"/components/accordion/code/Behaviour":[o,t,"static/chunks/pages/components/accordion/code/Behaviour-aac8a347ea68c0df.js"],"/components/accordion/code/Tonality":[o,n,"static/chunks/pages/components/accordion/code/Tonality-3e68e33f53080faa.js"],"/components/accordion/docs/Angular":[o,oS,"static/chunks/pages/components/accordion/docs/Angular-e589419df764c599.js"],"/components/accordion/docs/HTML":[o,oC,"static/chunks/pages/components/accordion/docs/HTML-e62f98c211c3d1b0.js"],"/components/accordion/docs/Migration":["static/chunks/pages/components/accordion/docs/Migration-eabbd267b0f0b1bc.js"],"/components/accordion/docs/React":[o,oz,"static/chunks/pages/components/accordion/docs/React-5c20f180641c51de.js"],"/components/accordion/docs/Vue":[o,oB,"static/chunks/pages/components/accordion/docs/Vue-15475bf3d2aea62b.js"],"/components/accordion/examples":[c,e,"static/chunks/pages/components/accordion/examples-29a37fea75cea946.js"],"/components/accordion/how-to-use":[o,c,e,oC,oz,oS,oB,"static/chunks/pages/components/accordion/how-to-use-d6a180e4cb365670.js"],"/components/accordion/migration":[c,e,"static/chunks/pages/components/accordion/migration-dfe8636cee60b1ea.js"],"/components/accordion/overview":[o,c,e,s,n,t,"static/chunks/pages/components/accordion/overview-e825200fd9cd8c7d.js"],"/components/accordion/properties":[c,e,"static/chunks/pages/components/accordion/properties-8b2a7bfbb57ea1f1.js"],"/components/accordion-item":[o,c,e,s,a,i,"static/chunks/pages/components/accordion-item-3f157c3cb38975e2.js"],"/components/accordion-item/code/States":[o,a,"static/chunks/pages/components/accordion-item/code/States-45345919b355d687.js"],"/components/accordion-item/code/Tonality":[o,i,"static/chunks/pages/components/accordion-item/code/Tonality-e52c4ddf1cfd91f8.js"],"/components/accordion-item/docs/Angular":[o,oE,"static/chunks/pages/components/accordion-item/docs/Angular-b67428925785fa30.js"],"/components/accordion-item/docs/HTML":[o,"static/chunks/pages/components/accordion-item/docs/HTML-302de585746bd495.js"],"/components/accordion-item/docs/Migration":["static/chunks/pages/components/accordion-item/docs/Migration-fc7746b489c12584.js"],"/components/accordion-item/docs/React":[o,o_,"static/chunks/pages/components/accordion-item/docs/React-5951447756049ec9.js"],"/components/accordion-item/docs/Vue":[o,oD,"static/chunks/pages/components/accordion-item/docs/Vue-4cb40d24dbc5cc11.js"],"/components/accordion-item/examples":[c,e,"static/chunks/pages/components/accordion-item/examples-41a1d465f1b87720.js"],"/components/accordion-item/how-to-use":[o,c,e,oD,o_,oE,"static/chunks/pages/components/accordion-item/how-to-use-f743bad6290181f6.js"],"/components/accordion-item/migration":[c,e,"static/chunks/pages/components/accordion-item/migration-bb8be5d6420bea42.js"],"/components/accordion-item/overview":[o,c,e,s,a,i,"static/chunks/pages/components/accordion-item/overview-271d833f954014ad.js"],"/components/accordion-item/properties":[c,e,"static/chunks/pages/components/accordion-item/properties-ad3fff579fc16868.js"],"/components/alert":[o,c,e,s,p,d,m,r,u,"static/chunks/pages/components/alert-bba909b1003e81c3.js"],"/components/alert/code/Behaviour":[o,r,"static/chunks/pages/components/alert/code/Behaviour-4cb9fb4c162ebe4f.js"],"/components/alert/code/Content":[o,d,"static/chunks/pages/components/alert/code/Content-8300b862624af36b.js"],"/components/alert/code/Tonality":[o,m,"static/chunks/pages/components/alert/code/Tonality-830b31735b013fd6.js"],"/components/alert/code/Type":[o,u,"static/chunks/pages/components/alert/code/Type-24ee74aa2ace6868.js"],"/components/alert/code/Variant":[o,p,"static/chunks/pages/components/alert/code/Variant-79d7873ca40ac4b9.js"],"/components/alert/docs/Angular":[o,oI,"static/chunks/pages/components/alert/docs/Angular-e910ecd25884f259.js"],"/components/alert/docs/HTML":[o,oF,"static/chunks/pages/components/alert/docs/HTML-8647e1c2e8031567.js"],"/components/alert/docs/Migration":["static/chunks/pages/components/alert/docs/Migration-7d2d7faf8152b4f3.js"],"/components/alert/docs/React":[o,"static/chunks/pages/components/alert/docs/React-79ed29911ec85057.js"],"/components/alert/docs/Vue":[o,"static/chunks/pages/components/alert/docs/Vue-7fef7ffed06872c8.js"],"/components/alert/examples":[c,e,"static/chunks/pages/components/alert/examples-b4f56ec57a024f15.js"],"/components/alert/how-to-use":[o,c,e,oF,oI,"static/chunks/pages/components/alert/how-to-use-37ab18d36348bfea.js"],"/components/alert/migration":[c,e,"static/chunks/pages/components/alert/migration-8b97023fbaaba3fd.js"],"/components/alert/overview":[o,c,e,s,p,d,m,r,u,"static/chunks/pages/components/alert/overview-2ecc4791181ae44d.js"],"/components/alert/properties":[c,e,"static/chunks/pages/components/alert/properties-327f4af558f9931a.js"],"/components/badge":[o,c,e,s,g,b,h,k,f,j,l,"static/chunks/pages/components/badge-6424e353decd5e52.js"],"/components/badge/code/Content":[o,h,"static/chunks/pages/components/badge/code/Content-e60331792e3f9a14.js"],"/components/badge/code/Emphasis":[o,f,"static/chunks/pages/components/badge/code/Emphasis-32af294259af3a70.js"],"/components/badge/code/Examples":[o,l,"static/chunks/pages/components/badge/code/Examples-e3d2029cfd3bbdd4.js"],"/components/badge/code/Placement":[o,b,"static/chunks/pages/components/badge/code/Placement-fd8febeccd752b38.js"],"/components/badge/code/Size":[o,j,"static/chunks/pages/components/badge/code/Size-dbda1230eacb6642.js"],"/components/badge/code/Tonality":[o,k,"static/chunks/pages/components/badge/code/Tonality-672f99e244300ffd.js"],"/components/badge/code/Variant":[o,g,"static/chunks/pages/components/badge/code/Variant-ea69409b62bc3562.js"],"/components/badge/docs/Angular":[o,"static/chunks/pages/components/badge/docs/Angular-0c522ad963f4a88a.js"],"/components/badge/docs/HTML":[o,"static/chunks/pages/components/badge/docs/HTML-943634ad1af85e7a.js"],"/components/badge/docs/Migration":["static/chunks/pages/components/badge/docs/Migration-076f9bdbc4a8bc82.js"],"/components/badge/docs/React":[o,"static/chunks/pages/components/badge/docs/React-bb6195cfcf7a1fac.js"],"/components/badge/docs/Vue":[o,"static/chunks/pages/components/badge/docs/Vue-978de1d7cae53708.js"],"/components/badge/examples":[c,e,"static/chunks/pages/components/badge/examples-9adf249661b82e00.js"],"/components/badge/how-to-use":[o,c,e,"static/chunks/pages/components/badge/how-to-use-03a434975d67642a.js"],"/components/badge/migration":[c,e,"static/chunks/pages/components/badge/migration-6281764dddf0e9b9.js"],"/components/badge/overview":[o,c,e,s,g,b,h,k,f,j,l,"static/chunks/pages/components/badge/overview-af7ec9320a5cefc9.js"],"/components/badge/properties":[c,e,"static/chunks/pages/components/badge/properties-72e952d0b0583e98.js"],"/components/brand/docs/Angular":[o,"static/chunks/pages/components/brand/docs/Angular-32af9d7ccfda4947.js"],"/components/brand/docs/HTML":[o,"static/chunks/pages/components/brand/docs/HTML-2b3737aaa9906a82.js"],"/components/brand/docs/React":[o,"static/chunks/pages/components/brand/docs/React-0565d9f03f3f88a4.js"],"/components/brand/docs/Vue":[o,"static/chunks/pages/components/brand/docs/Vue-f949fdc4b3ec1063.js"],"/components/brand/examples":[c,e,"static/chunks/pages/components/brand/examples-ae3a198c20c3497e.js"],"/components/brand/how-to-use":[o,c,e,"static/chunks/pages/components/brand/how-to-use-c60f0f8e7be178f5.js"],"/components/brand/migration":[c,e,"static/chunks/pages/components/brand/migration-76800f2b54c7bee0.js"],"/components/brand/properties":[c,e,"static/chunks/pages/components/brand/properties-9b67eb992123814b.js"],"/components/button":[o,c,e,s,v,x,w,T,M,V,"static/chunks/pages/components/button-de486a878566ff49.js"],"/components/button/code/Behaviour":[o,T,"static/chunks/pages/components/button/code/Behaviour-ef52979d096c0642.js"],"/components/button/code/Content":[o,x,"static/chunks/pages/components/button/code/Content-ccc98682eb1dc681.js"],"/components/button/code/Size":[o,M,"static/chunks/pages/components/button/code/Size-1cc25c0402df6b30.js"],"/components/button/code/State":[o,V,"static/chunks/pages/components/button/code/State-7253b7d3124bd4df.js"],"/components/button/code/Tonality":[o,w,"static/chunks/pages/components/button/code/Tonality-d390d8a4c375335c.js"],"/components/button/code/Variant":[o,v,"static/chunks/pages/components/button/code/Variant-e1ac05b194a246c4.js"],"/components/button/docs/Angular":[o,oP,"static/chunks/pages/components/button/docs/Angular-ab1914d21de74b9a.js"],"/components/button/docs/HTML":[o,"static/chunks/pages/components/button/docs/HTML-1b29b460c0a7dbbb.js"],"/components/button/docs/Migration":["static/chunks/pages/components/button/docs/Migration-baee808c76f6830e.js"],"/components/button/docs/React":[o,"static/chunks/pages/components/button/docs/React-03c9838d2b54d7b3.js"],"/components/button/docs/Vue":[o,"static/chunks/pages/components/button/docs/Vue-d032c4e600be7e74.js"],"/components/button/examples":[c,e,"static/chunks/pages/components/button/examples-0e1afb9c90bc36ef.js"],"/components/button/how-to-use":[o,c,e,oP,"static/chunks/pages/components/button/how-to-use-b4a52a0ece7046a8.js"],"/components/button/migration":[c,e,"static/chunks/pages/components/button/migration-6716695f09ef6cf2.js"],"/components/button/overview":[o,c,e,s,v,x,w,T,M,V,"static/chunks/pages/components/button/overview-357fb8ddd964a29e.js"],"/components/button/properties":[c,e,"static/chunks/pages/components/button/properties-40b900f693552a14.js"],"/components/card":[o,c,e,s,R,A,L,H,"static/chunks/pages/components/card-4a2f36f2f6f52a31.js"],"/components/card/code/ColorVariant":[o,R,"static/chunks/pages/components/card/code/ColorVariant-50b04b4a51ae7e01.js"],"/components/card/code/Spacing":[o,L,"static/chunks/pages/components/card/code/Spacing-77c8411a74821cca.js"],"/components/card/code/Tonality":[o,A,"static/chunks/pages/components/card/code/Tonality-3c19b2d93de03154.js"],"/components/card/code/Variant":[o,H,"static/chunks/pages/components/card/code/Variant-1a00d7d00fe16e52.js"],"/components/card/docs/Angular":[o,"static/chunks/pages/components/card/docs/Angular-6b158d1b5caedda8.js"],"/components/card/docs/HTML":[o,"static/chunks/pages/components/card/docs/HTML-0cb180c8fd91a6c9.js"],"/components/card/docs/Migration":["static/chunks/pages/components/card/docs/Migration-c35463273c88ebe9.js"],"/components/card/docs/React":[o,"static/chunks/pages/components/card/docs/React-e350787a3c55cf46.js"],"/components/card/docs/Vue":[o,"static/chunks/pages/components/card/docs/Vue-77130bd40e1e5951.js"],"/components/card/examples":[c,e,"static/chunks/pages/components/card/examples-8fcdde24591fc5bb.js"],"/components/card/how-to-use":[o,c,e,"static/chunks/pages/components/card/how-to-use-60501434891af926.js"],"/components/card/migration":[c,e,"static/chunks/pages/components/card/migration-c09db3d3415f927d.js"],"/components/card/overview":[o,c,e,s,R,A,L,H,"static/chunks/pages/components/card/overview-f9f42578d8bef23a.js"],"/components/card/properties":[c,e,"static/chunks/pages/components/card/properties-84841a136fb348d2.js"],"/components/checkbox":[o,c,e,s,y,S,C,"static/chunks/pages/components/checkbox-7cf29d38e660bbe9.js"],"/components/checkbox/code/Size":[o,C,"static/chunks/pages/components/checkbox/code/Size-24cdab5bf07cb3c5.js"],"/components/checkbox/code/States":[o,y,"static/chunks/pages/components/checkbox/code/States-c309a25cd8e66628.js"],"/components/checkbox/code/Tonality":[o,S,"static/chunks/pages/components/checkbox/code/Tonality-90a7bfd7ce1038b7.js"],"/components/checkbox/docs/Angular":[o,oq,"static/chunks/pages/components/checkbox/docs/Angular-06bd11e30923679a.js"],"/components/checkbox/docs/HTML":[o,"static/chunks/pages/components/checkbox/docs/HTML-d020242325cb6fbf.js"],"/components/checkbox/docs/React":[o,oN,"static/chunks/pages/components/checkbox/docs/React-c3f65f2f857985bd.js"],"/components/checkbox/docs/Vue":[o,oO,"static/chunks/pages/components/checkbox/docs/Vue-8778690ca9617948.js"],"/components/checkbox/examples":[c,e,"static/chunks/pages/components/checkbox/examples-3d6528069dafe85f.js"],"/components/checkbox/how-to-use":[o,c,e,oq,oN,oO,"static/chunks/pages/components/checkbox/how-to-use-64bd6ae01a269f71.js"],"/components/checkbox/migration":[c,e,"static/chunks/pages/components/checkbox/migration-5ff177f5d3c3ab57.js"],"/components/checkbox/overview":[o,c,e,s,y,S,C,"static/chunks/pages/components/checkbox/overview-4c9617e334d4d8ee.js"],"/components/checkbox/properties":[c,e,"static/chunks/pages/components/checkbox/properties-0dccc243a10fe918.js"],"/components/code-docs/docs/Angular":["static/chunks/pages/components/code-docs/docs/Angular-71e1023526bd140f.js"],"/components/code-docs/docs/HTML":["static/chunks/pages/components/code-docs/docs/HTML-5abaea10a0bd00a8.js"],"/components/code-docs/docs/React":[o,oU,"static/chunks/pages/components/code-docs/docs/React-8c331e3cad37caa2.js"],"/components/code-docs/docs/Vue":["static/chunks/pages/components/code-docs/docs/Vue-bf4ee430eb9009dc.js"],"/components/code-docs/examples":[c,e,"static/chunks/pages/components/code-docs/examples-79d1f398ad392b39.js"],"/components/code-docs/how-to-use":[o,c,e,oU,"static/chunks/pages/components/code-docs/how-to-use-da3a67b826c15d23.js"],"/components/code-docs/migration":[c,e,"static/chunks/pages/components/code-docs/migration-ee9c510ba94cfc94.js"],"/components/code-docs/properties":[c,e,"static/chunks/pages/components/code-docs/properties-8ce9c141603d242f.js"],"/components/divider":[o,c,e,s,z,B,E,"static/chunks/pages/components/divider-c8235e869d79bf5f.js"],"/components/divider/code/Emphasis":[o,E,"static/chunks/pages/components/divider/code/Emphasis-5b9b6e46b0f591f7.js"],"/components/divider/code/Tonality":[o,z,"static/chunks/pages/components/divider/code/Tonality-f9eef91ad18f3cbc.js"],"/components/divider/code/Variant":[o,B,"static/chunks/pages/components/divider/code/Variant-3553943058fb508e.js"],"/components/divider/docs/Angular":[o,"static/chunks/pages/components/divider/docs/Angular-6c20f791bfd600a7.js"],"/components/divider/docs/HTML":[o,"static/chunks/pages/components/divider/docs/HTML-d3ffb96167d9bd5a.js"],"/components/divider/docs/Migration":["static/chunks/pages/components/divider/docs/Migration-5b4e3759897248e2.js"],"/components/divider/docs/React":[o,"static/chunks/pages/components/divider/docs/React-b28ce4e260cb0e8e.js"],"/components/divider/docs/Vue":[o,"static/chunks/pages/components/divider/docs/Vue-5bdd1fe5f7fcbab0.js"],"/components/divider/examples":[c,e,"static/chunks/pages/components/divider/examples-5fc88a569f48917c.js"],"/components/divider/how-to-use":[o,c,e,"static/chunks/pages/components/divider/how-to-use-f0425923311cd376.js"],"/components/divider/migration":[c,e,"static/chunks/pages/components/divider/migration-78b1b6d48cf47755.js"],"/components/divider/overview":[o,c,e,s,z,B,E,"static/chunks/pages/components/divider/overview-643e20b7f00346ba.js"],"/components/divider/properties":[c,e,"static/chunks/pages/components/divider/properties-b2336ee326c2a258.js"],"/components/drawer":[o,c,e,s,_,D,I,F,P,q,"static/chunks/pages/components/drawer-ec628b84a1c271b3.js"],"/components/drawer/code/Backdrop":[o,I,"static/chunks/pages/components/drawer/code/Backdrop-218664f2f5a8e269.js"],"/components/drawer/code/Directions":[o,D,"static/chunks/pages/components/drawer/code/Directions-6005a211d83e18ec.js"],"/components/drawer/code/Rounded":[o,q,"static/chunks/pages/components/drawer/code/Rounded-dac73f6402f672d5.js"],"/components/drawer/code/Size":[o,P,"static/chunks/pages/components/drawer/code/Size-936d8a0c222de656.js"],"/components/drawer/code/Spacing":[o,_,"static/chunks/pages/components/drawer/code/Spacing-b786357a54373af6.js"],"/components/drawer/code/Tonality":[o,F,"static/chunks/pages/components/drawer/code/Tonality-e4e4f73c210e166b.js"],"/components/drawer/docs/Angular":[o,oW,"static/chunks/pages/components/drawer/docs/Angular-454394480857d4c4.js"],"/components/drawer/docs/HTML":[o,oG,"static/chunks/pages/components/drawer/docs/HTML-cf291d2cc55aee0d.js"],"/components/drawer/docs/Migration":["static/chunks/pages/components/drawer/docs/Migration-6699333e2aa43788.js"],"/components/drawer/docs/React":[o,oJ,"static/chunks/pages/components/drawer/docs/React-f9a6124f7e33ff2a.js"],"/components/drawer/docs/Vue":[o,oK,"static/chunks/pages/components/drawer/docs/Vue-831ecc8be0ac4dc6.js"],"/components/drawer/examples":[c,e,"static/chunks/pages/components/drawer/examples-7c52c4c481eeef78.js"],"/components/drawer/how-to-use":[o,c,e,oJ,oK,oW,oG,"static/chunks/pages/components/drawer/how-to-use-c39ae7136fad3e9a.js"],"/components/drawer/migration":[c,e,"static/chunks/pages/components/drawer/migration-f9c8290729a3f73d.js"],"/components/drawer/overview":[o,c,e,s,_,D,I,F,P,q,"static/chunks/pages/components/drawer/overview-a52ef47b7b043468.js"],"/components/drawer/properties":[c,e,"static/chunks/pages/components/drawer/properties-0c68ac748a178b63.js"],"/components/header/docs/Angular":[o,oQ,"static/chunks/pages/components/header/docs/Angular-5c0476723d3d1430.js"],"/components/header/docs/HTML":[o,"static/chunks/pages/components/header/docs/HTML-d37fe6dd2a895850.js"],"/components/header/docs/React":[o,oX,"static/chunks/pages/components/header/docs/React-e6d076509b66bb53.js"],"/components/header/docs/Vue":[o,oY,"static/chunks/pages/components/header/docs/Vue-7733b79eb006c710.js"],"/components/header/examples":[c,e,"static/chunks/pages/components/header/examples-c99f01a6539c7476.js"],"/components/header/how-to-use":[o,c,e,oY,oQ,oX,"static/chunks/pages/components/header/how-to-use-fc69e6c37a16b411.js"],"/components/header/migration":[c,e,"static/chunks/pages/components/header/migration-6108aeaa40b5bb52.js"],"/components/header/properties":[c,e,"static/chunks/pages/components/header/properties-de075a41f2b759d2.js"],"/components/icon/docs/Angular":[o,oZ,"static/chunks/pages/components/icon/docs/Angular-c21d26c8d46cbde2.js"],"/components/icon/docs/HTML":[o,"static/chunks/pages/components/icon/docs/HTML-f858a5a0cb1188b2.js"],"/components/icon/docs/React":[o,"static/chunks/pages/components/icon/docs/React-7c28559835165040.js"],"/components/icon/docs/Vue":[o,"static/chunks/pages/components/icon/docs/Vue-09c3e3ab734459f1.js"],"/components/icon/examples":[c,e,"static/chunks/pages/components/icon/examples-5a22e07109dedd65.js"],"/components/icon/how-to-use":[o,c,e,oZ,"static/chunks/pages/components/icon/how-to-use-065a45c7d9ee5fd7.js"],"/components/icon/migration":[c,e,"static/chunks/pages/components/icon/migration-f7a17b9d521b193e.js"],"/components/icon/properties":[c,e,"static/chunks/pages/components/icon/properties-8f1f526109ab81dd.js"],"/components/infotext":[o,c,e,s,N,O,U,"static/chunks/pages/components/infotext-d5268f2775d2ae57.js"],"/components/infotext/code/Size":[o,U,"static/chunks/pages/components/infotext/code/Size-752151408bfabf1d.js"],"/components/infotext/code/Tonality":[o,O,"static/chunks/pages/components/infotext/code/Tonality-fb277473e28a9db9.js"],"/components/infotext/code/Variant":[o,N,"static/chunks/pages/components/infotext/code/Variant-d21302a1d2e806ec.js"],"/components/infotext/docs/Angular":[o,"static/chunks/pages/components/infotext/docs/Angular-a7252440e5791145.js"],"/components/infotext/docs/HTML":[o,"static/chunks/pages/components/infotext/docs/HTML-4abddfacaa69ade7.js"],"/components/infotext/docs/Migration":["static/chunks/pages/components/infotext/docs/Migration-511474c0a019b862.js"],"/components/infotext/docs/React":[o,"static/chunks/pages/components/infotext/docs/React-08dd74e439f488f0.js"],"/components/infotext/docs/Vue":[o,"static/chunks/pages/components/infotext/docs/Vue-e65d2a4bdcac11af.js"],"/components/infotext/examples":[c,e,"static/chunks/pages/components/infotext/examples-48f3ec368cbb3199.js"],"/components/infotext/how-to-use":[o,c,e,"static/chunks/pages/components/infotext/how-to-use-509440b6d142e69a.js"],"/components/infotext/migration":[c,e,"static/chunks/pages/components/infotext/migration-59c1d33583c448f8.js"],"/components/infotext/overview":[o,c,e,s,N,O,U,"static/chunks/pages/components/infotext/overview-be070bbe60a42f12.js"],"/components/infotext/properties":[c,e,"static/chunks/pages/components/infotext/properties-ce83fc93d01bec33.js"],"/components/input":[o,c,e,s,W,G,J,K,Q,"static/chunks/pages/components/input-01705f35a52d5bc3.js"],"/components/input/code/Content":[o,J,"static/chunks/pages/components/input/code/Content-546dad4e01cd42d0.js"],"/components/input/code/States":[o,G,"static/chunks/pages/components/input/code/States-5b45e7d0c5114916.js"],"/components/input/code/Tonality":[o,Q,"static/chunks/pages/components/input/code/Tonality-f58959e1f1e191a3.js"],"/components/input/code/Types":[o,W,"static/chunks/pages/components/input/code/Types-014ae4ad61164a1f.js"],"/components/input/code/Variant":[o,K,"static/chunks/pages/components/input/code/Variant-bd12971ae79f3d86.js"],"/components/input/docs/Angular":[o,o$,"static/chunks/pages/components/input/docs/Angular-5c740915be423ec9.js"],"/components/input/docs/HTML":[o,o6,"static/chunks/pages/components/input/docs/HTML-2e0cbca207c1e814.js"],"/components/input/docs/React":[o,o4,"static/chunks/pages/components/input/docs/React-d59cb904b1e96095.js"],"/components/input/docs/Vue":[o,o2,"static/chunks/pages/components/input/docs/Vue-d1a3cf394ae7400d.js"],"/components/input/examples":[c,e,"static/chunks/pages/components/input/examples-141d9190782d597c.js"],"/components/input/how-to-use":[o,c,e,o$,o2,o4,o6,"static/chunks/pages/components/input/how-to-use-e4537c1477495a60.js"],"/components/input/migration":[c,e,"static/chunks/pages/components/input/migration-e78b2ea63df8a229.js"],"/components/input/overview":[o,c,e,s,W,G,J,K,Q,"static/chunks/pages/components/input/overview-7d4ee98e95aa8126.js"],"/components/input/properties":[c,e,"static/chunks/pages/components/input/properties-ef5dcdce590f7239.js"],"/components/link":[o,c,e,s,X,Y,Z,$,oo,"static/chunks/pages/components/link-3e4da5aba8dd8c28.js"],"/components/link/code/Content":[o,$,"static/chunks/pages/components/link/code/Content-7a05123729e2ab1d.js"],"/components/link/code/Size":[o,Z,"static/chunks/pages/components/link/code/Size-68d0d0c0036e1d9f.js"],"/components/link/code/State":[o,oo,"static/chunks/pages/components/link/code/State-7cd286c82e61be93.js"],"/components/link/code/Tonality":[o,X,"static/chunks/pages/components/link/code/Tonality-d6a737d8e58ac56b.js"],"/components/link/code/Variant":[o,Y,"static/chunks/pages/components/link/code/Variant-be005ae8978b3162.js"],"/components/link/docs/Angular":[o,o1,"static/chunks/pages/components/link/docs/Angular-10a052255838bf64.js"],"/components/link/docs/HTML":[o,"static/chunks/pages/components/link/docs/HTML-15aa0677d29a1d8c.js"],"/components/link/docs/React":[o,o0,"static/chunks/pages/components/link/docs/React-2b23eb2c081d513c.js"],"/components/link/docs/Vue":[o,"static/chunks/pages/components/link/docs/Vue-a9f264345cd87e80.js"],"/components/link/examples":[c,e,"static/chunks/pages/components/link/examples-b0baf51f406dbd3a.js"],"/components/link/how-to-use":[o,c,e,o1,o0,"static/chunks/pages/components/link/how-to-use-3e496cf4ad070ea1.js"],"/components/link/migration":[c,e,"static/chunks/pages/components/link/migration-9a5b81b030af6af5.js"],"/components/link/overview":[o,c,e,s,X,Y,Z,$,oo,"static/chunks/pages/components/link/overview-5b383a568a616a6a.js"],"/components/link/properties":[c,e,"static/chunks/pages/components/link/properties-720715344a316c1d.js"],"/components/main-navigation":[o,c,e,s,oc,"static/chunks/pages/components/main-navigation-79d068d316f2f1f2.js"],"/components/main-navigation/code/Tonality":[o,oc,"static/chunks/pages/components/main-navigation/code/Tonality-18ee0b89ba9d2186.js"],"/components/main-navigation/docs/Angular":[o,o8,"static/chunks/pages/components/main-navigation/docs/Angular-33be8ac5f1f4b461.js"],"/components/main-navigation/docs/HTML":[o,o5,"static/chunks/pages/components/main-navigation/docs/HTML-91aed99245ca807c.js"],"/components/main-navigation/docs/React":[o,o7,"static/chunks/pages/components/main-navigation/docs/React-d53127ae49b61bd5.js"],"/components/main-navigation/docs/Vue":[o,o9,"static/chunks/pages/components/main-navigation/docs/Vue-a3e3c8446f388704.js"],"/components/main-navigation/examples":[c,e,"static/chunks/pages/components/main-navigation/examples-8000e57ca3b32104.js"],"/components/main-navigation/how-to-use":[o,c,e,o5,o8,o9,o7,"static/chunks/pages/components/main-navigation/how-to-use-51dd7d9d44ba287a.js"],"/components/main-navigation/migration":[c,e,"static/chunks/pages/components/main-navigation/migration-fe311a09f0676786.js"],"/components/main-navigation/overview":[o,c,e,s,oc,"static/chunks/pages/components/main-navigation/overview-9f86d2d9593503ee.js"],"/components/main-navigation/properties":[c,e,"static/chunks/pages/components/main-navigation/properties-1bf88abde7b1edfd.js"],"/components/navigation-item":[o,c,e,s,oe,os,on,ot,"static/chunks/pages/components/navigation-item-e18d5ae4e0497223.js"],"/components/navigation-item/code/Content":[o,oe,"static/chunks/pages/components/navigation-item/code/Content-6a44ab2ad696b652.js"],"/components/navigation-item/code/States":[o,os,"static/chunks/pages/components/navigation-item/code/States-fbea98014dafed47.js"],"/components/navigation-item/code/Tonality":[o,on,"static/chunks/pages/components/navigation-item/code/Tonality-96fb4712b3ec9bb5.js"],"/components/navigation-item/code/Width":[o,ot,"static/chunks/pages/components/navigation-item/code/Width-86c3ec98ef82d05e.js"],"/components/navigation-item/docs/Angular":[o,o3,"static/chunks/pages/components/navigation-item/docs/Angular-cef78a4ef91db52a.js"],"/components/navigation-item/docs/HTML":[o,co,"static/chunks/pages/components/navigation-item/docs/HTML-930b448e4865a4de.js"],"/components/navigation-item/docs/Migration":["static/chunks/pages/components/navigation-item/docs/Migration-c316de31f04ae8a2.js"],"/components/navigation-item/docs/React":[o,cc,"static/chunks/pages/components/navigation-item/docs/React-991b01381dff4073.js"],"/components/navigation-item/docs/Vue":[o,ce,"static/chunks/pages/components/navigation-item/docs/Vue-b9a2b57c0b600a18.js"],"/components/navigation-item/examples":[c,e,"static/chunks/pages/components/navigation-item/examples-8696cf0b617df140.js"],"/components/navigation-item/how-to-use":[o,c,e,o3,cc,ce,co,"static/chunks/pages/components/navigation-item/how-to-use-8e9689882801df78.js"],"/components/navigation-item/migration":[c,e,"static/chunks/pages/components/navigation-item/migration-35efdd2148a43a5b.js"],"/components/navigation-item/overview":[o,c,e,s,oe,os,on,ot,"static/chunks/pages/components/navigation-item/overview-74b046ad4b377cc3.js"],"/components/navigation-item/properties":[c,e,"static/chunks/pages/components/navigation-item/properties-e5abf79736abae5c.js"],"/components/page/docs/Angular":[o,cs,"static/chunks/pages/components/page/docs/Angular-4b6d116bfe0870ce.js"],"/components/page/docs/HTML":[o,"static/chunks/pages/components/page/docs/HTML-f47c63d4fb07d0bb.js"],"/components/page/docs/React":[o,cn,"static/chunks/pages/components/page/docs/React-20a126f6db8c3fd2.js"],"/components/page/docs/Vue":[o,ct,"static/chunks/pages/components/page/docs/Vue-3053292bc531eb99.js"],"/components/page/examples":[c,e,"static/chunks/pages/components/page/examples-427d5f64125af5a1.js"],"/components/page/how-to-use":[o,c,e,cs,cn,ct,"static/chunks/pages/components/page/how-to-use-5618d3bc505ba37a.js"],"/components/page/migration":[c,e,"static/chunks/pages/components/page/migration-12d5d5e64587da67.js"],"/components/page/properties":[c,e,"static/chunks/pages/components/page/properties-b1705f423b44d9d3.js"],"/components/radio":[o,c,e,s,oa,oi,op,"static/chunks/pages/components/radio-16ee8ee9831c3aa3.js"],"/components/radio/code/Size":[o,op,"static/chunks/pages/components/radio/code/Size-33a8f73f22757c97.js"],"/components/radio/code/States":[o,oa,"static/chunks/pages/components/radio/code/States-1b9d06c583553e5d.js"],"/components/radio/code/Tonality":[o,oi,"static/chunks/pages/components/radio/code/Tonality-1e8931447fdb45d9.js"],"/components/radio/docs/Angular":[o,ca,"static/chunks/pages/components/radio/docs/Angular-25f03730e0920150.js"],"/components/radio/docs/HTML":[o,ci,"static/chunks/pages/components/radio/docs/HTML-0e3cdb7a46c54147.js"],"/components/radio/docs/React":[o,cp,"static/chunks/pages/components/radio/docs/React-3653cdbee1afeb5e.js"],"/components/radio/docs/Vue":[o,cd,"static/chunks/pages/components/radio/docs/Vue-f16391bd189584a9.js"],"/components/radio/examples":[c,e,"static/chunks/pages/components/radio/examples-be5663c608024830.js"],"/components/radio/how-to-use":[o,c,e,ca,cp,cd,ci,"static/chunks/pages/components/radio/how-to-use-78c5b6264c0102e8.js"],"/components/radio/migration":[c,e,"static/chunks/pages/components/radio/migration-ab0af713ba752fcf.js"],"/components/radio/overview":[o,c,e,s,oa,oi,op,"static/chunks/pages/components/radio/overview-00a831552f82379c.js"],"/components/radio/properties":[c,e,"static/chunks/pages/components/radio/properties-fc646878b33da121.js"],"/components/readme":[o,c,e,"static/chunks/pages/components/readme-ae69dbd3064e5521.js"],"/components/section":[o,c,e,s,od,om,or,"static/chunks/pages/components/section-b35b31a942863fa9.js"],"/components/section/code/Size":[o,om,"static/chunks/pages/components/section/code/Size-1faa34db8d8522c9.js"],"/components/section/code/Tonality":[o,or,"static/chunks/pages/components/section/code/Tonality-b7125d4af40f71b4.js"],"/components/section/code/Variant":[o,od,"static/chunks/pages/components/section/code/Variant-abff6b1746d04420.js"],"/components/section/docs/Angular":[o,cm,"static/chunks/pages/components/section/docs/Angular-0641461e6ab2b313.js"],"/components/section/docs/HTML":[o,"static/chunks/pages/components/section/docs/HTML-ae2e8b1c808ecd71.js"],"/components/section/docs/Migration":["static/chunks/pages/components/section/docs/Migration-53cce929802091a0.js"],"/components/section/docs/React":[o,"static/chunks/pages/components/section/docs/React-ec661e0f98d3e404.js"],"/components/section/docs/Vue":[o,"static/chunks/pages/components/section/docs/Vue-c8377ab6be5a86f8.js"],"/components/section/examples":[c,e,"static/chunks/pages/components/section/examples-2d5c018e79738aa4.js"],"/components/section/how-to-use":[o,c,e,cm,"static/chunks/pages/components/section/how-to-use-99b41d385c2bfcab.js"],"/components/section/migration":[c,e,"static/chunks/pages/components/section/migration-81d2c6962a7232bb.js"],"/components/section/overview":[o,c,e,s,od,om,or,"static/chunks/pages/components/section/overview-ef2cce1770fc62ac.js"],"/components/section/properties":[c,e,"static/chunks/pages/components/section/properties-99a04f76427ac235.js"],"/components/select":[o,c,e,s,ou,og,ob,oh,"static/chunks/pages/components/select-4f895171a87c0724.js"],"/components/select/code/Content":[o,ob,"static/chunks/pages/components/select/code/Content-6f41052bdd6604bb.js"],"/components/select/code/States":[o,ou,"static/chunks/pages/components/select/code/States-4d7f728d30fb4c54.js"],"/components/select/code/Tonality":[o,oh,"static/chunks/pages/components/select/code/Tonality-e1294f66d392a686.js"],"/components/select/code/Variant":[o,og,"static/chunks/pages/components/select/code/Variant-bcaf030a4882880e.js"],"/components/select/docs/Angular":[o,cr,"static/chunks/pages/components/select/docs/Angular-3463234f602e7878.js"],"/components/select/docs/HTML":[o,cu,"static/chunks/pages/components/select/docs/HTML-95b9925cc50d2602.js"],"/components/select/docs/Migration":["static/chunks/pages/components/select/docs/Migration-3ce6809ee8704bfe.js"],"/components/select/docs/React":[o,cg,"static/chunks/pages/components/select/docs/React-0c688a80bc16d86f.js"],"/components/select/docs/Vue":[o,cb,"static/chunks/pages/components/select/docs/Vue-f65e112ac6915f38.js"],"/components/select/examples":[c,e,"static/chunks/pages/components/select/examples-7cb44672ce34daa6.js"],"/components/select/how-to-use":[o,c,e,cr,cg,cu,cb,"static/chunks/pages/components/select/how-to-use-1e82ef3bb9c230c0.js"],"/components/select/migration":[c,e,"static/chunks/pages/components/select/migration-ecb6f8261fb9fa19.js"],"/components/select/overview":[o,c,e,s,ou,og,ob,oh,"static/chunks/pages/components/select/overview-157b5325b29748ba.js"],"/components/select/properties":[c,e,"static/chunks/pages/components/select/properties-152d0ec973cdfbc6.js"],"/components/tab/docs/Angular":["static/chunks/pages/components/tab/docs/Angular-028a3a66b80698ac.js"],"/components/tab/docs/HTML":["static/chunks/pages/components/tab/docs/HTML-bb74f611cf2f20b8.js"],"/components/tab/docs/React":["static/chunks/pages/components/tab/docs/React-14ee0b9c415c12dd.js"],"/components/tab/docs/Vue":["static/chunks/pages/components/tab/docs/Vue-88d5b93f8bb9d0d2.js"],"/components/tab/examples":[c,e,"static/chunks/pages/components/tab/examples-d42da458e099b676.js"],"/components/tab/how-to-use":[c,e,"static/chunks/pages/components/tab/how-to-use-71bc93075c95173d.js"],"/components/tab/migration":[c,e,"static/chunks/pages/components/tab/migration-6a284b20184cdafb.js"],"/components/tab/properties":[c,e,"static/chunks/pages/components/tab/properties-755a8ac0fd1a91ea.js"],"/components/tab-bar/docs/Angular":["static/chunks/pages/components/tab-bar/docs/Angular-eb7ac02ff278d38e.js"],"/components/tab-bar/docs/HTML":["static/chunks/pages/components/tab-bar/docs/HTML-87f51bf95dd1c3b8.js"],"/components/tab-bar/docs/React":["static/chunks/pages/components/tab-bar/docs/React-21cfb6e0a5e825b1.js"],"/components/tab-bar/docs/Vue":["static/chunks/pages/components/tab-bar/docs/Vue-1dfb4e534a3f656f.js"],"/components/tab-bar/examples":[c,e,"static/chunks/pages/components/tab-bar/examples-8315178abada4ff4.js"],"/components/tab-bar/how-to-use":[c,e,"static/chunks/pages/components/tab-bar/how-to-use-c0f62c48d5026293.js"],"/components/tab-bar/migration":[c,e,"static/chunks/pages/components/tab-bar/migration-5e039fd4114fd4bb.js"],"/components/tab-bar/properties":[c,e,"static/chunks/pages/components/tab-bar/properties-09120b6fe39f6778.js"],"/components/tag":[o,c,e,s,ok,of,oj,ol,ov,ox,ow,oT,"static/chunks/pages/components/tag-6a047732fc42d609.js"],"/components/tag/code/Behaviour":[o,of,"static/chunks/pages/components/tag/code/Behaviour-703c2db5818fd956.js"],"/components/tag/code/Content":[o,ov,"static/chunks/pages/components/tag/code/Content-0111c70f108280c6.js"],"/components/tag/code/Emphasis":[o,ow,"static/chunks/pages/components/tag/code/Emphasis-fea550762eaa7139.js"],"/components/tag/code/Example":[o,oj,"static/chunks/pages/components/tag/code/Example-d619cfcfba3ac989.js"],"/components/tag/code/Overflow":[o,oT,"static/chunks/pages/components/tag/code/Overflow-e0a464e0f281913c.js"],"/components/tag/code/State":[o,ol,"static/chunks/pages/components/tag/code/State-3ed9a7a71891244c.js"],"/components/tag/code/Tonality":[o,ox,"static/chunks/pages/components/tag/code/Tonality-948604e012f92463.js"],"/components/tag/code/Variant":[o,ok,"static/chunks/pages/components/tag/code/Variant-37f1d31be1fc3619.js"],"/components/tag/docs/Angular":[o,ch,"static/chunks/pages/components/tag/docs/Angular-4cac6942b392aea4.js"],"/components/tag/docs/HTML":[o,"static/chunks/pages/components/tag/docs/HTML-3c5c3af4163e58c3.js"],"/components/tag/docs/Migration":[o,ck,"static/chunks/pages/components/tag/docs/Migration-0d926c633333df58.js"],"/components/tag/docs/React":[o,cf,"static/chunks/pages/components/tag/docs/React-d7e8f9bad0ce3231.js"],"/components/tag/docs/Vue":[o,cj,"static/chunks/pages/components/tag/docs/Vue-285b8547ead50457.js"],"/components/tag/examples":[c,e,"static/chunks/pages/components/tag/examples-a810a2d91b38c5a8.js"],"/components/tag/how-to-use":[o,c,e,cf,cj,ch,"static/chunks/pages/components/tag/how-to-use-6cb8495193920f5b.js"],"/components/tag/migration":[o,c,e,ck,"static/chunks/pages/components/tag/migration-6fe27c8710142a7d.js"],"/components/tag/overview":[o,c,e,s,ok,of,oj,ol,ov,ox,ow,oT,"static/chunks/pages/components/tag/overview-d8f7180e12488a8b.js"],"/components/tag/properties":[c,e,"static/chunks/pages/components/tag/properties-d670bb466ecc3341.js"],"/components/textarea":[o,c,e,s,oM,oV,oR,oA,oL,oH,"static/chunks/pages/components/textarea-396e840634757e9f.js"],"/components/textarea/code/Message":[o,oH,"static/chunks/pages/components/textarea/code/Message-0f407bbb8878f773.js"],"/components/textarea/code/Requirement":[o,oR,"static/chunks/pages/components/textarea/code/Requirement-46e45ecb9fe5ae28.js"],"/components/textarea/code/Rows":[o,oL,"static/chunks/pages/components/textarea/code/Rows-00c5c3a16d5d77d5.js"],"/components/textarea/code/States":[o,oV,"static/chunks/pages/components/textarea/code/States-daf0b7fe9a3ca893.js"],"/components/textarea/code/Tonality":[o,oA,"static/chunks/pages/components/textarea/code/Tonality-e0d38af73691bc0c.js"],"/components/textarea/code/Variant":[o,oM,"static/chunks/pages/components/textarea/code/Variant-ca8252c912b9112a.js"],"/components/textarea/docs/Angular":[o,cl,"static/chunks/pages/components/textarea/docs/Angular-e2e01526d8f666c3.js"],"/components/textarea/docs/HTML":[o,cv,"static/chunks/pages/components/textarea/docs/HTML-8a43543174f55945.js"],"/components/textarea/docs/Migration":["static/chunks/pages/components/textarea/docs/Migration-b547995b9abda00c.js"],"/components/textarea/docs/React":[o,cx,"static/chunks/pages/components/textarea/docs/React-5d268fdccfd8a7a6.js"],"/components/textarea/docs/Vue":[o,cw,"static/chunks/pages/components/textarea/docs/Vue-c5243b1508529efa.js"],"/components/textarea/examples":[c,e,"static/chunks/pages/components/textarea/examples-0af7acadaa59f533.js"],"/components/textarea/how-to-use":[o,c,e,cl,cx,cw,cv,"static/chunks/pages/components/textarea/how-to-use-f3fd05114a05c1b4.js"],"/components/textarea/migration":[c,e,"static/chunks/pages/components/textarea/migration-c010ec573ac2a652.js"],"/components/textarea/overview":[o,c,e,s,oM,oV,oR,oA,oL,oH,"static/chunks/pages/components/textarea/overview-a62e9b1519d50199.js"],"/components/textarea/properties":[c,e,"static/chunks/pages/components/textarea/properties-6630ff94d33ea2d7.js"],"/foundations/colors/examples":[c,e,"static/chunks/pages/foundations/colors/examples-22c66442baf61bf5.js"],"/foundations/colors/readme":[c,e,"static/chunks/pages/foundations/colors/readme-2e392de400b93af8.js"],"/foundations/icons":[c,e,"static/chunks/pages/foundations/icons-36c5d2a14cd4bf32.js"],"/foundations/readme":[o,c,e,"static/chunks/pages/foundations/readme-f934c8b85742c138.js"],"/iframe":[oy,s,"static/chunks/pages/iframe-639b0a3c78d2ac26.js"],sortedPages:["/","/404","/_app","/_error","/base64","/components/accordion","/components/accordion/code/Behaviour","/components/accordion/code/Tonality","/components/accordion/docs/Angular","/components/accordion/docs/HTML","/components/accordion/docs/Migration","/components/accordion/docs/React","/components/accordion/docs/Vue","/components/accordion/examples","/components/accordion/how-to-use","/components/accordion/migration","/components/accordion/overview","/components/accordion/properties","/components/accordion-item","/components/accordion-item/code/States","/components/accordion-item/code/Tonality","/components/accordion-item/docs/Angular","/components/accordion-item/docs/HTML","/components/accordion-item/docs/Migration","/components/accordion-item/docs/React","/components/accordion-item/docs/Vue","/components/accordion-item/examples","/components/accordion-item/how-to-use","/components/accordion-item/migration","/components/accordion-item/overview","/components/accordion-item/properties","/components/alert","/components/alert/code/Behaviour","/components/alert/code/Content","/components/alert/code/Tonality","/components/alert/code/Type","/components/alert/code/Variant","/components/alert/docs/Angular","/components/alert/docs/HTML","/components/alert/docs/Migration","/components/alert/docs/React","/components/alert/docs/Vue","/components/alert/examples","/components/alert/how-to-use","/components/alert/migration","/components/alert/overview","/components/alert/properties","/components/badge","/components/badge/code/Content","/components/badge/code/Emphasis","/components/badge/code/Examples","/components/badge/code/Placement","/components/badge/code/Size","/components/badge/code/Tonality","/components/badge/code/Variant","/components/badge/docs/Angular","/components/badge/docs/HTML","/components/badge/docs/Migration","/components/badge/docs/React","/components/badge/docs/Vue","/components/badge/examples","/components/badge/how-to-use","/components/badge/migration","/components/badge/overview","/components/badge/properties","/components/brand/docs/Angular","/components/brand/docs/HTML","/components/brand/docs/React","/components/brand/docs/Vue","/components/brand/examples","/components/brand/how-to-use","/components/brand/migration","/components/brand/properties","/components/button","/components/button/code/Behaviour","/components/button/code/Content","/components/button/code/Size","/components/button/code/State","/components/button/code/Tonality","/components/button/code/Variant","/components/button/docs/Angular","/components/button/docs/HTML","/components/button/docs/Migration","/components/button/docs/React","/components/button/docs/Vue","/components/button/examples","/components/button/how-to-use","/components/button/migration","/components/button/overview","/components/button/properties","/components/card","/components/card/code/ColorVariant","/components/card/code/Spacing","/components/card/code/Tonality","/components/card/code/Variant","/components/card/docs/Angular","/components/card/docs/HTML","/components/card/docs/Migration","/components/card/docs/React","/components/card/docs/Vue","/components/card/examples","/components/card/how-to-use","/components/card/migration","/components/card/overview","/components/card/properties","/components/checkbox","/components/checkbox/code/Size","/components/checkbox/code/States","/components/checkbox/code/Tonality","/components/checkbox/docs/Angular","/components/checkbox/docs/HTML","/components/checkbox/docs/React","/components/checkbox/docs/Vue","/components/checkbox/examples","/components/checkbox/how-to-use","/components/checkbox/migration","/components/checkbox/overview","/components/checkbox/properties","/components/code-docs/docs/Angular","/components/code-docs/docs/HTML","/components/code-docs/docs/React","/components/code-docs/docs/Vue","/components/code-docs/examples","/components/code-docs/how-to-use","/components/code-docs/migration","/components/code-docs/properties","/components/divider","/components/divider/code/Emphasis","/components/divider/code/Tonality","/components/divider/code/Variant","/components/divider/docs/Angular","/components/divider/docs/HTML","/components/divider/docs/Migration","/components/divider/docs/React","/components/divider/docs/Vue","/components/divider/examples","/components/divider/how-to-use","/components/divider/migration","/components/divider/overview","/components/divider/properties","/components/drawer","/components/drawer/code/Backdrop","/components/drawer/code/Directions","/components/drawer/code/Rounded","/components/drawer/code/Size","/components/drawer/code/Spacing","/components/drawer/code/Tonality","/components/drawer/docs/Angular","/components/drawer/docs/HTML","/components/drawer/docs/Migration","/components/drawer/docs/React","/components/drawer/docs/Vue","/components/drawer/examples","/components/drawer/how-to-use","/components/drawer/migration","/components/drawer/overview","/components/drawer/properties","/components/header/docs/Angular","/components/header/docs/HTML","/components/header/docs/React","/components/header/docs/Vue","/components/header/examples","/components/header/how-to-use","/components/header/migration","/components/header/properties","/components/icon/docs/Angular","/components/icon/docs/HTML","/components/icon/docs/React","/components/icon/docs/Vue","/components/icon/examples","/components/icon/how-to-use","/components/icon/migration","/components/icon/properties","/components/infotext","/components/infotext/code/Size","/components/infotext/code/Tonality","/components/infotext/code/Variant","/components/infotext/docs/Angular","/components/infotext/docs/HTML","/components/infotext/docs/Migration","/components/infotext/docs/React","/components/infotext/docs/Vue","/components/infotext/examples","/components/infotext/how-to-use","/components/infotext/migration","/components/infotext/overview","/components/infotext/properties","/components/input","/components/input/code/Content","/components/input/code/States","/components/input/code/Tonality","/components/input/code/Types","/components/input/code/Variant","/components/input/docs/Angular","/components/input/docs/HTML","/components/input/docs/React","/components/input/docs/Vue","/components/input/examples","/components/input/how-to-use","/components/input/migration","/components/input/overview","/components/input/properties","/components/link","/components/link/code/Content","/components/link/code/Size","/components/link/code/State","/components/link/code/Tonality","/components/link/code/Variant","/components/link/docs/Angular","/components/link/docs/HTML","/components/link/docs/React","/components/link/docs/Vue","/components/link/examples","/components/link/how-to-use","/components/link/migration","/components/link/overview","/components/link/properties","/components/main-navigation","/components/main-navigation/code/Tonality","/components/main-navigation/docs/Angular","/components/main-navigation/docs/HTML","/components/main-navigation/docs/React","/components/main-navigation/docs/Vue","/components/main-navigation/examples","/components/main-navigation/how-to-use","/components/main-navigation/migration","/components/main-navigation/overview","/components/main-navigation/properties","/components/navigation-item","/components/navigation-item/code/Content","/components/navigation-item/code/States","/components/navigation-item/code/Tonality","/components/navigation-item/code/Width","/components/navigation-item/docs/Angular","/components/navigation-item/docs/HTML","/components/navigation-item/docs/Migration","/components/navigation-item/docs/React","/components/navigation-item/docs/Vue","/components/navigation-item/examples","/components/navigation-item/how-to-use","/components/navigation-item/migration","/components/navigation-item/overview","/components/navigation-item/properties","/components/page/docs/Angular","/components/page/docs/HTML","/components/page/docs/React","/components/page/docs/Vue","/components/page/examples","/components/page/how-to-use","/components/page/migration","/components/page/properties","/components/radio","/components/radio/code/Size","/components/radio/code/States","/components/radio/code/Tonality","/components/radio/docs/Angular","/components/radio/docs/HTML","/components/radio/docs/React","/components/radio/docs/Vue","/components/radio/examples","/components/radio/how-to-use","/components/radio/migration","/components/radio/overview","/components/radio/properties","/components/readme","/components/section","/components/section/code/Size","/components/section/code/Tonality","/components/section/code/Variant","/components/section/docs/Angular","/components/section/docs/HTML","/components/section/docs/Migration","/components/section/docs/React","/components/section/docs/Vue","/components/section/examples","/components/section/how-to-use","/components/section/migration","/components/section/overview","/components/section/properties","/components/select","/components/select/code/Content","/components/select/code/States","/components/select/code/Tonality","/components/select/code/Variant","/components/select/docs/Angular","/components/select/docs/HTML","/components/select/docs/Migration","/components/select/docs/React","/components/select/docs/Vue","/components/select/examples","/components/select/how-to-use","/components/select/migration","/components/select/overview","/components/select/properties","/components/tab/docs/Angular","/components/tab/docs/HTML","/components/tab/docs/React","/components/tab/docs/Vue","/components/tab/examples","/components/tab/how-to-use","/components/tab/migration","/components/tab/properties","/components/tab-bar/docs/Angular","/components/tab-bar/docs/HTML","/components/tab-bar/docs/React","/components/tab-bar/docs/Vue","/components/tab-bar/examples","/components/tab-bar/how-to-use","/components/tab-bar/migration","/components/tab-bar/properties","/components/tag","/components/tag/code/Behaviour","/components/tag/code/Content","/components/tag/code/Emphasis","/components/tag/code/Example","/components/tag/code/Overflow","/components/tag/code/State","/components/tag/code/Tonality","/components/tag/code/Variant","/components/tag/docs/Angular","/components/tag/docs/HTML","/components/tag/docs/Migration","/components/tag/docs/React","/components/tag/docs/Vue","/components/tag/examples","/components/tag/how-to-use","/components/tag/migration","/components/tag/overview","/components/tag/properties","/components/textarea","/components/textarea/code/Message","/components/textarea/code/Requirement","/components/textarea/code/Rows","/components/textarea/code/States","/components/textarea/code/Tonality","/components/textarea/code/Variant","/components/textarea/docs/Angular","/components/textarea/docs/HTML","/components/textarea/docs/Migration","/components/textarea/docs/React","/components/textarea/docs/Vue","/components/textarea/examples","/components/textarea/how-to-use","/components/textarea/migration","/components/textarea/overview","/components/textarea/properties","/foundations/colors/examples","/foundations/colors/readme","/foundations/icons","/foundations/readme","/iframe"]}}("static/chunks/65a8b803-86ff7f4c730af09b.js","static/chunks/4375-38c8fe05e0f3891f.js","static/chunks/2087-1fb63d3639216d70.js","static/chunks/1346-8b1a4c21de01a23c.js","static/chunks/5479-69850a626ec152b0.js","static/chunks/1028-cb304ad622d208e6.js","static/chunks/5994-573ccf9ac18cfff9.js","static/chunks/36-10589576abcde7c5.js","static/chunks/951-d79239227e049007.js","static/chunks/869-23bb0610190e046e.js","static/chunks/8097-9f3f53ec30c02e3f.js","static/chunks/3570-dffb874b9103a761.js","static/chunks/8951-5f201649c30dd9af.js","static/chunks/7047-6554644a9a59d0eb.js","static/chunks/5306-57eb6f156ca3fcaa.js","static/chunks/9466-4dd723837d501e55.js","static/chunks/8621-abe321fafaed44d6.js","static/chunks/7506-ab180532863620a2.js","static/chunks/8563-706ac4dab823c690.js","static/chunks/3458-e31edabe81dad7ae.js","static/chunks/2666-4dac242a69d2a7cf.js","static/chunks/3585-20fa366217c710af.js","static/chunks/9596-43268ade4b975477.js","static/chunks/8465-9cfb4feb2c81c09c.js","static/chunks/7588-b123dda5cad0f051.js","static/chunks/3956-f4e7eab0f3e2c560.js","static/chunks/9620-7afe8cf6b23ae4fb.js","static/chunks/9310-3a42359dfca6b6b3.js","static/chunks/6303-b48b162ba20d677a.js","static/chunks/8448-515ceaff0ab1e4ab.js","static/chunks/4847-83ac30d6ad040030.js","static/chunks/7284-77d36e0a37494b96.js","static/chunks/1454-5ad81f21ea7c2236.js","static/chunks/9235-b7c8ae4ab61b64ac.js","static/chunks/7916-3a152626be1afa25.js","static/chunks/903-75bd248af98f3090.js","static/chunks/1142-931f5e9813b1ff4e.js","static/chunks/7376-e311d044f6092e90.js","static/chunks/827-58e59c8954843e31.js","static/chunks/8454-4faeffc34d883697.js","static/chunks/1390-a1d6d4f8d8ca3d01.js","static/chunks/5292-af62fb66e5d94646.js","static/chunks/6299-9b02b328895dae9e.js","static/chunks/2434-f0edeb25b43ae1e2.js","static/chunks/4781-93e1f9e5d1723c4e.js","static/chunks/5028-f5f57e650f4e4d80.js","static/chunks/9864-f0000dff20dd9427.js","static/chunks/7299-895f3c9848b94ab8.js","static/chunks/2233-a1920f23cfb178b1.js","static/chunks/3142-34398fa96f6a2011.js","static/chunks/5168-3ede3b980e46aeee.js","static/chunks/8265-587bdcd1995a79b0.js","static/chunks/6675-b54baf9ee7aa462c.js","static/chunks/6841-18211fd95a7af01e.js","static/chunks/3921-b3de3212e4a58127.js","static/chunks/5691-37b13098a8e1ed54.js","static/chunks/2306-fb25f03b8d6e05d4.js","static/chunks/7905-a9b184c4487fb3c1.js","static/chunks/6006-db6f7796350b87a4.js","static/chunks/2588-1a3cb97fb3627ad5.js","static/chunks/9180-3fc492d9dd745a47.js","static/chunks/1500-e2260931ddba758a.js","static/chunks/2954-378c1a3b64b39302.js","static/chunks/4202-0b5cd18734d96c36.js","static/chunks/6796-32bb8b136c52a92a.js","static/chunks/3990-6650316443206374.js","static/chunks/7628-66eafa40b3e1df10.js","static/chunks/9313-07fa25e775e474d8.js","static/chunks/7134-8510f0641993dd0c.js","static/chunks/3495-e298f53e70e70fe5.js","static/chunks/3191-3983e743ca40e7b9.js","static/chunks/4948-b20f12a47a775fdb.js","static/chunks/6151-6498d39158104056.js","static/chunks/2770-0329c515cff5ac37.js","static/chunks/7992-0ac8b8b0b156618d.js","static/chunks/5316-4911f26baef7cded.js","static/chunks/641-b4a41c2d89dd36e1.js","static/chunks/7092-fc3d75d4db59f91c.js","static/chunks/364-e6c0b80cd783a9e3.js","static/chunks/7789-c36eb3a6e7e16fb8.js","static/chunks/2454-0c5cf4128abde3a6.js","static/chunks/3017-e011d1e4b9527cd4.js","static/chunks/4383-776a493549f60f30.js","static/chunks/5407-513c7acef7d39a20.js","static/chunks/8834-1c3fb34b58f86bfe.js","static/chunks/8260-00ec3abc7ecd5f5c.js","static/chunks/1871-76c125bc3774607c.js","static/chunks/7682-d1e1f1dfd3b59ff9.js","static/chunks/9167-3791293dd6af7aa8.js","static/chunks/4813-ff68c591ac3c0a58.js","static/chunks/6673-d1b7b628fc31af7e.js","static/chunks/5805-2d0ba79bd51b5804.js","static/chunks/6866-2c8ab65524758b11.js","static/chunks/256-92cb1f9030c8e315.js","static/chunks/2005-4e7ffd0ced7eb1ab.js","static/chunks/9388-95c661363f4785a8.js","static/chunks/9977-d9ff0bbcc1f9e07f.js","static/chunks/8158-1fc038bb9ee2a586.js","static/chunks/2992-ae645d58bb3ae82c.js","static/chunks/3332-57d1cec14bf5e6d4.js","static/chunks/3630-9a009d0fd190eae8.js","static/chunks/5946-c80632dcd9559718.js","static/chunks/290-573cbd06d629f0af.js","static/chunks/2158-69318b6de42b4b92.js","static/chunks/5778-d012ed2fac07ab65.js","static/chunks/5206-fa6d0e4ffafd9bb8.js","static/chunks/7312-0e7357d235722e07.js","static/chunks/852-f66c6eac087cfcf4.js","static/chunks/8120-c04403ca4fc8e723.js","static/chunks/6484-4f610dd78196675a.js","static/chunks/8016-f4668058c2aef291.js","static/chunks/3189-4595f860ed305580.js","static/chunks/3512-018eb94dfa2a1a72.js","static/chunks/676-f328c6f01e4d7ba0.js","static/chunks/3937-fd868b780783d2d4.js","static/chunks/2273-dbce26176a66431b.js","static/chunks/2482-d0b08b21a4659a27.js","static/chunks/530-5b6d3347d0ea2337.js","static/chunks/6087-8bd460c20170c6d3.js","static/chunks/8080-2fa73a955e575ba1.js","static/chunks/9931-3dff82448a5dbe7e.js","static/chunks/8556-1ec3aa5caec80f57.js","static/chunks/2690-c5f5302d785c9b3f.js","static/chunks/4958-a1052e27ee967c59.js","static/chunks/9122-e6b4b77385729f74.js","static/chunks/365-5fa003555de1c83e.js","static/chunks/8302-377ece682c92b1a8.js","static/chunks/9793-530c0cd7de306ce2.js","static/chunks/1295-fcc68c6157d8e000.js","static/chunks/7406-8fb6fb97c0f06b34.js","static/chunks/500-ede2bbeb7ee081c7.js","static/chunks/4105-179626c80997128b.js","static/chunks/2647-95906a56f59a9371.js","static/chunks/9467-d91e6cdb2dc66553.js","static/chunks/3686-521b9c112066e016.js","static/chunks/9053-9d4204607a076f85.js","static/chunks/5133-66cb887bdebf07f7.js","static/chunks/2818-8be41e8134cac5e6.js","static/chunks/1520-9e773e640442a949.js","static/chunks/4469-96db0b2f078c40ff.js","static/chunks/9189-427f185900a65678.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/XxNpdvEhtSDcE2ZbgB7Uo/_ssgManifest.js b/review/1654-focus-state-dev-research/_next/static/XxNpdvEhtSDcE2ZbgB7Uo/_ssgManifest.js new file mode 100644 index 00000000000..0511aa895e5 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/XxNpdvEhtSDcE2ZbgB7Uo/_ssgManifest.js @@ -0,0 +1 @@ +self.__SSG_MANIFEST=new Set,self.__SSG_MANIFEST_CB&&self.__SSG_MANIFEST_CB(); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/1028-cb304ad622d208e6.js b/review/1654-focus-state-dev-research/_next/static/chunks/1028-cb304ad622d208e6.js new file mode 100644 index 00000000000..18882a4539a --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/1028-cb304ad622d208e6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1028],{11028:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),c=e(45392),r=e(65854);let s={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(s.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"The accordion is a pure JS Component",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"The accordion is a pure JS Component",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(s.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion behaviour",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"single",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion behaviour",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"single",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"The accordion is a pure JS Component",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion behaviour",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"single",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion behaviour",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"single",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"The accordion is a pure JS Component",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/1142-931f5e9813b1ff4e.js b/review/1654-focus-state-dev-research/_next/static/chunks/1142-931f5e9813b1ff4e.js new file mode 100644 index 00000000000..cbe3b650120 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/1142-931f5e9813b1ff4e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1142],{91142:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return c}});var n=e(52322),s=e(45392),r=e(65854);let l={annotations:r.ds,Code:r.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true">Medium (Default)',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true">Medium (Default)',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"large",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Large",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"large",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"large",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Large",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"large",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"No spacing",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"none",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" No spacing",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"none",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"No spacing",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}},{content:"No spacing",props:{style:{color:"#D8DEE9FF"}}},{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"No spacing",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"none",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" No spacing",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"none",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"No spacing",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}},{content:"No spacing",props:{style:{color:"#D8DEE9FF"}}},{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/1295-fcc68c6157d8e000.js b/review/1654-focus-state-dev-research/_next/static/chunks/1295-fcc68c6157d8e000.js new file mode 100644 index 00000000000..75e98e21078 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/1295-fcc68c6157d8e000.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1295],{81295:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),c=e(45392),r=e(65854);let s={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,c.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Angular"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/ngx-components",children:"ngx-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Load component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"//app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBSectionModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBSectionModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Section",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/1346-8b1a4c21de01a23c.js b/review/1654-focus-state-dev-research/_next/static/chunks/1346-8b1a4c21de01a23c.js new file mode 100644 index 00000000000..e1e3c2ad7d6 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/1346-8b1a4c21de01a23c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1346],{72061:function(e,n,t){var a=t(52322),l=t(2784),i=t(36029),r=t(41220);let s=(0,l.forwardRef)(function(e,n){let[t,s]=(0,l.useState)(()=>r.IY),[d,o]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{s(e.id||"accordion-item-"+(0,i.Vj)()),e.stylePath&&o(e.stylePath)},[]),(0,a.jsxs)("details",{ref:n,id:t,className:(0,i.yI)("db-accordion-item",e.className),"aria-disabled":e.disabled,open:e.open,children:[d?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:d})}):null,(0,a.jsxs)("summary",{onClick:n=>{null==n||n.preventDefault(),e.onToggle&&e.onToggle(!e.open)},children:[e.title?(0,a.jsx)(a.Fragment,{children:e.title}):null,e.title?null:(0,a.jsx)(a.Fragment,{children:e.slotTitle})]}),(0,a.jsxs)("div",{children:[e.content?(0,a.jsx)(a.Fragment,{children:e.content}):null,e.content?null:(0,a.jsx)(a.Fragment,{children:e.children})]})]})});n.Z=s},74093:function(e,n,t){t.d(n,{k:function(){return a.Z}});var a=t(72061)},5307:function(e,n,t){var a=t(52322),l=t(2784),i=t(36029),r=t(74093);let s=(0,l.forwardRef)(function(e,n){var t;let s=(0,l.useRef)(n),[d,o]=(0,l.useState)(()=>[]),[c,u]=(0,l.useState)(()=>""),[h,f]=(0,l.useState)(()=>!1),[v,m]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{e.stylePath&&m(e.stylePath),f(!0)},[]),(0,l.useEffect)(()=>{if(s.current&&h){let n=s.current.getElementsByTagName("details");if(n){let t=[];Array.from(n).forEach(e=>{let n=e.id;e.open&&t.push(n);let a=e.getElementsByTagName("summary");(null==a?void 0:a.length)>0&&a[0].addEventListener("click",()=>{u(n)})}),"single"===e.behaviour&&t.length>1&&(t=[t[0]]),o(t)}f(!1)}},[s.current,h]),(0,l.useEffect)(()=>{(null==c?void 0:c.length)>0&&(d.includes(c)?"single"===e.behaviour?o([]):o(d.filter(e=>e!==c)):"single"===e.behaviour?o([c]):o([...d,c]),e.onChange&&e.onChange(d),u(""))},[c]),(0,l.useEffect)(()=>{if(null==s?void 0:s.current){let e=s.current.getElementsByTagName("details");e&&Array.from(e).forEach(e=>{e.open=d.includes(e.id)})}},[d]),(0,a.jsxs)("div",{ref:s,id:e.id,className:(0,i.yI)("db-accordion",e.className),children:[v?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:v})}):null,e.items?null:(0,a.jsx)(a.Fragment,{children:e.children}),e.items?(0,a.jsx)(a.Fragment,{children:null===(t=function(e){try{if("string"==typeof e)return JSON.parse(e);return e}catch(e){console.error(e)}}(e.items))||void 0===t?void 0:t.map((e,n)=>(0,a.jsx)(r.k,{title:e.title,disabled:e.disabled,content:e.content},"accordion-item-".concat(e.title,"-").concat(n)))}):null]})});n.Z=s},11365:function(e,n,t){var a=t(52322),l=t(2784),i=t(57334),r=t(48258),s=t(41220),d=t(36029);let o=(0,l.forwardRef)(function(e,n){var t;let[o,c]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{e.stylePath&&c(e.stylePath)},[]),(0,a.jsxs)("div",{ref:n,id:e.id,className:(0,d.yI)("db-alert",e.className),"aria-live":e.ariaLive,"data-variant":e.variant,"data-type":e.type,"data-icon":e.icon,"data-elevation":e.elevation,children:[o?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:o})}):null,e.headline?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("strong",{className:"db-alert-headline",children:e.headline})}):null,(0,a.jsx)("p",{className:"db-alert-content",children:e.children}),e.link?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(r.v,{variant:"inline",className:"db-alert-link",href:e.link.href,target:e.link.target,rel:e.link.rel,role:e.link.role,disabled:e.link.disabled,selected:e.link.selected,label:e.link.label,hreflang:e.link.hreflang,current:e.link.current,text:e.link.text})}):null,"permanent"!==e.behaviour?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(i.Y,{icon:"close",variant:"text",size:"small",className:"db-alert-close",id:e.closeButtonId,noText:!0,onClick:n=>{e.onClick&&e.onClick(n)},children:null!==(t=e.closeButtonText)&&void 0!==t?t:s.ce})}):null]})});n.Z=o},21279:function(e,n,t){var a=t(52322),l=t(2784),i=t(36029);let r=(0,l.forwardRef)(function(e,n){let[t,r]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{e.stylePath&&r(e.stylePath)},[]),(0,a.jsxs)("span",{ref:n,id:e.id,className:(0,i.yI)("db-badge",e.className),"data-variant":e.variant,"data-size":e.size,"data-emphasis":e.emphasis,"data-placement":e.placement,children:[t?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:t})}):null,e.children]})});n.Z=r},17641:function(e,n,t){var a=t(52322),l=t(2784),i=t(36029);let r=(0,l.forwardRef)(function(e,n){var t,r,s,d,o;let[c,u]=(0,l.useState)(()=>({anchorRef:"/",src:"./assets/images/db_logo.svg",width:"34",height:"24"})),[h,f]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{e.stylePath&&f(e.stylePath)},[]),(0,a.jsxs)("div",{ref:n,id:e.id,className:(0,i.yI)("db-brand",e.className),children:[h?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:h})}):null,(0,a.jsxs)("a",{href:null!==(t=e.anchorRef)&&void 0!==t?t:c.anchorRef,title:e.anchorTitle,rel:e.anchorRelation,children:[e.hideDefaultAsset?null:(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("img",{className:"db-logo",src:null!==(r=e.imgSrc)&&void 0!==r?r:c.src,alt:null!==(s=e.imgAlt)&&void 0!==s?s:"",height:null!==(d=e.imgHeight)&&void 0!==d?d:c.height,width:null!==(o=e.imgWidth)&&void 0!==o?o:c.width})}),e.anchorChildren?(0,a.jsx)(a.Fragment,{children:e.children}):null]}),e.anchorChildren?null:(0,a.jsx)(a.Fragment,{children:e.children})]})});n.Z=r},5239:function(e,n,t){var a=t(52322),l=t(2784),i=t(36029);let r=(0,l.forwardRef)(function(e,n){let[t,r]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{e.stylePath&&r(e.stylePath)},[]),(0,a.jsxs)("button",{id:e.id,ref:n,className:(0,i.yI)("db-button",e.className,{"is-icon-text-replace":e.noText}),type:e.type,title:e.title,disabled:e.disabled,"aria-label":e.label,"data-icon":e.icon,"data-size":e.size,"data-state":e.state,"data-width":e.width,"data-variant":e.variant,name:e.name,value:e.value,"aria-expanded":e.ariaexpanded,"aria-pressed":e.ariapressed,onClick:n=>{e.onClick&&e.onClick(n)},children:[t?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:t})}):null,e.children]})});n.Z=r},57334:function(e,n,t){t.d(n,{Y:function(){return a.Z}});var a=t(5239)},95139:function(e,n,t){var a=t(52322),l=t(2784),i=t(36029);let r=(0,l.forwardRef)(function(e,n){let[t,r]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{e.stylePath&&r(e.stylePath)},[]),(0,a.jsxs)("div",{ref:n,id:e.id,className:(0,i.yI)("db-card",e.className),"data-variant":e.variant,"data-color-variant":e.colorVariant,"data-elevation":e.elevation,"data-spacing":e.spacing,onClick:n=>{e.onClick&&e.onClick(n)},children:[t?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:t})}):null,e.imgSrc?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("img",{className:"db-card-image",src:e.imgSrc,alt:e.imgAlt,height:e.imgHeight,width:e.imgWidth})}):null,e.children]})});n.Z=r},72451:function(e,n,t){t.d(n,{f:function(){return a.Z}});var a=t(95139)},20985:function(e,n,t){var a=t(52322),l=t(2784),i=t(36029),r=t(41220);let s=(0,l.forwardRef)(function(e,n){let[t,s]=(0,l.useState)(()=>!1),[d,o]=(0,l.useState)(()=>r.IY),[c,u]=(0,l.useState)(()=>void 0),[h,f]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{s(!0),o(e.id||"checkbox-"+(0,i.Vj)()),e.stylePath&&f(e.stylePath)},[]),(0,l.useEffect)(()=>{if(t&&document&&d){var n;let t=null===(n=document)||void 0===n?void 0:n.getElementById(d);t&&(void 0!=e.checked&&(t.checked=e.checked),void 0!==e.indeterminate&&(t.indeterminate=e.indeterminate),void 0!==e.defaultChecked&&(t.defaultChecked=e.defaultChecked))}},[t,e.indeterminate,e.checked,e.defaultChecked]),(0,a.jsxs)(a.Fragment,{children:[h?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:h})}):null,(0,a.jsx)("input",{type:"checkbox",ref:n,className:(0,i.yI)("db-checkbox",e.className),id:d,name:e.name,checked:e.checked,disabled:e.disabled,value:e.value,"aria-describedby":e.describedbyid,"aria-invalid":e.invalid,"data-size":e.size,required:e.required,onChange:n=>{var t,a,l,i,r,s;e.onChange&&e.onChange(n),e.change&&e.change(n),(null===(a=n.target)||void 0===a?void 0:null===(t=a.validity)||void 0===t?void 0:t.valid)!=c&&(u(null===(i=n.target)||void 0===i?void 0:null===(l=i.validity)||void 0===l?void 0:l.valid),e.validityChange&&e.validityChange(!!(null===(s=n.target)||void 0===s?void 0:null===(r=s.validity)||void 0===r?void 0:r.valid)))},onBlur:n=>{e.onBlur&&e.onBlur(n),e.blur&&e.blur(n)},onFocus:n=>{e.onFocus&&e.onFocus(n),e.focus&&e.focus(n)}}),(0,a.jsxs)("label",{htmlFor:d,children:[e.label?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("span",{children:e.label})}):null,e.children]})]})});n.Z=s},18241:function(e,n,t){var a=t(52322),l=t(2784),i=t(72451),r=t(36029);let s=(0,l.forwardRef)(function(e,n){var t,s;let[d,o]=(0,l.useState)(()=>!1),[c,u]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{e.stylePath&&u(e.stylePath)},[]),(0,a.jsxs)(i.f,{elevation:"none",ref:n,className:(0,r.yI)("db-code-docs",e.className),children:[c?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:c})}):null,e.children,(0,a.jsxs)("details",{className:"code-details",onToggle:e=>void o(!d),children:[(0,a.jsx)("summary",{className:"db-button code-button","data-size":"small","data-variant":"primary",children:d?null!==(t=e.hideCodeLabel)&&void 0!==t?t:"Hide Code":null!==(s=e.showCodeLabel)&&void 0!==s?s:"Show Code"}),(0,a.jsx)("div",{className:"db-ui-functional code",children:e.slotCode})]})]})});n.Z=s},73114:function(e,n,t){var a=t(52322),l=t(2784),i=t(36029);let r=(0,l.forwardRef)(function(e,n){let[t,r]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{e.stylePath&&r(e.stylePath)},[]),(0,a.jsx)("div",{ref:n,id:e.id,"data-margin":e.margin,"data-variant":e.variant,"data-emphasis":e.emphasis,className:(0,i.yI)("db-divider",e.className),children:t?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:t})}):null})});n.Z=r},65383:function(e,n,t){var a=t(52322),l=t(2784),i=t(57334),r=t(41220),s=t(36029);let d=(0,l.forwardRef)(function(e,n){var t;let d=(0,l.useRef)(n),o=(0,l.useRef)(null),[c,u]=(0,l.useState)(()=>r.IY);function handleClose(n){"Escape"===n.key&&n.preventDefault(),("close"===n||"Escape"===n.key||"DIALOG"===n.target.nodeName&&"none"!==e.backdrop)&&e.onClose&&e.onClose()}function handleDialogOpen(){d.current&&(e.open&&!d.current.open&&(o.current&&(o.current.hidden=!1),"none"===e.backdrop?d.current.show():d.current.showModal()),!e.open&&d.current.open&&(o.current&&(o.current.hidden=!0),setTimeout(()=>{var e;o.current&&(o.current.hidden=!1),null===(e=d.current)||void 0===e||e.close()},401)))}let[h,f]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{u(e.id||"drawer-"+(0,s.Vj)()),e.stylePath&&f(e.stylePath),handleDialogOpen()},[]),(0,l.useEffect)(()=>{handleDialogOpen()},[e.open]),(0,a.jsxs)("dialog",{className:"db-drawer",id:c,ref:d,onClick:e=>{handleClose(e)},onKeyDown:e=>handleClose(e),"data-backdrop":e.backdrop,children:[h?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:h})}):null,(0,a.jsxs)("article",{ref:o,className:(0,s.yI)("db-drawer-container",e.className),"data-spacing":e.spacing,"data-width":e.width,"data-direction":e.direction,"data-rounded":e.rounded,children:[(0,a.jsxs)("header",{className:"db-drawer-header",children:[(0,a.jsx)("div",{className:"db-drawer-header-text",children:e.slotDrawerHeader}),e.withCloseButton?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(i.Y,{icon:"close",variant:"text",className:"button-close-drawer",id:e.closeButtonId,noText:!0,onClick:e=>handleClose("close"),children:null!==(t=e.closeButtonText)&&void 0!==t?t:r.ce})}):null]}),(0,a.jsx)("div",{className:"db-drawer-content",children:e.children})]})]})});n.Z=d},43945:function(e,n,t){t.d(n,{T:function(){return a.Z}});var a=t(65383)},14333:function(e,n,t){var a=t(52322),l=t(2784),i=t(36029),r=t(57334),s=t(43945),d=t(41220);let o=(0,l.forwardRef)(function(e,n){var t;let[o,c]=(0,l.useState)(()=>d.IY),[u,h]=(0,l.useState)(()=>!1),[f,v]=(0,l.useState)(()=>!1),[m,g]=(0,l.useState)(()=>({burgerMenuLabel:"BurgerMenu"}));function toggle(){e.onToggle&&e.onToggle(!e.drawerOpen)}let[x,b]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{h(!0),c(e.id||"header-"+(0,i.Vj)()),e.stylePath&&b(e.stylePath)},[]),(0,l.useEffect)(()=>{if(u&&document&&o&&e.forceMobile){let e=document.getElementById(o);e&&(0,i.yn)(e,{key:"force-mobile",value:""}),v(!0)}},[u]),(0,a.jsxs)("header",{ref:n,className:(0,i.yI)("db-header",e.className),id:o,"data-on-forcing-mobile":e.forceMobile&&!f,children:[x?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:x})}):null,(0,a.jsxs)(s.T,{"data-hide-on":"desktop",spacing:"small",className:"db-header-drawer",rounded:!0,withCloseButton:!0,open:e.drawerOpen,onClose:()=>toggle(),children:[(0,a.jsxs)("div",{className:"db-header-drawer-navigation",children:[(0,a.jsx)("div",{className:"db-header-navigation",children:e.children}),(0,a.jsx)("div",{className:"db-header-meta-navigation",children:e.slotMetaNavigation})]}),(0,a.jsx)("div",{className:"db-header-action-bar",children:e.slotActionBar})]}),(0,a.jsx)("div",{className:"db-header-meta-navigation","data-hide-on":"mobile",children:e.slotMetaNavigation}),(0,a.jsxs)("div",{className:"db-header-navigation-bar",children:[(0,a.jsx)("div",{className:"db-header-brand-container",children:e.slotBrand}),(0,a.jsxs)("div",{className:"db-header-navigation-container",children:[(0,a.jsx)("div",{className:"db-header-navigation","data-hide-on":"mobile",children:e.children}),(0,a.jsx)("div",{className:"db-header-call-to-action",children:e.slotCallToAction})]}),(0,a.jsxs)("div",{className:"db-header-action-container",children:[(0,a.jsx)("div",{"data-hide-on":"desktop",children:(0,a.jsx)(r.Y,{id:"button-burger-menu",icon:"menu",variant:"text",noText:!0,onClick:()=>toggle(),children:null!==(t=e.burgerMenuLabel)&&void 0!==t?t:m.burgerMenuLabel})}),(0,a.jsx)("div",{className:"db-header-action-bar","data-hide-on":"mobile",children:e.slotActionBar})]})]})]})});n.Z=o},99562:function(e,n,t){var a=t(52322),l=t(2784),i=t(36029);let r=(0,l.forwardRef)(function(e,n){let[t,r]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{e.stylePath&&r(e.stylePath)},[]),(0,a.jsxs)("span",{"aria-hidden":"true",ref:n,id:e.id,className:(0,i.yI)("db-icon",e.className),"data-icon":e.icon,title:e.title,children:[t?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:t})}):null,e.children]})});n.Z=r},27717:function(e,n,t){t.d(n,{P:function(){return a.Z}});var a=t(99562)},25117:function(e,n,t){t.d(n,{E:function(){return a.Z}});var a=t(93575)},93575:function(e,n,t){var a=t(52322),l=t(2784),i=t(36029);let r=(0,l.forwardRef)(function(e,n){let[t,r]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{e.stylePath&&r(e.stylePath)},[]),(0,a.jsxs)("span",{ref:n,id:e.id,className:(0,i.yI)("db-infotext",e.className),title:e.title,"data-icon":e.icon,"data-variant":e.variant,"data-size":e.size,children:[t?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:t})}):null,e.children]})});n.Z=r},42713:function(e,n,t){var a=t(52322),l=t(2784),i=t(27717),r=t(36029),s=t(41220),d=t(25117);let o=(0,l.forwardRef)(function(e,n){var t,o,c;let[u,h]=(0,l.useState)(()=>s.IY),[f,v]=(0,l.useState)(()=>s.IY+s.Kn),[m,g]=(0,l.useState)(()=>void 0),[x,b]=(0,l.useState)(()=>s.IY),[j,y]=(0,l.useState)(()=>({label:s.SU,placeholder:" "}));function iconVisible(e){return!!(e&&"_"!==e&&"none"!==e)}let[p,N]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{h(e.id||"input-"+(0,r.Vj)()),v(u+s.Kn),b(e.dataListId||"datalist-".concat((0,r.Vj)())),e.stylePath&&N(e.stylePath)},[]),(0,a.jsxs)("div",{className:(0,r.yI)("db-input",e.className),"data-variant":e.variant,children:[p?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:p})}):null,iconVisible(e.icon)?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(i.P,{className:"icon-before",icon:e.icon})}):null,(0,a.jsx)("input",{ref:n,id:u,name:e.name,type:e.type||"text",placeholder:null!==(o=e.placeholder)&&void 0!==o?o:j.placeholder,"aria-labelledby":u+"-label",disabled:e.disabled,required:e.required,defaultValue:e.defaultValue,step:e.step,value:e.value,"aria-invalid":e.invalid,maxLength:e.maxLength,minLength:e.minLength,max:e.max,min:e.min,readOnly:e.readOnly,form:e.form,autoComplete:e.autoComplete,autoFocus:e.autoFocus,pattern:e.pattern,onChange:n=>{var t,a,l,i,r,s;e.onChange&&e.onChange(n),e.change&&e.change(n),(null===(a=n.target)||void 0===a?void 0:null===(t=a.validity)||void 0===t?void 0:t.valid)!=m&&(g(null===(i=n.target)||void 0===i?void 0:null===(l=i.validity)||void 0===l?void 0:l.valid),e.validityChange&&e.validityChange(!!(null===(s=n.target)||void 0===s?void 0:null===(r=s.validity)||void 0===r?void 0:r.valid)))},onBlur:n=>{e.onBlur&&e.onBlur(n),e.blur&&e.blur(n)},onFocus:n=>{e.onFocus&&e.onFocus(n),e.focus&&e.focus(n)},list:e.dataList&&x,"aria-describedby":e.message&&f}),(0,a.jsx)("label",{"aria-hidden":"true",htmlFor:u,id:u+"-label",children:(0,a.jsx)("span",{children:null!==(c=e.label)&&void 0!==c?c:j.label})}),iconVisible(e.iconAfter)?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(i.P,{className:"icon-after",icon:e.iconAfter})}):null,e.dataList?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("datalist",{id:x,children:null===(t=e.dataList)||void 0===t?void 0:t.map(e=>(0,a.jsx)("option",{value:e.key,children:e.value},x+"-option-"+e.key))})}):null,e.children,e.message?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(d.E,{size:"small",variant:e.variant,icon:(0,r.mT)(e.variant,e.messageIcon),id:f,children:e.message})}):null]})});n.Z=o},48258:function(e,n,t){t.d(n,{v:function(){return a.Z}});var a=t(24754)},24754:function(e,n,t){var a=t(52322),l=t(2784),i=t(36029);let r=(0,l.forwardRef)(function(e,n){let[t,r]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{e.stylePath&&r(e.stylePath)},[]),(0,a.jsxs)("a",{ref:n,id:e.id,className:(0,i.yI)("db-link",e.className),href:e.href,title:e.title,target:e.target,rel:e.rel,role:e.role,"aria-disabled":e.disabled,tabIndex:e.disabled?-1:0,"aria-selected":e.selected,"aria-label":e.label,hrefLang:e.hreflang,"aria-current":e.current,"data-size":e.size,"data-variant":e.variant,"data-content":e.content||"internal",onClick:n=>{e.onClick&&e.onClick(n)},children:[t?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:t})}):null,e.text?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("span",{children:e.text})}):null,e.children]})});n.Z=r},82314:function(e,n,t){var a=t(52322),l=t(2784),i=t(36029);let r=(0,l.forwardRef)(function(e,n){let[t,r]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{e.stylePath&&r(e.stylePath)},[]),(0,a.jsxs)("nav",{ref:n,id:e.id,className:(0,i.yI)("db-main-navigation",e.className),children:[t?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:t})}):null,(0,a.jsx)("menu",{children:e.children})]})});n.Z=r},23541:function(e,n,t){var a=t(52322),l=t(2784),i=t(57334),r=t(36029),s=t(41220);let d=(0,l.forwardRef)(function(e,n){var t;let[d,o]=(0,l.useState)(()=>!1),[c,u]=(0,l.useState)(()=>!1),[h,f]=(0,l.useState)(()=>!0),[v,m]=(0,l.useState)(()=>!1),[g,x]=(0,l.useState)(()=>"sub-navigation-"+(0,r.Vj)()),[b,j]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{o(!0),e.stylePath&&j(e.stylePath)},[]),(0,l.useEffect)(()=>{void 0!==e.subNavigationExpanded&&m(!!e.subNavigationExpanded)},[e.subNavigationExpanded]),(0,l.useEffect)(()=>{if(void 0!==e.areaPopup)u(e.areaPopup),f(c);else if(d&&document&&g){var n;let e=null===(n=document)||void 0===n?void 0:n.getElementById(g);if(e){let n=e.children;(null==n?void 0:n.length)>0?u(!0):f(!1)}}},[d,e.areaPopup]),(0,a.jsxs)("li",{ref:n,id:e.id,className:(0,r.yI)("db-navigation-item",e.className),"data-width":e.width,"data-icon":e.icon,"aria-current":e.active?"page":void 0,"aria-disabled":e.disabled,children:[b?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:b})}):null,h?null:(0,a.jsx)(a.Fragment,{children:e.children}),h?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("button",{className:"db-navigation-item-expand-button","aria-haspopup":c,"aria-expanded":v,disabled:e.disabled,onClick:n=>{e.onClick&&e.onClick(n),c&&m(!0)},children:e.children}),(0,a.jsxs)("menu",{className:"db-sub-navigation",id:g,children:[c?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("div",{className:"db-mobile-navigation-back",children:(0,a.jsx)(i.Y,{icon:"arrow_back",variant:"text",id:e.backButtonId,onClick:e=>{e.stopPropagation(),m(!1)},children:null!==(t=e.backButtonText)&&void 0!==t?t:s.YP})})}):null,e.slotSubNavigation]})]}):null]})});n.Z=d},8714:function(e,n,t){var a=t(52322),l=t(2784),i=t(36029);let r=(0,l.forwardRef)(function(e,n){let[t,r]=(0,l.useState)(()=>!1),[s,d]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{r(!e.fadeIn),e.stylePath&&d(e.stylePath),document&&e.fadeIn?document.fonts.ready.then(()=>{r(!0)}):r(!0)},[]),(0,a.jsxs)("div",{ref:n,id:e.id,className:(0,i.yI)("db-page",e.className,{"fixed-header-footer":"fixedHeaderFooter"===e.type}),"data-fade-in":e.fadeIn,"data-fonts-loaded":t,children:[s?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:s})}):null,e.slotHeader,(0,a.jsx)("main",{className:"db-main",children:e.children}),e.slotFooter]})});n.Z=r},42029:function(e,n,t){var a=t(52322),l=t(2784),i=t(36029),r=t(41220);let s=(0,l.forwardRef)(function(e,n){let[t,s]=(0,l.useState)(()=>!1),[d,o]=(0,l.useState)(()=>r.IY),[c,u]=(0,l.useState)(()=>void 0),[h,f]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{s(!0),o(e.id||"radio-"+(0,i.Vj)()),e.stylePath&&f(e.stylePath)},[]),(0,l.useEffect)(()=>{if(e.checked&&t&&document&&d){var n;let e=null===(n=document)||void 0===n?void 0:n.getElementById(d);e&&(e.checked=!0,s(!1))}},[t]),(0,a.jsxs)(a.Fragment,{children:[h?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:h})}):null,(0,a.jsx)("input",{type:"radio",ref:n,className:(0,i.yI)("db-radio",e.className),id:d,name:e.name,checked:e.checked,disabled:e.disabled,"aria-describedby":e.describedbyid,"aria-invalid":e.invalid,"data-size":e.size,value:e.value,required:e.required,onChange:n=>{var t,a,l,i,r,s;e.onChange&&e.onChange(n),e.change&&e.change(n),(null===(a=n.target)||void 0===a?void 0:null===(t=a.validity)||void 0===t?void 0:t.valid)!=c&&(u(null===(i=n.target)||void 0===i?void 0:null===(l=i.validity)||void 0===l?void 0:l.valid),e.validityChange&&e.validityChange(!!(null===(s=n.target)||void 0===s?void 0:null===(r=s.validity)||void 0===r?void 0:r.valid)))},onBlur:n=>{e.onBlur&&e.onBlur(n),e.blur&&e.blur(n)},onFocus:n=>{e.onFocus&&e.onFocus(n),e.focus&&e.focus(n)}}),(0,a.jsxs)("label",{htmlFor:d,children:[e.label?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("span",{children:e.label})}):null,e.children]})]})});n.Z=s},50698:function(e,n,t){var a=t(52322),l=t(2784),i=t(36029);let r=(0,l.forwardRef)(function(e,n){let[t,r]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{e.stylePath&&r(e.stylePath)},[]),(0,a.jsxs)("section",{ref:n,id:e.id,"data-size":e.size||"medium",className:(0,i.yI)("db-section",e.className),children:[t?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:t})}):null,(0,a.jsx)("div",{"data-variant":e.variant,children:e.children})]})});n.Z=r},73501:function(e,n,t){var a=t(52322),l=t(2784),i=t(36029),r=t(41220),s=t(25117);let d=(0,l.forwardRef)(function(e,n){var t,d;let[o,c]=(0,l.useState)(()=>r.IY),[u,h]=(0,l.useState)(()=>r.IY+r.Kn),[f,v]=(0,l.useState)(()=>void 0),[m,g]=(0,l.useState)(()=>void 0);function getOptionLabel(e){var n;return null!==(n=e.label)&&void 0!==n?n:e.value.toString()}let[x,b]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{c(e.id||"select-"+(0,i.Vj)()),h(o+r.Kn),e.value&&g(e.value),e.stylePath&&b(e.stylePath)},[]),(0,l.useEffect)(()=>{e.value&&g(e.value)},[e.value]),(0,a.jsxs)("div",{className:(0,i.yI)("db-select",e.className),"data-variant":e.variant,"data-icon":e.icon,children:[x?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:x})}):null,(0,a.jsxs)("select",{ref:n,"data-value":e.value||m,"aria-invalid":e.invalid,required:e.required,disabled:e.disabled,id:o,name:e.name,value:e.value||m,onClick:n=>{e.onClick&&e.onClick(n)},onChange:n=>{var t,a,l,i,r,s;e.onChange&&e.onChange(n),e.change&&e.change(n),g(n.target.value),(null===(a=n.target)||void 0===a?void 0:null===(t=a.validity)||void 0===t?void 0:t.valid)!=f&&(v(null===(i=n.target)||void 0===i?void 0:null===(l=i.validity)||void 0===l?void 0:l.valid),e.validityChange&&e.validityChange(!!(null===(s=n.target)||void 0===s?void 0:null===(r=s.validity)||void 0===r?void 0:r.valid)))},onBlur:n=>{e.onBlur&&e.onBlur(n),e.blur&&e.blur(n)},onFocus:n=>{e.onFocus&&e.onFocus(n),e.focus&&e.focus(n)},"aria-describedby":e.message&&u,children:[(0,a.jsx)("option",{hidden:!0}),e.options?(0,a.jsx)(a.Fragment,{children:null===(t=e.options)||void 0===t?void 0:t.map(e=>{var n;return(0,a.jsxs)(a.Fragment,{children:[e.options?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("optgroup",{label:getOptionLabel(e),children:null===(n=e.options)||void 0===n?void 0:n.map(e=>(0,a.jsx)("option",{value:e.value,disabled:e.disabled,children:getOptionLabel(e)},"option-"+e.value))},"optgroup-"+e.value)}):null,e.options?null:(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("option",{value:e.value,disabled:e.disabled,children:getOptionLabel(e)},"option-"+e.value)})]})})}):null,e.children]}),(0,a.jsx)("label",{htmlFor:o,children:null!==(d=e.label)&&void 0!==d?d:r.SU}),e.message?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(s.E,{size:"small",variant:e.variant,icon:(0,i.mT)(e.variant,e.messageIcon),id:u,children:e.message})}):null]})});n.Z=d},99085:function(e,n,t){var a=t(52322),l=t(2784),i=t(82154),r=t(36029);let s=(0,l.forwardRef)(function(e,n){var t;let[s,d]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{e.stylePath&&d(e.stylePath)},[]),(0,a.jsxs)("div",{role:"tablist",ref:n,id:e.id,className:(0,r.yI)("cmp-tab-bar",e.className),children:[s?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:s})}):null,e.tabs?(0,a.jsx)(a.Fragment,{children:null===(t=function(e){try{if("string"==typeof e)return JSON.parse(e);return e}catch(e){console.error(e)}}(e.tabs))||void 0===t?void 0:t.map(e=>(0,a.jsx)(i.Q,{name:e.name,active:e.active,label:e.label,content:e.content,children:e.children},e.name))}):null,e.children]})});n.Z=s},82154:function(e,n,t){t.d(n,{Q:function(){return a.Z}});var a=t(47431)},47431:function(e,n,t){var a=t(52322),l=t(2784),i=t(41220),r=t(36029);let s=(0,l.forwardRef)(function(e,n){let t=(0,l.useRef)(null),[s,d]=(0,l.useState)(()=>i.IY),[o,c]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{if(d((0,r.Vj)()),e.stylePath&&c(e.stylePath),e.active){var n;null===(n=t.current)||void 0===n||n.click()}},[]),(0,a.jsxs)("div",{ref:n,id:e.id,className:(0,r.yI)("db-tab",e.className),children:[o?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:o})}):null,(0,a.jsx)("input",{type:"radio",ref:t,name:e.name,id:s}),(0,a.jsx)("label",{role:"tab",htmlFor:s,children:e.label}),(0,a.jsxs)("section",{role:"tabpanel",id:"content-"+s,children:[e.content?(0,a.jsx)(a.Fragment,{children:e.content}):null,e.children]})]})});n.Z=s},77601:function(e,n,t){var a=t(52322),l=t(2784),i=t(57334),r=t(36029);let s=(0,l.forwardRef)(function(e,n){function getRemoveButtonText(){return e.removeButton?e.removeButton:"Remove tag"}let[t,s]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{e.stylePath&&s(e.stylePath)},[]),(0,a.jsxs)("div",{ref:n,id:e.id,className:(0,r.yI)("db-tag",e.className),"data-disabled":e.disabled,"data-variant":e.variant,"data-emphasis":e.emphasis,"data-icon":e.icon,"data-no-text":e.noText,"data-overflow":e.overflow,children:[t?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:t})}):null,e.children,e.text?(0,a.jsx)(a.Fragment,{children:e.text}):null,"removable"===e.behaviour?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(i.Y,{icon:"close",size:"small",variant:"text",className:"db-tab-remove-button",onClick:n=>void(e.onRemove&&e.onRemove()),noText:!0,title:getRemoveButtonText(),children:getRemoveButtonText()})}):null]})});n.Z=s},564:function(e,n,t){var a=t(52322),l=t(2784),i=t(25117),r=t(36029),s=t(41220);let d=(0,l.forwardRef)(function(e,n){var t,d,o,c;let[u,h]=(0,l.useState)(()=>s.IY),[f,v]=(0,l.useState)(()=>s.IY+s.Kn),[m,g]=(0,l.useState)(()=>void 0),[x,b]=(0,l.useState)(()=>({label:s.SU,placeholder:" ",rows:"4"})),[j,y]=(0,l.useState)(()=>null);return(0,l.useEffect)(()=>{e.stylePath&&y(e.stylePath),h(e.id||"textarea-"+(0,r.Vj)()),v(u+s.Kn)},[]),(0,a.jsxs)("div",{ref:n,className:(0,r.yI)("db-textarea",e.className),"data-variant":e.variant,children:[j?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("link",{rel:"stylesheet",href:j})}):null,(0,a.jsx)("label",{htmlFor:u,"data-overflow":e.overflow,id:u+"-label",children:null!==(t=e.label)&&void 0!==t?t:x.label}),(0,a.jsx)("textarea",{id:u,"data-resize":e.resize,autoComplete:e.autoComplete,autoFocus:e.autoFocus,disabled:e.disabled,required:e.required,readOnly:e.readOnly,form:e.form,maxLength:e.maxLength,minLength:e.minLength,name:e.name,wrap:e.wrap,spellCheck:e.spellCheck,onChange:n=>{var t,a,l,i,r,s;e.onChange&&e.onChange(n),e.change&&e.change(n),(null===(a=n.target)||void 0===a?void 0:null===(t=a.validity)||void 0===t?void 0:t.valid)!=m&&(g(null===(i=n.target)||void 0===i?void 0:null===(l=i.validity)||void 0===l?void 0:l.valid),e.validityChange&&e.validityChange(!!(null===(s=n.target)||void 0===s?void 0:null===(r=s.validity)||void 0===r?void 0:r.valid)))},onBlur:n=>{e.onBlur&&e.onBlur(n),e.blur&&e.blur(n)},onFocus:n=>{e.onFocus&&e.onFocus(n),e.focus&&e.focus(n)},defaultValue:null!==(d=e.defaultValue)&&void 0!==d?d:e.children,value:e.value,"aria-describedby":e.message&&f,placeholder:null!==(o=e.placeholder)&&void 0!==o?o:x.placeholder,rows:null!==(c=e.rows)&&void 0!==c?c:x.rows,cols:e.cols}),e.message?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(i.E,{size:"small",variant:e.variant,icon:(0,r.mT)(e.variant,e.messageIcon),id:f,children:e.message})}):null]})});n.Z=d},31346:function(e,n,t){t.d(n,{aw:function(){return k.Z},kC:function(){return S.k},H3:function(){return a.Z},aE:function(){return l.Z},mX:function(){return i.Z},Y1:function(){return r.Y},f:function(){return s.f},I3:function(){return d.Z},wq:function(){return o.Z},oH:function(){return c.Z},TG:function(){return u.T},W4:function(){return h.Z},Pg:function(){return f.P},EZ:function(){return v.E},aq:function(){return m.Z},vB:function(){return g.v},Cc:function(){return F.Z},pK:function(){return x.Z},an:function(){return b.Z},cN:function(){return j.Z},kr:function(){return y.Z},k8:function(){return p.Z},GI:function(){return N.Z}});var a=t(11365),l=t(21279),i=t(17641),r=t(57334),s=t(72451),d=t(20985),o=t(18241),c=t(73114),u=t(43945),h=t(14333),f=t(27717),v=t(25117),m=t(42713),g=t(48258),x=t(23541);t(8714);var b=t(42029),j=t(50698),y=t(73501);t(82154),t(99085);var p=t(77601),N=t(564),k=t(5307),S=t(74093),F=t(82314)},41220:function(e,n,t){var a,l,i,r,s,d,o;t.d(n,{$f:function(){return m},DM:function(){return g},IY:function(){return c},Kn:function(){return h},SU:function(){return u},YP:function(){return f},ce:function(){return v},iw:function(){return a},r$:function(){return i}});let c="OVERWRITE_DEFAULT_ID",u="LABEL SHOULD BE SET",h="-message",f="Back",v="Close Button";(s=a||(a={})).FUNCTIONAL="functional",s.REGULAR="regular",s.EXPRESSIVE="expressive";let m=Object.entries(a).map(e=>{let[,n]=e;return n});(l||(l={})).PRIMARY="primary",(d=i||(i={})).NEUTRAL="neutral",d.NEUTRAL_STRONG="neutral-strong",d.NEUTRAL_TRANSPARENT_FULL="neutral-transparent-full",d.NEUTRAL_TRANSPARENT_SEMI="neutral-transparent-semi",d.PRIMARY="primary",d.PRIMARY_TRANSPARENT_FULL="primary-transparent-full",d.PRIMARY_TRANSPARENT_SEMI="primary-transparent-semi",d.SUCCESSFUL="successful",d.SUCCESSFUL_TRANSPARENT_FULL="successful-transparent-full",d.SUCCESSFUL_TRANSPARENT_SEMI="successful-transparent-semi",d.CRITICAL="critical",d.CRITICAL_TRANSPARENT_Full="critical-transparent-full",d.CRITICAL_TRANSPARENT_SEMI="critical-transparent-semi",d.WARNING="warning",d.WARNING_TRANSPARENT_FULL="warning-transparent-full",d.WARNING_TRANSPARENT_SEMI="warning-transparent-semi",d.INFORMATIONAL="informational",d.INFORMATIONAL_TRANSPARENT_FULL="informational-transparent-full",d.INFORMATIONAL_TRANSPARENT_SEMI="informational-transparent-semi";let g=Object.entries(i).map(e=>{let[,n]=e;return n});Object.entries(l).map(e=>{let[,n]=e;return n}),(o=r||(r={})).CRITICAL="critical",o.INFORMATIONAL="informational",o.WARNING="warning",o.SUCCESSFUL="successful",Object.entries(r).map(e=>{let[,n]=e;return n})},36029:function(e,n,t){t.d(n,{Vj:function(){return uuid},mT:function(){return getMessageIcon},yI:function(){return cls},yn:function(){return addAttributeToChildren}});let uuid=()=>{var e,n;return(null===(e=window.crypto)||void 0===e?void 0:e.randomUUID)?window.crypto.randomUUID():(null===(n=window.crypto)||void 0===n?void 0:n.getRandomValues)?window.crypto.getRandomValues(new Uint32Array(3)).join("-"):Math.random().toString().substring(2)},addAttributeToChildren=(e,n)=>{let t=e.children;Object.values(t).forEach(e=>{e.setAttribute(n.key,n.value),e.children.length>0&&addAttributeToChildren(e,n)})},cls=function(){for(var e=arguments.length,n=Array(e),t=0;t{if(e){if("string"==typeof e)a+="".concat(e," ");else for(let n in e)e[n]&&(a+="".concat(n," "))}}),a.trim()},getMessageIcon=(e,n)=>n||(e&&"adaptive"!==e?void 0:"none")}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/1390-a1d6d4f8d8ca3d01.js b/review/1654-focus-state-dev-research/_next/static/chunks/1390-a1d6d4f8d8ca3d01.js new file mode 100644 index 00000000000..69e10f891e6 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/1390-a1d6d4f8d8ca3d01.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1390],{21390:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return c}});var n=e(52322),s=e(45392),r=e(65854);let l={annotations:r.ds,Code:r.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"With padding (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"With padding (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true">With ',props:{style:{color:"#D8DEE9"}}},{content:"padding ",props:{style:{color:"#8FBCBB"}}},{content:"(Default)",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}},{content:"With padding (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"With padding (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"With padding (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true">With ',props:{style:{color:"#D8DEE9"}}},{content:"padding ",props:{style:{color:"#8FBCBB"}}},{content:"(Default)",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}},{content:"With padding (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Full",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton width",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"full",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Full",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"width",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"full",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Full",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}},{content:"Full",props:{style:{color:"#D8DEE9FF"}}},{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Full",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton width",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"full",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Full",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"width",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"full",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Full",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}},{content:"Full",props:{style:{color:"#D8DEE9FF"}}},{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/1454-5ad81f21ea7c2236.js b/review/1654-focus-state-dev-research/_next/static/chunks/1454-5ad81f21ea7c2236.js new file mode 100644 index 00000000000..8c24a81d7a6 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/1454-5ad81f21ea7c2236.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1454],{41454:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),c=e(45392),s=e(65854);let l={annotations:s.ds,Code:s.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Size",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Size",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Size",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Size",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Size",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Size",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Size",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Size",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/1500-e2260931ddba758a.js b/review/1654-focus-state-dev-research/_next/static/chunks/1500-e2260931ddba758a.js new file mode 100644 index 00000000000..5d19898fcbf --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/1500-e2260931ddba758a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1500],{61500:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return c}});var n=e(52322),s=e(45392),l=e(65854);let r={annotations:l.ds,Code:l.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return r||_missingMdxReference("CH",!1),r.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"functional",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"functional",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"functional",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"functional",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"regular",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"regular",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"regular",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"regular",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"expressive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"expressive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"expressive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"expressive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/1520-9e773e640442a949.js b/review/1654-focus-state-dev-research/_next/static/chunks/1520-9e773e640442a949.js new file mode 100644 index 00000000000..1432351cf74 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/1520-9e773e640442a949.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1520],{31520:function(o,e,t){t.r(e),t.d(e,{CH:function(){return s},chCodeConfig:function(){return l}});var n=t(52322),r=t(45392),c=t(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let e=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(e.h2,{children:"HTML"}),"\n",(0,n.jsxs)(e.p,{children:["For general installation and configuration look at the ",(0,n.jsx)(e.a,{href:"https://www.npmjs.com/package/@db-ui/components",children:"components"})," package."]}),"\n",(0,n.jsx)(e.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["index.html"],active:"index.html",heightRatio:1},files:[{name:"index.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"...",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,e){throw Error("Expected "+(e?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}e.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,r.ah)(),o.components);return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/1871-76c125bc3774607c.js b/review/1654-focus-state-dev-research/_next/static/chunks/1871-76c125bc3774607c.js new file mode 100644 index 00000000000..4d226195196 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/1871-76c125bc3774607c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1871],{51871:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"HTML"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/components",children:"components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["index.html"],active:"index.html",heightRatio:1},files:[{name:"index.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"...",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Title 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}},{content:"Content 1",props:{style:{color:"#D8DEE9FF"}}},{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Title 2",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}},{content:"Content 2",props:{style:{color:"#D8DEE9FF"}}},{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Title 3",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}},{content:"Content 3",props:{style:{color:"#D8DEE9FF"}}},{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/2005-4e7ffd0ced7eb1ab.js b/review/1654-focus-state-dev-research/_next/static/chunks/2005-4e7ffd0ced7eb1ab.js new file mode 100644 index 00000000000..2ff738ddd14 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/2005-4e7ffd0ced7eb1ab.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2005],{92005:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Angular"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/ngx-components",children:"ngx-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Load component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"//app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBButtonModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBButtonModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Button",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/2087-1fb63d3639216d70.js b/review/1654-focus-state-dev-research/_next/static/chunks/2087-1fb63d3639216d70.js new file mode 100644 index 00000000000..dc76eb22eb6 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/2087-1fb63d3639216d70.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2087],{2087:function(e,a,t){t.d(a,{Z:function(){return default_page}});var n,l,i,r,s,o,d,c=t(52322),u=t(5632),h=t(2784);let uuid=()=>{var e,a;return(null===(e=window.crypto)||void 0===e?void 0:e.randomUUID)?window.crypto.randomUUID():(null===(a=window.crypto)||void 0===a?void 0:a.getRandomValues)?window.crypto.getRandomValues(new Uint32Array(3)).join("-"):Math.random().toString().substring(2)},addAttributeToChildren=(e,a)=>{let t=e.children;Object.values(t).forEach(e=>{e.setAttribute(a.key,a.value),e.children.length>0&&addAttributeToChildren(e,a)})},cls=function(){for(var e=arguments.length,a=Array(e),t=0;t{if(e){if("string"==typeof e)n+="".concat(e," ");else for(let a in e)e[a]&&(n+="".concat(a," "))}}),n.trim()},m=(0,h.forwardRef)(function(e,a){let[t,n]=(0,h.useState)(()=>!1),[l,i]=(0,h.useState)(()=>null);return(0,h.useEffect)(()=>{n(!e.fadeIn),e.stylePath&&i(e.stylePath),document&&e.fadeIn?document.fonts.ready.then(()=>{n(!0)}):n(!0)},[]),(0,c.jsxs)("div",{ref:a,id:e.id,className:cls("db-page",e.className,{"fixed-header-footer":"fixedHeaderFooter"===e.type}),"data-fade-in":e.fadeIn,"data-fonts-loaded":t,children:[l?(0,c.jsx)(c.Fragment,{children:(0,c.jsx)("link",{rel:"stylesheet",href:l})}):null,e.slotHeader,(0,c.jsx)("main",{className:"db-main",children:e.children}),e.slotFooter]})}),b=(0,h.forwardRef)(function(e,a){let[t,n]=(0,h.useState)(()=>null);return(0,h.useEffect)(()=>{e.stylePath&&n(e.stylePath)},[]),(0,c.jsxs)("button",{id:e.id,ref:a,className:cls("db-button",e.className,{"is-icon-text-replace":e.noText}),type:e.type,title:e.title,disabled:e.disabled,"aria-label":e.label,"data-icon":e.icon,"data-size":e.size,"data-state":e.state,"data-width":e.width,"data-variant":e.variant,name:e.name,value:e.value,"aria-expanded":e.ariaexpanded,"aria-pressed":e.ariapressed,onClick:a=>{e.onClick&&e.onClick(a)},children:[t?(0,c.jsx)(c.Fragment,{children:(0,c.jsx)("link",{rel:"stylesheet",href:t})}):null,e.children]})}),p="OVERWRITE_DEFAULT_ID";(n=r||(r={})).FUNCTIONAL="functional",n.REGULAR="regular",n.EXPRESSIVE="expressive",Object.entries(r).map(e=>{let[,a]=e;return a}),(s||(s={})).PRIMARY="primary",(l=o||(o={})).NEUTRAL="neutral",l.NEUTRAL_STRONG="neutral-strong",l.NEUTRAL_TRANSPARENT_FULL="neutral-transparent-full",l.NEUTRAL_TRANSPARENT_SEMI="neutral-transparent-semi",l.PRIMARY="primary",l.PRIMARY_TRANSPARENT_FULL="primary-transparent-full",l.PRIMARY_TRANSPARENT_SEMI="primary-transparent-semi",l.SUCCESSFUL="successful",l.SUCCESSFUL_TRANSPARENT_FULL="successful-transparent-full",l.SUCCESSFUL_TRANSPARENT_SEMI="successful-transparent-semi",l.CRITICAL="critical",l.CRITICAL_TRANSPARENT_Full="critical-transparent-full",l.CRITICAL_TRANSPARENT_SEMI="critical-transparent-semi",l.WARNING="warning",l.WARNING_TRANSPARENT_FULL="warning-transparent-full",l.WARNING_TRANSPARENT_SEMI="warning-transparent-semi",l.INFORMATIONAL="informational",l.INFORMATIONAL_TRANSPARENT_FULL="informational-transparent-full",l.INFORMATIONAL_TRANSPARENT_SEMI="informational-transparent-semi",Object.entries(o).map(e=>{let[,a]=e;return a}),Object.entries(s).map(e=>{let[,a]=e;return a}),(i=d||(d={})).CRITICAL="critical",i.INFORMATIONAL="informational",i.WARNING="warning",i.SUCCESSFUL="successful",Object.entries(d).map(e=>{let[,a]=e;return a});let v=(0,h.forwardRef)(function(e,a){var t;let n=(0,h.useRef)(a),l=(0,h.useRef)(null),[i,r]=(0,h.useState)(()=>p);function handleClose(a){"Escape"===a.key&&a.preventDefault(),("close"===a||"Escape"===a.key||"DIALOG"===a.target.nodeName&&"none"!==e.backdrop)&&e.onClose&&e.onClose()}function handleDialogOpen(){n.current&&(e.open&&!n.current.open&&(l.current&&(l.current.hidden=!1),"none"===e.backdrop?n.current.show():n.current.showModal()),!e.open&&n.current.open&&(l.current&&(l.current.hidden=!0),setTimeout(()=>{var e;l.current&&(l.current.hidden=!1),null===(e=n.current)||void 0===e||e.close()},401)))}let[s,o]=(0,h.useState)(()=>null);return(0,h.useEffect)(()=>{r(e.id||"drawer-"+uuid()),e.stylePath&&o(e.stylePath),handleDialogOpen()},[]),(0,h.useEffect)(()=>{handleDialogOpen()},[e.open]),(0,c.jsxs)("dialog",{className:"db-drawer",id:i,ref:n,onClick:e=>{handleClose(e)},onKeyDown:e=>handleClose(e),"data-backdrop":e.backdrop,children:[s?(0,c.jsx)(c.Fragment,{children:(0,c.jsx)("link",{rel:"stylesheet",href:s})}):null,(0,c.jsxs)("article",{ref:l,className:cls("db-drawer-container",e.className),"data-spacing":e.spacing,"data-width":e.width,"data-direction":e.direction,"data-rounded":e.rounded,children:[(0,c.jsxs)("header",{className:"db-drawer-header",children:[(0,c.jsx)("div",{className:"db-drawer-header-text",children:e.slotDrawerHeader}),e.withCloseButton?(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(b,{icon:"close",variant:"text",className:"button-close-drawer",id:e.closeButtonId,noText:!0,onClick:e=>handleClose("close"),children:null!==(t=e.closeButtonText)&&void 0!==t?t:"Close Button"})}):null]}),(0,c.jsx)("div",{className:"db-drawer-content",children:e.children})]})]})}),f=(0,h.forwardRef)(function(e,a){var t;let[n,l]=(0,h.useState)(()=>p),[i,r]=(0,h.useState)(()=>!1),[s,o]=(0,h.useState)(()=>!1),[d,u]=(0,h.useState)(()=>({burgerMenuLabel:"BurgerMenu"}));function toggle(){e.onToggle&&e.onToggle(!e.drawerOpen)}let[m,f]=(0,h.useState)(()=>null);return(0,h.useEffect)(()=>{r(!0),l(e.id||"header-"+uuid()),e.stylePath&&f(e.stylePath)},[]),(0,h.useEffect)(()=>{if(i&&document&&n&&e.forceMobile){let e=document.getElementById(n);e&&addAttributeToChildren(e,{key:"force-mobile",value:""}),o(!0)}},[i]),(0,c.jsxs)("header",{ref:a,className:cls("db-header",e.className),id:n,"data-on-forcing-mobile":e.forceMobile&&!s,children:[m?(0,c.jsx)(c.Fragment,{children:(0,c.jsx)("link",{rel:"stylesheet",href:m})}):null,(0,c.jsxs)(v,{"data-hide-on":"desktop",spacing:"small",className:"db-header-drawer",rounded:!0,withCloseButton:!0,open:e.drawerOpen,onClose:()=>toggle(),children:[(0,c.jsxs)("div",{className:"db-header-drawer-navigation",children:[(0,c.jsx)("div",{className:"db-header-navigation",children:e.children}),(0,c.jsx)("div",{className:"db-header-meta-navigation",children:e.slotMetaNavigation})]}),(0,c.jsx)("div",{className:"db-header-action-bar",children:e.slotActionBar})]}),(0,c.jsx)("div",{className:"db-header-meta-navigation","data-hide-on":"mobile",children:e.slotMetaNavigation}),(0,c.jsxs)("div",{className:"db-header-navigation-bar",children:[(0,c.jsx)("div",{className:"db-header-brand-container",children:e.slotBrand}),(0,c.jsxs)("div",{className:"db-header-navigation-container",children:[(0,c.jsx)("div",{className:"db-header-navigation","data-hide-on":"mobile",children:e.children}),(0,c.jsx)("div",{className:"db-header-call-to-action",children:e.slotCallToAction})]}),(0,c.jsxs)("div",{className:"db-header-action-container",children:[(0,c.jsx)("div",{"data-hide-on":"desktop",children:(0,c.jsx)(b,{id:"button-burger-menu",icon:"menu",variant:"text",noText:!0,onClick:()=>toggle(),children:null!==(t=e.burgerMenuLabel)&&void 0!==t?t:d.burgerMenuLabel})}),(0,c.jsx)("div",{className:"db-header-action-bar","data-hide-on":"mobile",children:e.slotActionBar})]})]})]})}),g=(0,h.forwardRef)(function(e,a){var t,n,l,i,r;let[s,o]=(0,h.useState)(()=>({anchorRef:"/",src:"./assets/images/db_logo.svg",width:"34",height:"24"})),[d,u]=(0,h.useState)(()=>null);return(0,h.useEffect)(()=>{e.stylePath&&u(e.stylePath)},[]),(0,c.jsxs)("div",{ref:a,id:e.id,className:cls("db-brand",e.className),children:[d?(0,c.jsx)(c.Fragment,{children:(0,c.jsx)("link",{rel:"stylesheet",href:d})}):null,(0,c.jsxs)("a",{href:null!==(t=e.anchorRef)&&void 0!==t?t:s.anchorRef,title:e.anchorTitle,rel:e.anchorRelation,children:[e.hideDefaultAsset?null:(0,c.jsx)(c.Fragment,{children:(0,c.jsx)("img",{className:"db-logo",src:null!==(n=e.imgSrc)&&void 0!==n?n:s.src,alt:null!==(l=e.imgAlt)&&void 0!==l?l:"",height:null!==(i=e.imgHeight)&&void 0!==i?i:s.height,width:null!==(r=e.imgWidth)&&void 0!==r?r:s.width})}),e.anchorChildren?(0,c.jsx)(c.Fragment,{children:e.children}):null]}),e.anchorChildren?null:(0,c.jsx)(c.Fragment,{children:e.children})]})}),x=(0,h.forwardRef)(function(e,a){let[t,n]=(0,h.useState)(()=>null);return(0,h.useEffect)(()=>{e.stylePath&&n(e.stylePath)},[]),(0,c.jsxs)("section",{ref:a,id:e.id,"data-size":e.size||"medium",className:cls("db-section",e.className),children:[t?(0,c.jsx)(c.Fragment,{children:(0,c.jsx)("link",{rel:"stylesheet",href:t})}):null,(0,c.jsx)("div",{"data-variant":e.variant,children:e.children})]})}),useStaticContent=()=>{let e=(0,h.useRef)(null),[a,t]=(0,h.useState)(!1);return(0,h.useEffect)(()=>{var a;let n=(null===(a=null==e?void 0:e.current)||void 0===a?void 0:a.innerHTML)==="";n&&t(!0)},[]),[a,e]};var static_content=e=>{let{children:a,element:t="div",...n}=e,[l,i]=useStaticContent();return l?(0,h.createElement)(t,{...n,children:a}):(0,h.createElement)(t,{...n,ref:i,suppressHydrationWarning:!0,dangerouslySetInnerHTML:{__html:""}})};let N=(0,h.forwardRef)(function(e,a){let[t,n]=(0,h.useState)(()=>null);return(0,h.useEffect)(()=>{e.stylePath&&n(e.stylePath)},[]),(0,c.jsxs)("nav",{ref:a,id:e.id,className:cls("db-main-navigation",e.className),children:[t?(0,c.jsx)(c.Fragment,{children:(0,c.jsx)("link",{rel:"stylesheet",href:t})}):null,(0,c.jsx)("menu",{children:e.children})]})}),j=[{label:"Home",path:"/"},{label:"Foundations",path:"/foundations",subNavigation:[{label:"Readme",path:"/foundations/readme"},{label:"Colors",path:"/foundations/colors",subNavigation:[{label:"Readme",path:"/foundations/colors/readme"},{label:"Examples",path:"/foundations/colors/examples"}]},{label:"Icons",path:"/foundations/icons"}]},{label:"Components",path:"/components",subNavigation:[{label:"Readme",path:"/components/readme"},...[{label:"Action",path:"/components/action",subNavigation:[{label:"DBButton",name:"button"},{label:"DBLink",name:"link"}]},{label:"Data-Display",path:"/components/data-display",subNavigation:[{label:"DBBrand",name:"brand"},{label:"DBIcon",name:"icon"},{label:"DBInfotext",name:"infotext"},{label:"DBTag",name:"tag"},{label:"DBAccordion",name:"accordion"},{label:"DBAccordionItem",name:"accordion-item"}]},{label:"Data-Input",path:"/components/data-input",subNavigation:[{label:"DBCheckbox",name:"checkbox"},{label:"DBInput",name:"input"},{label:"DBRadio",name:"radio"},{label:"DBSelect",name:"select"},{label:"DBTextarea",name:"textarea"}]},{label:"Feedback",path:"/components/feedback",subNavigation:[{label:"DBAlert",name:"alert"},{label:"DBBadge",name:"badge"}]},{label:"Layout",path:"/components/layout",subNavigation:[{label:"DBCard",name:"card"},{label:"DBDivider",name:"divider"},{label:"DBDrawer",name:"drawer"},{label:"DBHeader",name:"header"},{label:"DBPage",name:"page"},{label:"DBSection",name:"section"}]},{label:"Navigation",path:"/components/navigation",subNavigation:[{label:"DBMainNavigation",name:"main-navigation"},{label:"DBNavigationItem",name:"navigation-item"}]}].map(e=>{var a;return{...e,subNavigation:null==e?void 0:null===(a=e.subNavigation)||void 0===a?void 0:a.map(e=>({label:e.label,path:"/components/".concat(e.name),subNavigation:[{label:"Overview",path:"/components/".concat(e.name,"/overview")},{label:"Properties",path:"/components/".concat(e.name,"/properties")},{label:"Examples",path:"/components/".concat(e.name,"/examples")},{label:"How to use",path:"/components/".concat(e.name,"/how-to-use")},{label:"Migration",path:"/components/".concat(e.name,"/migration")}]}))}})]}];var R=t(39097),A=t.n(R);let S=(0,h.forwardRef)(function(e,a){var t;let[n,l]=(0,h.useState)(()=>!1),[i,r]=(0,h.useState)(()=>!1),[s,o]=(0,h.useState)(()=>!0),[d,u]=(0,h.useState)(()=>!1),[m,p]=(0,h.useState)(()=>"sub-navigation-"+uuid()),[v,f]=(0,h.useState)(()=>null);return(0,h.useEffect)(()=>{l(!0),e.stylePath&&f(e.stylePath)},[]),(0,h.useEffect)(()=>{void 0!==e.subNavigationExpanded&&u(!!e.subNavigationExpanded)},[e.subNavigationExpanded]),(0,h.useEffect)(()=>{if(void 0!==e.areaPopup)r(e.areaPopup),o(i);else if(n&&document&&m){var a;let e=null===(a=document)||void 0===a?void 0:a.getElementById(m);if(e){let a=e.children;(null==a?void 0:a.length)>0?r(!0):o(!1)}}},[n,e.areaPopup]),(0,c.jsxs)("li",{ref:a,id:e.id,className:cls("db-navigation-item",e.className),"data-width":e.width,"data-icon":e.icon,"aria-current":e.active?"page":void 0,"aria-disabled":e.disabled,children:[v?(0,c.jsx)(c.Fragment,{children:(0,c.jsx)("link",{rel:"stylesheet",href:v})}):null,s?null:(0,c.jsx)(c.Fragment,{children:e.children}),s?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)("button",{className:"db-navigation-item-expand-button","aria-haspopup":i,"aria-expanded":d,disabled:e.disabled,onClick:a=>{e.onClick&&e.onClick(a),i&&u(!0)},children:e.children}),(0,c.jsxs)("menu",{className:"db-sub-navigation",id:m,children:[i?(0,c.jsx)(c.Fragment,{children:(0,c.jsx)("div",{className:"db-mobile-navigation-back",children:(0,c.jsx)(b,{icon:"arrow_back",variant:"text",id:e.backButtonId,onClick:e=>{e.stopPropagation(),u(!1)},children:null!==(t=e.backButtonText)&&void 0!==t?t:"Back"})})}):null,e.slotSubNavigation]})]}):null]})}),isRouteActive=(e,a)=>{var t;return"/"===a.path?"/"===e:e.includes("".concat(a.path,"/"))||e===a.path||!!(null===(t=a.subNavigation)||void 0===t?void 0:t.find(a=>e.includes("".concat(a.path,"/"))))},NavItem=e=>{var a;let{navItem:t}=e,n=(0,u.useRouter)(),l=isRouteActive(n.pathname,t);return(0,c.jsx)(S,{active:l,backButtonText:"Back to ".concat(t.label),slotSubNavigation:t.subNavigation&&(0,c.jsx)(c.Fragment,{children:null==t?void 0:t.subNavigation.map(e=>(0,c.jsx)(NavItem,{navItem:e},"router-path-".concat(e.path)))}),children:t.subNavigation?t.label:(0,c.jsx)(A(),{href:null!==(a=t.path)&&void 0!==a?a:"",children:t.label},"router-path-".concat(t.path))})};var navigation=()=>(0,c.jsx)(N,{children:j.map(e=>(0,c.jsx)(NavItem,{navItem:e},"router-path-".concat(e.path)))}),default_page=e=>{let{children:a}=e,[t,n]=(0,h.useState)(!1),[l,i]=(0,h.useState)(!1),[r,s]=(0,h.useState)(!1),[o,d]=(0,h.useState)(!1),p=(0,u.useRouter)();return(0,h.useEffect)(()=>{p.query&&(n("true"===p.query.fullscreen),i("true"===p.query.noh1),s("true"===p.query.properties))},[p]),(0,c.jsxs)(static_content,{children:[p.isReady&&t&&(0,c.jsx)("div",{className:"".concat(l?"noh1":""," ").concat(r?"is-properties":""),children:a}),p.isReady&&!t&&(0,c.jsx)(m,{className:"db-bg-neutral-0",fadeIn:!0,type:"fixedHeaderFooter",slotHeader:(0,c.jsx)(f,{drawerOpen:o,onToggle:d,slotBrand:(0,c.jsx)(g,{imgSrc:"https://db-ui.github.io/images/db_logo.svg",title:"DB-UI Mono",anchorChildren:!0,children:"DB-UI Mono"}),slotMetaNavigation:(0,c.jsxs)(c.Fragment,{children:["/* TODO: Add github version switcher */",(0,c.jsx)("a",{href:"#",children:"Link1"}),(0,c.jsx)("a",{href:"#",children:"Link2"}),(0,c.jsx)("a",{href:"#",children:"Link3"})]}),slotCallToAction:(0,c.jsx)(b,{icon:"search",variant:"text",noText:!0,children:"Search"}),slotActionBar:(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(b,{icon:"account",variant:"text",noText:!0,children:"Profile"}),(0,c.jsx)(b,{icon:"alert",variant:"text",noText:!0,children:"Notification"}),(0,c.jsx)(b,{icon:"help",variant:"text",noText:!0,children:"Help"})]}),children:(0,c.jsx)(navigation,{})}),children:(0,c.jsx)(x,{size:"none",children:a})})]})}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/2158-69318b6de42b4b92.js b/review/1654-focus-state-dev-research/_next/static/chunks/2158-69318b6de42b4b92.js new file mode 100644 index 00000000000..f3b80c75672 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/2158-69318b6de42b4b92.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2158],{2158:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return p}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},p={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3",h4:"h4"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Angular"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/ngx-components",children:"ngx-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Load component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:p,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"//app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBHeaderModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" declarations",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" NavigationDirective",props:{style:{color:"#D08770"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"// Optional: If you want to use a Navigation",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ActionBarDirective",props:{style:{color:"#D08770"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"// Optional: If you want to use ActionBar",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" MetaNavigationDirective",props:{style:{color:"#D08770"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"// Optional: If you want to use MetaNavigation",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBHeaderModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(t.h4,{children:"Simple"}),"\n",(0,n.jsx)(s.Code,{codeConfig:p,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Header",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),"\n",(0,n.jsx)(t.h4,{children:"Full"}),"\n",(0,n.jsx)(s.Code,{codeConfig:p,northPanel:{tabs:["app.component.ts"],active:"app.component.ts",heightRatio:1},files:[{name:"app.component.ts",focus:"",code:{lines:[{tokens:[{content:"// File: app.component.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"Component ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@angular/core",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@Component",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" selector",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"app-root",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" templateUrl",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"./app.component.html",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"export class ",props:{style:{color:"#81A1C1"}}},{content:"AppComponent ",props:{style:{color:"#8FBCBB"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" drawerOpen ",props:{style:{color:"#D8DEE9FF"}}},{content:"= false;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" toggleDrawer ",props:{style:{color:"#88C0D0"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"open",props:{style:{color:"#D8DEE9"}}},{content:": ",props:{style:{color:"#81A1C1"}}},{content:"boolean",props:{style:{color:"#8FBCBB"}}},{content:") ",props:{style:{color:"#ECEFF4"}}},{content:"=> ",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" this",props:{style:{color:"#81A1C1"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"drawerOpen ",props:{style:{color:"#D8DEE9"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"open",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(s.Code,{codeConfig:p,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"My Awesome App",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBLink ",props:{style:{color:"#D8DEE9"}}},{content:"href",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Imprint",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBLink ",props:{style:{color:"#D8DEE9"}}},{content:"href",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Help",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton ",props:{style:{color:"#D8DEE9"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"search",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"[noText]",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"true",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Search",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton ",props:{style:{color:"#D8DEE9"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"[noText]",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"true",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Profile",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton ",props:{style:{color:"#D8DEE9"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"[noText]",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"true",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Notification",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton ",props:{style:{color:"#D8DEE9"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"help",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"[noText]",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"true",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:" Help ",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/2233-a1920f23cfb178b1.js b/review/1654-focus-state-dev-research/_next/static/chunks/2233-a1920f23cfb178b1.js new file mode 100644 index 00000000000..2ad6df11ac6 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/2233-a1920f23cfb178b1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2233],{42233:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),l=e(65854);let c={annotations:l.ds,Code:l.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Basic",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"placeholder",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"I am a placeholder",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Basic",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"placeholder",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"I am a placeholder",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Basic",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Basic",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Basic",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"placeholder",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"I am a placeholder",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Basic",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"placeholder",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"I am a placeholder",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Basic",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Basic",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/2273-dbce26176a66431b.js b/review/1654-focus-state-dev-research/_next/static/chunks/2273-dbce26176a66431b.js new file mode 100644 index 00000000000..563ae12840e --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/2273-dbce26176a66431b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2273],{2273:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"React"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/react-components",children:"react-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["App.tsx"],active:"App.tsx",heightRatio:1},files:[{name:"App.tsx",focus:"",code:{lines:[{tokens:[{content:"// App.tsx",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBMainNavigation ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/react-components",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#81A1C1"}}},{content:"App ",props:{style:{color:"#88C0D0"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBMainNavigation",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" active",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" slotSubNavigation",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" active",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" slotSubNavigation",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem active",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Sub-Sub-Navi-Item 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Sub-Sub-Navi-Item 2",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" }",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" >",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Sub-Navi-Item 1",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Sub-Navi-Item 2",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" }",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" >",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Navi-Item 1",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Navi-Item 2",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem disabled",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Navi-Item 3",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"export default ",props:{style:{color:"#81A1C1"}}},{content:"App",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/2306-fb25f03b8d6e05d4.js b/review/1654-focus-state-dev-research/_next/static/chunks/2306-fb25f03b8d6e05d4.js new file mode 100644 index 00000000000..4b91102d815 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/2306-fb25f03b8d6e05d4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2306],{12306:function(o,t,n){n.r(t),n.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var e=n(52322),s=n(45392),c=n(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,e.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Leading Icon - Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon - Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':areaPopup="false">Leading ',props:{style:{color:"#D8DEE9"}}},{content:"Icon ",props:{style:{color:"#8FBCBB"}}},{content:"- Text",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon - Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Leading Icon - Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon - Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':areaPopup="false">Leading ',props:{style:{color:"#D8DEE9"}}},{content:"Icon ",props:{style:{color:"#8FBCBB"}}},{content:"- Text",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon - Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Leading Icon - Text - Trailing Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon - Text - Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':areaPopup="true">Leading ',props:{style:{color:"#D8DEE9"}}},{content:"Icon ",props:{style:{color:"#8FBCBB"}}},{content:"- ",props:{style:{color:"#D8DEE9"}}},{content:"Text ",props:{style:{color:"#8FBCBB"}}},{content:"- ",props:{style:{color:"#D8DEE9"}}},{content:"Trailing ",props:{style:{color:"#8FBCBB"}}},{content:"Icon",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon - Text - Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Leading Icon - Text - Trailing Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon - Text - Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':areaPopup="true">Leading ',props:{style:{color:"#D8DEE9"}}},{content:"Icon ",props:{style:{color:"#8FBCBB"}}},{content:"- ",props:{style:{color:"#D8DEE9"}}},{content:"Text ",props:{style:{color:"#8FBCBB"}}},{content:"- ",props:{style:{color:"#D8DEE9"}}},{content:"Trailing ",props:{style:{color:"#8FBCBB"}}},{content:"Icon",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon - Text - Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text - Trailing Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text - Trailing Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':areaPopup="true">Text - ',props:{style:{color:"#D8DEE9"}}},{content:"Trailing ",props:{style:{color:"#8FBCBB"}}},{content:"Icon",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text - Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text - Trailing Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text - Trailing Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':areaPopup="true">Text - ',props:{style:{color:"#D8DEE9"}}},{content:"Trailing ",props:{style:{color:"#8FBCBB"}}},{content:"Icon",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text - Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':areaPopup="false">Text',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':areaPopup="false">Text',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,e.jsx)(t,Object.assign({},o,{children:(0,e.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/2434-f0edeb25b43ae1e2.js b/review/1654-focus-state-dev-research/_next/static/chunks/2434-f0edeb25b43ae1e2.js new file mode 100644 index 00000000000..d33072362b1 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/2434-f0edeb25b43ae1e2.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2434],{52434:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),c=e(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/2454-0c5cf4128abde3a6.js b/review/1654-focus-state-dev-research/_next/static/chunks/2454-0c5cf4128abde3a6.js new file mode 100644 index 00000000000..98c50bfa38b --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/2454-0c5cf4128abde3a6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2454],{72454:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return c}});var n=e(52322),l=e(45392),r=e(65854);let s={annotations:r.ds,Code:r.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(s.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Optional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Optional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Optional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(s.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Optional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Optional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Optional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(s.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Required",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"required",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':required="true">Required',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(s.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Required",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"required",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':required="true">Required',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(s.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Filled Required",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Filled Required",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"required",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Filled Required",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':required="true">Filled Required',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(s.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Filled Required",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Filled Required",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"required",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Filled Required",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':required="true">Filled Required',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,l.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/2482-d0b08b21a4659a27.js b/review/1654-focus-state-dev-research/_next/static/chunks/2482-d0b08b21a4659a27.js new file mode 100644 index 00000000000..4bcc9a8225f --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/2482-d0b08b21a4659a27.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2482],{62482:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Vue"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/v-components",children:"v-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["App.vue"],active:"App.vue",heightRatio:1},files:[{name:"App.vue",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"vue"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/256-92cb1f9030c8e315.js b/review/1654-focus-state-dev-research/_next/static/chunks/256-92cb1f9030c8e315.js new file mode 100644 index 00000000000..e179dc0702e --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/256-92cb1f9030c8e315.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[256],{256:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"HTML"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/components",children:"components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["index.html"],active:"index.html",heightRatio:1},files:[{name:"index.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"...",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Alert",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/2588-1a3cb97fb3627ad5.js b/review/1654-focus-state-dev-research/_next/static/chunks/2588-1a3cb97fb3627ad5.js new file mode 100644 index 00000000000..f3d08d6e827 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/2588-1a3cb97fb3627ad5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2588],{92588:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),l=e(65854);let c={annotations:l.ds,Code:l.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Auto (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Auto (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':areaPopup="true">Auto (Default)',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Auto (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Auto (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Auto (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':areaPopup="true">Auto (Default)',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Auto (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Full",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem width",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"full",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Full",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem width",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"full",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':areaPopup="true">Full',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Full",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Full",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem width",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"full",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Full",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem width",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"full",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':areaPopup="true">Full',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Full",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/2647-95906a56f59a9371.js b/review/1654-focus-state-dev-research/_next/static/chunks/2647-95906a56f59a9371.js new file mode 100644 index 00000000000..07832df7a24 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/2647-95906a56f59a9371.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2647],{72647:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Vue"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/v-components",children:"v-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["App.vue"],active:"App.vue",heightRatio:1},files:[{name:"App.vue",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"vue"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/2666-4dac242a69d2a7cf.js b/review/1654-focus-state-dev-research/_next/static/chunks/2666-4dac242a69d2a7cf.js new file mode 100644 index 00000000000..03dba9f6ee6 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/2666-4dac242a69d2a7cf.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2666],{2666:function(o,t,n){n.r(t),n.d(t,{CH:function(){return c},chCodeConfig:function(){return l}});var e=n(52322),s=n(45392),r=n(65854);let c={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,e.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Primary",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"primary",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Primary",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"primary",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Primary",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Primary",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"primary",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Primary",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"primary",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Primary",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Outlined (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Outlined (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Outlined (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Outlined (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Outlined (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Outlined (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Solid (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"solid",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Solid (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"solid",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Solid (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Solid (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"solid",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Solid (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"solid",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Solid (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text (Adaptive)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,e.jsx)(t,Object.assign({},o,{children:(0,e.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/2690-c5f5302d785c9b3f.js b/review/1654-focus-state-dev-research/_next/static/chunks/2690-c5f5302d785c9b3f.js new file mode 100644 index 00000000000..3a4cdb3ceb9 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/2690-c5f5302d785c9b3f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2690],{42690:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return p}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},p={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"React"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/react-components",children:"react-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:p,northPanel:{tabs:["App.tsx"],active:"App.tsx",heightRatio:1},files:[{name:"App.tsx",focus:"",code:{lines:[{tokens:[{content:"// App.tsx",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBPage",props:{style:{color:"#D8DEE9"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBHeader ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/react-components",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#81A1C1"}}},{content:"App ",props:{style:{color:"#88C0D0"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBPage slotHeader",props:{style:{color:"#8FBCBB"}}},{content:"={<",props:{style:{color:"#81A1C1"}}},{content:"DBHeader",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"...",props:{style:{color:"#D8DEE9FF"}}},{content:"}>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Main Page",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"export default ",props:{style:{color:"#81A1C1"}}},{content:"App",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/2770-0329c515cff5ac37.js b/review/1654-focus-state-dev-research/_next/static/chunks/2770-0329c515cff5ac37.js new file mode 100644 index 00000000000..2911a6957c7 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/2770-0329c515cff5ac37.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2770],{22770:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),c=e(45392),s=e(65854);let l={annotations:s.ds,Code:s.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox checked",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:"><",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox ",props:{style:{color:"#8FBCBB"}}},{content:':checked="true">Interactive Checkbox',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox checked",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:"><",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox ",props:{style:{color:"#8FBCBB"}}},{content:':checked="true">Interactive Checkbox',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox checked disabled",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:"><",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox ",props:{style:{color:"#8FBCBB"}}},{content:':checked="true" :disabled="true">Interactive Checkbox',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox checked disabled",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:"><",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox ",props:{style:{color:"#8FBCBB"}}},{content:':checked="true" :disabled="true">Interactive Checkbox',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/2818-8be41e8134cac5e6.js b/review/1654-focus-state-dev-research/_next/static/chunks/2818-8be41e8134cac5e6.js new file mode 100644 index 00000000000..f82ad606671 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/2818-8be41e8134cac5e6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2818],{22818:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Angular"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/ngx-components",children:"ngx-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Load component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"//app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBTextareaModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBTextareaModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.component.ts"],active:"app.component.ts",heightRatio:1},files:[{name:"app.component.ts",focus:"",code:{lines:[{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"Component ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@angular/core",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@Component",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" selector",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"app-root",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" templateUrl",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"./app.component.html",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"export class ",props:{style:{color:"#81A1C1"}}},{content:"AppComponent ",props:{style:{color:"#8FBCBB"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" textarea ",props:{style:{color:"#D8DEE9FF"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"default value",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/290-573cbd06d629f0af.js b/review/1654-focus-state-dev-research/_next/static/chunks/290-573cbd06d629f0af.js new file mode 100644 index 00000000000..76c26aa9461 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/290-573cbd06d629f0af.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[290],{50290:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3",code:"code"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Vue"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/v-components",children:"v-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"General"}),"\n",(0,n.jsxs)(t.p,{children:["If you use ",(0,n.jsx)(t.code,{children:"width !== full"})," you are able to overwrite the ",(0,n.jsx)(t.code,{children:"max-width"})," with ",(0,n.jsx)(t.code,{children:"--db-drawer-max-width:"})," CSS variable."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["App.vue"],active:"App.vue",heightRatio:1},files:[{name:"App.vue",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"vue"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/2954-378c1a3b64b39302.js b/review/1654-focus-state-dev-research/_next/static/chunks/2954-378c1a3b64b39302.js new file mode 100644 index 00000000000..9c520733dac --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/2954-378c1a3b64b39302.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2954],{62954:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),l=e(65854);let c={annotations:l.ds,Code:l.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Size",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"default",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Size",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"default",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Size",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"default",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Size",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"default",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Size",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Size",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Size",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Size",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/2992-ae645d58bb3ae82c.js b/review/1654-focus-state-dev-research/_next/static/chunks/2992-ae645d58bb3ae82c.js new file mode 100644 index 00000000000..1eb1ff019d0 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/2992-ae645d58bb3ae82c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2992],{12992:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"React"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBCodeDocs",props:{style:{color:"#D8DEE9"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBButton ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/react-components/src",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#81A1C1"}}},{content:"codeSnippets ",props:{style:{color:"#D8DEE9"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" [",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"/*This is a comment for a button*/ ",props:{style:{color:"#A3BE8C"}}},{content:"\\n",props:{style:{color:"#EBCB8B"}}},{content:" Test",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCodeDocs codeSnippets",props:{style:{color:"#D8DEE9"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}},{content:"codeSnippets",props:{style:{color:"#D8DEE9"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#D8DEE9FF"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#D8DEE9FF"}}},{content:"Test",props:{style:{color:"#D8DEE9"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"...",props:{style:{color:"#81A1C1"}}}]}],lang:"typescript"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/3017-e011d1e4b9527cd4.js b/review/1654-focus-state-dev-research/_next/static/chunks/3017-e011d1e4b9527cd4.js new file mode 100644 index 00000000000..d84cdf13948 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/3017-e011d1e4b9527cd4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3017],{23017:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return c}});var n=e(52322),s=e(45392),l=e(65854);let r={annotations:l.ds,Code:l.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return r||_missingMdxReference("CH",!1),r.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/3142-34398fa96f6a2011.js b/review/1654-focus-state-dev-research/_next/static/chunks/3142-34398fa96f6a2011.js new file mode 100644 index 00000000000..ab4af280986 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/3142-34398fa96f6a2011.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3142],{63142:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return c}});var n=e(52322),s=e(45392),l=e(65854);let r={annotations:l.ds,Code:l.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return r||_missingMdxReference("CH",!1),r.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/3189-4595f860ed305580.js b/review/1654-focus-state-dev-research/_next/static/chunks/3189-4595f860ed305580.js new file mode 100644 index 00000000000..335c631204d --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/3189-4595f860ed305580.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3189],{13189:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Angular"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/ngx-components",children:"ngx-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Load component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"//app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBLinkModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBLinkModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/3191-3983e743ca40e7b9.js b/review/1654-focus-state-dev-research/_next/static/chunks/3191-3983e743ca40e7b9.js new file mode 100644 index 00000000000..44e2f6abeeb --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/3191-3983e743ca40e7b9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3191],{63191:function(o,t,n){n.r(t),n.d(t,{CH:function(){return c},chCodeConfig:function(){return r}});var e=n(52322),s=n(45392),l=n(65854);let c={annotations:l.ds,Code:l.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Neutral (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Neutral (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Neutral (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Neutral (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Neutral (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Neutral (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Neutral (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Neutral (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Neutral Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Neutral Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Neutral Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Neutral Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Neutral Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Neutral Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Neutral Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Neutral Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,e.jsx)(t,Object.assign({},o,{children:(0,e.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/3332-57d1cec14bf5e6d4.js b/review/1654-focus-state-dev-research/_next/static/chunks/3332-57d1cec14bf5e6d4.js new file mode 100644 index 00000000000..705c8fa0d12 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/3332-57d1cec14bf5e6d4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3332],{53332:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3",code:"code"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Angular"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/ngx-components",children:"ngx-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"General"}),"\n",(0,n.jsxs)(t.p,{children:["If you use ",(0,n.jsx)(t.code,{children:"width !== full"})," you are able to overwrite the ",(0,n.jsx)(t.code,{children:"max-width"})," with ",(0,n.jsx)(t.code,{children:"--db-drawer-max-width:"})," CSS variable."]}),"\n",(0,n.jsx)(t.h3,{children:"Load component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"//app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBDrawerModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBDrawerModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" My Drawer content",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:" Open me ",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.component.ts"],active:"app.component.ts",heightRatio:1},files:[{name:"app.component.ts",focus:"",code:{lines:[{tokens:[{content:"// app.component.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"export class ",props:{style:{color:"#81A1C1"}}},{content:"AppComponent ",props:{style:{color:"#8FBCBB"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" openDrawer",props:{style:{color:"#D8DEE9FF"}}},{content:": ",props:{style:{color:"#81A1C1"}}},{content:"boolean ",props:{style:{color:"#8FBCBB"}}},{content:"= false;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" toggleDrawer ",props:{style:{color:"#88C0D0"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"open",props:{style:{color:"#D8DEE9"}}},{content:": ",props:{style:{color:"#81A1C1"}}},{content:"boolean",props:{style:{color:"#8FBCBB"}}},{content:") ",props:{style:{color:"#ECEFF4"}}},{content:"=> ",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" this",props:{style:{color:"#81A1C1"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"openDrawer ",props:{style:{color:"#D8DEE9"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"open",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"ts"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/3458-e31edabe81dad7ae.js b/review/1654-focus-state-dev-research/_next/static/chunks/3458-e31edabe81dad7ae.js new file mode 100644 index 00000000000..fdb72bb4c7f --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/3458-e31edabe81dad7ae.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3458],{53458:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(s.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Numbers",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge example",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"number",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Numbers",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge example",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"number",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Numbers",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Numbers",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Numbers",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge example",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"number",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Numbers",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge example",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"number",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Numbers",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Numbers",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/3495-e298f53e70e70fe5.js b/review/1654-focus-state-dev-research/_next/static/chunks/3495-e298f53e70e70fe5.js new file mode 100644 index 00000000000..aa9da96e265 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/3495-e298f53e70e70fe5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3495],{13495:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),l=e(65854);let c={annotations:l.ds,Code:l.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"functional",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"functional",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"functional",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"functional",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"regular (Default)",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"regular (Default)",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"regular (Default)",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"regular (Default)",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"expressive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"expressive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"expressive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"expressive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/3512-018eb94dfa2a1a72.js b/review/1654-focus-state-dev-research/_next/static/chunks/3512-018eb94dfa2a1a72.js new file mode 100644 index 00000000000..4d06da43b2a --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/3512-018eb94dfa2a1a72.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3512],{53512:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return p}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},p={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"React"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/react-components",children:"react-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:p,northPanel:{tabs:["App.tsx"],active:"App.tsx",heightRatio:1},files:[{name:"App.tsx",focus:"",code:{lines:[{tokens:[{content:"// App.tsx",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBLink ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/react-components",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#81A1C1"}}},{content:"App ",props:{style:{color:"#88C0D0"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"primary",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Link",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"export default ",props:{style:{color:"#81A1C1"}}},{content:"App",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/3570-dffb874b9103a761.js b/review/1654-focus-state-dev-research/_next/static/chunks/3570-dffb874b9103a761.js new file mode 100644 index 00000000000..b906c0b1f3f --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/3570-dffb874b9103a761.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3570],{5956:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return c}});var n=e(52322),s=e(45392),l=e(65854);let r={annotations:l.ds,Code:l.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return r||_missingMdxReference("CH",!1),r.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"{alert('click close button')}",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Closable",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" onClick",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=> ",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" alert",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"click close button",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Closable",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\" :click=\"()=>{alert('click ",props:{style:{color:"#D8DEE9"}}},{content:"close ",props:{style:{color:"#8FBCBB"}}},{content:"button')}\">Closable",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Closable",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"{alert('click close button')}",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Closable",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" onClick",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=> ",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" alert",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"click close button",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Closable",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\" :click=\"()=>{alert('click ",props:{style:{color:"#D8DEE9"}}},{content:"close ",props:{style:{color:"#8FBCBB"}}},{content:"button')}\">Closable",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Closable",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Permanent",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" behaviour",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"permanent",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Permanent",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\" ",props:{style:{color:"#D8DEE9"}}},{content:"behaviour",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"permanent",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Permanent",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Permanent",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Permanent",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" behaviour",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"permanent",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Permanent",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\" ",props:{style:{color:"#D8DEE9"}}},{content:"behaviour",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"permanent",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Permanent",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Permanent",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/3585-20fa366217c710af.js b/review/1654-focus-state-dev-research/_next/static/chunks/3585-20fa366217c710af.js new file mode 100644 index 00000000000..d18521d812b --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/3585-20fa366217c710af.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3585],{73585:function(o,t,n){n.r(t),n.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var e=n(52322),c=n(45392),s=n(65854);let l={annotations:s.ds,Code:s.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,e.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Icon & Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Icon & Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Icon & Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Icon & Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Icon & Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Icon & Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"noText",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':noText="true">Icon',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"noText",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':noText="true">Icon',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,e.jsx)(t,Object.assign({},o,{children:(0,e.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/36-10589576abcde7c5.js b/review/1654-focus-state-dev-research/_next/static/chunks/36-10589576abcde7c5.js new file mode 100644 index 00000000000..f7876d71b92 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/36-10589576abcde7c5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[36],{90036:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return l}});var n=e(52322),s=e(45392),c=e(65854);let r={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return r||_missingMdxReference("CH",!1),r.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(r.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"functional",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"functional",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"functional",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"functional",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"regular (Default)",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"regular (Default)",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"regular (Default)",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"regular (Default)",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"expressive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"expressive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"expressive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"expressive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/3630-9a009d0fd190eae8.js b/review/1654-focus-state-dev-research/_next/static/chunks/3630-9a009d0fd190eae8.js new file mode 100644 index 00000000000..bd6a849e16f --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/3630-9a009d0fd190eae8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3630],{87685:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3",code:"code"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"HTML"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/components",children:"components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"General"}),"\n",(0,n.jsxs)(t.p,{children:["If you use ",(0,n.jsx)(t.code,{children:"width !== full"})," you are able to overwrite the ",(0,n.jsx)(t.code,{children:"max-width"})," with ",(0,n.jsx)(t.code,{children:"--db-drawer-max-width:"})," CSS variable."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["index.html"],active:"index.html",heightRatio:1},files:[{name:"index.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"...",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"My Drawer content",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"     ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/364-e6c0b80cd783a9e3.js b/review/1654-focus-state-dev-research/_next/static/chunks/364-e6c0b80cd783a9e3.js new file mode 100644 index 00000000000..44428dacdb1 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/364-e6c0b80cd783a9e3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[364],{50364:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return c}});var n=e(52322),s=e(45392),l=e(65854);let r={annotations:l.ds,Code:l.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return r||_missingMdxReference("CH",!1),r.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Basic",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"(Default) Basic",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Basic",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"(Default) Basic",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Basic",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Basic",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Basic",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"(Default) Basic",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Basic",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"(Default) Basic",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Basic",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Basic",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Informational Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Informational Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Informational Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Informational Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Warning Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Warning Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Warning Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Warning Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Critical Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Critical Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Critical Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Critical Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Successful Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Successful Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Successful Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Successful Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/365-5fa003555de1c83e.js b/review/1654-focus-state-dev-research/_next/static/chunks/365-5fa003555de1c83e.js new file mode 100644 index 00000000000..3d2f3731ab5 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/365-5fa003555de1c83e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[365],{90365:function(o,e,t){t.r(e),t.d(e,{CH:function(){return s},chCodeConfig:function(){return l}});var n=t(52322),r=t(45392),c=t(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let e=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(e.h2,{children:"HTML"}),"\n",(0,n.jsxs)(e.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(e.a,{href:"https://www.npmjs.com/package/@db-ui/components",children:"components"})," package."]}),"\n",(0,n.jsx)(e.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["index.html"],active:"index.html",heightRatio:1},files:[{name:"index.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"...",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,e){throw Error("Expected "+(e?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}e.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,r.ah)(),o.components);return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/3686-521b9c112066e016.js b/review/1654-focus-state-dev-research/_next/static/chunks/3686-521b9c112066e016.js new file mode 100644 index 00000000000..b3380c2588d --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/3686-521b9c112066e016.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3686],{83686:function(e,t,n){n.r(t),n.d(t,{CH:function(){return d},chCodeConfig:function(){return s}});var r=n(52322),c=n(45392),o=n(65854);let d={annotations:o.ds,Code:o.EK},s={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(e){let t=Object.assign({h2:"h2",blockquote:"blockquote",p:"p",strong:"strong",a:"a",h3:"h3",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",code:"code"},(0,c.ah)(),e.components);return d||_missingMdxReference("CH",!1),d.Code||_missingMdxReference("CH.Code",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,r.jsx)(t.h2,{children:"General"}),"\n",(0,r.jsxs)(t.blockquote,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Note"}),"\nFor a general installation or migration process check out this ",(0,r.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/components",children:"documentation"}),"."]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{children:"DB UI Core ➡ DB UI Components"}),"\n",(0,r.jsx)(t.h3,{children:"tag vs. chip"}),"\n",(0,r.jsx)(t.p,{children:"We simplified the components by reducing the amount from tag + chip to only tag."}),"\n",(0,r.jsx)(t.p,{children:"You can use different types of tags by adding another component into it:"}),"\n",(0,r.jsx)(d.Code,{codeConfig:s,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Tag as Button",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Tag as Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Tag as Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Tag as Radio",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Static Tag",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),"\n",(0,r.jsx)(t.h3,{children:"class"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Before"}),(0,r.jsx)(t.th,{align:"center",children:"Status"}),(0,r.jsx)(t.th,{children:"After"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsx)(t.tbody,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"elm-tag"})}),(0,r.jsx)(t.td,{align:"center",children:"\uD83D\uDD01"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"db-tag"})}),(0,r.jsx)(t.td,{})]})})]}),"\n",(0,r.jsx)(t.h3,{children:"sizes"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Before"}),(0,r.jsx)(t.th,{align:"center",children:"Status"}),(0,r.jsx)(t.th,{align:"center",children:"After"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsx)(t.tbody,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"small"})}),(0,r.jsx)(t.td,{align:"center",children:"❌"}),(0,r.jsx)(t.td,{align:"center",children:"❌"}),(0,r.jsxs)(t.td,{children:["We removed small tags because of tonality. But you can use ",(0,r.jsx)(t.code,{children:"type"})," property with value ",(0,r.jsx)(t.code,{children:"strong"})," to emphasize a tag for a differentiation."]})]})})]}),"\n",(0,r.jsx)(t.h3,{children:"variants"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Before"}),(0,r.jsx)(t.th,{align:"center",children:"Status"}),(0,r.jsx)(t.th,{children:"After"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"poi-*"})}),(0,r.jsx)(t.td,{align:"center",children:"❌"}),(0,r.jsx)(t.td,{children:"❌"}),(0,r.jsx)(t.td,{children:"We removed all point of interest colors for now."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"track"})}),(0,r.jsx)(t.td,{align:"center",children:"❌"}),(0,r.jsx)(t.td,{children:"❌"}),(0,r.jsx)(t.td,{children:"We removed track for now."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"error"})}),(0,r.jsx)(t.td,{align:"center",children:"\uD83D\uDD01"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"critical"})}),(0,r.jsx)(t.td,{})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"informative"})}),(0,r.jsx)(t.td,{align:"center",children:"\uD83D\uDD01"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"informational"})}),(0,r.jsx)(t.td,{})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"success"})}),(0,r.jsx)(t.td,{align:"center",children:"\uD83D\uDD01"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"successful"})}),(0,r.jsx)(t.td,{})]})]})]}),"\n",(0,r.jsx)(t.h3,{children:"icons"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Before"}),(0,r.jsx)(t.th,{align:"center",children:"Status"}),(0,r.jsx)(t.th,{children:"After"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsx)(t.tbody,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"iconAfter"})}),(0,r.jsx)(t.td,{align:"center",children:"❌"}),(0,r.jsx)(t.td,{children:"❌"}),(0,r.jsx)(t.td,{children:"not valid anymore, for tags only icons before text are allowed"})]})})]})]})}function _missingMdxReference(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),e.components);return t?(0,r.jsx)(t,Object.assign({},e,{children:(0,r.jsx)(_createMdxContent,e)})):_createMdxContent(e)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/3921-b3de3212e4a58127.js b/review/1654-focus-state-dev-research/_next/static/chunks/3921-b3de3212e4a58127.js new file mode 100644 index 00000000000..8f4bcf20c76 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/3921-b3de3212e4a58127.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3921],{3921:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return l}});var n=e(52322),s=e(45392),r=e(65854);let c={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Default: (Enabled, Hover, Pressed)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Default: (Enabled, Hover, Pressed)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Default: (Enabled, Hover, Pressed)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default: (Enabled, Hover, Pressed)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Default: (Enabled, Hover, Pressed)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Default: (Enabled, Hover, Pressed)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Default: (Enabled, Hover, Pressed)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default: (Enabled, Hover, Pressed)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true">Disabled',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true">Disabled',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/3937-fd868b780783d2d4.js b/review/1654-focus-state-dev-research/_next/static/chunks/3937-fd868b780783d2d4.js new file mode 100644 index 00000000000..2567cd79862 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/3937-fd868b780783d2d4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3937],{63937:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return l}});var n=e(52322),s=e(45392),r=e(65854);let c={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,s.ah)(),o.components);return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"HTML"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/components",children:"components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["index.html"],active:"index.html",heightRatio:1},files:[{name:"index.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"...",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/3956-f4e7eab0f3e2c560.js b/review/1654-focus-state-dev-research/_next/static/chunks/3956-f4e7eab0f3e2c560.js new file mode 100644 index 00000000000..9ec8d78075b --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/3956-f4e7eab0f3e2c560.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3956],{3956:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),c=e(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton disabled",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton ",props:{style:{color:"#8FBCBB"}}},{content:':disabled="true">Disabled',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton disabled",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton ",props:{style:{color:"#8FBCBB"}}},{content:':disabled="true">Disabled',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/3990-6650316443206374.js b/review/1654-focus-state-dev-research/_next/static/chunks/3990-6650316443206374.js new file mode 100644 index 00000000000..5935a7fcbe7 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/3990-6650316443206374.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3990],{41074:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),c=e(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/4105-179626c80997128b.js b/review/1654-focus-state-dev-research/_next/static/chunks/4105-179626c80997128b.js new file mode 100644 index 00000000000..a3a5d2daf20 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/4105-179626c80997128b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4105],{94105:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return p}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},p={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"React"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/react-components",children:"react-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:p,northPanel:{tabs:["App.tsx"],active:"App.tsx",heightRatio:1},files:[{name:"App.tsx",focus:"",code:{lines:[{tokens:[{content:"// App.tsx",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBSelect ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/react-components",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#81A1C1"}}},{content:"App ",props:{style:{color:"#88C0D0"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"export default ",props:{style:{color:"#81A1C1"}}},{content:"App",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/4202-0b5cd18734d96c36.js b/review/1654-focus-state-dev-research/_next/static/chunks/4202-0b5cd18734d96c36.js new file mode 100644 index 00000000000..afa35f03366 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/4202-0b5cd18734d96c36.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4202],{54202:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),c=e(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Full (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Full (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Full (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Full (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Full (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Full (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Full (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Full (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"medium",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"medium",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"medium",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"medium",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"large",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"large",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"large",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"large",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/4375-38c8fe05e0f3891f.js b/review/1654-focus-state-dev-research/_next/static/chunks/4375-38c8fe05e0f3891f.js new file mode 100644 index 00000000000..785d7da4ad4 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/4375-38c8fe05e0f3891f.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4375],{23116:function(e,t){"use strict";var n,r;Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var n in t)Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}(t,{PrefetchKind:function(){return n},ACTION_REFRESH:function(){return o},ACTION_NAVIGATE:function(){return l},ACTION_RESTORE:function(){return u},ACTION_SERVER_PATCH:function(){return f},ACTION_PREFETCH:function(){return a},ACTION_FAST_REFRESH:function(){return i},ACTION_SERVER_ACTION:function(){return c}});let o="refresh",l="navigate",u="restore",f="server-patch",a="prefetch",i="fast-refresh",c="server-action";(r=n||(n={})).AUTO="auto",r.FULL="full",r.TEMPORARY="temporary",("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},25146:function(e,t,n){"use strict";function getDomainLocale(e,t,n,r){return!1}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"getDomainLocale",{enumerable:!0,get:function(){return getDomainLocale}}),n(67858),("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},13814:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return _}});let r=n(43219),o=r._(n(2784)),l=n(31068),u=n(33134),f=n(39585),a=n(51570),i=n(19868),c=n(54365),s=n(60587),d=n(93629),p=n(25146),h=n(10694),y=n(23116),b=new Set;function prefetch(e,t,n,r,o,l){if(!l&&!(0,u.isLocalURL)(t))return;if(!r.bypassPrefetchedCheck){let o=void 0!==r.locale?r.locale:"locale"in e?e.locale:void 0,l=t+"%"+n+"%"+o;if(b.has(l))return;b.add(l)}let f=l?e.prefetch(t,o):e.prefetch(t,n,r);Promise.resolve(f).catch(e=>{})}function formatStringOrUrl(e){return"string"==typeof e?e:(0,f.formatUrl)(e)}let v=o.default.forwardRef(function(e,t){let n,r;let{href:f,as:b,children:v,prefetch:_=null,passHref:g,replace:O,shallow:m,scroll:C,locale:E,onClick:P,onMouseEnter:T,onTouchStart:j,legacyBehavior:M=!1,...R}=e;n=v,M&&("string"==typeof n||"number"==typeof n)&&(n=o.default.createElement("a",null,n));let A=o.default.useContext(c.RouterContext),I=o.default.useContext(s.AppRouterContext),k=null!=A?A:I,L=!A,S=!1!==_,N=null===_?y.PrefetchKind.AUTO:y.PrefetchKind.FULL,{href:x,as:U}=o.default.useMemo(()=>{if(!A){let e=formatStringOrUrl(f);return{href:e,as:b?formatStringOrUrl(b):e}}let[e,t]=(0,l.resolveHref)(A,f,!0);return{href:e,as:b?(0,l.resolveHref)(A,b):t||e}},[A,f,b]),w=o.default.useRef(x),K=o.default.useRef(U);M&&(r=o.default.Children.only(n));let D=M?r&&"object"==typeof r&&r.ref:t,[F,H,V]=(0,d.useIntersection)({rootMargin:"200px"}),q=o.default.useCallback(e=>{(K.current!==U||w.current!==x)&&(V(),K.current=U,w.current=x),F(e),D&&("function"==typeof D?D(e):"object"==typeof D&&(D.current=e))},[U,D,x,V,F]);o.default.useEffect(()=>{k&&H&&S&&prefetch(k,x,U,{locale:E},{kind:N},L)},[U,x,H,E,S,null==A?void 0:A.locale,k,L,N]);let z={ref:q,onClick(e){M||"function"!=typeof P||P(e),M&&r.props&&"function"==typeof r.props.onClick&&r.props.onClick(e),k&&!e.defaultPrevented&&function(e,t,n,r,l,f,a,i,c,s){let{nodeName:d}=e.currentTarget,p="A"===d.toUpperCase();if(p&&(function(e){let t=e.currentTarget,n=t.getAttribute("target");return n&&"_self"!==n||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.nativeEvent&&2===e.nativeEvent.which}(e)||!c&&!(0,u.isLocalURL)(n)))return;e.preventDefault();let navigate=()=>{let e=null==a||a;"beforePopState"in t?t[l?"replace":"push"](n,r,{shallow:f,locale:i,scroll:e}):t[l?"replace":"push"](r||n,{forceOptimisticNavigation:!s,scroll:e})};c?o.default.startTransition(navigate):navigate()}(e,k,x,U,O,m,C,E,L,S)},onMouseEnter(e){M||"function"!=typeof T||T(e),M&&r.props&&"function"==typeof r.props.onMouseEnter&&r.props.onMouseEnter(e),k&&(S||!L)&&prefetch(k,x,U,{locale:E,priority:!0,bypassPrefetchedCheck:!0},{kind:N},L)},onTouchStart(e){M||"function"!=typeof j||j(e),M&&r.props&&"function"==typeof r.props.onTouchStart&&r.props.onTouchStart(e),k&&(S||!L)&&prefetch(k,x,U,{locale:E,priority:!0,bypassPrefetchedCheck:!0},{kind:N},L)}};if((0,a.isAbsoluteUrl)(U))z.href=U;else if(!M||g||"a"===r.type&&!("href"in r.props)){let e=void 0!==E?E:null==A?void 0:A.locale,t=(null==A?void 0:A.isLocaleDomain)&&(0,p.getDomainLocale)(U,e,null==A?void 0:A.locales,null==A?void 0:A.domainLocales);z.href=t||(0,h.addBasePath)((0,i.addLocale)(U,e,null==A?void 0:A.defaultLocale))}return M?o.default.cloneElement(r,z):o.default.createElement("a",{...R,...z},n)}),_=v;("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},93629:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"useIntersection",{enumerable:!0,get:function(){return useIntersection}});let r=n(2784),o=n(30857),l="function"==typeof IntersectionObserver,u=new Map,f=[];function useIntersection(e){let{rootRef:t,rootMargin:n,disabled:a}=e,i=a||!l,[c,s]=(0,r.useState)(!1),d=(0,r.useRef)(null),p=(0,r.useCallback)(e=>{d.current=e},[]);(0,r.useEffect)(()=>{if(l){if(i||c)return;let e=d.current;if(e&&e.tagName){let r=function(e,t,n){let{id:r,observer:o,elements:l}=function(e){let t;let n={root:e.root||null,margin:e.rootMargin||""},r=f.find(e=>e.root===n.root&&e.margin===n.margin);if(r&&(t=u.get(r)))return t;let o=new Map,l=new IntersectionObserver(e=>{e.forEach(e=>{let t=o.get(e.target),n=e.isIntersecting||e.intersectionRatio>0;t&&n&&t(n)})},e);return t={id:n,observer:l,elements:o},f.push(n),u.set(n,t),t}(n);return l.set(e,t),o.observe(e),function(){if(l.delete(e),o.unobserve(e),0===l.size){o.disconnect(),u.delete(r);let e=f.findIndex(e=>e.root===r.root&&e.margin===r.margin);e>-1&&f.splice(e,1)}}}(e,e=>e&&s(e),{root:null==t?void 0:t.current,rootMargin:n});return r}}else if(!c){let e=(0,o.requestIdleCallback)(()=>s(!0));return()=>(0,o.cancelIdleCallback)(e)}},[i,n,t,c,d.current]);let h=(0,r.useCallback)(()=>{s(!1)},[]);return[p,c,h]}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},39097:function(e,t,n){e.exports=n(13814)},5632:function(e,t,n){e.exports=n(60222)}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/4383-776a493549f60f30.js b/review/1654-focus-state-dev-research/_next/static/chunks/4383-776a493549f60f30.js new file mode 100644 index 00000000000..3ef5604cf49 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/4383-776a493549f60f30.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4383],{14383:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return c}});var n=e(52322),s=e(45392),r=e(65854);let l={annotations:r.ds,Code:r.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) 4 Rows",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"(Default) 4 Rows",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) 4 Rows",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"(Default) 4 Rows",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) 4 Rows",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) 4 Rows",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"(Default) 4 Rows",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) 4 Rows",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"(Default) 4 Rows",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) 4 Rows",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Custom",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Custom Example 8 Rows",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" rows",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"8",props:{style:{color:"#B48EAD"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Custom",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Custom Example 8 Rows",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':rows="8" ',props:{style:{color:"#D8DEE9"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Custom",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Custom",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Custom Example 8 Rows",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" rows",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"8",props:{style:{color:"#B48EAD"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Custom",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Custom Example 8 Rows",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':rows="8" ',props:{style:{color:"#D8DEE9"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Custom",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/4469-96db0b2f078c40ff.js b/review/1654-focus-state-dev-research/_next/static/chunks/4469-96db0b2f078c40ff.js new file mode 100644 index 00000000000..db5e2d2b467 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/4469-96db0b2f078c40ff.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4469],{74469:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"React"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/react-components",children:"react-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["App.tsx"],active:"App.tsx",heightRatio:1},files:[{name:"App.tsx",focus:"",code:{lines:[{tokens:[{content:"// App.tsx",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"useState ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBTextarea ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/react-components",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#81A1C1"}}},{content:"App ",props:{style:{color:"#88C0D0"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=> ",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" const ",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#ECEFF4"}}},{content:"textarea",props:{style:{color:"#D8DEE9"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"setTextarea",props:{style:{color:"#D8DEE9"}}},{content:"] ",props:{style:{color:"#ECEFF4"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"useState",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"default textarea",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" return",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Textarea Controlled",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" value",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"textarea",props:{style:{color:"#D8DEE9"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" onChange",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"event",props:{style:{color:"#D8DEE9"}}},{content:") ",props:{style:{color:"#ECEFF4"}}},{content:"=> ",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" setTextarea",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"event",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"target",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" />",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" )",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"export default ",props:{style:{color:"#81A1C1"}}},{content:"App",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/4781-93e1f9e5d1723c4e.js b/review/1654-focus-state-dev-research/_next/static/chunks/4781-93e1f9e5d1723c4e.js new file mode 100644 index 00000000000..7722c1032d5 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/4781-93e1f9e5d1723c4e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4781],{44781:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),c=e(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/4813-ff68c591ac3c0a58.js b/review/1654-focus-state-dev-research/_next/static/chunks/4813-ff68c591ac3c0a58.js new file mode 100644 index 00000000000..98861b9fb38 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/4813-ff68c591ac3c0a58.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4813],{44813:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),c=e(45392),r=e(65854);let s={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3",h4:"h4"},(0,c.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Angular"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/ngx-components",children:"ngx-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Load component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"//app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBAccordionItemModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBAccordionItemModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(t.h4,{children:"With Slots"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Title",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Content",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),"\n",(0,n.jsx)(t.h4,{children:"With attributes"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/4847-83ac30d6ad040030.js b/review/1654-focus-state-dev-research/_next/static/chunks/4847-83ac30d6ad040030.js new file mode 100644 index 00000000000..0a8fb42649b --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/4847-83ac30d6ad040030.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4847],{74847:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),c=e(45392),s=e(65854);let l={annotations:s.ds,Code:s.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true">Disabled',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true">Disabled',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled checked",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled checked",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled checked",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true" :checked="true">Disabled checked',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled checked",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled checked",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled checked",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true" :checked="true">Disabled checked',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Required",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"required",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':required="true">Required',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Required",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"required",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':required="true">Required',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Checked",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"checked",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Checked",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':checked="true">Checked',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Checked",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"checked",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Checked",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':checked="true">Checked',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Indeterminate",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"indeterminate",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Indeterminate",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':indeterminate="true">Indeterminate',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Indeterminate",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"indeterminate",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Indeterminate",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':indeterminate="true">Indeterminate',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/4948-b20f12a47a775fdb.js b/review/1654-focus-state-dev-research/_next/static/chunks/4948-b20f12a47a775fdb.js new file mode 100644 index 00000000000..62b1630b9bc --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/4948-b20f12a47a775fdb.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4948],{84948:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),c=e(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Static (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Static (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Static (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Static (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Static (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Static (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Static (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Static (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Button",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Button",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Button",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Button",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Button",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Button",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBLink",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBLink",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Interactive Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBLink",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBLink",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Interactive Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Radio 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBRadio",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Radio 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBRadio",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Radio 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Radio 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBRadio",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Radio 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBRadio",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Radio 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"db-radio>Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/db-radio>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/db-tag>','html':'",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"div class=\\'db-tab\\'>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"input type=\\'radio\\' class=\\'db-checkbox\\' id=\\'checkbox-element\\' />",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"label for=\\'checkbox-element\\'>Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/label>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/div>','react':'",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"DBTag>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"DBRadio>Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/DBRadio>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/DBTag>','vue':'",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"DBTag>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"DBRadio>Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/DBRadio>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/DBTag>'}",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Radio 2",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" component",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"radio",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" code",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" angular",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" html",props:{style:{color:"#D8DEE9"}}},{content:": '",props:{style:{color:"#ECEFF4"}}},{content:'
    ',props:{style:{color:"#A3BE8C"}}},{content:"',",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" react",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" vue",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Interactive Radio 2",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag component",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"radio",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":code=\"{'angular':'Interactive ",props:{style:{color:"#D8DEE9"}}},{content:"Radio ",props:{style:{color:"#8FBCBB"}}},{content:"2','html':'
    ','react':'Interactive ",props:{style:{color:"#D8DEE9"}}},{content:"Radio ",props:{style:{color:"#8FBCBB"}}},{content:"2','vue':'Interactive ",props:{style:{color:"#D8DEE9"}}},{content:"Radio ",props:{style:{color:"#8FBCBB"}}},{content:"2'}\">Interactive ",props:{style:{color:"#D8DEE9"}}},{content:"Radio ",props:{style:{color:"#8FBCBB"}}},{content:"2",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Interactive Radio 2",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"db-radio>Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/db-radio>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/db-tag>','html':'",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"div class=\\'db-tab\\'>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"input type=\\'radio\\' class=\\'db-checkbox\\' id=\\'checkbox-element\\' />",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"label for=\\'checkbox-element\\'>Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/label>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/div>','react':'",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"DBTag>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"DBRadio>Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/DBRadio>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/DBTag>','vue':'",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"DBTag>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"DBRadio>Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/DBRadio>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/DBTag>'}",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Radio 2",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" component",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"radio",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" code",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" angular",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" html",props:{style:{color:"#D8DEE9"}}},{content:": '",props:{style:{color:"#ECEFF4"}}},{content:'
    ',props:{style:{color:"#A3BE8C"}}},{content:"',",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" react",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" vue",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Interactive Radio 2",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag component",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"radio",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":code=\"{'angular':'Interactive ",props:{style:{color:"#D8DEE9"}}},{content:"Radio ",props:{style:{color:"#8FBCBB"}}},{content:"2','html':'
    ','react':'Interactive ",props:{style:{color:"#D8DEE9"}}},{content:"Radio ",props:{style:{color:"#8FBCBB"}}},{content:"2','vue':'Interactive ",props:{style:{color:"#D8DEE9"}}},{content:"Radio ",props:{style:{color:"#8FBCBB"}}},{content:"2'}\">Interactive ",props:{style:{color:"#D8DEE9"}}},{content:"Radio ",props:{style:{color:"#8FBCBB"}}},{content:"2",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Interactive Radio 2",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Removeable",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag behaviour",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"removable",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Removeable",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag behaviour",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"removable",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Removeable",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Removeable",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Remove tag",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Removeable",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag behaviour",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"removable",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Removeable",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag behaviour",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"removable",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Removeable",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Removeable",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Remove tag",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/4958-a1052e27ee967c59.js b/review/1654-focus-state-dev-research/_next/static/chunks/4958-a1052e27ee967c59.js new file mode 100644 index 00000000000..abaa2e0e640 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/4958-a1052e27ee967c59.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4958],{34958:function(o,e,t){t.r(e),t.d(e,{CH:function(){return s},chCodeConfig:function(){return l}});var n=t(52322),r=t(45392),c=t(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let e=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(e.h2,{children:"Vue"}),"\n",(0,n.jsxs)(e.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(e.a,{href:"https://www.npmjs.com/package/@db-ui/v-components",children:"v-components"})," package."]}),"\n",(0,n.jsx)(e.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["App.vue"],active:"App.vue",heightRatio:1},files:[{name:"App.vue",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"vue"},annotations:[]}]})]})}function _missingMdxReference(o,e){throw Error("Expected "+(e?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}e.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,r.ah)(),o.components);return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/500-ede2bbeb7ee081c7.js b/review/1654-focus-state-dev-research/_next/static/chunks/500-ede2bbeb7ee081c7.js new file mode 100644 index 00000000000..eebd40741a1 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/500-ede2bbeb7ee081c7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[500],{90500:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"HTML"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/components",children:"components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["index.html"],active:"index.html",heightRatio:1},files:[{name:"index.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"...",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/5028-f5f57e650f4e4d80.js b/review/1654-focus-state-dev-research/_next/static/chunks/5028-f5f57e650f4e4d80.js new file mode 100644 index 00000000000..bd0dec58317 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/5028-f5f57e650f4e4d80.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5028],{95028:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),l=e(65854);let c={annotations:l.ds,Code:l.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Password",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"password",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Password",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"password",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Password",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Password",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Password",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"password",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Password",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"password",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Password",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Password",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Search",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"search",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Search",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"search",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Search",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Search",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Search",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"search",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Search",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"search",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Search",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Search",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" E-Mail",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"email",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" E-Mail",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"email",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" E-Mail",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" E-Mail",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" E-Mail",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"email",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" E-Mail",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"email",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" E-Mail",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" E-Mail",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Number",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"number",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Number",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"number",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Number",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Number",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Number",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"number",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Number",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"number",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Number",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Number",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Tel",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"tel",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Tel",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"tel",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Tel",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Tel",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Tel",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"tel",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Tel",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"tel",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Tel",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Tel",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" URL",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"url",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" URL",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"url",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" URL",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" URL",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" URL",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"url",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" URL",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"url",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" URL",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" URL",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Date",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"date",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Date",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"date",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Date",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Date",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Date",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"date",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Date",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"date",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Date",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Date",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Datetime Local",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"datetime-local",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Datetime Local",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"datetime-local",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Datetime Local",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Datetime Local",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Datetime Local",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"datetime-local",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Datetime Local",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"datetime-local",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Datetime Local",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Datetime Local",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Month",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"month",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Month",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"month",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Month",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Month",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Month",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"month",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Month",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"month",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Month",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Month",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Time",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"time",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Time",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"time",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Time",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Time",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Time",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"time",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Time",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"time",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Time",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Time",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Week",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"week",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Week",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"week",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Week",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Week",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Week",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"week",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Week",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"week",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Week",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Week",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/5133-66cb887bdebf07f7.js b/review/1654-focus-state-dev-research/_next/static/chunks/5133-66cb887bdebf07f7.js new file mode 100644 index 00000000000..662497ed2b2 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/5133-66cb887bdebf07f7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5133],{95133:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return p}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},p={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Vue"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/v-components",children:"v-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:p,northPanel:{tabs:["App.vue"],active:"App.vue",heightRatio:1},files:[{name:"App.vue",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"vue"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/5168-3ede3b980e46aeee.js b/review/1654-focus-state-dev-research/_next/static/chunks/5168-3ede3b980e46aeee.js new file mode 100644 index 00000000000..ce1bf0901eb --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/5168-3ede3b980e46aeee.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5168],{5168:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return l}});var n=e(52322),s=e(45392),r=e(65854);let c={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/5206-fa6d0e4ffafd9bb8.js b/review/1654-focus-state-dev-research/_next/static/chunks/5206-fa6d0e4ffafd9bb8.js new file mode 100644 index 00000000000..026d6c717ca --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/5206-fa6d0e4ffafd9bb8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5206],{5206:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return p}});var n=e(52322),r=e(45392),s=e(65854);let c={annotations:s.ds,Code:s.EK},p={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3",h4:"h4"},(0,r.ah)(),o.components);return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Vue"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/v-components",children:"v-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(t.h4,{children:"Simple"}),"\n",(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["App.vue"],active:"App.vue",heightRatio:1},files:[{name:"App.vue",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"vue"},annotations:[]}]}),"\n",(0,n.jsx)(t.h4,{children:"Full"}),"\n",(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["App.vue"],active:"App.vue",heightRatio:1},files:[{name:"App.vue",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"vue"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/5292-af62fb66e5d94646.js b/review/1654-focus-state-dev-research/_next/static/chunks/5292-af62fb66e5d94646.js new file mode 100644 index 00000000000..2509120259c --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/5292-af62fb66e5d94646.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5292],{5292:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),s=e(65854);let c={annotations:s.ds,Code:s.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"No rounding (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"No rounding (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true">No ',props:{style:{color:"#D8DEE9"}}},{content:"rounding ",props:{style:{color:"#8FBCBB"}}},{content:"(Default)",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"No rounding (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"No rounding (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"No rounding (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true">No ',props:{style:{color:"#D8DEE9"}}},{content:"rounding ",props:{style:{color:"#8FBCBB"}}},{content:"(Default)",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"No rounding (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Rounded",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton rounded",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Rounded",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" :rounded="true">Rounded',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Rounded",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Rounded",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton rounded",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Rounded",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" :rounded="true">Rounded',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Rounded",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/530-5b6d3347d0ea2337.js b/review/1654-focus-state-dev-research/_next/static/chunks/530-5b6d3347d0ea2337.js new file mode 100644 index 00000000000..a6da1b8f70d --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/530-5b6d3347d0ea2337.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[530],{10530:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3",code:"code"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Angular"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/ngx-components",children:"ngx-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Load component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"//app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBNavigationItemModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" declarations",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:"NavigationContentDirective",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBNavigationItemModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsxs)(t.p,{children:["We try to set ",(0,n.jsx)(t.code,{children:"areaPopup"})," (has/hasn't sub-navigation) inside the component, but this doesn't work in all frameworks. If you encounter some problems you have the set ",(0,n.jsx)(t.code,{children:"areaPopup"})," with ",(0,n.jsx)(t.code,{children:"true/false"})," for sub-navigation or link"]}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"NavigationItem",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Navi-Item 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Sub-Navi-Item 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Sub-Navi-Item 2",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/5306-57eb6f156ca3fcaa.js b/review/1654-focus-state-dev-research/_next/static/chunks/5306-57eb6f156ca3fcaa.js new file mode 100644 index 00000000000..dab7791662a --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/5306-57eb6f156ca3fcaa.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5306],{95306:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return l}});var n=e(52322),s=e(45392),r=e(65854);let c={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Inline (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"inline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Inline (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"inline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Inline (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Inline (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Inline (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"inline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Inline (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"inline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Inline (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Inline (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Corner - Top - Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-top-left",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Top - Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-top-left",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Top - Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Corner - Top - Left",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Corner - Top - Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-top-left",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Top - Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-top-left",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Top - Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Corner - Top - Left",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Corner - Center - Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-center-left",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Center - Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-center-left",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Center - Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Corner - Center - Left",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Corner - Center - Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-center-left",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Center - Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-center-left",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Center - Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Corner - Center - Left",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Corner - Bottom- Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-bottom-left",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Bottom- Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-bottom-left",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Bottom- Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Corner - Bottom- Left",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Corner - Bottom- Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-bottom-left",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Bottom- Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-bottom-left",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Bottom- Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Corner - Bottom- Left",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Corner - Top - Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-top-right",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Top - Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-top-right",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Top - Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Corner - Top - Right",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Corner - Top - Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-top-right",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Top - Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-top-right",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Top - Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Corner - Top - Right",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Corner - Center - Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-center-right",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Center - Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-center-right",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Center - Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Corner - Center - Right",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Corner - Center - Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-center-right",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Center - Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-center-right",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Center - Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Corner - Center - Right",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Corner - Bottom- Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-bottom-right",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Bottom- Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-bottom-right",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Bottom- Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Corner - Bottom- Right",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Corner - Bottom- Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-bottom-right",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Bottom- Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge placement",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"corner-bottom-right",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Corner - Bottom- Right",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Corner - Bottom- Right",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/5316-4911f26baef7cded.js b/review/1654-focus-state-dev-research/_next/static/chunks/5316-4911f26baef7cded.js new file mode 100644 index 00000000000..3ec721c7b67 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/5316-4911f26baef7cded.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5316],{45316:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),c=e(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/5407-513c7acef7d39a20.js b/review/1654-focus-state-dev-research/_next/static/chunks/5407-513c7acef7d39a20.js new file mode 100644 index 00000000000..381e245eabb --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/5407-513c7acef7d39a20.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5407],{15407:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return c}});var n=e(52322),s=e(45392),l=e(65854);let r={annotations:l.ds,Code:l.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return r||_missingMdxReference("CH",!1),r.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Basic (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Basic (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Basic (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Basic (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Basic (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Basic (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/5479-69850a626ec152b0.js b/review/1654-focus-state-dev-research/_next/static/chunks/5479-69850a626ec152b0.js new file mode 100644 index 00000000000..41175422416 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/5479-69850a626ec152b0.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5479],{5479:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return l}});var n=e(52322),c=e(45392),s=e(65854);let r={annotations:s.ds,Code:s.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return r||_missingMdxReference("CH",!1),r.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(r.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"The accordion is a pure JS Component",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"The accordion is a pure JS Component",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"The accordion is a pure JS Component",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"The accordion is a pure JS Component",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"The accordion is a pure JS Component",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"The accordion is a pure JS Component",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/5691-37b13098a8e1ed54.js b/review/1654-focus-state-dev-research/_next/static/chunks/5691-37b13098a8e1ed54.js new file mode 100644 index 00000000000..90a7171fa87 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/5691-37b13098a8e1ed54.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5691],{25691:function(o,t,n){n.r(t),n.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var e=n(52322),s=n(45392),c=n(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,e.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBMainNavigation",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBMainNavigation",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBMainNavigation",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBMainNavigation",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBMainNavigation",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBMainNavigation",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBMainNavigation",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBMainNavigation",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBMainNavigation",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBMainNavigation",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBMainNavigation",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBMainNavigation",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,e.jsx)(t,Object.assign({},o,{children:(0,e.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/5778-d012ed2fac07ab65.js b/review/1654-focus-state-dev-research/_next/static/chunks/5778-d012ed2fac07ab65.js new file mode 100644 index 00000000000..e665c5c1e08 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/5778-d012ed2fac07ab65.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5778],{15778:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return p}});var n=e(52322),r=e(45392),s=e(65854);let c={annotations:s.ds,Code:s.EK},p={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3",h4:"h4"},(0,r.ah)(),o.components);return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"React"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/react-components",children:"react-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(t.h4,{children:"Simple"}),"\n",(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["App.tsx"],active:"App.tsx",heightRatio:1},files:[{name:"App.tsx",focus:"",code:{lines:[{tokens:[{content:"// App.tsx",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBHeader",props:{style:{color:"#D8DEE9"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBBrand ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/react-components",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#81A1C1"}}},{content:"App ",props:{style:{color:"#88C0D0"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=> <",props:{style:{color:"#81A1C1"}}},{content:"DBHeader slotBrand",props:{style:{color:"#8FBCBB"}}},{content:"={<",props:{style:{color:"#81A1C1"}}},{content:"DBBrand",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Header",props:{style:{color:"#D8DEE9FF"}}},{content:"} />;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"export default ",props:{style:{color:"#81A1C1"}}},{content:"App",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),"\n",(0,n.jsx)(t.h4,{children:"Full"}),"\n",(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["App.tsx"],active:"App.tsx",heightRatio:1},files:[{name:"App.tsx",focus:"",code:{lines:[{tokens:[{content:"// App.tsx",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"useState ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBHeader",props:{style:{color:"#D8DEE9"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBBrand",props:{style:{color:"#D8DEE9"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBLink ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/react-components",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#ECEFF4"}}},{content:"drawerOpen",props:{style:{color:"#D8DEE9"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"setDrawerOpen",props:{style:{color:"#D8DEE9"}}},{content:"] ",props:{style:{color:"#ECEFF4"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"useState",props:{style:{color:"#88C0D0"}}},{content:"<",props:{style:{color:"#ECEFF4"}}},{content:"boolean",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#ECEFF4"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"false",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#81A1C1"}}},{content:"App ",props:{style:{color:"#88C0D0"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBHeader",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" drawerOpen",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"drawerOpen",props:{style:{color:"#D8DEE9"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" onToggle",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"setDrawerOpen",props:{style:{color:"#D8DEE9"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" slotBrand",props:{style:{color:"#8FBCBB"}}},{content:"={<",props:{style:{color:"#81A1C1"}}},{content:"DBBrand",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"My Awesome App",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" slotMetaNavigation",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Imprint",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Help",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" }",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" slotCallToAction",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"search",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"noText",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Search",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" }",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" slotActionBar",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"noText",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Profile",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"noText",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Notification",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"help",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"noText",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Help",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" }",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" >",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBMainNavigation",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" // https://github.com/db-ui/mono/blob/main/packages/components/src/components/main-navigation/docs/React.md",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"export default ",props:{style:{color:"#81A1C1"}}},{content:"App",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/5805-2d0ba79bd51b5804.js b/review/1654-focus-state-dev-research/_next/static/chunks/5805-2d0ba79bd51b5804.js new file mode 100644 index 00000000000..63eb4b8f3ef --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/5805-2d0ba79bd51b5804.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5805],{15805:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return p}});var n=e(52322),c=e(45392),r=e(65854);let s={annotations:r.ds,Code:r.EK},p={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3",h4:"h4"},(0,c.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Vue"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/v-components",children:"v-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(t.h4,{children:"With Slots"}),"\n",(0,n.jsx)(s.Code,{codeConfig:p,northPanel:{tabs:["App.vue"],active:"App.vue",heightRatio:1},files:[{name:"App.vue",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"vue"},annotations:[]}]}),"\n",(0,n.jsx)(t.h4,{children:"With attributes"}),"\n",(0,n.jsx)(s.Code,{codeConfig:p,northPanel:{tabs:["App.vue"],active:"App.vue",heightRatio:1},files:[{name:"App.vue",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"vue"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/5946-c80632dcd9559718.js b/review/1654-focus-state-dev-research/_next/static/chunks/5946-c80632dcd9559718.js new file mode 100644 index 00000000000..97a64a44ed3 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/5946-c80632dcd9559718.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5946],{75946:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3",code:"code"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"React"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/react-components",children:"react-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"General"}),"\n",(0,n.jsxs)(t.p,{children:["If you use ",(0,n.jsx)(t.code,{children:"width !== full"})," you are able to overwrite the ",(0,n.jsx)(t.code,{children:"max-width"})," with ",(0,n.jsx)(t.code,{children:"--db-drawer-max-width:"})," CSS variable."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["App.tsx"],active:"App.tsx",heightRatio:1},files:[{name:"App.tsx",focus:"",code:{lines:[{tokens:[{content:"// App.tsx",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"useState ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBButton",props:{style:{color:"#D8DEE9"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBDrawer ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/react-components",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#81A1C1"}}},{content:"App ",props:{style:{color:"#88C0D0"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=> ",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" const ",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#ECEFF4"}}},{content:"open",props:{style:{color:"#D8DEE9"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"setOpen",props:{style:{color:"#D8DEE9"}}},{content:"] ",props:{style:{color:"#ECEFF4"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"useState",props:{style:{color:"#88C0D0"}}},{content:"<",props:{style:{color:"#ECEFF4"}}},{content:"boolean",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#ECEFF4"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"false",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" return",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" open",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"open",props:{style:{color:"#D8DEE9"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" onClose",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=> ",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" setOpen",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"false",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" >",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" My Drawer content",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" onClick",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=> ",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" setOpen",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"true",props:{style:{color:"#81A1C1"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" >",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Open Me",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" )",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"export default ",props:{style:{color:"#81A1C1"}}},{content:"App",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/5994-573ccf9ac18cfff9.js b/review/1654-focus-state-dev-research/_next/static/chunks/5994-573ccf9ac18cfff9.js new file mode 100644 index 00000000000..843658fd2a7 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/5994-573ccf9ac18cfff9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5994],{95994:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),c=e(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Enabled (Default)",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Enabled (Default)",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Enabled (Default)",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Enabled (Default)",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Disabled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Disabled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true">Disabled',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Disabled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Disabled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true">Disabled',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Open",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Open",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"open",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Open",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Open",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':open="true">Open',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Open",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Open",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Open",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Open",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"open",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Open",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Open",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':open="true">Open',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Open",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Open",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Open Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Open Disabled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"open disabled",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Open Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Open Disabled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':open="true" :disabled="true">Open Disabled',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Open Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Open Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Open Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Open Disabled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"open disabled",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Open Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Open Disabled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':open="true" :disabled="true">Open Disabled',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Open Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Open Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/6006-db6f7796350b87a4.js b/review/1654-focus-state-dev-research/_next/static/chunks/6006-db6f7796350b87a4.js new file mode 100644 index 00000000000..7b7767b80a4 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/6006-db6f7796350b87a4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6006],{56006:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return c}});var n=e(52322),s=e(45392),r=e(65854);let l={annotations:r.ds,Code:r.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':areaPopup="true">functional',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':areaPopup="true">functional',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':areaPopup="true">regular (Default)',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':areaPopup="true">regular (Default)',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':areaPopup="true">expressive',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':areaPopup="true">expressive',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/6087-8bd460c20170c6d3.js b/review/1654-focus-state-dev-research/_next/static/chunks/6087-8bd460c20170c6d3.js new file mode 100644 index 00000000000..dd5149ac1e8 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/6087-8bd460c20170c6d3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6087],{46087:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3",code:"code"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"HTML"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/components",children:"components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsxs)(t.p,{children:["If you want to use sub-navigations for mobile you need to add a ",(0,n.jsx)(t.code,{children:"eventListner:click"})," on the ",(0,n.jsx)(t.code,{children:"db-navigation-item-expand-button"}),". This eventListener should set ",(0,n.jsx)(t.code,{children:"aria-expanded"})," to ",(0,n.jsx)(t.code,{children:"true"})," for the ",(0,n.jsx)(t.code,{children:"button"}),". This will open a static overlay for mobile/tablet devices with your ",(0,n.jsx)(t.code,{children:"db-sub-navigation"}),". For desktop devices it works by default with ",(0,n.jsx)(t.code,{children:":hover"}),"."]}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["index.html"],active:"index.html",heightRatio:1},files:[{name:"index.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"...",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"NavigationItem",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Sub-Navi-Item 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Sub-Navi-Item 2",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/6151-6498d39158104056.js b/review/1654-focus-state-dev-research/_next/static/chunks/6151-6498d39158104056.js new file mode 100644 index 00000000000..9eaa43f8c44 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/6151-6498d39158104056.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6151],{76151:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),c=e(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Button",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Button",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Button",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Button",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Button",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Button",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBLink",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBLink",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Interactive Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBLink",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBLink",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Interactive Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Radio 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBRadio",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Radio 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBRadio",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Radio 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Interactive Radio 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBRadio",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Radio 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBRadio",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Radio 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"db-radio>Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/db-radio>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/db-tag>','html':'",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"div class=\\'db-tab\\'>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"input type=\\'radio\\' class=\\'db-checkbox\\' id=\\'checkbox-element\\' />",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"label for=\\'checkbox-element\\'>Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/label>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/div>','react':'",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"DBTag>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"DBRadio>Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/DBRadio>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/DBTag>','vue':'",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"DBTag>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"DBRadio>Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/DBRadio>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/DBTag>'}",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Strong Radio 2 with Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" component",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"radio",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" code",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" angular",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" html",props:{style:{color:"#D8DEE9"}}},{content:": '",props:{style:{color:"#ECEFF4"}}},{content:'
    ',props:{style:{color:"#A3BE8C"}}},{content:"',",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" react",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" vue",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Interactive Strong Radio 2 with Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag component",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"radio",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":code=\"{'angular':'Interactive ",props:{style:{color:"#D8DEE9"}}},{content:"Radio ",props:{style:{color:"#8FBCBB"}}},{content:"2','html':'
    ','react':'Interactive ",props:{style:{color:"#D8DEE9"}}},{content:"Radio ",props:{style:{color:"#8FBCBB"}}},{content:"2','vue':'Interactive ",props:{style:{color:"#D8DEE9"}}},{content:"Radio ",props:{style:{color:"#8FBCBB"}}},{content:"2'}\">Interactive ",props:{style:{color:"#D8DEE9"}}},{content:"Strong Radio ",props:{style:{color:"#8FBCBB"}}},{content:"2 ",props:{style:{color:"#D8DEE9"}}},{content:"with ",props:{style:{color:"#8FBCBB"}}},{content:"Icon",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Interactive Strong Radio 2 with Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"db-radio>Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/db-radio>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/db-tag>','html':'",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"div class=\\'db-tab\\'>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"input type=\\'radio\\' class=\\'db-checkbox\\' id=\\'checkbox-element\\' />",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"label for=\\'checkbox-element\\'>Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/label>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/div>','react':'",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"DBTag>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"DBRadio>Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/DBRadio>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/DBTag>','vue':'",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"DBTag>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"DBRadio>Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/DBRadio>",props:{style:{color:"#A3BE8C"}}},{content:"<",props:{style:{color:"#D8DEE9"}}},{content:"/DBTag>'}",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Interactive Strong Radio 2 with Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" component",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"radio",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" code",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" angular",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" html",props:{style:{color:"#D8DEE9"}}},{content:": '",props:{style:{color:"#ECEFF4"}}},{content:'
    ',props:{style:{color:"#A3BE8C"}}},{content:"',",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" react",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" vue",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Interactive Radio 2",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Interactive Strong Radio 2 with Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag component",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"radio",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":code=\"{'angular':'Interactive ",props:{style:{color:"#D8DEE9"}}},{content:"Radio ",props:{style:{color:"#8FBCBB"}}},{content:"2','html':'
    ','react':'Interactive ",props:{style:{color:"#D8DEE9"}}},{content:"Radio ",props:{style:{color:"#8FBCBB"}}},{content:"2','vue':'Interactive ",props:{style:{color:"#D8DEE9"}}},{content:"Radio ",props:{style:{color:"#8FBCBB"}}},{content:"2'}\">Interactive ",props:{style:{color:"#D8DEE9"}}},{content:"Strong Radio ",props:{style:{color:"#8FBCBB"}}},{content:"2 ",props:{style:{color:"#D8DEE9"}}},{content:"with ",props:{style:{color:"#8FBCBB"}}},{content:"Icon",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Interactive Strong Radio 2 with Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/6299-9b02b328895dae9e.js b/review/1654-focus-state-dev-research/_next/static/chunks/6299-9b02b328895dae9e.js new file mode 100644 index 00000000000..1054c904f0c --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/6299-9b02b328895dae9e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6299],{96299:function(o,t,n){n.r(t),n.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var e=n(52322),s=n(45392),c=n(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,e.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInfotext variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,e.jsx)(t,Object.assign({},o,{children:(0,e.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/6303-b48b162ba20d677a.js b/review/1654-focus-state-dev-research/_next/static/chunks/6303-b48b162ba20d677a.js new file mode 100644 index 00000000000..3ef6d1fe000 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/6303-b48b162ba20d677a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6303],{86303:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),c=e(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) No Spacing",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) No Spacing",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) No Spacing",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"(Default) No Spacing",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) No Spacing",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) No Spacing",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) No Spacing",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"(Default) No Spacing",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"medium",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"medium",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Medium",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"medium",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"medium",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Medium",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/641-b4a41c2d89dd36e1.js b/review/1654-focus-state-dev-research/_next/static/chunks/641-b4a41c2d89dd36e1.js new file mode 100644 index 00000000000..ecb7616e762 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/641-b4a41c2d89dd36e1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[641],{40641:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return l}});var n=e(52322),s=e(45392),c=e(65854);let r={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return r||_missingMdxReference("CH",!1),r.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(r.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/6484-4f610dd78196675a.js b/review/1654-focus-state-dev-research/_next/static/chunks/6484-4f610dd78196675a.js new file mode 100644 index 00000000000..2324fa18e5d --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/6484-4f610dd78196675a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6484],{15613:function(o,e,t){t.r(e),t.d(e,{CH:function(){return s},chCodeConfig:function(){return l}});var n=t(52322),c=t(45392),r=t(65854);let s={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let e=Object.assign({h2:"h2",p:"p",code:"code"},(0,c.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(e.h2,{children:"React"}),"\n",(0,n.jsxs)(e.p,{children:["Load SCSS globally in a ",(0,n.jsx)(e.code,{children:"index.scss"})," file inside ",(0,n.jsx)(e.code,{children:"main.tsx"}),"/",(0,n.jsx)(e.code,{children:"main.jsx"})," within your app:"]}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"@use ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/components/build/styles/db-ui-42-rollup",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"as *;",props:{style:{color:"#81A1C1"}}}]}],lang:"scss"},annotations:[]}]}),"\n",(0,n.jsx)(e.p,{children:"Import component:"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBInput ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/react-components",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput",props:{style:{color:"#D8DEE9"}}}]},{tokens:[{content:" label",props:{style:{color:"#D8DEE9"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}},{content:"label",props:{style:{color:"#D8DEE9"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" placeholder",props:{style:{color:"#D8DEE9"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}},{content:"description",props:{style:{color:"#D8DEE9"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#D8DEE9"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}},{content:"description",props:{style:{color:"#D8DEE9"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" onChange",props:{style:{color:"#D8DEE9"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}},{content:"handleChange",props:{style:{color:"#D8DEE9"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}},{content:"",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"typescript"},annotations:[]}]})]})}function _missingMdxReference(o,e){throw Error("Expected "+(e?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}e.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,c.ah)(),o.components);return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/65a8b803-86ff7f4c730af09b.js b/review/1654-focus-state-dev-research/_next/static/chunks/65a8b803-86ff7f4c730af09b.js new file mode 100644 index 00000000000..abb9aac5541 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/65a8b803-86ff7f4c730af09b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4996],{65854:function(e,t,n){n.d(t,{EK:function(){return Code},ds:function(){return A}});var r,o,i=n(2784),a=n(28316);function __rest(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&0>t.indexOf(r)&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(e);ot.indexOf(r[o])&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]]);return n}let isValidHex=e=>/^#([A-Fa-f0-9]{3,4}){1,2}$/.test(e),getChunksFromString=(e,t)=>e.match(RegExp(`.{${t}}`,"g")),convertHexUnitTo256=e=>parseInt(e.repeat(2/e.length),16);function map(e,t){return{prev:t(e.prev,"prev"),next:t(e.next,"next")}}function withDefault(e,t){return{prev:(null==e?void 0:e.prev)===void 0?t:e.prev,next:(null==e?void 0:e.next)===void 0?t:e.next}}function codeToText(e){return e.lines.map(e=>e.tokens.map(e=>e.content).join("")).join("\n")}function splitParts(e){return e.split(/,(?![^\[]*\])/g)}function mergeToObject(e){return e.reduce((e,t)=>Object.assign(e,t),{})}function parsePartToObject(e){let t=e.match(/(\d+)\[(.+)\]/);if(!t)return mergeToObject(expandString(e).map(e=>({[e]:!0})));{let[,e,n]=t,r=n.split(",").map(parseExtremes),o=Number(e);return{[o]:r}}}function parseExtremes(e){let[t,n]=e.split(":");if(!isNaturalNumber(t))throw new FocusNumberError(t);let r=Number(t);if(r<1)throw new LineOrColumnNumberError;if(!n)return{start:r,end:r};if(!isNaturalNumber(n))throw new FocusNumberError(n);return{start:r,end:+n}}function parseFocus(e){if(!e)throw Error("Focus cannot be empty");try{let t=e.split(/,(?![^\[]*\])/g).map(parsePart);return function(e){let t={},n=-1,r=null==e?0:e.length;for(;++n[e-1,!0]);{let[,e,n]=t,r=n.split(",").map(expandString),o=Number(e)-1,i=r.flat().map(e=>e-1);return[[o,i]]}}function expandString(e){let[t,n]=e.split(":");if(!isNaturalNumber(t))throw new FocusNumberError(t);let r=Number(t);if(r<1)throw new LineOrColumnNumberError;if(!n)return[r];{if(!isNaturalNumber(n))throw new FocusNumberError(n);let e=[];for(let t=r;t<=+n;t++)e.push(t);return e}}function isNaturalNumber(e){var t=Math.abs(e=e.toString()),n=parseInt(e,10);return!isNaN(t)&&n===t&&t.toString()===e}let LineOrColumnNumberError=class LineOrColumnNumberError extends Error{constructor(){super("Invalid line or column number in focus string"),Object.setPrototypeOf(this,new.target.prototype)}};let FocusNumberError=class FocusNumberError extends Error{constructor(e){super(`Invalid number "${e}" in focus string`),this.number=e,Object.setPrototypeOf(this,new.target.prototype)}};let l="undefined"!=typeof window?i.useLayoutEffect:i.useEffect,s=/\r\n|\r|\n/;function getLongestLine(e,t){let n=e?e.split(s):[""],r=function(e,t){if(!e)return[...t.keys()];{let t=parseFocus(e),n=Object.keys(t).map(e=>parseInt(e,10));return n}}(t,n),o="";return n.forEach((e,t)=>{r.includes(t)&&e.length>o.length&&(o=e)}),o}function getWidthWithoutPadding(e){let t=getComputedStyle(e);return parseFloat(t.width)-parseFloat(t.paddingLeft)-parseFloat(t.paddingRight)}function getHeightWithoutPadding(e){if(!e)return null;let t=getComputedStyle(e);return parseFloat(t.height)-parseFloat(t.paddingTop)-parseFloat(t.paddingBottom)}function Diff(){}Diff.prototype={diff:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.callback;"function"==typeof n&&(r=n,n={}),this.options=n;var o=this;function done(e){return r?(setTimeout(function(){r(void 0,e)},0),!0):e}e=this.castInput(e),t=this.castInput(t),e=this.removeEmpty(this.tokenize(e));var i=(t=this.removeEmpty(this.tokenize(t))).length,a=e.length,l=1,s=i+a,u=[{newPos:-1,components:[]}],c=this.extractCommon(u[0],t,e,0);if(u[0].newPos+1>=i&&c+1>=a)return done([{value:this.join(t),count:t.length}]);function execEditLength(){for(var n=-1*l;n<=l;n+=2){var r=void 0,s=u[n-1],c=u[n+1],h=(c?c.newPos:0)-n;s&&(u[n-1]=void 0);var f=s&&s.newPos+1=i&&h+1>=a)return done(function(e,t,n,r,o){for(var i=0,a=t.length,l=0,s=0;ie.length?n:e}),u.value=e.join(h)}else u.value=e.join(n.slice(l,l+u.count));l+=u.count,u.added||(s+=u.count)}}var f=t[a-1];return a>1&&"string"==typeof f.value&&(f.added||f.removed)&&e.equals("",f.value)&&(t[a-2].value+=f.value,t.pop()),t}(o,r.components,t,e,o.useLongestToken));u[n]=r}l++}if(r)!function exec(){setTimeout(function(){if(l>s)return r();execEditLength()||exec()},0)}();else for(;l<=s;){var h=execEditLength();if(h)return h}},pushComponent:function(e,t,n){var r=e[e.length-1];r&&r.added===t&&r.removed===n?e[e.length-1]={count:r.count+1,added:t,removed:n}:e.push({count:1,added:t,removed:n})},extractCommon:function(e,t,n,r){for(var o=t.length,i=n.length,a=e.newPos,l=a-r,s=0;a+1t-1<=e&&et.start-1<=e&&er)return i;let a=e.ease||g.linear;return o+a((t-n)/(r-n))*(i-o)}}function stagger([e,t],n,r){if(r<=1)return[e,t];let o=t-e,i=o/Math.pow(r,1/8),a=e+(o-i)/(r-1)*n;return[a,a+i]}p.tokenize=function(e){return e.slice()},p.join=p.removeEmpty=function(e){return e};let g={linear:function(e){return e},easeInQuad:function(e){return e*e},easeOutQuad:function(e){return e*(2-e)},easeInOutCubic:function(e){return e<.5?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1}};function isInline(e){return!!e.focus.match(/(\d+)\[(.+)\]/)}function annotateMultilineSide(e,t,n){let r=[...t];r.sort((e,t)=>e.lineNumbers.start-t.lineNumbers.start);let o=0,i=[];for(;ot.lineNumbers.start)throw"Code Hike can't handle two annotations for the same line";if(t&&n(a)===t.lineNumbers.start){let l={lines:[],annotation:t};for(;a&&(!n(a)||n(a)<=t.lineNumbers.end);)l.lines.push(a),a=e[++o];i.push(l),r.shift()}else if(t){let r={lines:[]};for(;a&&(!n(a)||n(a)0;){let t=e.shift();r.push(t);let n=t.tokens.reduce((e,t)=>e+t.content.length,0);o+=n}return r}function SmoothContainer({dimensions:e,codeStep:t,children:n,minZoom:r=0,maxZoom:o=1.2,center:a=!1,progress:l}){let{prev:s,next:u}=function(e){var{codeStep:t}=e,n=__rest(e,["codeStep"]);let{lineHeight:r,lineWidth:o}=n.dimensions,i={prev:{extremes:[t.firstFocusedLineNumber.prev-1,t.lastFocusedLineNumber.prev-1],originalContentHeight:t.lineCount.prev*r,lineWidth:o[0]},next:{extremes:[t.firstFocusedLineNumber.next-1,t.lastFocusedLineNumber.next-1],originalContentHeight:t.lineCount.next*r,lineWidth:o[1]}};return map(i,({extremes:e,originalContentHeight:t,lineWidth:r})=>(function({dimensions:e,lineWidth:t,minZoom:n,maxZoom:r,extremes:o,originalContentHeight:i,horizontalCenter:a}){var l,s;let{lineHeight:u}=e,c=null==e?void 0:e.contentHeight,h=null==e?void 0:e.contentWidth,f=(o[1]-o[0]+3)*u,d=(null==e?void 0:e.lineNumberWidth)||16,m=Math.max(Math.min((h-d-16)/t,c/f,r),n),p=i*m,g=(o[0]-1)*u*m,v=(o[1]+2)*u*m,b=c>p?(c-p)/2:(l=c/2-(v+g)/2)<=(s=Math.max(c-p,-g))?s:l>=0?0:l;return{zoom:m,dx:a?Math.max(h/2-t*m/2,0):0,dy:b,focusHeight:v-g,focusWidth:t*m}})(Object.assign({extremes:e,originalContentHeight:t,lineWidth:r},n)))}({codeStep:t,dimensions:e,minZoom:r,maxZoom:o,horizontalCenter:a}),c=tweenProp(s.zoom,u.zoom,l),h=tweenProp(s.dx,u.dx,l),f=tweenProp(s.dy,u.dy,l,t.verticalInterval),d=tweenProp(s.focusHeight,u.focusHeight,l),m=tweenProp(s.focusWidth,u.focusWidth,l),p=((null==e?void 0:e.lineNumberWidth)||0)*c,g=p||16,v=Math.max(m+g,e.contentWidth);return i.createElement(Container,{width:e.containerWidth,height:e.containerHeight,lang:t.lang},i.createElement(Content$1,{dx:h,dy:f,scale:c,height:Math.max(d,e.contentHeight),width:v},n(m,g/c)))}function Container({width:e,height:t,children:n,lang:r}){return i.createElement("code",{style:{width:e,height:t,position:"relative",overflow:"auto"},className:"ch-code-scroll-parent",children:n,"data-ch-lang":r})}function Content$1({dx:e,dy:t,scale:n,height:r,width:o,children:a}){return i.createElement("div",{style:{position:"absolute",top:0,left:0,transformOrigin:"top left",width:o,height:r,overflow:"hidden"},className:"ch-code-scroll-content"},i.createElement("div",{style:{position:"absolute",top:0,left:0,transform:`translateX(${e}px) translateY(${t}px) scale(${n})`,transformOrigin:"left top",width:o/n,height:(r-2*t)/n},children:a}))}function tweenProp(e,t,n,r=[0,1]){return tween$1({fixed:!1,interval:r,extremes:[e,t],ease:g.easeInOutCubic},n)}function SmoothLines(e){return i.createElement(SmoothContainer,Object.assign({},e),(t,n)=>i.createElement(Lines,{codeStep:e.codeStep,focusWidth:t,lineHeight:e.dimensions.lineHeight,progress:e.progress,startX:n,lineNumberWidth:e.dimensions.lineNumberWidth}))}function Lines({codeStep:e,progress:t,focusWidth:n,lineHeight:r,startX:o,lineNumberWidth:a}){let l=t<.5?e.groups.prev:e.groups.next;return i.createElement(i.Fragment,null,l.map((e,l)=>{if(!e.annotation)return i.createElement(LineGroup,{lines:e.lines,t:t,focusWidth:n,lineHeight:r,startX:o,key:l,lineNumberWidth:a});let s=tween$1(e.lines[0].tweenY,t),u=e.annotation.lineNumbers.end-e.annotation.lineNumbers.start+1,c=e.annotation.Component;return i.createElement(c,{style:{position:"absolute",height:u*r,width:"100%",transform:`translateY(${s*r}px)`},key:l,data:e.annotation.data,isInline:!1,lines:e.lines},i.createElement(LineGroup,{lines:e.lines,t:t,focusWidth:n,lineHeight:r,startY:s,startX:o,lineNumberWidth:a}))}))}function LineGroup({lines:e,focusWidth:t,lineHeight:n,t:r,startX:o,startY:a=0,lineNumberWidth:l}){return i.createElement(i.Fragment,null,e.map((e,s)=>{let{tweenX:u,tweenY:c,focused:h}=e,f=tween$1(u,r),d=tween$1(c,r),m=getOpacity(h,r,f);return i.createElement(i.Fragment,{key:s},l?i.createElement("span",{className:"ch-code-line-number",style:{position:"absolute",top:0,left:0,transform:`translate(${f*t}px, ${(d-a)*n}px)`,width:l,opacity:m}},r<.5?e.lineNumber.prev:e.lineNumber.next):void 0,i.createElement(LineContainer,{dx:o+f*t,dy:(d-a)*n,width:t,opacity:m},i.createElement(LineContent,{line:e,progress:r,dx:f})))}))}function LineContent({line:e,progress:t,dx:n}){return i.createElement("div",{style:{display:"inline-block",width:"100%"}},e.annotatedGroups.map((e,r)=>i.createElement(AnnotatedTokens,{annotatedGroup:e,progress:t,dx:n,key:r})),i.createElement("br",null))}function AnnotatedTokens({annotatedGroup:e,progress:t,dx:n}){var r,o;let a=t<.5?e.prev:e.next,l=(null==a?void 0:a.groups)||[],s=null===(r=null==a?void 0:a.annotation)||void 0===r?void 0:r.Component,u=l.map((e,r)=>{let o=getOpacity(e.focused,t,n);return i.createElement("span",{style:{opacity:o},key:r+1},e.element)});return s?i.createElement(s,{children:u,data:null===(o=null==a?void 0:a.annotation)||void 0===o?void 0:o.data,isInline:!0}):i.createElement(i.Fragment,null,u)}function LineContainer({children:e,dx:t,dy:n,opacity:r,width:o}){return i.createElement("div",{style:{position:"absolute",top:0,left:0,transform:`translate(${t}px, ${n}px)`,width:o,display:r<=0?"none":void 0}},e)}function getOpacity(e,t,n){return tween$1({fixed:!1,extremes:[e.prev?.99:.33,e.next?.99:.33],interval:[0,1]},t)-1*Math.abs(n)}function CopyButton({content:e,style:t,className:n}){let[r,o]=i.useState(!1);return i.createElement("button",{type:"button",title:"Copy code",className:n,style:t,onClick:()=>{(function(e){if(!navigator.clipboard){(function(e){var t=document.createElement("textarea");t.value=e,t.style.top="0",t.style.left="0",t.style.position="fixed",document.body.appendChild(t),t.focus(),t.select();try{document.execCommand("copy")}catch(e){}document.body.removeChild(t)})(e);return}navigator.clipboard.writeText(e)})(e),o(!0),setTimeout(()=>{o(!1)},1200)}},i.createElement("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},r?i.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M5 13l4 4L19 7"}):i.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.6px",d:"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"})))}function CodeTween(e){var{tween:t,progress:n,config:r}=e,o=__rest(e,["tween","progress","config"]);let a=function({tween:e}){var t;return function(e){let{highlightedLines:t,focus:n}=e;return i.useMemo(()=>(function({focus:e,annotations:t,highlightedLines:n,lang:r}){let o=map(n,e=>e.map(e=>e.tokens.map(e=>e.content).join("")).join("\n").trimEnd().concat("\n")),a=function(e,t){let n=0,r=0,o=function(e){var t,n;let r=(t=e.prev,n=e.next,f.diff(t,n,void 0)),o=[],i=0,a=0;return r.forEach(e=>{if(e.added)for(let t=0;tvoid 0===e.next?Object.assign(Object.assign({},t.prev[e.prev]),{lineNumber:{prev:e.prev+1},move:"exit",enterIndex:null,exitIndex:r++}):void 0===e.prev?Object.assign(Object.assign({},t.next[e.next]),{lineNumber:{next:e.next+1},move:"enter",enterIndex:n++,exitIndex:null}):Object.assign(Object.assign({},t.prev[e.prev]),{lineNumber:{prev:e.prev+1,next:e.next+1},move:"stay",enterIndex:null,exitIndex:null}));return{lines:i,enterCount:n,exitCount:r}}(o,n),{inlineAnnotations:l,multilineAnnotations:s}=function(e){let t=map(withDefault(e,[]),e=>e.flatMap(e=>splitParts(e.focus).map(t=>Object.assign(Object.assign({},e),{focus:t})))),n=map(withDefault(t,[]),e=>e.filter(isInline)),r=map(withDefault(t,[]),e=>e.filter(e=>!isInline(e)));return{inlineAnnotations:map(n,e=>(function(e){let t={};return e.forEach(e=>{let n=parsePartToObject(e.focus),r=+Object.keys(n)[0],o=n[r],i=t[r]||[];i.push({columnNumbers:o[0],data:e.data,Component:e.Component}),t[r]=i}),t})(e)),multilineAnnotations:map(r,e=>e.map(e=>({lineNumbers:parseExtremes(e.focus),data:e.data,Component:e.Component})))}}(t),u=function(e,t,n){let{lines:r}=e,o=__rest(e,["lines"]),a=map(t,(e,t)=>{let n="prev"===t?r.filter(e=>"enter"!==e.move):r.filter(e=>"exit"!==e.move);return e?mergeToObject(splitParts(e).map(parsePartToObject)):mergeToObject([...n.keys()].map(e=>({[e+1]:!0})))}),l=r.map(e=>{let{tokens:t}=e,r=__rest(e,["tokens"]),o={prev:!!e.lineNumber.prev&&a.prev[e.lineNumber.prev],next:!!e.lineNumber.next&&a.next[e.lineNumber.next]},l={prev:e.lineNumber.prev&&n.prev[e.lineNumber.prev]||[],next:e.lineNumber.next&&n.next[e.lineNumber.next]||[]};return Object.assign({focused:map(o,e=>!!e),groups:function(e,t,n){let r=map(t,e=>Array.isArray(e)?e:[]),o=map(n,e=>e.map(({columnNumbers:e})=>e)),a=[...r.prev,...r.next,...o.prev,...o.next],l=function(e,t){let n=[...t.map(e=>e.start-1),...t.map(e=>e.end)],r=e;return n.forEach(e=>{let t=[],n=0;r.forEach(r=>{let o=n,i=n+r.content.length;if(o{let r=isIn(s,t.prev),o=isIn(s,t.next),i=getAnnotation(s,n.prev),a=getAnnotation(s,n.next);u&&u.focused.prev===r&&u.focused.next===o&&u.annotation.prev===i&&u.annotation.next===a||(u={focused:{prev:r,next:o},tokens:[],annotation:{prev:i,next:a}},c.push(u)),null==u||u.tokens.push(e),s+=e.content.length}),c.map(e=>({focused:e.focused,tokens:e.tokens,element:i.createElement(i.Fragment,null,e.tokens.map(({content:e,props:t},n)=>i.createElement("span",Object.assign({},t,{key:n+1}),e)))}))}(t,o,l)},r)}),s=map(a,e=>Object.keys(e).map(e=>Number(e))),u=map(s,e=>Math.min(...e)),c=map(s,e=>Math.max(...e));return Object.assign({lines:l,firstFocusedLineNumber:u,lastFocusedLineNumber:c},o)}(a,withDefault(e,null),l),c=function(e,t,n){var{lines:r}=e,o=__rest(e,["lines"]);let i=r.map(e=>{var{groups:n}=e,r=__rest(e,["groups"]);let{lineNumber:o}=r,i={prev:o.prev&&t.prev[o.prev]||[],next:o.next&&t.next[o.next]||[]};return Object.assign(Object.assign({},r),{annotatedGroups:function(e,t){let n=[...e],r=[...e],o=[...t.prev],i=[...t.next],a=[],l=1,s=1;for(;n.length>0||r.length>0;){let e=o[0],t=i[0],u=e&&e.columnNumbers.start===l,c=t&&t.columnNumbers.start===s;if(ls){if(c){let e=t.columnNumbers.end+1;a.push({next:{annotation:t,groups:shiftGroups(r,s,e)}}),s=e,i.shift()}else{let e=Math.min(l,(null==t?void 0:t.columnNumbers.start)||l);a.push({next:{groups:shiftGroups(r,s,e)}}),s=e}}else if(l==s){if(u&&c&&e.columnNumbers.end===t.columnNumbers.end){let u=t.columnNumbers.end+1;a.push({prev:{annotation:e,groups:shiftGroups(n,l,u)},next:{annotation:t,groups:shiftGroups(r,s,u)}}),l=u,s=u,o.shift(),i.shift()}else if(u){let t=e.columnNumbers.end+1;a.push({prev:{annotation:e,groups:shiftGroups(n,l,t)}}),l=t,o.shift()}else if(c){let e=t.columnNumbers.end+1;a.push({next:{annotation:t,groups:shiftGroups(r,s,e)}}),s=e,i.shift()}else if(e||t){let o=Math.min((null==e?void 0:e.columnNumbers.start)||Number.MAX_VALUE,(null==t?void 0:t.columnNumbers.start)||Number.MAX_VALUE);a.push({prev:{groups:shiftGroups(n,l,o)},next:{groups:shiftGroups(r,s,o)}}),l=o,s=o}else a.push({prev:{groups:n},next:{groups:r}}),n=[],r=[]}}return a}(n,i)})}),a={prev:annotateMultilineSide(i,n.prev,e=>e.lineNumber.prev),next:annotateMultilineSide(i,n.next,e=>e.lineNumber.next)};return Object.assign(Object.assign({},o),{lineGroups:a,lineCount:{prev:r.filter(e=>null!=e.lineNumber.prev).length,next:r.filter(e=>null!=e.lineNumber.next).length}})}(u,l,s),h=function(e,t,n){var r,o;let i=(r=e.enterCount,o=e.exitCount,r<=0&&o<=0?[0,1]:r<=0&&o>=1?[.33,1]:r>=1&&o<=0?[0,.67]:[.25,.75]),a=map(e.lineGroups,t=>t.map(t=>Object.assign(Object.assign({},t),{lines:function(e,t,n,r){let[o,i]=t;return e.map(e=>{let t=map(e.lineNumber,e=>e&&e-1),{enterIndex:a,exitIndex:l}=e,s="exit"===e.move?{fixed:!0,value:t.prev}:"enter"===e.move?{fixed:!0,value:t.next}:{fixed:!1,extremes:[t.prev,t.next],interval:[o,i],ease:g.easeInOutCubic},u="exit"===e.move?{fixed:!1,extremes:[0,-1],ease:g.easeInQuad,interval:stagger([0,o],l,r)}:"enter"===e.move?{fixed:!1,extremes:[1,0],ease:g.easeOutQuad,interval:stagger([i,1],a,n)}:{fixed:!0,value:0};return Object.assign(Object.assign({},e),{tweenX:u,tweenY:s})})}(t.lines,i,e.enterCount,e.exitCount)})));return Object.assign(Object.assign({},e),{groups:a,verticalInterval:i,code:t,lang:n})}(c,o,r);return h})(e),[t.prev,t.next,n.prev,n.next])}({highlightedLines:map(e,e=>e.code.lines),focus:map(e,e=>e.focus),annotations:map(e,e=>e.annotations),lang:(t=e=>{var t;return null===(t=null==e?void 0:e.code)||void 0===t?void 0:t.lang})(e.prev)||t(e.next)})}({tween:t}),{element:u,dimensions:c}=function(e,t,n,r,o,a){let[u,c]=i.useState(null),[h,f]=i.useState(0),d=function(){let[e,t]=i.useState(void 0);return i.useEffect(()=>{function handleResize(){t(window.innerWidth)}return window.addEventListener("resize",handleResize),()=>window.removeEventListener("resize",handleResize)},[]),e}(),m=i.useRef(null),{prevLongestLine:p,nextLongestLine:g,element:v}=i.useMemo(()=>{let n=getLongestLine(e.prev,t.prev),a=getLongestLine(e.next,t.next),l=(e.prev||e.next).trimEnd().split(s),u=Math.max(l.length,10);if(o){let e="focus"===o?function(e,t){let[n,r]=function(e,t){if(!e)return[0,t.length-1];{let t=parseFocus(e),n=Object.keys(t).map(e=>parseInt(e,10));return[Math.min(...n),Math.max(...n)]}}(e.prev,t);return r-n+1}(t,l):o,r=l.length;for(;re;)l.pop(),r--;n&&!l.includes(n)&&(l[l.length-1]=n)}let c=!1,h=i.createElement("code",{className:"ch-code-scroll-parent"},i.createElement("br",null),l.map((e,t)=>{let o=c||e!==n?void 0:m;return c=c||null!=o,i.createElement("div",{ref:o,key:t},r?i.createElement("span",{className:"ch-code-line-number"},"_",u):void 0,i.createElement("div",{style:{display:"inline-block",marginLeft:16}},i.createElement("span",null,e)))}),i.createElement("br",null));return{prevLongestLine:n,nextLongestLine:a,element:h}},[e]),b=[...a,d,p,g,n,h];return(l(()=>{var e;if(m.current){let t=m.current,r=null==t?void 0:t.parentElement,o=r.parentElement,{width:i}=o.getBoundingClientRect();if(!i&&0===h){let e=new ResizeObserver(([t])=>{let{width:n}=t.contentRect;n&&(e.disconnect(),f(1))});return e.observe(o),()=>e.disconnect()}let a=null==t?void 0:t.querySelector(":scope > div"),l=null==t?void 0:t.querySelector(":scope > span"),s=l?function(e){let t=getComputedStyle(e);return parseFloat(t.width)}(l):0,u=getWidthWithoutPadding(a),d=u/p.length||1,v=g.length*d,y=null!==(e=getHeightWithoutPadding(a))&&void 0!==e?e:20,x={containerWidth:getWidthWithoutPadding(o.parentElement),containerHeight:getHeightWithoutPadding(o.parentElement),contentWidth:getWidthWithoutPadding(r.parentElement),contentHeight:getHeightWithoutPadding(r.parentElement),lineWidths:[u||v||200,v||u||200],lineWidth:[Math.max(u||v||200,d*n),Math.max(v||u||200,d*n)],lineHeight:y,colWidth:d,lineNumberWidth:s,deps:b};c(x)}return()=>{}},b),!u||function(e,t){for(let n=0;ne.focus),r.minColumns||10,r.lineNumbers||!1,r.rows,[r.parentHeight]);return!c||r.debug?i.createElement(BeforeDimensions,{element:u,htmlProps:o,debug:r.debug}):i.createElement(AfterDimensions,{dimensions:c,stepInfo:a,config:r,progress:n,htmlProps:o})}function BeforeDimensions({element:e,htmlProps:t,debug:n}){return i.createElement(Wrapper,{htmlProps:t,measured:!1},e)}function AfterDimensions({config:{minZoom:e=1,maxZoom:t=1,horizontalCenter:n=!1},dimensions:r,stepInfo:o,progress:a,htmlProps:l,config:s}){var u;return i.createElement(Wrapper,{htmlProps:l,measured:!0},i.createElement(SmoothLines,{codeStep:o,progress:a,dimensions:r,minZoom:e,maxZoom:t,center:n}),s.showCopyButton?i.createElement(CopyButton,{className:"ch-code-button",content:null===(u=null==o?void 0:o.code)||void 0===u?void 0:u.prev}):void 0)}function Wrapper({htmlProps:e,children:t,measured:n}){return i.createElement("div",Object.assign({},e,{className:`ch-code-wrapper ${(null==e?void 0:e.className)||""}`,"data-ch-measured":n,children:t}))}function currentTime(){return"undefined"!=typeof window?performance.now():0}function getConfigWithDefaults(e,t){var n=t.stiffness,r=t.damping,o=t.mass,i=t.decimals,a=t.teleport;return{X:e,k:null!=n?n:170,c:null!=r?r:26,m:null!=o?o:1,teleport:null!=a&&a,decimals:null!=i?i:2}}var v=Math.sqrt,b=Math.exp,y=Math.sin,x=Math.cos;function spring(e){var t=e.x0,n=e.v0,r=e.t0,o=e.t,i=e.k,a=e.c,l=e.m,s=e.X,u=t-s,c=(o-r)/1e3,h=a*a-4*i*l;if(h>0){var f=(-a+v(h))/(2*l),d=(-a-v(h))/(2*l),m=(u*f-n)/(f-d),p=(n-u*d)/(f-d);return{x:s+m*b(d*c)+p*b(f*c),v:m*d*b(d*c)+p*f*b(f*c)}}if(h<0){var g=-a/(2*l),E=v(-h)/(2*l),w=(n-g*u)/E;return{x:s+b(g*c)*(u*x(E*c)+w*y(E*c)),v:b(g*c)*((w*E+u*g)*x(E*c)-(u*E-w*g)*y(E*c))}}var C=-a/(2*l),j=n-C*u;return{x:s+(u+j*c)*b(C*c),v:(j+u*C+j*C*c)*b(C*c)}}var E=[],w=null;function queueAnimationFrame(e){var t=E.push(e);return 1===t&&(w=requestAnimationFrame(runQueue)),[w,t-1]}function unqueueAnimationFrame(e){var t=e[0],n=e[1];t===w&&delete E[n]}function runQueue(){var e=currentTime(),t=E;E=[],(0,a.unstable_batchedUpdates)(function(){return t.forEach(function(t){return t&&t(e)})})}var C="undefined"!=typeof window?i.useLayoutEffect:i.useEffect;function useSpring(e,t){void 0===t&&(t={});var n,r,o,a,l,s,u,c,h,f=i.useState()[1],d=getConfigWithDefaults(e,t),m=(c=t,null==(h=i.useRef(null)).current&&(h.current={config:getConfigWithDefaults(e,c),state:{x0:null!=(n=c.from)?n:e,v0:null!=(r=c.initialSpeed)?r:0,t0:currentTime(),raf:null}}),h.current),p=m.state,g=m.config,v=currentTime(),b=p.x0,y=p.v0,x=p.t0,E=g.k,w=g.c,j=g.m,O=g.X,N=d.teleport?{x:O,v:0}:spring({x0:b,v0:y,t0:x,t:v,k:E,c:w,m:j,X:O}),_=N.x,k=N.v,T=(o=d.decimals,a=d.X,l=d.k,s=d.c,u=d.m,roundTo(_,o)!==roundTo(a,o)||roundTo(spring({x0:_,v0:k,t0:v,t:v+.016,k:l,c:s,m:u,X:a}).x,o)!==roundTo(a,o));return C(function(){Object.assign(g,d)},[d.X,d.k,d.c,d.m,d.teleport]),C(function(){p.x0=_,p.v0=k,p.t0=v},[_,k,v]),C(function(){T&&null==p.raf?p.raf=queueAnimationFrame(function loop(e){var t=p.x0,n=p.v0,r=p.t0,o=g.k,i=g.c,a=g.m,l=g.X,s=g.decimals;roundTo(spring({x0:t,v0:n,t0:r,t:e,k:o,c:i,m:a,X:l}).x,s)!==roundTo(t,s)?(p.raf=null,f(e)):p.raf=queueAnimationFrame(loop)}):T||null==p.raf||(unqueueAnimationFrame(p.raf),p.raf=null)}),C(function(){return function(){null!=p.raf&&unqueueAnimationFrame(p.raf)}},[]),[roundTo(_,d.decimals),T]}function roundTo(e,t){var n=Math.pow(10,t);return Math.round(e*n)/n}let j={stiffness:120,damping:24,mass:.2,decimals:3};function CodeSpring(e){var{step:t,config:n}=e,r=__rest(e,["step","config"]);let{tween:o,t:a}=function(e,t=j){let[{target:n,steps:r,index:o},a]=i.useState({target:2,steps:[e,e,e],index:0});i.useEffect(()=>{let t=r[r.length-1];t!=e&&a(t=>(function(e,t,n){let{steps:r,target:o,index:i}=e,a=r.slice();return n-i<1?(a[2]=t,Object.assign(Object.assign({},e),{steps:a})):(a[0]=r[1],a[1]=r[2],a[2]=t,Object.assign(Object.assign({},e),{steps:a,target:o+1,index:i+1}))})(t,e,l))},[e]);let[l]=useSpring(n,t),s=l-o,u=s<=1?{tween:{prev:r[0],next:r[1]},t:s}:{tween:{prev:r[1],next:r[2]},t:s-1};return u}(t,n.spring);return i.createElement(CodeTween,Object.assign({tween:o,progress:a,config:n},r))}let O=i.forwardRef(function(e,t){var{title:n,children:r,titleBar:o,zoom:a=1,overflow:l}=e,s=__rest(e,["title","children","titleBar","zoom","overflow"]);let u=o||i.createElement(DefaultTitleBar,{title:n});return i.createElement("div",Object.assign({},s,{ref:t}),i.createElement("div",{className:"ch-frame"},i.createElement("div",{className:"ch-frame-title-bar"},u),i.createElement("div",{className:"ch-frame-content"},i.createElement("div",{className:"ch-frame-zoom",style:{"--ch-frame-zoom":a,overflow:l}},r))))});function DefaultTitleBar({title:e}){return i.createElement(i.Fragment,null,i.createElement("div",{className:"ch-frame-left-bar"},i.createElement(FrameButtons,null)),i.createElement("div",{className:"ch-frame-middle-bar"},e),i.createElement("div",{className:"ch-frame-right-bar"}))}function FrameButtons(){return i.createElement("div",{className:"ch-frame-buttons"},i.createElement("div",{className:"ch-frame-button ch-frame-button-left"}),i.createElement("div",{className:"ch-frame-button-space"}),i.createElement("div",{className:"ch-frame-button ch-frame-button-middle"}),i.createElement("div",{className:"ch-frame-button-space"}),i.createElement("div",{className:"ch-frame-button ch-frame-button-right"}))}i.forwardRef(function(e,t){var{title:n,children:r,titleBar:o,overflow:a}=e,l=__rest(e,["title","children","titleBar","overflow"]);let s=o||i.createElement(DefaultTitleBar,{title:n});return i.createElement("div",Object.assign({},l,{ref:t}),i.createElement("div",{className:"ch-simple-frame"},i.createElement("div",{className:"ch-frame-title-bar"},s),r))});let N=i.forwardRef(function(e,t){var n,{northPanel:r,southPanel:o,terminalPanel:a,style:l,height:s,northButton:u,southButton:c,className:h,onTabClick:f}=e,d=__rest(e,["northPanel","southPanel","terminalPanel","style","height","northButton","southButton","className","onTabClick"]);return i.createElement("div",Object.assign({ref:t},d,{className:"ch-editor-frame",style:l}),i.createElement("div",{className:"ch-frame-title-bar"},i.createElement(TabsContainer,{tabs:r.tabs,showFrameButtons:!0,button:u,panel:"north",onTabClick:f})),i.createElement("div",{"data-ch-panel":"north",style:r.style,children:r.children}),o&&i.createElement(i.Fragment,null,i.createElement("div",{className:"ch-frame-title-bar",style:{transform:null===(n=o.style)||void 0===n?void 0:n.transform}},i.createElement(TabsContainer,{tabs:o.tabs,showFrameButtons:!1,button:c,topBorder:!0,panel:"south",onTabClick:f})),i.createElement("div",{"data-ch-panel":"south",children:o.children,style:o.style})))});function TabsContainer({tabs:e,button:t,showFrameButtons:n,topBorder:r,panel:o,onTabClick:a}){return i.createElement(i.Fragment,null,r&&i.createElement("div",{className:"ch-editor-group-border"}),n?i.createElement(FrameButtons,null):i.createElement("div",null),e.map(({title:e,active:t,style:n})=>i.createElement("div",{key:e,title:e,"data-ch-tab":o,"data-active":t,className:"ch-editor-tab",style:n,onClick:a&&(()=>a(e))},i.createElement(TabTitle,{title:e}))),i.createElement("div",{style:{flex:1,minWidth:"0.8em"}}),t)}function TabTitle({title:e}){if(!e)return i.createElement("div",null);let t=e.lastIndexOf("/")+1,n=e.substring(t),r=e.substring(0,t);return i.createElement("div",null,i.createElement("span",{style:{opacity:.5}},r),n)}let _=i.createElement("span",{className:"ch-terminal-prompt"},"$");function TerminalContent({text:e,progress:t=1,style:n}){let r=function(e,t){if(!e)return[];let n=Math.round(e.length*t),{commands:r}=function(e){let[,...t]=e.split(/^\$\s*/gm),n=t.map(e=>{let[t,...n]=e.split(/\r?\n/);return{run:t,output:n.length>0?n.join("\n"):null}}),r=n[n.length-1],o=n.length>0&&null!=r.output,i=o?r.run.split(/(\s+)/)[0]:"bash";return{title:i,isRunning:o,commands:n}}(e.slice(0,n));return r}(e,t);return i.createElement("pre",{style:n,className:"ch-terminal-content"},r.map(({run:e,output:t},n)=>i.createElement(i.Fragment,{key:n},i.createElement("div",null,_," ",i.createElement("span",null,e)),t&&i.createElement("div",{className:"ch-terminal-output"},t))))}function InnerTerminalTransition({prev:e="",prevKey:t,next:n="",nextKey:r,progress:o}){return i.createElement("div",{className:"ch-terminal"},i.createElement("div",{style:{position:"relative",transform:`translateY(-${100*o}%)`}},i.createElement(TerminalContent,{text:e,progress:1,key:t}),i.createElement(TerminalContent,{style:{position:"absolute"},text:n,progress:o,key:r})))}function InnerTerminalTransitions({steps:e,progress:t}){let n=e.map(e=>e.text),r=Math.min(Math.max(Math.floor(t),0),e.length-1),o=r+1;return i.createElement(InnerTerminalTransition,{prev:n[r],prevKey:r,next:n[o]||"",nextKey:o,progress:t%1})}function TerminalPanel({prev:e,next:t,t:n,backward:r}){let o=function({prev:e,next:t,t:n,backward:r}){return e||t?!e&&t?k*Math.min(4*n,1):e&&!t?k*Math.max(1-4*n,0):k:0}({prev:e,next:t,t:n,backward:r});return o?i.createElement("div",{className:"ch-editor-terminal",style:{height:o}},i.createElement("div",{className:"ch-editor-terminal-tab"},i.createElement("span",null,"Terminal")),i.createElement("div",{className:"ch-editor-terminal-content"},i.createElement(InnerTerminalTransitions,{steps:[{text:e||""},{text:t||""}],progress:n}),")")):null}let k=150;function northConfig(e){return Array.isArray(e.rows)?Object.assign(Object.assign({},e),{rows:e.rows[0]}):e}function southConfig(e){return Array.isArray(e.rows)?Object.assign(Object.assign({},e),{rows:e.rows[1]}):e}function CodeTransition({prevFile:e,nextFile:t,t:n,codeConfig:r,parentHeight:o}){var a;let l=Object.assign(Object.assign({},null==r?void 0:r.htmlProps),{style:Object.assign({height:"100%"},null===(a=null==r?void 0:r.htmlProps)||void 0===a?void 0:a.style)});return i.createElement(CodeTween,Object.assign({progress:n,tween:{prev:e,next:t},config:Object.assign(Object.assign({},r),{parentHeight:o})},l))}function getContentFromFile(e){return e?codeToText(e.code):""}function getStepFiles(e,t,n){var r,o;let i=e.northPanel.active,a=t.northPanel.active,l=null===(r=e.southPanel)||void 0===r?void 0:r.active,s=null===(o=t.southPanel)||void 0===o?void 0:o.active,u=e.files.find(e=>e.name===i),c=t.files.find(e=>e.name===a),h=l?e.files.find(e=>e.name===l):null,f=s?t.files.find(e=>e.name===s):null,d=!l&&i===s;if(d)return{prevNorthFile:c,nextNorthFile:c,prevSouthFile:u,nextSouthFile:f};let m=!s&&a===l;if(m)return{prevNorthFile:u,nextNorthFile:u,prevSouthFile:h,nextSouthFile:c};let p=i===a?u:n?u:c,g=i===a?c:n?u:c,v=l===s?h:n?h||f:f||h,b=l===s?f:n?h||f:f||h;return{prevNorthFile:p,nextNorthFile:g,prevSouthFile:v,nextSouthFile:b}}function getPanelTabs(e,t,n,r,o,i){let a=e?Object.keys(e).filter(e=>isPresent(e,n)||!n).map(t=>{let r=n&&n[t],a=e[t],l=r?r.left+(a.left-r.left)*i:a.left,s=r?r.width+(a.width-r.width)*i:a.width;return{active:t===o,title:t,style:{position:"absolute",transform:`translateX(${l}px)`,width:s}}}):[],l=e?Object.keys(e).filter(e=>n&&!isPresent(e,n)).map(t=>{let n=e[t];return{active:t===o,title:t,style:{position:"absolute",transform:`translateX(${n.left}px)`,opacity:i,width:n.width}}}):[];e&&Object.keys(e).filter(e=>isPresent(e,r)).map(t=>{let n=r[t],i=e[t],a=i.left-n.left;return{active:t===o,title:t,style:{position:"absolute",transform:`translateX(${a}px)`}}});let s=n?Object.keys(n).filter(t=>!isPresent(t,e)).map(e=>{let t=n[e];return{active:e===o,title:e,style:{position:"absolute",opacity:1-i,transform:`translateX(${t.left}px)`,width:t.width}}}):[];return[...l,...a,...s]}function isPresent(e,t){return t&&e&&e in t}let T="undefined"!=typeof window?i.useLayoutEffect:i.useEffect;function getPanelSnapshot(e,t){var n;let r=e.querySelector("[data-ch-panel='north']"),o=e.querySelector("[data-ch-panel='south']"),i=e.querySelector(".ch-frame-title-bar");return{titleBarHeight:i.getBoundingClientRect().height,northHeight:r.getBoundingClientRect().height,northKey:t.northPanel.active,southHeight:(null==o?void 0:o.getBoundingClientRect().height)||null,southKey:null===(n=t.southPanel)||void 0===n?void 0:n.active}}function getTabsSnapshot(e,t){var n;let r=Array.from(e.querySelectorAll("[data-ch-tab='north']")),o=Array.from(e.querySelectorAll("[data-ch-tab='south']"));return{northTabs:getTabsDimensions(r,t.northPanel.active),southTabs:getTabsDimensions(o,null===(n=t.southPanel)||void 0===n?void 0:n.active)}}function getTabsDimensions(e,t){if(!e[0])return null;let n=e[0].parentElement,r=n.getBoundingClientRect().left,o={};return e.forEach(e=>{let n=e.getAttribute("title"),i=e.getBoundingClientRect();o[n]={left:i.left-r,width:i.width,active:n===t}}),o}function CodeBrowser({files:e,startingFileName:t}){let[n,r]=i.useState(()=>e.find(e=>e.name===t));return i.createElement("div",{className:"ch-code-browser"},i.createElement(Sidebar,{files:e,activeFile:n,setActiveFile:r}),i.createElement(Content,{file:n}))}function Sidebar({files:e,activeFile:t,setActiveFile:n}){let r=i.useMemo(()=>(function(e){let t=[];for(let n of e){let e=n.name.split("/"),r=t;for(let t=0;te.name===o);if(-1===a){let e={name:o,children:[],codeFile:void 0};i&&(e.codeFile=n),r.push(e),r=e.children}else r=r[a].children}}return function sortTree(e){for(let t of e)t.children=sortTree(t.children);return e.sort((e,t)=>{let n=e.children&&e.children.length>0,r=t.children&&t.children.length>0;return n&&r||!n&&!r?e.name.localeCompare(t.name):n?-1:1})}(t)})(e),[e]);return i.createElement("div",{className:"ch-code-browser-sidebar"},i.createElement(SidebarNodes,{tree:r,activeFile:t,setActiveFile:n}))}function SidebarNodes({tree:e,activeFile:t,setActiveFile:n,level:r=0}){return i.createElement(i.Fragment,null,e.map(e=>i.createElement(SidebarNode,{key:e.name,node:e,activeFile:t,setActiveFile:n,level:r})))}function SidebarNode({node:e,activeFile:t,setActiveFile:n,level:r}){let o=e.children&&e.children.length>0,a=e.codeFile===t;return o?i.createElement("div",null,i.createElement("div",{className:"ch-code-browser-sidebar-folder"},i.createElement("div",{style:{paddingLeft:1.5*r+"ch"}},e.name)),i.createElement(SidebarNodes,{tree:e.children,activeFile:t,setActiveFile:n,level:r+1})):i.createElement("div",null,i.createElement("div",{className:"ch-code-browser-sidebar-file","data-selected":a,onClick:()=>n(e.codeFile)},i.createElement("div",{style:{paddingLeft:1.5*r+"ch"}},e.name)))}function Content({file:e}){return i.createElement("div",{className:"ch-code-browser-content"},i.createElement(CopyButton,{className:"ch-code-browser-button",content:codeToText(e.code)}),e.code.lines.map((e,t)=>i.createElement("div",{key:t},e.tokens.map((e,t)=>i.createElement("span",Object.assign({key:t},e.props),e.content)),i.createElement("br",null))))}function ExpandButton({style:e,step:t,className:n}){let[r,o]=i.useState(!1),[a,l]=i.useState(!0),s=i.useRef(null),u=t.files;return(i.useEffect(()=>{s.current&&!s.current.showModal&&l(!1)},[]),a)?i.createElement(i.Fragment,null,i.createElement(ExpandIcon,{className:n,style:e,onClick:()=>{s.current.showModal(),document.body.classList.add("ch-no-scroll"),o(!0)}}),i.createElement("dialog",{ref:s,className:"ch-expand-dialog",onClose:()=>{o(!1)},onClick:e=>{e.currentTarget===e.target&&(s.current.close(),document.body.classList.remove("ch-no-scroll"))}},i.createElement(CloseButton,{onClick:()=>{s.current.close(),document.body.classList.remove("ch-no-scroll")}}),r?i.createElement("div",{className:"ch-expand-dialog-content"},i.createElement(CodeBrowser,{files:u,startingFileName:t.northPanel.active})):void 0)):null}function ExpandIcon({onClick:e,style:t,className:n}){return i.createElement("button",{type:"button",title:"Expand",style:t,onClick:e,className:n},i.createElement("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},i.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"})))}function CloseButton({onClick:e}){return i.createElement("button",{onClick:e,className:"ch-expand-close",type:"button",title:"Close"},i.createElement("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},i.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})))}let S={files:[{code:{lines:[],lang:"js"},focus:"",name:""}],northPanel:{active:"",tabs:[""],heightRatio:1}};function EditorTween(e){var{prev:t=S,next:n,t:r,backward:o,codeConfig:a,frameProps:s={}}=e,u=__rest(e,["prev","next","t","backward","codeConfig","frameProps"]);let c=i.createRef(),{showCopyButton:h,showExpandButton:f}=a,d=__rest(a,["showCopyButton","showExpandButton"]),{northPanel:m,southPanel:p,northContent:g,southContent:v}=function(e,t,n,r,o,a){var l,s,u,c,h,f,d,m,p;let{prevSnapshot:g,nextSnapshot:v}=function(e,t,n){let[{prevSnapshot:r,nextSnapshot:o},a]=i.useState({prevSnapshot:null,nextSnapshot:null});return T(()=>{(r||o)&&a({prevSnapshot:null,nextSnapshot:null})},[t,n]),T(()=>{if(r){if(!o){let t=e.current;a(e=>Object.assign(Object.assign({},e),{nextSnapshot:Object.assign(Object.assign({},getPanelSnapshot(t,n)),getTabsSnapshot(t,n))}))}}else{let n=e.current;a(e=>Object.assign(Object.assign({},e),{prevSnapshot:Object.assign(Object.assign({},getPanelSnapshot(n,t)),getTabsSnapshot(n,t))}))}}),{prevSnapshot:r,nextSnapshot:o}}(e,t,n);if(!g)return function(e,t,n){let r=e.northPanel,o=e.southPanel,{prevNorthFile:a,prevSouthFile:l,nextNorthFile:s,nextSouthFile:u}=getStepFiles(e,t,!0);return{northContent:getContentFromFile(a),northPanel:{tabs:r.tabs.map(e=>({title:e,active:e===r.active,style:{}})),style:{flexGrow:1,overflow:"hidden"},children:i.createElement(CodeTransition,{codeConfig:northConfig(n),prevFile:a,nextFile:a,t:0,parentHeight:"0"})},southContent:getContentFromFile(l),southPanel:o&&{tabs:o.tabs.map(e=>({title:e,active:e===o.active,style:{}})),style:{flexGrow:1,overflow:"hidden"},children:i.createElement(CodeTransition,{codeConfig:southConfig(n),prevFile:l,nextFile:l,t:0,parentHeight:"0"})}}}(t,n,a);if(!v||1===r)return function(e,t,n){var r;let o=t.northPanel,a=t.southPanel,{prevNorthFile:l,prevSouthFile:s,nextNorthFile:u,nextSouthFile:c}=getStepFiles(e,t,!1),h=!a&&o.active===(null===(r=null==e?void 0:e.southPanel)||void 0===r?void 0:r.active);return h&&(u=c),{northContent:getContentFromFile(u),northPanel:{tabs:o.tabs.map(e=>({title:e,active:e===o.active,style:{}})),style:{flexGrow:1,overflow:"hidden"},children:i.createElement(CodeTransition,{codeConfig:northConfig(n),prevFile:u,nextFile:u,t:1,parentHeight:"1"})},southContent:getContentFromFile(c),southPanel:a&&{tabs:a.tabs.map(e=>({title:e,active:e===a.active,style:{}})),style:{flexGrow:1,overflow:"hidden"},children:i.createElement(CodeTransition,{codeConfig:southConfig(n),prevFile:c,nextFile:c,t:1,parentHeight:"1"})}}}(t,n,a);let b=t.southPanel||n.southPanel,{prevNorthFile:y,prevSouthFile:x,nextNorthFile:E,nextSouthFile:w}=getStepFiles(t,n,0==r||o),{northStyle:C,southStyle:j}=null===g.southHeight&&null===v.southHeight?{northStyle:{minHeight:g.northHeight}}:null!==g.southHeight&&null===v.southHeight&&v.northKey!==g.southKey?{northStyle:{minHeight:(l=g.northHeight,l+(v.northHeight-l)*r)},southStyle:{minHeight:g.southHeight}}:null!==g.southHeight&&null===v.southHeight&&g.southKey===v.northKey?{northStyle:{minHeight:g.northHeight},southStyle:{position:"relative",minHeight:(s=g.southHeight,s+(v.northHeight-s)*r),transform:`translateY(${0+(-(g.northHeight+g.titleBarHeight)-0)*r}px)`}}:null===g.southHeight&&null!==v.southHeight&&g.northKey!==v.southKey?{northStyle:{minHeight:(u=g.northHeight,u+(v.northHeight-u)*r)},southStyle:{position:"relative",minHeight:v.southHeight}}:null===g.southHeight&&null!==v.southHeight&&g.northKey===v.southKey?{northStyle:{minHeight:v.northHeight},southStyle:{position:"relative",minHeight:(c=g.northHeight,c+(v.southHeight-c)*r),transform:`translateY(${(h=-(v.northHeight+v.titleBarHeight))+(0-h)*r}px)`}}:{northStyle:{minHeight:(f=g.northHeight,f+(v.northHeight-f)*r)},southStyle:{minHeight:(d=g.southHeight,d+(v.southHeight-d)*r)}},{northTabs:O,southTabs:N}=(m=y.name,p=null==x?void 0:x.name,!g.southTabs&&isPresent(p,g.northTabs)?{northTabs:getPanelTabs(v.northTabs,v.southTabs,g.southTabs,g.northTabs,m,r),southTabs:getPanelTabs(v.southTabs,v.northTabs,g.northTabs,g.southTabs,p,r)}:!v.southTabs&&isPresent(p,v.northTabs)?{northTabs:getPanelTabs(v.southTabs,v.northTabs,g.northTabs,g.southTabs,m,r),southTabs:getPanelTabs(v.northTabs,v.southTabs,g.southTabs,g.northTabs,p,r)}:{northTabs:getPanelTabs(v.northTabs,v.southTabs,g.northTabs,g.southTabs,m,r),southTabs:getPanelTabs(v.southTabs,v.northTabs,g.southTabs,g.northTabs,p,r)});return{northContent:getContentFromFile(E),northPanel:{tabs:O,style:C,children:i.createElement(CodeTransition,{codeConfig:northConfig(a),prevFile:y,nextFile:E,t:r,parentHeight:C.height||C.minHeight})},southContent:getContentFromFile(w),southPanel:b&&{tabs:N,style:j,children:i.createElement(CodeTransition,{codeConfig:southConfig(a),prevFile:x,nextFile:w,t:r,parentHeight:(null==j?void 0:j.height)||(null==j?void 0:j.minHeight)})}}}(c,t,n||t,r,o,d),[b,y]=i.useState(void 0);l(()=>{var e;let t=null===(e=c.current)||void 0===e?void 0:e.getBoundingClientRect().height;y(t)},[]);let x=Object.assign(Object.assign(Object.assign({},s),u),{style:Object.assign(Object.assign({},null==s?void 0:s.style),null==u?void 0:u.style)});b&&(x.style.height=b,x.style.maxHeight=b);let E=i.createElement(i.Fragment,null,h?i.createElement(CopyButton,{className:"ch-editor-button",content:g}):void 0,f?i.createElement(ExpandButton,{className:"ch-editor-button",step:n||t}):void 0),w=h?i.createElement(CopyButton,{className:"ch-editor-button",content:v}):void 0,C=i.createElement(TerminalPanel,{prev:t.terminal,next:(n||t).terminal,t:r,backward:o});return i.createElement(N,Object.assign({ref:c},x,{northPanel:m,southPanel:p,terminalPanel:C,northButton:E,southButton:w}))}let F={stiffness:120,damping:24,mass:.2,decimals:3};function EditorSpring(e){var{northPanel:t,southPanel:n,files:r,terminal:o,springConfig:a}=e,l=__rest(e,["northPanel","southPanel","files","terminal","springConfig"]);let s=i.useMemo(()=>({northPanel:t,southPanel:n,files:r,terminal:o}),[t,n,r,o]),{prev:u,next:c,t:h}=function(e,t=F){let[{target:n,steps:r,index:o},a]=i.useState({target:2,steps:[e,e,e],index:0});i.useEffect(()=>{let t=r[r.length-1];t!=e&&a(t=>(function(e,t,n){let{steps:r,target:o,index:i}=e,a=r.slice();return n-i<1?(a[2]=t,Object.assign(Object.assign({},e),{steps:a})):(a[0]=r[1],a[1]=r[2],a[2]=t,Object.assign(Object.assign({},e),{steps:a,target:o+1,index:i+1}))})(t,e,l))},[e]);let[l]=useSpring(n,t),s=l-o,u=s<=1?{prev:r[0],next:r[1],t:s}:{prev:r[1],next:r[2],t:s-1};return u}(s,a);return i.createElement(EditorTween,Object.assign({t:h,backward:!1,prev:u,next:c},l))}function Code(e){let[t,n]=i.useState(e);return i.createElement(InnerCode,Object.assign({},t,{onTabClick:function(e){let r=function(e,t,n){let r=t||e.northPanel.active,o=e.files.map(e=>e.name===r?Object.assign(Object.assign({},e),{focus:null===n?e.focus:n}):e),i=Object.assign({},e.northPanel),a=e.southPanel&&Object.assign({},e.southPanel);return e.northPanel.tabs.includes(r)?i.active=r:a&&(a.active=r),{files:o,northPanel:i,southPanel:a}}(t,e,null);n(Object.assign(Object.assign({},t),r))}}))}function InnerCode(e){var t,n,{onTabClick:r}=e,o=__rest(e,["onTabClick"]);let a=function(e){var t,n,r,o,i,a,l,s,u;let{lineNumbers:c,showCopyButton:h,showExpandButton:f,minZoom:d,maxZoom:m}=e,p=__rest(e,["lineNumbers","showCopyButton","showExpandButton","minZoom","maxZoom"]),g=Object.assign(Object.assign({},e.codeConfig),{maxZoom:null==m?null===(t=e.codeConfig)||void 0===t?void 0:t.maxZoom:m,minZoom:null==d?null===(n=e.codeConfig)||void 0===n?void 0:n.minZoom:d,horizontalCenter:null!==(o=null===(r=e.codeConfig)||void 0===r?void 0:r.horizontalCenter)&&void 0!==o?o:e.horizontalCenter,lineNumbers:null==c?null===(i=e.codeConfig)||void 0===i?void 0:i.lineNumbers:c,showCopyButton:null==h?null===(a=e.codeConfig)||void 0===a?void 0:a.showCopyButton:h,showExpandButton:null==f?null===(l=e.codeConfig)||void 0===l?void 0:l.showExpandButton:f,rows:e.rows,debug:null!==(s=e.debug)&&void 0!==s?s:null===(u=e.codeConfig)||void 0===u?void 0:u.debug});return Object.assign(Object.assign({},p),{codeConfig:g})}(o),{className:l,style:s,codeConfig:u}=a,c=__rest(a,["className","style","codeConfig"]);if(!o.southPanel&&1===o.files.length&&!o.files[0].name)return i.createElement("div",{className:`ch-codeblock not-prose ${l||""}`,"data-ch-theme":null===(t=o.codeConfig)||void 0===t?void 0:t.themeName,style:s},i.createElement(CodeSpring,{className:"ch-code",config:u,step:c.files[0]}));{let e=Object.assign(Object.assign({},null==c?void 0:c.frameProps),{onTabClick:r});return i.createElement("div",{className:`ch-codegroup not-prose ${l||""}`,"data-ch-theme":null===(n=o.codeConfig)||void 0===n?void 0:n.themeName,style:s},i.createElement(EditorSpring,Object.assign({},c,{frameProps:e,codeConfig:u})))}}function Back(){return i.createElement("svg",{fill:"currentColor",preserveAspectRatio:"xMidYMid meet",height:"1em",viewBox:"13 10 14 23",className:"ch-browser-button ch-browser-back-button"},i.createElement("g",null,i.createElement("path",{d:"m26.5 12.1q0 0.3-0.2 0.6l-8.8 8.7 8.8 8.8q0.2 0.2 0.2 0.5t-0.2 0.5l-1.1 1.1q-0.3 0.3-0.6 0.3t-0.5-0.3l-10.4-10.4q-0.2-0.2-0.2-0.5t0.2-0.5l10.4-10.4q0.3-0.2 0.5-0.2t0.6 0.2l1.1 1.1q0.2 0.2 0.2 0.5z"})))}function Forward(){return i.createElement("svg",{fill:"currentColor",preserveAspectRatio:"xMidYMid meet",height:"1em",viewBox:"13 10 14 23",className:"ch-browser-button ch-browser-forward-button"},i.createElement("g",null,i.createElement("path",{d:"m26.3 21.4q0 0.3-0.2 0.5l-10.4 10.4q-0.3 0.3-0.6 0.3t-0.5-0.3l-1.1-1.1q-0.2-0.2-0.2-0.5t0.2-0.5l8.8-8.8-8.8-8.7q-0.2-0.3-0.2-0.6t0.2-0.5l1.1-1.1q0.3-0.2 0.5-0.2t0.6 0.2l10.4 10.4q0.2 0.2 0.2 0.5z"})))}function Open({href:e}){return i.createElement("a",{className:"ch-browser-button ch-browser-open-button",title:"Open in new tab",href:e,target:"_blank",rel:"noopener noreferrer"},i.createElement("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"3 3 18 18",height:"1em",width:"1em",className:"ch-browser-open-icon",xmlns:"http://www.w3.org/2000/svg"},i.createElement("path",{d:"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"})))}function TitleBar({url:e,linkUrl:t}){return i.createElement(i.Fragment,null,i.createElement(FrameButtons,null),i.createElement(Back,null),i.createElement(Forward,null),i.createElement("input",{value:e||"",readOnly:!0}),i.createElement(Open,{href:t}))}i.createContext({props:null,setFocus:()=>{}}),i.createContext({activatedId:void 0,activate:()=>{},reset:()=>{}}),i.forwardRef(function(e,t){var{progress:n=0,backward:r=!1,steps:o,transition:a="none"}=e,l=__rest(e,["progress","backward","steps","transition"]);let s=i.useMemo(()=>o?o.map(e=>{let{displayUrl:t,loadUrl:n}=function(e,t,n){let r="undefined"!=typeof window?window.origin:"",o=e&&!0===n?r+e:e;return{displayUrl:o,loadUrl:t||o}}(e.url,e.loadUrl,e.prependOrigin);return{zoom:e.zoom||1,displayUrl:t,loadUrl:n,children:e.children}}):[{zoom:1}],[o]),u=Math.round(n),{zoom:c,displayUrl:h,loadUrl:f,children:d}=s[u];return i.createElement(O,Object.assign({},l,{zoom:c,className:`ch-mini-browser ${l.className||""}`,style:Object.assign(Object.assign({},function({progress:e,transition:t}){if("slide"===t){let t=e-Math.floor(e),n=2*Math.abs(t-.5);return{transform:`translateX(${t<=.5?-50*t:50-50*t}px)`,opacity:n*n}}return{}}({progress:n,transition:a})),l.style),titleBar:i.createElement(TitleBar,{url:h,linkUrl:f})}),d||i.createElement("iframe",{ref:t,src:f}))});var P="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},M={};Object.defineProperty(M,"__esModule",{value:!0}),M.getMainFile=function(e){return"vue-cli"===e?"src/main.js":"angular-cli"===e?"src/main.ts":"create-react-app-typescript"===e?"src/index.tsx":"parcel"===e?"index.html":"gatsby"===e?"src/pages/index.js":"nuxt"===e||"next"===e||"apollo"===e||"reason"===e||"sapper"===e?"package.json":"nest"===e?"src/main.ts":"static"===e?"index.html":"src/index.js"};var H="sandbox.config.json";M.getTemplate=function(e,t){var n=t[H]||t["/"+H];if(n)try{var r=JSON.parse(n.content);if(r.template)return r.template}catch(e){}var o=e.dependencies,i=e.devDependencies,a=Object.keys(void 0===o?{}:o).concat(Object.keys(void 0===i?{}:i)),l=["nuxt","nuxt-edge"];if(a.some(function(e){return l.indexOf(e)>-1}))return"nuxt";if(a.indexOf("next")>-1)return"next";var s=["apollo-server","apollo-server-express","apollo-server-hapi","apollo-server-koa","apollo-server-lambda","apollo-server-micro"];if(a.some(function(e){return s.indexOf(e)>-1}))return"apollo";if(a.indexOf("ember-cli")>-1)return"ember";if(a.indexOf("sapper")>-1)return"sapper";var u=Object.keys(t);if(u.some(function(e){return e.endsWith(".vue")}))return"vue-cli";if(u.some(function(e){return e.endsWith(".re")}))return"reason";if(a.indexOf("gatsby")>-1)return"gatsby";if(a.indexOf("parcel-bundler")>-1)return"parcel";if(a.indexOf("react-scripts")>-1)return"create-react-app";if(a.indexOf("react-scripts-ts")>-1)return"create-react-app-typescript";if(a.indexOf("@angular/core")>-1)return"angular-cli";if(a.indexOf("preact-cli")>-1)return"preact-cli";if(a.indexOf("svelte")>-1)return"svelte";if(a.indexOf("vue")>-1)return"vue-cli";var c=["@dojo/core","@dojo/framework"];return a.some(function(e){return c.indexOf(e)>-1})?"@dojo/cli-create-app":a.indexOf("cx")>-1?"cxjs":a.indexOf("@nestjs/core")>-1||a.indexOf("@nestjs/common")>-1?"nest":void 0};var L={exports:{}};!function(e,t){var n,r,o,i="__lodash_hash_undefined__",a="[object Arguments]",l="[object Array]",s="[object Boolean]",u="[object Date]",c="[object Error]",h="[object Function]",f="[object Map]",d="[object Number]",m="[object Object]",p="[object Promise]",g="[object RegExp]",v="[object Set]",b="[object String]",y="[object WeakMap]",x="[object ArrayBuffer]",E="[object DataView]",w=/^\[object .+?Constructor\]$/,C=/^(?:0|[1-9]\d*)$/,j={};j["[object Float32Array]"]=j["[object Float64Array]"]=j["[object Int8Array]"]=j["[object Int16Array]"]=j["[object Int32Array]"]=j["[object Uint8Array]"]=j["[object Uint8ClampedArray]"]=j["[object Uint16Array]"]=j["[object Uint32Array]"]=!0,j[a]=j[l]=j[x]=j[s]=j[E]=j[u]=j[c]=j[h]=j[f]=j[d]=j[m]=j[g]=j[v]=j[b]=j[y]=!1;var O="object"==typeof P&&P&&P.Object===Object&&P,N="object"==typeof self&&self&&self.Object===Object&&self,_=O||N||Function("return this")(),k=t&&!t.nodeType&&t,T=k&&e&&!e.nodeType&&e,S=T&&T.exports===k,F=S&&O.process,M=function(){try{return F&&F.binding&&F.binding("util")}catch(e){}}(),H=M&&M.isTypedArray;function mapToArray(e){var t=-1,n=Array(e.size);return e.forEach(function(e,r){n[++t]=[r,e]}),n}function setToArray(e){var t=-1,n=Array(e.size);return e.forEach(function(e){n[++t]=e}),n}var L=Array.prototype,A=Function.prototype,B=Object.prototype,I=_["__core-js_shared__"],z=A.toString,W=B.hasOwnProperty,$=(n=/[^.]+$/.exec(I&&I.keys&&I.keys.IE_PROTO||""))?"Symbol(src)_1."+n:"",q=B.toString,D=RegExp("^"+z.call(W).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),G=S?_.Buffer:void 0,R=_.Symbol,X=_.Uint8Array,K=B.propertyIsEnumerable,U=L.splice,V=R?R.toStringTag:void 0,Y=Object.getOwnPropertySymbols,Z=G?G.isBuffer:void 0,Q=(r=Object.keys,o=Object,function(e){return r(o(e))}),J=getNative(_,"DataView"),ee=getNative(_,"Map"),et=getNative(_,"Promise"),en=getNative(_,"Set"),er=getNative(_,"WeakMap"),eo=getNative(Object,"create"),ei=toSource(J),ea=toSource(ee),el=toSource(et),es=toSource(en),eu=toSource(er),ec=R?R.prototype:void 0,eh=ec?ec.valueOf:void 0;function Hash(e){var t=-1,n=null==e?0:e.length;for(this.clear();++tl))return!1;var u=i.get(e);if(u&&i.get(t))return u==t;var c=-1,h=!0,f=2&n?new SetCache:void 0;for(i.set(e,t),i.set(t,e);++c-1&&c%1==0&&c-1},ListCache.prototype.set=function(e,t){var n=this.__data__,r=assocIndexOf(n,e);return r<0?(++this.size,n.push([e,t])):n[r][1]=t,this},MapCache.prototype.clear=function(){this.size=0,this.__data__={hash:new Hash,map:new(ee||ListCache),string:new Hash}},MapCache.prototype.delete=function(e){var t=getMapData(this,e).delete(e);return this.size-=t?1:0,t},MapCache.prototype.get=function(e){return getMapData(this,e).get(e)},MapCache.prototype.has=function(e){return getMapData(this,e).has(e)},MapCache.prototype.set=function(e,t){var n=getMapData(this,e),r=n.size;return n.set(e,t),this.size+=n.size==r?0:1,this},SetCache.prototype.add=SetCache.prototype.push=function(e){return this.__data__.set(e,i),this},SetCache.prototype.has=function(e){return this.__data__.has(e)},Stack.prototype.clear=function(){this.__data__=new ListCache,this.size=0},Stack.prototype.delete=function(e){var t=this.__data__,n=t.delete(e);return this.size=t.size,n},Stack.prototype.get=function(e){return this.__data__.get(e)},Stack.prototype.has=function(e){return this.__data__.has(e)},Stack.prototype.set=function(e,t){var n=this.__data__;if(n instanceof ListCache){var r=n.__data__;if(!ee||r.length<199)return r.push([e,t]),this.size=++n.size,this;n=this.__data__=new MapCache(r)}return n.set(e,t),this.size=n.size,this};var ef=Y?function(e){return null==e?[]:function(e,t){for(var n=-1,r=null==e?0:e.length,o=0,i=[];++n-1&&e%1==0&&e<=9007199254740991}function isObject(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}function isObjectLike(e){return null!=e&&"object"==typeof e}var ev=H?function(e){return H(e)}:function(e){return isObjectLike(e)&&isLength(e.length)&&!!j[baseGetTag(e)]};e.exports=function(e,t){return function baseIsEqual(e,t,n,r,o){return e===t||(null!=e&&null!=t&&(isObjectLike(e)||isObjectLike(t))?function(e,t,n,r,o,i){var h=ep(e),p=ep(t),y=h?l:ed(e),w=p?l:ed(t);y=y==a?m:y,w=w==a?m:w;var C=y==m,j=w==m,O=y==w;if(O&&eg(e)){if(!eg(t))return!1;h=!0,C=!1}if(O&&!C)return i||(i=new Stack),h||ev(e)?equalArrays(e,t,n,r,o,i):function(e,t,n,r,o,i,a){switch(n){case E:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)break;e=e.buffer,t=t.buffer;case x:if(e.byteLength!=t.byteLength||!i(new X(e),new X(t)))break;return!0;case s:case u:case d:return eq(+e,+t);case c:return e.name==t.name&&e.message==t.message;case g:case b:return e==t+"";case f:var l=mapToArray;case v:var h=1&r;if(l||(l=setToArray),e.size!=t.size&&!h)break;var m=a.get(e);if(m)return m==t;r|=2,a.set(e,t);var p=equalArrays(l(e),l(t),r,o,i,a);return a.delete(e),p;case"[object Symbol]":if(eh)return eh.call(e)==eh.call(t)}return!1}(e,t,y,n,r,o,i);if(!(1&n)){var N=C&&W.call(e,"__wrapped__"),_=j&&W.call(t,"__wrapped__");if(N||_){var k=N?e.value():e,T=_?t.value():t;return i||(i=new Stack),o(k,T,n,r,i)}}return!!O&&(i||(i=new Stack),function(e,t,n,r,o,i){var a=1&n,l=getAllKeys(e),s=l.length;if(s!=getAllKeys(t).length&&!a)return!1;for(var u=s;u--;){var c=l[u];if(!(a?c in t:W.call(t,c)))return!1}var h=i.get(e);if(h&&i.get(t))return h==t;var f=!0;i.set(e,t),i.set(t,e);for(var d=a;++ue.annotatedGroups.flatMap(e=>{var t;return null===(t=e.prev)||void 0===t?void 0:t.groups.flatMap(e=>e.tokens.map(e=>e.content))}).join("")).join("\n");return i.createElement("div",{style:n,className:"ch-code-multiline-mark "+(null!=t?t:"")},i.createElement("span",{className:"ch-code-multiline-mark-border"}),e,i.createElement(CopyButton,{className:"ch-code-button",content:o}))}function InlineMark({children:e,data:t}){return i.createElement("span",{className:"ch-code-inline-mark "+(null!=t?t:""),style:{background:function(e){var t,n,r;try{let o=i.Children.toArray(e)[0],a=i.Children.toArray((null===(t=null==o?void 0:o.props)||void 0===t?void 0:t.children)||[])[0],l=i.Children.toArray((null===(n=null==a?void 0:a.props)||void 0===n?void 0:n.children)||[])[0],{color:s}=(null===(r=null==l?void 0:l.props)||void 0===r?void 0:r.style)||{};if(s)return function(e,t){if(!e)return e;let{r:n,g:r,b:o,a:i}=function(e){if(!e)return;if(!isValidHex(e))throw Error("Invalid color string, must be a valid hex color");let t=Math.floor((e.length-1)/3),n=getChunksFromString(e.slice(1),t),[r,o,i,a]=n.map(convertHexUnitTo256);return{r,g:o,b:i,a:void 0!==a?a/255:1}}(e);return function(e){if(!e)return;let{r:t,g:n,b:r,a:o}=e;return`#${t.toString(16).padStart(2,"0")}${n.toString(16).padStart(2,"0")}${r.toString(16).padStart(2,"0")}${Math.round(255*o).toString(16).padStart(2,"0")}`}({r:n,g:r,b:o,a:.2*i})}(s,0);return}catch(e){return}}(e)||void 0}},e)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/6673-d1b7b628fc31af7e.js b/review/1654-focus-state-dev-research/_next/static/chunks/6673-d1b7b628fc31af7e.js new file mode 100644 index 00000000000..c87aecd9c0f --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/6673-d1b7b628fc31af7e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6673],{86673:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return p}});var n=e(52322),c=e(45392),r=e(65854);let s={annotations:r.ds,Code:r.EK},p={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3",h4:"h4"},(0,c.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"React"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/react-components",children:"react-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(t.h4,{children:"With Slots"}),"\n",(0,n.jsx)(s.Code,{codeConfig:p,northPanel:{tabs:["App.tsx"],active:"App.tsx",heightRatio:1},files:[{name:"App.tsx",focus:"",code:{lines:[{tokens:[{content:"// App.tsx",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBAccordionItem ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/react-components",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#81A1C1"}}},{content:"App ",props:{style:{color:"#88C0D0"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=> <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem slotTitle",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Title",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Content",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"export default ",props:{style:{color:"#81A1C1"}}},{content:"App",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),"\n",(0,n.jsx)(t.h4,{children:"With attributes"}),"\n",(0,n.jsx)(s.Code,{codeConfig:p,northPanel:{tabs:["App.tsx"],active:"App.tsx",heightRatio:1},files:[{name:"App.tsx",focus:"",code:{lines:[{tokens:[{content:"// App.tsx",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBAccordionItem ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/react-components",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#81A1C1"}}},{content:"App ",props:{style:{color:"#88C0D0"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=> <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Title",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"export default ",props:{style:{color:"#81A1C1"}}},{content:"App",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/6675-b54baf9ee7aa462c.js b/review/1654-focus-state-dev-research/_next/static/chunks/6675-b54baf9ee7aa462c.js new file mode 100644 index 00000000000..2ed67cb0c07 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/6675-b54baf9ee7aa462c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6675],{96675:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),l=e(65854);let c={annotations:l.ds,Code:l.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Medium",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Medium",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Medium",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/676-f328c6f01e4d7ba0.js b/review/1654-focus-state-dev-research/_next/static/chunks/676-f328c6f01e4d7ba0.js new file mode 100644 index 00000000000..94fbfb36d72 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/676-f328c6f01e4d7ba0.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[676],{80676:function(o,t,n){n.r(t),n.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var e=n(52322),r=n(45392),c=n(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,e.jsx)(t.h2,{children:"Angular"}),"\n",(0,e.jsxs)(t.p,{children:["For general installation and configuration look at the ",(0,e.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/ngx-components",children:"ngx-components"})," package."]}),"\n",(0,e.jsx)(t.h3,{children:"Load component"}),"\n",(0,e.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"//app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBMainNavigationModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBMainNavigationModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,e.jsx)(t.h3,{children:"Use component"}),"\n",(0,e.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Sub-Navi-Item 1",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Sub-Sub-Navi-Item 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Sub-Sub-Navi-Item 2",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Sub-Navi-Item 2",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:" Navi-Item 1 ",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Navi-Item 2",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Navi-Item 3",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,e.jsx)(t,Object.assign({},o,{children:(0,e.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/6796-32bb8b136c52a92a.js b/review/1654-focus-state-dev-research/_next/static/chunks/6796-32bb8b136c52a92a.js new file mode 100644 index 00000000000..d1474d6e2e6 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/6796-32bb8b136c52a92a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6796],{56796:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),c=e(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"large",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"large",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"large",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"large",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Large",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSection size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/6841-18211fd95a7af01e.js b/review/1654-focus-state-dev-research/_next/static/chunks/6841-18211fd95a7af01e.js new file mode 100644 index 00000000000..f7581e0bfe9 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/6841-18211fd95a7af01e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6841],{86841:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return l}});var n=e(52322),s=e(45392),r=e(65854);let c={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Internal",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Internal",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Internal",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Internal",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Internal",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Internal",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Internal",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Internal",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" External",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"external",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" External",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"external",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" External",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" External",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" External",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"external",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" External",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"external",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" External",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" External",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/6866-2c8ab65524758b11.js b/review/1654-focus-state-dev-research/_next/static/chunks/6866-2c8ab65524758b11.js new file mode 100644 index 00000000000..9654188961b --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/6866-2c8ab65524758b11.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6866],{66866:function(o,e,t){t.r(e),t.d(e,{CH:function(){return s},chCodeConfig:function(){return l}});var n=t(52322),r=t(45392),c=t(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let e=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(e.h2,{children:"Angular"}),"\n",(0,n.jsxs)(e.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(e.a,{href:"https://www.npmjs.com/package/@db-ui/ngx-components",children:"ngx-components"})," package."]}),"\n",(0,n.jsx)(e.h3,{children:"Load component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"//app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBAlertModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBAlertModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(e.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Alert",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,e){throw Error("Expected "+(e?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}e.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,r.ah)(),o.components);return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/7047-6554644a9a59d0eb.js b/review/1654-focus-state-dev-research/_next/static/chunks/7047-6554644a9a59d0eb.js new file mode 100644 index 00000000000..56fb23437fe --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/7047-6554644a9a59d0eb.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7047],{37047:function(o,t,n){n.r(t),n.d(t,{CH:function(){return c},chCodeConfig:function(){return r}});var e=n(52322),s=n(45392),l=n(65854);let c={annotations:l.ds,Code:l.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Neutral (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Neutral (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Neutral (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Neutral (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Neutral (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Neutral (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Neutral (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Neutral (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Neutral Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Neutral Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Neutral Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Neutral Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Neutral Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Neutral Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Neutral Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Neutral Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,e.jsx)(t,Object.assign({},o,{children:(0,e.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/7092-fc3d75d4db59f91c.js b/review/1654-focus-state-dev-research/_next/static/chunks/7092-fc3d75d4db59f91c.js new file mode 100644 index 00000000000..82c46c3acdb --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/7092-fc3d75d4db59f91c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7092],{77092:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),s=e(65854);let c={annotations:s.ds,Code:s.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"No Overflow (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"No Overflow (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"No Overflow (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"No Overflow (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"No Overflow (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"No Overflow (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"No Overflow (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"No Overflow (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"With Overflow (max-width)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag overflow",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"With Overflow (max-width)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag ",props:{style:{color:"#8FBCBB"}}},{content:':overflow="true">With ',props:{style:{color:"#D8DEE9"}}},{content:"Overflow ",props:{style:{color:"#8FBCBB"}}},{content:"(max-width)",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" With Overflow (max-width)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"With Overflow (max-width)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag overflow",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"With Overflow (max-width)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag ",props:{style:{color:"#8FBCBB"}}},{content:':overflow="true">With ',props:{style:{color:"#D8DEE9"}}},{content:"Overflow ",props:{style:{color:"#8FBCBB"}}},{content:"(max-width)",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" With Overflow (max-width)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/7134-8510f0641993dd0c.js b/review/1654-focus-state-dev-research/_next/static/chunks/7134-8510f0641993dd0c.js new file mode 100644 index 00000000000..d6a10981f47 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/7134-8510f0641993dd0c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7134],{47134:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),l=e(65854);let c={annotations:l.ds,Code:l.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Default",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Default",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">Default",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Default",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Default",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">Default",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"With Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"With Icon",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" With Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"With Icon",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">With Icon",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"With Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" With Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"With Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"With Icon",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" With Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"With Icon",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">With Icon",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"With Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" With Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"With Icon + Variant",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"With Icon + Variant",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" With Icon + Variant",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"With Icon + Variant",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">With ",props:{style:{color:"#D8DEE9"}}},{content:"Icon ",props:{style:{color:"#8FBCBB"}}},{content:"+ Variant",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"With Icon + Variant",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" With Icon + Variant",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"With Icon + Variant",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"With Icon + Variant",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" With Icon + Variant",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"With Icon + Variant",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">With ",props:{style:{color:"#D8DEE9"}}},{content:"Icon ",props:{style:{color:"#8FBCBB"}}},{content:"+ Variant",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"With Icon + Variant",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" With Icon + Variant",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/7284-77d36e0a37494b96.js b/review/1654-focus-state-dev-research/_next/static/chunks/7284-77d36e0a37494b96.js new file mode 100644 index 00000000000..47336c84510 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/7284-77d36e0a37494b96.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7284],{97284:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),c=e(45392),s=e(65854);let l={annotations:s.ds,Code:s.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Tonality",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/7299-895f3c9848b94ab8.js b/review/1654-focus-state-dev-research/_next/static/chunks/7299-895f3c9848b94ab8.js new file mode 100644 index 00000000000..e458f8fc4a2 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/7299-895f3c9848b94ab8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7299],{97299:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),l=e(65854);let c={annotations:l.ds,Code:l.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon + Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon + Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon + Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon + Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon + Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon + Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon + Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon + Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon + Text + Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"iconAfter",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon + Text + Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"iconAfter",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon + Text + Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon + Text + Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon + Text + Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"iconAfter",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon + Text + Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"iconAfter",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon + Text + Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Leading Icon + Text + Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text + Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"iconAfter",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text + Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"iconAfter",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text + Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text + Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text + Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"iconAfter",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text + Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"iconAfter",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text + Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text + Trailing Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text + Trailing Icon + Variant:Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"iconAfter",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text + Trailing Icon + Variant:Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"iconAfter",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text + Trailing Icon + Variant:Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text + Trailing Icon + Variant:Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text + Trailing Icon + Variant:Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"iconAfter",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text + Trailing Icon + Variant:Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"iconAfter",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"edit",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text + Trailing Icon + Variant:Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Text + Trailing Icon + Variant:Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/7312-0e7357d235722e07.js b/review/1654-focus-state-dev-research/_next/static/chunks/7312-0e7357d235722e07.js new file mode 100644 index 00000000000..9748b9864ca --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/7312-0e7357d235722e07.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7312],{77312:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),c=e(45392),r=e(65854);let s={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,c.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Angular"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/ngx-components",children:"ngx-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Load component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"//app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBIconModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBIconModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/7376-e311d044f6092e90.js b/review/1654-focus-state-dev-research/_next/static/chunks/7376-e311d044f6092e90.js new file mode 100644 index 00000000000..3851d61d980 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/7376-e311d044f6092e90.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7376],{67376:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return l}});var n=e(52322),s=e(45392),r=e(65854);let c={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Right (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Right (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true">Right (Default)',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Right (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Right (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Right (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true">Right (Default)',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Right (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton direction",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"left",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Left",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"direction",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"left",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Left",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton direction",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"left",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Left",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"direction",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"left",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Left",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Left",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Up",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton direction",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"up",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Up",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"direction",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"up",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Up",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Up",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Up",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton direction",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"up",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Up",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"direction",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"up",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Up",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Up",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Down",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton direction",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"down",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Down",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"direction",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"down",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Down",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Down",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Down",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton direction",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"down",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Down",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"direction",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"down",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Down",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Down",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/7406-8fb6fb97c0f06b34.js b/review/1654-focus-state-dev-research/_next/static/chunks/7406-8fb6fb97c0f06b34.js new file mode 100644 index 00000000000..62e85ddca4a --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/7406-8fb6fb97c0f06b34.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7406],{18055:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),c=e(45392),r=e(65854);let s={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,c.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Angular"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/ngx-components",children:"ngx-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Load component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"//app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBSelectModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBSelectModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/7506-ab180532863620a2.js b/review/1654-focus-state-dev-research/_next/static/chunks/7506-ab180532863620a2.js new file mode 100644 index 00000000000..abab8044927 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/7506-ab180532863620a2.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7506],{57506:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return l}});var n=e(52322),s=e(45392),c=e(65854);let r={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return r||_missingMdxReference("CH",!1),r.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(r.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/7588-b123dda5cad0f051.js b/review/1654-focus-state-dev-research/_next/static/chunks/7588-b123dda5cad0f051.js new file mode 100644 index 00000000000..f8dee8dc67c --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/7588-b123dda5cad0f051.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7588],{7588:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),c=e(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/7628-66eafa40b3e1df10.js b/review/1654-focus-state-dev-research/_next/static/chunks/7628-66eafa40b3e1df10.js new file mode 100644 index 00000000000..d033ce38716 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/7628-66eafa40b3e1df10.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7628],{67628:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return p}});var n=e(52322),s=e(45392),l=e(65854);let c={annotations:l.ds,Code:l.EK},p={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:p,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Default",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Default",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">Default",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Default",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Default",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">Default",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:p,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"With value",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"With value",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" With value",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"With value",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">With value",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" With value",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" With value",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"With value",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"With value",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" With value",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"With value",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">With value",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" With value",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" With value",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:p,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Required",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Required",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" required",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Required",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\" :required=\"true\">Required",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Required",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Required",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" required",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Required",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\" :required=\"true\">Required",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:p,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Disabled",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" disabled",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Disabled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":disabled=\"true\" :options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">Disabled",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Disabled",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" disabled",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Disabled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":disabled=\"true\" :options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">Disabled",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:p,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled + value",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Disabled + value",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" disabled",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled + value",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Disabled + value",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true" ',props:{style:{color:"#D8DEE9"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">Disabled + value",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled + value",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled + value",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled + value",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Disabled + value",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" disabled",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled + value",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Disabled + value",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true" ',props:{style:{color:"#D8DEE9"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">Disabled + value",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled + value",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled + value",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:p,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Optgroup",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Optgroup",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" {",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Optgroup 1",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" },",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" { ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" },',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Optgroup",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Optgroup",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Optgroup 1','options':[{'value':'Option 1'},{'value':'Option 2'}]},{'value':'Option 2'}]\">Optgroup",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Optgroup",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Optgroup",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Optgroup",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Optgroup",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" {",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Optgroup 1",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" },",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" { ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" },',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Optgroup",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Optgroup",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Optgroup 1','options':[{'value':'Option 1'},{'value':'Option 2'}]},{'value':'Option 2'}]\">Optgroup",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:p,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Optgroup",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Optgroup",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/7682-d1e1f1dfd3b59ff9.js b/review/1654-focus-state-dev-research/_next/static/chunks/7682-d1e1f1dfd3b59ff9.js new file mode 100644 index 00000000000..93a743c157c --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/7682-d1e1f1dfd3b59ff9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7682],{17682:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),c=e(45392),r=e(65854);let s={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,c.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"React"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/react-components",children:"react-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["App.tsx"],active:"App.tsx",heightRatio:1},files:[{name:"App.tsx",focus:"",code:{lines:[{tokens:[{content:"// App.tsx",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBAccordion ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/react-components",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#81A1C1"}}},{content:"App ",props:{style:{color:"#88C0D0"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordion",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 1",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 2",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBAccordionItem title",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Item 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Content 3",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"export default ",props:{style:{color:"#81A1C1"}}},{content:"App",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/7789-c36eb3a6e7e16fb8.js b/review/1654-focus-state-dev-research/_next/static/chunks/7789-c36eb3a6e7e16fb8.js new file mode 100644 index 00000000000..f5193165d4b --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/7789-c36eb3a6e7e16fb8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7789],{7789:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return c}});var s=e(52322),n=e(45392),l=e(65854);let r={annotations:l.ds,Code:l.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return r||_missingMdxReference("CH",!1),r.Code||_missingMdxReference("CH.Code",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,s.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Empty",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Empty",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Empty",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Empty",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,s.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Empty",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,s.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Empty",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,s.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Empty",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,s.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Empty",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,s.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Filled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Filled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,s.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,s.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Filled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,s.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Filled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,s.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,s.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Disabled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Disabled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true" ',props:{style:{color:"#D8DEE9"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,s.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,s.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Disabled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,s.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Disabled",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true" ',props:{style:{color:"#D8DEE9"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,s.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,s.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Readonly",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Readonly",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"readOnly message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Readonly",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Readonly",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':readOnly="true" ',props:{style:{color:"#D8DEE9"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Readonly",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Readonly",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,s.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Readonly",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,s.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Readonly",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"readOnly message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Readonly",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,s.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTextarea label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Readonly",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':readOnly="true" ',props:{style:{color:"#D8DEE9"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Helper Message",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Readonly",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,s.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Readonly",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Helper Message",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,n.ah)(),o.components);return t?(0,s.jsx)(t,Object.assign({},o,{children:(0,s.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/7905-a9b184c4487fb3c1.js b/review/1654-focus-state-dev-research/_next/static/chunks/7905-a9b184c4487fb3c1.js new file mode 100644 index 00000000000..d6c4900dd1f --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/7905-a9b184c4487fb3c1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7905],{17905:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),l=e(65854);let c={annotations:l.ds,Code:l.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':areaPopup="true">Enabled (Default)',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':areaPopup="true">Enabled (Default)',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Enabled (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Active",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem active areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Active",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':active="true" :areaPopup="true">Active',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Active",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Active",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem active areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Active",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':active="true" :areaPopup="true">Active',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Active",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem disabled areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':disabled="true" :areaPopup="true">Disabled',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem disabled areaPopup",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem ",props:{style:{color:"#8FBCBB"}}},{content:':disabled="true" :areaPopup="true">Disabled',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
  • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/7916-3a152626be1afa25.js b/review/1654-focus-state-dev-research/_next/static/chunks/7916-3a152626be1afa25.js new file mode 100644 index 00000000000..1bff68402a6 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/7916-3a152626be1afa25.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7916],{17916:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(s.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Adaptive - Horizontal (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Adaptive - Horizontal (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Adaptive - Horizontal (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Adaptive - Horizontal (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Adaptive - Horizontal (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Adaptive - Horizontal (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(s.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Adaptive - Vertical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"vertical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Adaptive - Vertical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"vertical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Adaptive - Vertical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Adaptive - Vertical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"vertical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Adaptive - Vertical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"vertical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Adaptive - Vertical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/7992-0ac8b8b0b156618d.js b/review/1654-focus-state-dev-research/_next/static/chunks/7992-0ac8b8b0b156618d.js new file mode 100644 index 00000000000..0c8ed6e56d0 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/7992-0ac8b8b0b156618d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7992],{27992:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),c=e(45392),s=e(65854);let l={annotations:s.ds,Code:s.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Text (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Text (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"noText",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':noText="true">Icon',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"noText",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':noText="true">Icon',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Icon & Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Icon & Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Icon & Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Icon & Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Icon & Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Icon & Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBTag icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Icon & Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Icon & Text",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/8016-f4668058c2aef291.js b/review/1654-focus-state-dev-research/_next/static/chunks/8016-f4668058c2aef291.js new file mode 100644 index 00000000000..835db640397 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/8016-f4668058c2aef291.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8016],{18016:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),c=e(45392),r=e(65854);let s={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",code:"code"},(0,c.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Vue"}),"\n",(0,n.jsxs)(t.p,{children:["Load SCSS globally in a ",(0,n.jsx)(t.code,{children:"index.scss"})," file and import it in your ",(0,n.jsx)(t.code,{children:"main.ts"}),"/",(0,n.jsx)(t.code,{children:"main.js"})," file in your app:"]}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"@use ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/components/build/styles/db-ui-42-rollup",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"as *;",props:{style:{color:"#81A1C1"}}}]}],lang:"scss"},annotations:[]}]}),"\n",(0,n.jsx)(t.p,{children:"Use component:"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"vue"},annotations:[]}]}),"\n",(0,n.jsxs)(t.p,{children:["To get DBInput work with ",(0,n.jsx)(t.code,{children:"v-model"})," you have to use v-model argument syntax:"]}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput",props:{style:{color:"#D8DEE9"}}}]},{tokens:[{content:" label",props:{style:{color:"#D8DEE9"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Textlabel",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" placeholder",props:{style:{color:"#D8DEE9"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Start typing",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" v",props:{style:{color:"#D8DEE9"}}},{content:"-",props:{style:{color:"#81A1C1"}}},{content:"model",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}},{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"typescript"},annotations:[]}]}),"\n",(0,n.jsx)(t.p,{children:"or using on-change listener:"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#D8DEE9"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Textlabel",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"placeholder",props:{style:{color:"#D8DEE9"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Start",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:" :",props:{style:{color:"#D8DEE9FF"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"modelAndChange",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"@change",props:{style:{color:"#D08770"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"($event) => { modelAndChange = $event.target.value",props:{style:{color:"#A3BE8C"}}},{content:";",props:{style:{color:"#D8DEE9"}}}]},{tokens:[{content:"}",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"/> {{ modelAndChange }",props:{style:{color:"#A3BE8C"}}},{content:"}",props:{style:{color:"#D8DEE9"}}}]}],lang:"typescript"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/8080-2fa73a955e575ba1.js b/review/1654-focus-state-dev-research/_next/static/chunks/8080-2fa73a955e575ba1.js new file mode 100644 index 00000000000..a31566fcd73 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/8080-2fa73a955e575ba1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8080],{68080:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return p}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},p={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3",code:"code"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"React"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/react-components",children:"react-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsxs)(t.p,{children:["We try to set ",(0,n.jsx)(t.code,{children:"areaPopup"})," (has/hasn't sub-navigation) inside the component, but this doesn't work in all frameworks. If you encounter some problems you have the set ",(0,n.jsx)(t.code,{children:"areaPopup"})," with ",(0,n.jsx)(t.code,{children:"true/false"})," for sub-navigation or link"]}),"\n",(0,n.jsx)(s.Code,{codeConfig:p,northPanel:{tabs:["App.tsx"],active:"App.tsx",heightRatio:1},files:[{name:"App.tsx",focus:"",code:{lines:[{tokens:[{content:"// App.tsx",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"Link ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react-router-dom",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBNavigationItem ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/react-components",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#81A1C1"}}},{content:"App ",props:{style:{color:"#88C0D0"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" <>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" {",props:{style:{color:"#81A1C1"}}},{content:"/* Only link */",props:{style:{color:"#616E88"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"Link to",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"mypath",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"NavigationItem",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" {",props:{style:{color:"#81A1C1"}}},{content:"/* With Sub-Navigation */",props:{style:{color:"#616E88"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" slotSubNavigation",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"Link to",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"mypath",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Sub-Navi-Item 1",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBNavigationItem",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"Link to",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"mypath",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Sub-Navi-Item 2",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" }",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" >",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Navi-Item 1",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"export default ",props:{style:{color:"#81A1C1"}}},{content:"App",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/8097-9f3f53ec30c02e3f.js b/review/1654-focus-state-dev-research/_next/static/chunks/8097-9f3f53ec30c02e3f.js new file mode 100644 index 00000000000..a04c33193b6 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/8097-9f3f53ec30c02e3f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8097],{88097:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return c}});var n=e(52322),s=e(45392),l=e(65854);let r={annotations:l.ds,Code:l.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return r||_missingMdxReference("CH",!1),r.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">functional",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">functional",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">regular (Default)",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">regular (Default)",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">expressive",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">expressive",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/8120-c04403ca4fc8e723.js b/review/1654-focus-state-dev-research/_next/static/chunks/8120-c04403ca4fc8e723.js new file mode 100644 index 00000000000..96ed9007520 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/8120-c04403ca4fc8e723.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8120],{68120:function(o,e,t){t.r(e),t.d(e,{CH:function(){return s},chCodeConfig:function(){return l}});var n=t(52322),r=t(45392),c=t(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let e=Object.assign({h2:"h2",p:"p"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(e.h2,{children:"HTML"}),"\n",(0,n.jsx)(e.p,{children:"Load SCSS globally somewhere in your app:"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"@use ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/components/build/styles/db-ui-42",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"as *;",props:{style:{color:"#81A1C1"}}}]}],lang:"scss"},annotations:[]}]}),"\n",(0,n.jsx)(e.p,{children:"Use it:"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,e){throw Error("Expected "+(e?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}e.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,r.ah)(),o.components);return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/8158-1fc038bb9ee2a586.js b/review/1654-focus-state-dev-research/_next/static/chunks/8158-1fc038bb9ee2a586.js new file mode 100644 index 00000000000..28cd7fe2cbc --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/8158-1fc038bb9ee2a586.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8158],{28158:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return p}});var n=e(52322),c=e(45392),r=e(65854);let s={annotations:r.ds,Code:r.EK},p={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,c.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Vue"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/v-components",children:"v-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:p,northPanel:{tabs:["App.vue"],active:"App.vue",heightRatio:1},files:[{name:"App.vue",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"vue"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/8260-00ec3abc7ecd5f5c.js b/review/1654-focus-state-dev-research/_next/static/chunks/8260-00ec3abc7ecd5f5c.js new file mode 100644 index 00000000000..11a6845e368 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/8260-00ec3abc7ecd5f5c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8260],{78260:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),c=e(45392),r=e(65854);let s={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,c.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Angular"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/ngx-components",children:"ngx-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Load component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"//app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBAccordionModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBAccordionModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/8265-587bdcd1995a79b0.js b/review/1654-focus-state-dev-research/_next/static/chunks/8265-587bdcd1995a79b0.js new file mode 100644 index 00000000000..df6d69ae984 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/8265-587bdcd1995a79b0.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8265],{58265:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return l}});var n=e(52322),s=e(45392),r=e(65854);let c={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Primary",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"primary",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Primary",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"primary",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Primary",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Primary",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Primary",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"primary",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Primary",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBLink href",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"primary",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Primary",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Primary",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/827-58e59c8954843e31.js b/review/1654-focus-state-dev-research/_next/static/chunks/827-58e59c8954843e31.js new file mode 100644 index 00000000000..b101701c5bb --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/827-58e59c8954843e31.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[827],{31940:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return l}});var n=e(52322),s=e(45392),r=e(65854);let c={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"With Backdrop (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"With Backdrop (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true">With ',props:{style:{color:"#D8DEE9"}}},{content:"Backdrop ",props:{style:{color:"#8FBCBB"}}},{content:"(Default)",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"With Backdrop (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"With Backdrop (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"With Backdrop (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true">With ',props:{style:{color:"#D8DEE9"}}},{content:"Backdrop ",props:{style:{color:"#8FBCBB"}}},{content:"(Default)",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"With Backdrop (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Backdrop-weak",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton backdrop",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"weak",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Backdrop-weak",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"backdrop",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"weak",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Backdrop-weak",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Backdrop-weak",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Backdrop-weak",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton backdrop",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"weak",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Backdrop-weak",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"backdrop",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"weak",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Backdrop-weak",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Backdrop-weak",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"No Backdrop",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton backdrop",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"none",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" No Backdrop",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"backdrop",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"none",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"No Backdrop",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"No Backdrop",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"No Backdrop",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer withCloseButton backdrop",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"none",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" No Backdrop",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer ",props:{style:{color:"#8FBCBB"}}},{content:':withCloseButton="true" ',props:{style:{color:"#D8DEE9"}}},{content:"backdrop",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"none",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"No Backdrop",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"No Backdrop",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/8302-377ece682c92b1a8.js b/review/1654-focus-state-dev-research/_next/static/chunks/8302-377ece682c92b1a8.js new file mode 100644 index 00000000000..6a2a33ec08d --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/8302-377ece682c92b1a8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8302],{88302:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return p}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},p={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"React"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/react-components",children:"react-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:p,northPanel:{tabs:["App.tsx"],active:"App.tsx",heightRatio:1},files:[{name:"App.tsx",focus:"",code:{lines:[{tokens:[{content:"// App.tsx",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"useState ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBRadio ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/react-components",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#81A1C1"}}},{content:"App ",props:{style:{color:"#88C0D0"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
      ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" {",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"X",props:{style:{color:"#A3BE8C"}}},{content:'", "',props:{style:{color:"#ECEFF4"}}},{content:"Y",props:{style:{color:"#A3BE8C"}}},{content:'", "',props:{style:{color:"#ECEFF4"}}},{content:"Z",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"map",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"radioName",props:{style:{color:"#D8DEE9"}}},{content:") ",props:{style:{color:"#ECEFF4"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBRadio",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"radio-group",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" value",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"radioName",props:{style:{color:"#D8DEE9"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" onChange",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=> ",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" setRadio",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"radioName",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" >",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Radio ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#81A1C1"}}},{content:"radioName",props:{style:{color:"#D8DEE9"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
      • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ))",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"export default ",props:{style:{color:"#81A1C1"}}},{content:"App",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/8448-515ceaff0ab1e4ab.js b/review/1654-focus-state-dev-research/_next/static/chunks/8448-515ceaff0ab1e4ab.js new file mode 100644 index 00000000000..d3e5e165303 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/8448-515ceaff0ab1e4ab.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8448],{88448:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return l}});var n=e(52322),s=e(45392),c=e(65854);let r={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return r||_missingMdxReference("CH",!1),r.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(r.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Non interactive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Non interactive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Non interactive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Non interactive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Non interactive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Non interactive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"(Default) Non interactive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Non interactive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Interactive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Interactive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Interactive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Interactive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Interactive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Interactive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Interactive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Interactive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/8454-4faeffc34d883697.js b/review/1654-focus-state-dev-research/_next/static/chunks/8454-4faeffc34d883697.js new file mode 100644 index 00000000000..f23f2cc8e34 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/8454-4faeffc34d883697.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8454],{88454:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),s=e(65854);let c={annotations:s.ds,Code:s.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDrawer",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/8465-9cfb4feb2c81c09c.js b/review/1654-focus-state-dev-research/_next/static/chunks/8465-9cfb4feb2c81c09c.js new file mode 100644 index 00000000000..67599741f1f --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/8465-9cfb4feb2c81c09c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8465],{28465:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),c=e(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Auto Width (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Auto Width (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Auto Width (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Auto Width (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Auto Width (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Auto Width (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Width full",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton width",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"full",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Width full",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton width",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"full",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Width full",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Width full",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton width",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"full",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Width full",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton width",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"full",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Width full",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/852-f66c6eac087cfcf4.js b/review/1654-focus-state-dev-research/_next/static/chunks/852-f66c6eac087cfcf4.js new file mode 100644 index 00000000000..a4570d20335 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/852-f66c6eac087cfcf4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[852],{60852:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return l}});var n=e(52322),s=e(45392),r=e(65854);let c={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",code:"code",blockquote:"blockquote"},(0,s.ah)(),o.components);return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Angular"}),"\n",(0,n.jsxs)(t.p,{children:["Load SCSS globally within ",(0,n.jsx)(t.code,{children:"styles.scss"})," in your app:"]}),"\n",(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"@use ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/components/build/styles/db-ui-42-webpack",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"as *;",props:{style:{color:"#81A1C1"}}}]}],lang:"scss"},annotations:[]}]}),"\n",(0,n.jsxs)(t.p,{children:["Load component within ",(0,n.jsx)(t.code,{children:"app.module.ts"}),":"]}),"\n",(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBInputModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBInputModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"typescript"},annotations:[]}]}),"\n",(0,n.jsx)(t.p,{children:"Use component in template:"}),"\n",(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput",props:{style:{color:"#D8DEE9"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" placeholder",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"placeholder",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"Description",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" (change)",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"onInputChange()",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),"\n",(0,n.jsx)(t.h2,{children:"How to use with Reactive Forms"}),"\n",(0,n.jsx)(t.p,{children:"Third party controls require a ControlValueAccessor to function with angular forms.\nOur input component implements this interface so you can use it like any other native element with reactive Forms:"}),"\n",(0,n.jsxs)(t.blockquote,{children:["\n",(0,n.jsx)(t.p,{children:"Currently we do not support onTouch/touched and native validation via FormControl. If your interested in contributing, you're very welcome ;)"}),"\n"]}),"\n",(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"// app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" …",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [ ",props:{style:{color:"#D8DEE9FF"}}},{content:"ReactiveFormsModule",props:{style:{color:"#D08770"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" …]",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"typescript"},annotations:[]}]}),"\n",(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Output",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"input's value",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:' {{ form.get("input")?.value ? form.get("input")?.value : "No Input set"',props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" }}",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),"\n",(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"// form.component.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"export class ",props:{style:{color:"#81A1C1"}}},{content:"FormComponent ",props:{style:{color:"#8FBCBB"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" form ",props:{style:{color:"#D8DEE9FF"}}},{content:"= new ",props:{style:{color:"#81A1C1"}}},{content:"FormGroup",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" input",props:{style:{color:"#D8DEE9"}}},{content:": ",props:{style:{color:"#ECEFF4"}}},{content:"new ",props:{style:{color:"#81A1C1"}}},{content:"FormControl",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Filled with formControl",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" onFormSubmit",props:{style:{color:"#88C0D0"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:": ",props:{style:{color:"#81A1C1"}}},{content:"void ",props:{style:{color:"#8FBCBB"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" alert",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"JSON",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"stringify",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"this",props:{style:{color:"#81A1C1"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"form",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:"))",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"typescript"},annotations:[]}]}),"\n",(0,n.jsx)(t.h2,{children:"How to use with Template driven Forms"}),"\n",(0,n.jsx)(t.p,{children:"Third party controls require a ControlValueAccessor to function with angular forms.\nOur input component implements this interface so you can use it like any other native element with ngModel:"}),"\n",(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"// app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" …",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [ ",props:{style:{color:"#D8DEE9FF"}}},{content:"FormsModule",props:{style:{color:"#D08770"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" …]",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"typescript"},annotations:[]}]}),"\n",(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBInput",props:{style:{color:"#D8DEE9"}}}]},{tokens:[{content:" ngDefaultControl",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" [(ngModel)]",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"input",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"Textinput",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" placeholder",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"Placeholder",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" description",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"Description",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" >",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton ",props:{style:{color:"#D8DEE9"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"button",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"primary",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"(click)",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"showValues()",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" >",props:{style:{color:"#81A1C1"}}},{content:"Get input value",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Output",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"input's value",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:'{{ input ? input : "No Input set" }}',props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),"\n",(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"// form.component.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"export class ",props:{style:{color:"#81A1C1"}}},{content:"FormComponent ",props:{style:{color:"#8FBCBB"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" input ",props:{style:{color:"#D8DEE9FF"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:'""',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" showValues",props:{style:{color:"#88C0D0"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:": ",props:{style:{color:"#81A1C1"}}},{content:"void ",props:{style:{color:"#8FBCBB"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" alert",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"JSON",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"stringify",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"input",props:{style:{color:"#D8DEE9"}}},{content:": ",props:{style:{color:"#ECEFF4"}}},{content:"this",props:{style:{color:"#81A1C1"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"input ",props:{style:{color:"#D8DEE9"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:"))",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"typescript"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/8556-1ec3aa5caec80f57.js b/review/1654-focus-state-dev-research/_next/static/chunks/8556-1ec3aa5caec80f57.js new file mode 100644 index 00000000000..a90d9ec1da8 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/8556-1ec3aa5caec80f57.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8556],{58556:function(o,e,t){t.r(e),t.d(e,{CH:function(){return s},chCodeConfig:function(){return l}});var n=t(52322),r=t(45392),c=t(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let e=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(e.h2,{children:"Angular"}),"\n",(0,n.jsxs)(e.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(e.a,{href:"https://www.npmjs.com/package/@db-ui/ngx-components",children:"ngx-components"})," package."]}),"\n",(0,n.jsx)(e.h3,{children:"Load component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"//app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBPageModule",props:{style:{color:"#D8DEE9"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBHeaderModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBPageModule",props:{style:{color:"#D08770"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBHeaderModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(e.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"...",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"Main Page",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,e){throw Error("Expected "+(e?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}e.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,r.ah)(),o.components);return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/8563-706ac4dab823c690.js b/review/1654-focus-state-dev-research/_next/static/chunks/8563-706ac4dab823c690.js new file mode 100644 index 00000000000..9edda332b9e --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/8563-706ac4dab823c690.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8563],{98563:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),c=e(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Medium (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/8621-abe321fafaed44d6.js b/review/1654-focus-state-dev-research/_next/static/chunks/8621-abe321fafaed44d6.js new file mode 100644 index 00000000000..642aeea9bef --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/8621-abe321fafaed44d6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8621],{8621:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),c=e(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/869-23bb0610190e046e.js b/review/1654-focus-state-dev-research/_next/static/chunks/869-23bb0610190e046e.js new file mode 100644 index 00000000000..ff0ef9b8d87 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/869-23bb0610190e046e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[869],{40869:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),l=e(65854);let c={annotations:l.ds,Code:l.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Headline & Text & Link & Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Headline & Text & Link & Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">Headline & ",props:{style:{color:"#D8DEE9"}}},{content:"Text ",props:{style:{color:"#8FBCBB"}}},{content:"& ",props:{style:{color:"#D8DEE9"}}},{content:"Link ",props:{style:{color:"#8FBCBB"}}},{content:"& Icon",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Headline & Text & Link & Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Headline & Text & Link & Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Headline & Text & Link & Icon",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">Headline & ",props:{style:{color:"#D8DEE9"}}},{content:"Text ",props:{style:{color:"#8FBCBB"}}},{content:"& ",props:{style:{color:"#D8DEE9"}}},{content:"Link ",props:{style:{color:"#8FBCBB"}}},{content:"& Icon",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Headline & Text & Link & Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Headline & Text & Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Headline & Text & Link",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">Headline & ",props:{style:{color:"#D8DEE9"}}},{content:"Text ",props:{style:{color:"#8FBCBB"}}},{content:"& Link",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Headline & Text & Link",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Headline & Text & Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Headline & Text & Link",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">Headline & ",props:{style:{color:"#D8DEE9"}}},{content:"Text ",props:{style:{color:"#8FBCBB"}}},{content:"& Link",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Headline & Text & Link",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text & Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}>",props:{style:{color:"#81A1C1"}}},{content:"Text & Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert ",props:{style:{color:"#8FBCBB"}}},{content:":link=\"{'href':'#','text':'Link'}\">Text & Link",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Text & Link",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text & Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}>",props:{style:{color:"#81A1C1"}}},{content:"Text & Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert ",props:{style:{color:"#8FBCBB"}}},{content:":link=\"{'href':'#','text':'Link'}\">Text & Link",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Text & Link",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/8834-1c3fb34b58f86bfe.js b/review/1654-focus-state-dev-research/_next/static/chunks/8834-1c3fb34b58f86bfe.js new file mode 100644 index 00000000000..c2a72fc8540 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/8834-1c3fb34b58f86bfe.js @@ -0,0 +1,6 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8834],{95766:function(t,r){"use strict";r.byteLength=function(t){var r=getLens(t),e=r[0],f=r[1];return(e+f)*3/4-f},r.toByteArray=function(t){var r,e,i=getLens(t),o=i[0],u=i[1],s=new n((o+u)*3/4-u),a=0,h=u>0?o-4:o;for(e=0;e>16&255,s[a++]=r>>8&255,s[a++]=255&r;return 2===u&&(r=f[t.charCodeAt(e)]<<2|f[t.charCodeAt(e+1)]>>4,s[a++]=255&r),1===u&&(r=f[t.charCodeAt(e)]<<10|f[t.charCodeAt(e+1)]<<4|f[t.charCodeAt(e+2)]>>2,s[a++]=r>>8&255,s[a++]=255&r),s},r.fromByteArray=function(t){for(var r,f=t.length,n=f%3,i=[],o=0,u=f-n;o>18&63]+e[n>>12&63]+e[n>>6&63]+e[63&n]);return i.join("")}(t,o,o+16383>u?u:o+16383));return 1===n?i.push(e[(r=t[f-1])>>2]+e[r<<4&63]+"=="):2===n&&i.push(e[(r=(t[f-2]<<8)+t[f-1])>>10]+e[r>>4&63]+e[r<<2&63]+"="),i.join("")};for(var e=[],f=[],n="undefined"!=typeof Uint8Array?Uint8Array:Array,i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",o=0,u=i.length;o0)throw Error("Invalid string. Length must be a multiple of 4");var e=t.indexOf("=");-1===e&&(e=r);var f=e===r?0:4-e%4;return[e,f]}f["-".charCodeAt(0)]=62,f["_".charCodeAt(0)]=63},48834:function(t,r,e){"use strict";/*! + * The buffer module from node.js, for the browser. + * + * @author Feross Aboukhadijeh + * @license MIT + */var f=e(95766),n=e(62333),i="function"==typeof Symbol&&"function"==typeof Symbol.for?Symbol.for("nodejs.util.inspect.custom"):null;function createBuffer(t){if(t>2147483647)throw RangeError('The value "'+t+'" is invalid for option "size"');var r=new Uint8Array(t);return Object.setPrototypeOf(r,Buffer.prototype),r}function Buffer(t,r,e){if("number"==typeof t){if("string"==typeof r)throw TypeError('The "string" argument must be of type string. Received type number');return allocUnsafe(t)}return from(t,r,e)}function from(t,r,e){if("string"==typeof t)return function(t,r){if(("string"!=typeof r||""===r)&&(r="utf8"),!Buffer.isEncoding(r))throw TypeError("Unknown encoding: "+r);var e=0|byteLength(t,r),f=createBuffer(e),n=f.write(t,r);return n!==e&&(f=f.slice(0,n)),f}(t,r);if(ArrayBuffer.isView(t))return function(t){if(isInstance(t,Uint8Array)){var r=new Uint8Array(t);return fromArrayBuffer(r.buffer,r.byteOffset,r.byteLength)}return fromArrayLike(t)}(t);if(null==t)throw TypeError("The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object. Received type "+typeof t);if(isInstance(t,ArrayBuffer)||t&&isInstance(t.buffer,ArrayBuffer)||"undefined"!=typeof SharedArrayBuffer&&(isInstance(t,SharedArrayBuffer)||t&&isInstance(t.buffer,SharedArrayBuffer)))return fromArrayBuffer(t,r,e);if("number"==typeof t)throw TypeError('The "value" argument must not be of type number. Received type number');var f=t.valueOf&&t.valueOf();if(null!=f&&f!==t)return Buffer.from(f,r,e);var n=function(t){if(Buffer.isBuffer(t)){var r,e=0|checked(t.length),f=createBuffer(e);return 0===f.length||t.copy(f,0,0,e),f}return void 0!==t.length?"number"!=typeof t.length||(r=t.length)!=r?createBuffer(0):fromArrayLike(t):"Buffer"===t.type&&Array.isArray(t.data)?fromArrayLike(t.data):void 0}(t);if(n)return n;if("undefined"!=typeof Symbol&&null!=Symbol.toPrimitive&&"function"==typeof t[Symbol.toPrimitive])return Buffer.from(t[Symbol.toPrimitive]("string"),r,e);throw TypeError("The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object. Received type "+typeof t)}function assertSize(t){if("number"!=typeof t)throw TypeError('"size" argument must be of type number');if(t<0)throw RangeError('The value "'+t+'" is invalid for option "size"')}function allocUnsafe(t){return assertSize(t),createBuffer(t<0?0:0|checked(t))}function fromArrayLike(t){for(var r=t.length<0?0:0|checked(t.length),e=createBuffer(r),f=0;f=2147483647)throw RangeError("Attempt to allocate Buffer larger than maximum size: 0x7fffffff bytes");return 0|t}function byteLength(t,r){if(Buffer.isBuffer(t))return t.length;if(ArrayBuffer.isView(t)||isInstance(t,ArrayBuffer))return t.byteLength;if("string"!=typeof t)throw TypeError('The "string" argument must be one of type string, Buffer, or ArrayBuffer. Received type '+typeof t);var e=t.length,f=arguments.length>2&&!0===arguments[2];if(!f&&0===e)return 0;for(var n=!1;;)switch(r){case"ascii":case"latin1":case"binary":return e;case"utf8":case"utf-8":return utf8ToBytes(t).length;case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return 2*e;case"hex":return e>>>1;case"base64":return base64ToBytes(t).length;default:if(n)return f?-1:utf8ToBytes(t).length;r=(""+r).toLowerCase(),n=!0}}function slowToString(t,r,e){var n,i,o=!1;if((void 0===r||r<0)&&(r=0),r>this.length||((void 0===e||e>this.length)&&(e=this.length),e<=0||(e>>>=0)<=(r>>>=0)))return"";for(t||(t="utf8");;)switch(t){case"hex":return function(t,r,e){var f=t.length;(!r||r<0)&&(r=0),(!e||e<0||e>f)&&(e=f);for(var n="",i=r;i2147483647?e=2147483647:e<-2147483648&&(e=-2147483648),(i=e=+e)!=i&&(e=n?0:t.length-1),e<0&&(e=t.length+e),e>=t.length){if(n)return -1;e=t.length-1}else if(e<0){if(!n)return -1;e=0}if("string"==typeof r&&(r=Buffer.from(r,f)),Buffer.isBuffer(r))return 0===r.length?-1:arrayIndexOf(t,r,e,f,n);if("number"==typeof r)return(r&=255,"function"==typeof Uint8Array.prototype.indexOf)?n?Uint8Array.prototype.indexOf.call(t,r,e):Uint8Array.prototype.lastIndexOf.call(t,r,e):arrayIndexOf(t,[r],e,f,n);throw TypeError("val must be string, number or Buffer")}function arrayIndexOf(t,r,e,f,n){var i,o=1,u=t.length,s=r.length;if(void 0!==f&&("ucs2"===(f=String(f).toLowerCase())||"ucs-2"===f||"utf16le"===f||"utf-16le"===f)){if(t.length<2||r.length<2)return -1;o=2,u/=2,s/=2,e/=2}function read(t,r){return 1===o?t[r]:t.readUInt16BE(r*o)}if(n){var a=-1;for(i=e;iu&&(e=u-s),i=e;i>=0;i--){for(var h=!0,c=0;c239?4:a>223?3:a>191?2:1;if(n+c<=e)switch(c){case 1:a<128&&(h=a);break;case 2:(192&(i=t[n+1]))==128&&(s=(31&a)<<6|63&i)>127&&(h=s);break;case 3:i=t[n+1],o=t[n+2],(192&i)==128&&(192&o)==128&&(s=(15&a)<<12|(63&i)<<6|63&o)>2047&&(s<55296||s>57343)&&(h=s);break;case 4:i=t[n+1],o=t[n+2],u=t[n+3],(192&i)==128&&(192&o)==128&&(192&u)==128&&(s=(15&a)<<18|(63&i)<<12|(63&o)<<6|63&u)>65535&&s<1114112&&(h=s)}null===h?(h=65533,c=1):h>65535&&(h-=65536,f.push(h>>>10&1023|55296),h=56320|1023&h),f.push(h),n+=c}return function(t){var r=t.length;if(r<=4096)return String.fromCharCode.apply(String,t);for(var e="",f=0;fe)throw RangeError("Trying to access beyond buffer length")}function checkInt(t,r,e,f,n,i){if(!Buffer.isBuffer(t))throw TypeError('"buffer" argument must be a Buffer instance');if(r>n||rt.length)throw RangeError("Index out of range")}function checkIEEE754(t,r,e,f,n,i){if(e+f>t.length||e<0)throw RangeError("Index out of range")}function writeFloat(t,r,e,f,i){return r=+r,e>>>=0,i||checkIEEE754(t,r,e,4,34028234663852886e22,-34028234663852886e22),n.write(t,r,e,f,23,4),e+4}function writeDouble(t,r,e,f,i){return r=+r,e>>>=0,i||checkIEEE754(t,r,e,8,17976931348623157e292,-17976931348623157e292),n.write(t,r,e,f,52,8),e+8}r.lW=Buffer,r.h2=50,Buffer.TYPED_ARRAY_SUPPORT=function(){try{var t=new Uint8Array(1),r={foo:function(){return 42}};return Object.setPrototypeOf(r,Uint8Array.prototype),Object.setPrototypeOf(t,r),42===t.foo()}catch(t){return!1}}(),Buffer.TYPED_ARRAY_SUPPORT||"undefined"==typeof console||"function"!=typeof console.error||console.error("This browser lacks typed array (Uint8Array) support which is required by `buffer` v5.x. Use `buffer` v4.x if you require old browser support."),Object.defineProperty(Buffer.prototype,"parent",{enumerable:!0,get:function(){if(Buffer.isBuffer(this))return this.buffer}}),Object.defineProperty(Buffer.prototype,"offset",{enumerable:!0,get:function(){if(Buffer.isBuffer(this))return this.byteOffset}}),Buffer.poolSize=8192,Buffer.from=function(t,r,e){return from(t,r,e)},Object.setPrototypeOf(Buffer.prototype,Uint8Array.prototype),Object.setPrototypeOf(Buffer,Uint8Array),Buffer.alloc=function(t,r,e){return(assertSize(t),t<=0)?createBuffer(t):void 0!==r?"string"==typeof e?createBuffer(t).fill(r,e):createBuffer(t).fill(r):createBuffer(t)},Buffer.allocUnsafe=function(t){return allocUnsafe(t)},Buffer.allocUnsafeSlow=function(t){return allocUnsafe(t)},Buffer.isBuffer=function(t){return null!=t&&!0===t._isBuffer&&t!==Buffer.prototype},Buffer.compare=function(t,r){if(isInstance(t,Uint8Array)&&(t=Buffer.from(t,t.offset,t.byteLength)),isInstance(r,Uint8Array)&&(r=Buffer.from(r,r.offset,r.byteLength)),!Buffer.isBuffer(t)||!Buffer.isBuffer(r))throw TypeError('The "buf1", "buf2" arguments must be one of type Buffer or Uint8Array');if(t===r)return 0;for(var e=t.length,f=r.length,n=0,i=Math.min(e,f);nf.length?Buffer.from(i).copy(f,n):Uint8Array.prototype.set.call(f,i,n);else if(Buffer.isBuffer(i))i.copy(f,n);else throw TypeError('"list" argument must be an Array of Buffers');n+=i.length}return f},Buffer.byteLength=byteLength,Buffer.prototype._isBuffer=!0,Buffer.prototype.swap16=function(){var t=this.length;if(t%2!=0)throw RangeError("Buffer size must be a multiple of 16-bits");for(var r=0;re&&(t+=" ... "),""},i&&(Buffer.prototype[i]=Buffer.prototype.inspect),Buffer.prototype.compare=function(t,r,e,f,n){if(isInstance(t,Uint8Array)&&(t=Buffer.from(t,t.offset,t.byteLength)),!Buffer.isBuffer(t))throw TypeError('The "target" argument must be one of type Buffer or Uint8Array. Received type '+typeof t);if(void 0===r&&(r=0),void 0===e&&(e=t?t.length:0),void 0===f&&(f=0),void 0===n&&(n=this.length),r<0||e>t.length||f<0||n>this.length)throw RangeError("out of range index");if(f>=n&&r>=e)return 0;if(f>=n)return -1;if(r>=e)return 1;if(r>>>=0,e>>>=0,f>>>=0,n>>>=0,this===t)return 0;for(var i=n-f,o=e-r,u=Math.min(i,o),s=this.slice(f,n),a=t.slice(r,e),h=0;h>>=0,isFinite(e)?(e>>>=0,void 0===f&&(f="utf8")):(f=e,e=void 0);else throw Error("Buffer.write(string, encoding, offset[, length]) is no longer supported");var n,i,o,u,s,a,h,c,p=this.length-r;if((void 0===e||e>p)&&(e=p),t.length>0&&(e<0||r<0)||r>this.length)throw RangeError("Attempt to write outside buffer bounds");f||(f="utf8");for(var l=!1;;)switch(f){case"hex":return function(t,r,e,f){e=Number(e)||0;var n=t.length-e;f?(f=Number(f))>n&&(f=n):f=n;var i=r.length;f>i/2&&(f=i/2);for(var o=0;o>8,n.push(e%256),n.push(f);return n}(t,this.length-h),this,h,c);default:if(l)throw TypeError("Unknown encoding: "+f);f=(""+f).toLowerCase(),l=!0}},Buffer.prototype.toJSON=function(){return{type:"Buffer",data:Array.prototype.slice.call(this._arr||this,0)}},Buffer.prototype.slice=function(t,r){var e=this.length;t=~~t,r=void 0===r?e:~~r,t<0?(t+=e)<0&&(t=0):t>e&&(t=e),r<0?(r+=e)<0&&(r=0):r>e&&(r=e),r>>=0,r>>>=0,e||checkOffset(t,r,this.length);for(var f=this[t],n=1,i=0;++i>>=0,r>>>=0,e||checkOffset(t,r,this.length);for(var f=this[t+--r],n=1;r>0&&(n*=256);)f+=this[t+--r]*n;return f},Buffer.prototype.readUint8=Buffer.prototype.readUInt8=function(t,r){return t>>>=0,r||checkOffset(t,1,this.length),this[t]},Buffer.prototype.readUint16LE=Buffer.prototype.readUInt16LE=function(t,r){return t>>>=0,r||checkOffset(t,2,this.length),this[t]|this[t+1]<<8},Buffer.prototype.readUint16BE=Buffer.prototype.readUInt16BE=function(t,r){return t>>>=0,r||checkOffset(t,2,this.length),this[t]<<8|this[t+1]},Buffer.prototype.readUint32LE=Buffer.prototype.readUInt32LE=function(t,r){return t>>>=0,r||checkOffset(t,4,this.length),(this[t]|this[t+1]<<8|this[t+2]<<16)+16777216*this[t+3]},Buffer.prototype.readUint32BE=Buffer.prototype.readUInt32BE=function(t,r){return t>>>=0,r||checkOffset(t,4,this.length),16777216*this[t]+(this[t+1]<<16|this[t+2]<<8|this[t+3])},Buffer.prototype.readIntLE=function(t,r,e){t>>>=0,r>>>=0,e||checkOffset(t,r,this.length);for(var f=this[t],n=1,i=0;++i=(n*=128)&&(f-=Math.pow(2,8*r)),f},Buffer.prototype.readIntBE=function(t,r,e){t>>>=0,r>>>=0,e||checkOffset(t,r,this.length);for(var f=r,n=1,i=this[t+--f];f>0&&(n*=256);)i+=this[t+--f]*n;return i>=(n*=128)&&(i-=Math.pow(2,8*r)),i},Buffer.prototype.readInt8=function(t,r){return(t>>>=0,r||checkOffset(t,1,this.length),128&this[t])?-((255-this[t]+1)*1):this[t]},Buffer.prototype.readInt16LE=function(t,r){t>>>=0,r||checkOffset(t,2,this.length);var e=this[t]|this[t+1]<<8;return 32768&e?4294901760|e:e},Buffer.prototype.readInt16BE=function(t,r){t>>>=0,r||checkOffset(t,2,this.length);var e=this[t+1]|this[t]<<8;return 32768&e?4294901760|e:e},Buffer.prototype.readInt32LE=function(t,r){return t>>>=0,r||checkOffset(t,4,this.length),this[t]|this[t+1]<<8|this[t+2]<<16|this[t+3]<<24},Buffer.prototype.readInt32BE=function(t,r){return t>>>=0,r||checkOffset(t,4,this.length),this[t]<<24|this[t+1]<<16|this[t+2]<<8|this[t+3]},Buffer.prototype.readFloatLE=function(t,r){return t>>>=0,r||checkOffset(t,4,this.length),n.read(this,t,!0,23,4)},Buffer.prototype.readFloatBE=function(t,r){return t>>>=0,r||checkOffset(t,4,this.length),n.read(this,t,!1,23,4)},Buffer.prototype.readDoubleLE=function(t,r){return t>>>=0,r||checkOffset(t,8,this.length),n.read(this,t,!0,52,8)},Buffer.prototype.readDoubleBE=function(t,r){return t>>>=0,r||checkOffset(t,8,this.length),n.read(this,t,!1,52,8)},Buffer.prototype.writeUintLE=Buffer.prototype.writeUIntLE=function(t,r,e,f){if(t=+t,r>>>=0,e>>>=0,!f){var n=Math.pow(2,8*e)-1;checkInt(this,t,r,e,n,0)}var i=1,o=0;for(this[r]=255&t;++o>>=0,e>>>=0,!f){var n=Math.pow(2,8*e)-1;checkInt(this,t,r,e,n,0)}var i=e-1,o=1;for(this[r+i]=255&t;--i>=0&&(o*=256);)this[r+i]=t/o&255;return r+e},Buffer.prototype.writeUint8=Buffer.prototype.writeUInt8=function(t,r,e){return t=+t,r>>>=0,e||checkInt(this,t,r,1,255,0),this[r]=255&t,r+1},Buffer.prototype.writeUint16LE=Buffer.prototype.writeUInt16LE=function(t,r,e){return t=+t,r>>>=0,e||checkInt(this,t,r,2,65535,0),this[r]=255&t,this[r+1]=t>>>8,r+2},Buffer.prototype.writeUint16BE=Buffer.prototype.writeUInt16BE=function(t,r,e){return t=+t,r>>>=0,e||checkInt(this,t,r,2,65535,0),this[r]=t>>>8,this[r+1]=255&t,r+2},Buffer.prototype.writeUint32LE=Buffer.prototype.writeUInt32LE=function(t,r,e){return t=+t,r>>>=0,e||checkInt(this,t,r,4,4294967295,0),this[r+3]=t>>>24,this[r+2]=t>>>16,this[r+1]=t>>>8,this[r]=255&t,r+4},Buffer.prototype.writeUint32BE=Buffer.prototype.writeUInt32BE=function(t,r,e){return t=+t,r>>>=0,e||checkInt(this,t,r,4,4294967295,0),this[r]=t>>>24,this[r+1]=t>>>16,this[r+2]=t>>>8,this[r+3]=255&t,r+4},Buffer.prototype.writeIntLE=function(t,r,e,f){if(t=+t,r>>>=0,!f){var n=Math.pow(2,8*e-1);checkInt(this,t,r,e,n-1,-n)}var i=0,o=1,u=0;for(this[r]=255&t;++i>0)-u&255;return r+e},Buffer.prototype.writeIntBE=function(t,r,e,f){if(t=+t,r>>>=0,!f){var n=Math.pow(2,8*e-1);checkInt(this,t,r,e,n-1,-n)}var i=e-1,o=1,u=0;for(this[r+i]=255&t;--i>=0&&(o*=256);)t<0&&0===u&&0!==this[r+i+1]&&(u=1),this[r+i]=(t/o>>0)-u&255;return r+e},Buffer.prototype.writeInt8=function(t,r,e){return t=+t,r>>>=0,e||checkInt(this,t,r,1,127,-128),t<0&&(t=255+t+1),this[r]=255&t,r+1},Buffer.prototype.writeInt16LE=function(t,r,e){return t=+t,r>>>=0,e||checkInt(this,t,r,2,32767,-32768),this[r]=255&t,this[r+1]=t>>>8,r+2},Buffer.prototype.writeInt16BE=function(t,r,e){return t=+t,r>>>=0,e||checkInt(this,t,r,2,32767,-32768),this[r]=t>>>8,this[r+1]=255&t,r+2},Buffer.prototype.writeInt32LE=function(t,r,e){return t=+t,r>>>=0,e||checkInt(this,t,r,4,2147483647,-2147483648),this[r]=255&t,this[r+1]=t>>>8,this[r+2]=t>>>16,this[r+3]=t>>>24,r+4},Buffer.prototype.writeInt32BE=function(t,r,e){return t=+t,r>>>=0,e||checkInt(this,t,r,4,2147483647,-2147483648),t<0&&(t=4294967295+t+1),this[r]=t>>>24,this[r+1]=t>>>16,this[r+2]=t>>>8,this[r+3]=255&t,r+4},Buffer.prototype.writeFloatLE=function(t,r,e){return writeFloat(this,t,r,!0,e)},Buffer.prototype.writeFloatBE=function(t,r,e){return writeFloat(this,t,r,!1,e)},Buffer.prototype.writeDoubleLE=function(t,r,e){return writeDouble(this,t,r,!0,e)},Buffer.prototype.writeDoubleBE=function(t,r,e){return writeDouble(this,t,r,!1,e)},Buffer.prototype.copy=function(t,r,e,f){if(!Buffer.isBuffer(t))throw TypeError("argument should be a Buffer");if(e||(e=0),f||0===f||(f=this.length),r>=t.length&&(r=t.length),r||(r=0),f>0&&f=this.length)throw RangeError("Index out of range");if(f<0)throw RangeError("sourceEnd out of bounds");f>this.length&&(f=this.length),t.length-r>>=0,e=void 0===e?this.length:e>>>0,t||(t=0),"number"==typeof t)for(n=r;n55295&&e<57344){if(!n){if(e>56319||o+1===f){(r-=3)>-1&&i.push(239,191,189);continue}n=e;continue}if(e<56320){(r-=3)>-1&&i.push(239,191,189),n=e;continue}e=(n-55296<<10|e-56320)+65536}else n&&(r-=3)>-1&&i.push(239,191,189);if(n=null,e<128){if((r-=1)<0)break;i.push(e)}else if(e<2048){if((r-=2)<0)break;i.push(e>>6|192,63&e|128)}else if(e<65536){if((r-=3)<0)break;i.push(e>>12|224,e>>6&63|128,63&e|128)}else if(e<1114112){if((r-=4)<0)break;i.push(e>>18|240,e>>12&63|128,e>>6&63|128,63&e|128)}else throw Error("Invalid code point")}return i}function base64ToBytes(t){return f.toByteArray(function(t){if((t=(t=t.split("=")[0]).trim().replace(o,"")).length<2)return"";for(;t.length%4!=0;)t+="=";return t}(t))}function blitBuffer(t,r,e,f){for(var n=0;n=r.length)&&!(n>=t.length);++n)r[n+e]=t[n];return n}function isInstance(t,r){return t instanceof r||null!=t&&null!=t.constructor&&null!=t.constructor.name&&t.constructor.name===r.name}var u=function(){for(var t="0123456789abcdef",r=Array(256),e=0;e<16;++e)for(var f=16*e,n=0;n<16;++n)r[f+n]=t[e]+t[n];return r}()},62333:function(t,r){/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh */r.read=function(t,r,e,f,n){var i,o,u=8*n-f-1,s=(1<>1,h=-7,c=e?n-1:0,p=e?-1:1,l=t[r+c];for(c+=p,i=l&(1<<-h)-1,l>>=-h,h+=u;h>0;i=256*i+t[r+c],c+=p,h-=8);for(o=i&(1<<-h)-1,i>>=-h,h+=f;h>0;o=256*o+t[r+c],c+=p,h-=8);if(0===i)i=1-a;else{if(i===s)return o?NaN:(l?-1:1)*(1/0);o+=Math.pow(2,f),i-=a}return(l?-1:1)*o*Math.pow(2,i-f)},r.write=function(t,r,e,f,n,i){var o,u,s,a=8*i-n-1,h=(1<>1,p=23===n?5960464477539062e-23:0,l=f?0:i-1,y=f?1:-1,g=r<0||0===r&&1/r<0?1:0;for(isNaN(r=Math.abs(r))||r===1/0?(u=isNaN(r)?1:0,o=h):(o=Math.floor(Math.log(r)/Math.LN2),r*(s=Math.pow(2,-o))<1&&(o--,s*=2),o+c>=1?r+=p/s:r+=p*Math.pow(2,1-c),r*s>=2&&(o++,s/=2),o+c>=h?(u=0,o=h):o+c>=1?(u=(r*s-1)*Math.pow(2,n),o+=c):(u=r*Math.pow(2,c-1)*Math.pow(2,n),o=0));n>=8;t[e+l]=255&u,l+=y,u/=256,n-=8);for(o=o<0;t[e+l]=255&o,l+=y,o/=256,a-=8);t[e+l-y]|=128*g}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/8951-5f201649c30dd9af.js b/review/1654-focus-state-dev-research/_next/static/chunks/8951-5f201649c30dd9af.js new file mode 100644 index 00000000000..c06cae8ea5e --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/8951-5f201649c30dd9af.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8951],{68951:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return c}});var n=e(52322),s=e(45392),l=e(65854);let r={annotations:l.ds,Code:l.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return r||_missingMdxReference("CH",!1),r.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Alert",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Alert",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">(Default) Alert",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"(Default) Alert",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Alert",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Alert",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">(Default) Alert",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"(Default) Alert",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Inline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"inline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Inline",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"inline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">Inline",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Inline",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Inline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"inline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Inline",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"inline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">Inline",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Inline",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/903-75bd248af98f3090.js b/review/1654-focus-state-dev-research/_next/static/chunks/903-75bd248af98f3090.js new file mode 100644 index 00000000000..bb8dd2259e7 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/903-75bd248af98f3090.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[903],{903:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return l}});var n=e(52322),s=e(45392),r=e(65854);let c={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Weak (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider emphasis",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"strong",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Strong",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/9053-9d4204607a076f85.js b/review/1654-focus-state-dev-research/_next/static/chunks/9053-9d4204607a076f85.js new file mode 100644 index 00000000000..75d90f0c30a --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/9053-9d4204607a076f85.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9053],{49053:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return p}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},p={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"React"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/react-components",children:"react-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:p,northPanel:{tabs:["App.tsx"],active:"App.tsx",heightRatio:1},files:[{name:"App.tsx",focus:"",code:{lines:[{tokens:[{content:"// App.tsx",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBTag ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/react-components",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#81A1C1"}}},{content:"App ",props:{style:{color:"#88C0D0"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" <>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Tag as Button",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBLink",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Tag as Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Tag as Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBRadio",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Tag as Radio",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBTag",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Static Tag",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBTag overflow",props:{style:{color:"#8FBCBB"}}},{content:"={true}>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Static Tag with overflow",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"export default ",props:{style:{color:"#81A1C1"}}},{content:"App",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/9122-e6b4b77385729f74.js b/review/1654-focus-state-dev-research/_next/static/chunks/9122-e6b4b77385729f74.js new file mode 100644 index 00000000000..fa77162720c --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/9122-e6b4b77385729f74.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9122],{49122:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return l}});var n=e(52322),s=e(45392),r=e(65854);let c={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3",code:"code"},(0,s.ah)(),o.components);return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Angular"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/ngx-components",children:"ngx-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Load component"}),"\n",(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"//app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBRadioModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBRadioModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"
      ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
      • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),"\n",(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["app.component.ts"],active:"app.component.ts",heightRatio:1},files:[{name:"app.component.ts",focus:"",code:{lines:[{tokens:[{content:"// app.component.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"Component ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@angular/core",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@Component",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" selector",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"app-app",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" templateUrl",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"./app.component.html",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"export class ",props:{style:{color:"#81A1C1"}}},{content:"AppComponent ",props:{style:{color:"#8FBCBB"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" radioNames ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" [",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"X",props:{style:{color:"#A3BE8C"}}},{content:'", "',props:{style:{color:"#ECEFF4"}}},{content:"Y",props:{style:{color:"#A3BE8C"}}},{content:'", "',props:{style:{color:"#ECEFF4"}}},{content:"Z",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" radio ",props:{style:{color:"#D8DEE9FF"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:'""',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h2,{children:"How to use with Template Driven Forms"}),"\n",(0,n.jsxs)(t.p,{children:["Third party controls require a ",(0,n.jsx)(t.code,{children:"ControlValueAccessor"})," to function with angular forms. Adding an ",(0,n.jsx)(t.code,{children:"ngDefaultControl"})," attribute will allow them to use that directive.\n",(0,n.jsx)(t.a,{href:"https://stackoverflow.com/a/46465959",children:"Further information"})]}),"\n",(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"// app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" …",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [ ",props:{style:{color:"#D8DEE9FF"}}},{content:"FormsModule",props:{style:{color:"#D08770"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" …]",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["form.component.html"],active:"form.component.html",heightRatio:1},files:[{name:"form.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBRadio ",props:{style:{color:"#D8DEE9"}}},{content:"ngDefaultControl [(ngModel)]",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"radio",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBButton ",props:{style:{color:"#D8DEE9"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"button",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"primary",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"(click)",props:{style:{color:"#8FBCBB"}}},{content:'="',props:{style:{color:"#ECEFF4"}}},{content:"showValues()",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" >",props:{style:{color:"#81A1C1"}}},{content:"Get radio value",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Output",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"radio's value",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:'{{ radio ? radio : "No radio set" }}',props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),"\n",(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["form.component.ts"],active:"form.component.ts",heightRatio:1},files:[{name:"form.component.ts",focus:"",code:{lines:[{tokens:[{content:"// form.component.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"export class ",props:{style:{color:"#81A1C1"}}},{content:"FormComponent ",props:{style:{color:"#8FBCBB"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" radio ",props:{style:{color:"#D8DEE9FF"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:'""',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" showValues",props:{style:{color:"#88C0D0"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:": ",props:{style:{color:"#81A1C1"}}},{content:"void ",props:{style:{color:"#8FBCBB"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" alert",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"JSON",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"stringify",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"radio",props:{style:{color:"#D8DEE9"}}},{content:": ",props:{style:{color:"#ECEFF4"}}},{content:"this",props:{style:{color:"#81A1C1"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"radio ",props:{style:{color:"#D8DEE9"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:"))",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h2,{children:"How to use with Reactive Forms"}),"\n",(0,n.jsx)(t.p,{children:"coming soon … if your interested in contributing, you're very welcome ;)"})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/9167-3791293dd6af7aa8.js b/review/1654-focus-state-dev-research/_next/static/chunks/9167-3791293dd6af7aa8.js new file mode 100644 index 00000000000..47e6651b387 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/9167-3791293dd6af7aa8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9167],{59167:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),c=e(45392),r=e(65854);let s={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,c.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Vue"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/v-components",children:"v-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["App.vue"],active:"App.vue",heightRatio:1},files:[{name:"App.vue",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"vue"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/9180-3fc492d9dd745a47.js b/review/1654-focus-state-dev-research/_next/static/chunks/9180-3fc492d9dd745a47.js new file mode 100644 index 00000000000..c70ece6f1ef --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/9180-3fc492d9dd745a47.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9180],{61087:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),l=e(65854);let c={annotations:l.ds,Code:l.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"default",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"default",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"default",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"default",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"disabled",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true" ',props:{style:{color:"#D8DEE9"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"disabled",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"disabled",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true" ',props:{style:{color:"#D8DEE9"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"disabled",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled checked",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"SpecialState",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled checked value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"disabled-checked",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled checked",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"SpecialState",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true" :checked="true" ',props:{style:{color:"#D8DEE9"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"disabled-checked",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Disabled checked",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled checked",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"SpecialState",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled checked value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"disabled-checked",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled checked",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"SpecialState",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true" :checked="true" ',props:{style:{color:"#D8DEE9"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"disabled-checked",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Disabled checked",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Required",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"required value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"required",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':required="true" ',props:{style:{color:"#D8DEE9"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"required",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Required",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Required",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"required value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"required",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':required="true" ',props:{style:{color:"#D8DEE9"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"required",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Required",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Checked",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"checked value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"checked",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Checked",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':checked="true" ',props:{style:{color:"#D8DEE9"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"checked",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Checked",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Checked",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"checked value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"checked",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Checked",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':checked="true" ',props:{style:{color:"#D8DEE9"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"checked",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Checked",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Invalid",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"invalid value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"invalid",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Invalid",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':invalid="true" ',props:{style:{color:"#D8DEE9"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"invalid",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Invalid",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Invalid",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"invalid value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"invalid",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Invalid",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBRadio name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"States",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':invalid="true" ',props:{style:{color:"#D8DEE9"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"invalid",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Invalid",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/9189-427f185900a65678.js b/review/1654-focus-state-dev-research/_next/static/chunks/9189-427f185900a65678.js new file mode 100644 index 00000000000..ddff56bc8eb --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/9189-427f185900a65678.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9189],{89189:function(o,e,t){t.r(e),t.d(e,{CH:function(){return s},chCodeConfig:function(){return l}});var n=t(52322),r=t(45392),c=t(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let e=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3",code:"code"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(e.h2,{children:"Vue"}),"\n",(0,n.jsxs)(e.p,{children:["For general installation and configuration look at the ",(0,n.jsx)(e.a,{href:"https://www.npmjs.com/package/@db-ui/v-components",children:"v-components"})," package."]}),"\n",(0,n.jsx)(e.h3,{children:"General"}),"\n",(0,n.jsxs)(e.p,{children:["You cannot use a default value for ",(0,n.jsx)(e.a,{href:"https://vuejs.org/guide/essentials/forms.html#multiline-text",children:"textarea in vue"}),".\nUse ",(0,n.jsx)(e.code,{children:"v-model:value"})," or ",(0,n.jsx)(e.code,{children:":value"})," instead with a ",(0,n.jsx)(e.code,{children:'ref("My default value")'}),"."]}),"\n",(0,n.jsx)(e.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["App.vue"],active:"App.vue",heightRatio:1},files:[{name:"App.vue",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"vue"},annotations:[]}]})]})}function _missingMdxReference(o,e){throw Error("Expected "+(e?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}e.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,r.ah)(),o.components);return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/9235-b7c8ae4ab61b64ac.js b/review/1654-focus-state-dev-research/_next/static/chunks/9235-b7c8ae4ab61b64ac.js new file mode 100644 index 00000000000..6e5aa19b6bd --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/9235-b7c8ae4ab61b64ac.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9235],{89235:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return l}});var n=e(52322),s=e(45392),r=e(65854);let c={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBDivider",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/9310-3a42359dfca6b6b3.js b/review/1654-focus-state-dev-research/_next/static/chunks/9310-3a42359dfca6b6b3.js new file mode 100644 index 00000000000..3f2ea431b88 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/9310-3a42359dfca6b6b3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9310],{89310:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),c=e(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" functional",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" regular (Default)",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" expressive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/9313-07fa25e775e474d8.js b/review/1654-focus-state-dev-research/_next/static/chunks/9313-07fa25e775e474d8.js new file mode 100644 index 00000000000..345aad502a0 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/9313-07fa25e775e474d8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9313],{99313:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),l=e(65854);let c={annotations:l.ds,Code:l.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"(Default) Adaptive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"(Default) Adaptive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">(Default) Adaptive",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"(Default) Adaptive",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"(Default) Adaptive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">(Default) Adaptive",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">Informational",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">Informational",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">Warning",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">Warning",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">Critical",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">Critical",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">Successful",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" options",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 1",props:{style:{color:"#A3BE8C"}}},{content:'" }, { ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Option 2",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBSelect label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"message",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":options=\"[{'value':'Option 1'},{'value':'Option 2'}]\">Successful",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/9388-95c661363f4785a8.js b/review/1654-focus-state-dev-research/_next/static/chunks/9388-95c661363f4785a8.js new file mode 100644 index 00000000000..1c4bd1b7fcd --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/9388-95c661363f4785a8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9388],{19388:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return l}});var n=e(52322),c=e(45392),s=e(65854);let r={annotations:s.ds,Code:s.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3",code:"code"},(0,c.ah)(),o.components);return r||_missingMdxReference("CH",!1),r.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Angular"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/ngx-components",children:"ngx-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Load component"}),"\n",(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"//app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBCheckboxModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBCheckboxModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"
      ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
      • ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),"\n",(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["app.component.ts"],active:"app.component.ts",heightRatio:1},files:[{name:"app.component.ts",focus:"",code:{lines:[{tokens:[{content:"// app.component.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"Component ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@angular/core",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@Component",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" selector",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"app-app",props:{style:{color:"#A3BE8C"}}},{content:'",',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" templateUrl",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"./app.component.html",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"export class ",props:{style:{color:"#81A1C1"}}},{content:"AppComponent ",props:{style:{color:"#8FBCBB"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" checkboxNames ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" [",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"X",props:{style:{color:"#A3BE8C"}}},{content:'", "',props:{style:{color:"#ECEFF4"}}},{content:"Y",props:{style:{color:"#A3BE8C"}}},{content:'", "',props:{style:{color:"#ECEFF4"}}},{content:"Z",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" checkbox ",props:{style:{color:"#D8DEE9FF"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:'""',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h2,{children:"How to use with Template Driven Forms"}),"\n",(0,n.jsxs)(t.p,{children:["Third party controls require a ",(0,n.jsx)(t.code,{children:"ControlValueAccessor"})," to function with angular forms. Adding an ",(0,n.jsx)(t.code,{children:"ngDefaultControl"})," attribute will allow them to use that directive.\n",(0,n.jsx)(t.a,{href:"https://stackoverflow.com/a/46465959",children:"Further information"})]}),"\n",(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"// app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" …",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [ ",props:{style:{color:"#D8DEE9FF"}}},{content:"FormsModule",props:{style:{color:"#D08770"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" …]",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["form.component.html"],active:"form.component.html",heightRatio:1},files:[{name:"form.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Get checkbox value",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Output",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:"checkbox's value",props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}},{content:'checkbox {{ checkbox ? "" : "un" }}checked',props:{style:{color:"#D8DEE9FF"}}},{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),"\n",(0,n.jsx)(r.Code,{codeConfig:l,northPanel:{tabs:["form.component.ts"],active:"form.component.ts",heightRatio:1},files:[{name:"form.component.ts",focus:"",code:{lines:[{tokens:[{content:"// form.component.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"export class ",props:{style:{color:"#81A1C1"}}},{content:"FormComponent ",props:{style:{color:"#8FBCBB"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" checkbox ",props:{style:{color:"#D8DEE9FF"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:'""',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" showValues",props:{style:{color:"#88C0D0"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:": ",props:{style:{color:"#81A1C1"}}},{content:"void ",props:{style:{color:"#8FBCBB"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" alert",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"JSON",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"stringify",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"checkbox",props:{style:{color:"#D8DEE9"}}},{content:": ",props:{style:{color:"#ECEFF4"}}},{content:"this",props:{style:{color:"#81A1C1"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"checkbox ",props:{style:{color:"#D8DEE9"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:"))",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h2,{children:"How to use with Reactive Forms"}),"\n",(0,n.jsx)(t.p,{children:"coming soon … if your interested in contributing, you're very welcome ;)"})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/9466-4dd723837d501e55.js b/review/1654-focus-state-dev-research/_next/static/chunks/9466-4dd723837d501e55.js new file mode 100644 index 00000000000..1fdde0025c8 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/9466-4dd723837d501e55.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9466],{9466:function(o,t,e){e.r(t),e.d(t,{CH:function(){return c},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),l=e(65854);let c={annotations:l.ds,Code:l.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Dot (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge noContent",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Dot (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge ",props:{style:{color:"#8FBCBB"}}},{content:':noContent="true">Dot (Default)',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Dot (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Dot (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge noContent",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Dot (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge ",props:{style:{color:"#8FBCBB"}}},{content:':noContent="true">Dot (Default)',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Dot (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Dot - Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge noContent size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Dot - Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge ",props:{style:{color:"#8FBCBB"}}},{content:':noContent="true" ',props:{style:{color:"#D8DEE9"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Dot - Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Dot - Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Dot - Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge noContent size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Dot - Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge ",props:{style:{color:"#8FBCBB"}}},{content:':noContent="true" ',props:{style:{color:"#D8DEE9"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Dot - Small",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Dot - Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Text",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge example",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge example",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge example",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge example",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Icon",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(c.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Icon - Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge example",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Icon - Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge example",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Icon - Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Icon - Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Icon - Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge example",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Icon - Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBBadge example",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"size",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Icon - Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(c.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Icon - Small",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/9467-d91e6cdb2dc66553.js b/review/1654-focus-state-dev-research/_next/static/chunks/9467-d91e6cdb2dc66553.js new file mode 100644 index 00000000000..409cfd0fcfb --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/9467-d91e6cdb2dc66553.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9467],{49467:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),c=e(45392),r=e(65854);let s={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,c.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Angular"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/ngx-components",children:"ngx-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Load component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.module.ts"],active:"app.module.ts",heightRatio:1},files:[{name:"app.module.ts",focus:"",code:{lines:[{tokens:[{content:"//app.module.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBTagModule ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/ngx-components",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"@NgModule",props:{style:{color:"#D08770"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" imports",props:{style:{color:"#D08770"}}},{content:": [",props:{style:{color:"#D8DEE9FF"}}},{content:"...",props:{style:{color:"#81A1C1"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"DBTagModule",props:{style:{color:"#D08770"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ...",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["app.component.html"],active:"app.component.html",heightRatio:1},files:[{name:"app.component.html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Tag as Button",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:" Tag as Link ",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Tag as Checkbox",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Tag as Radio",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Static Tag",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Static Tag with overflow",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/951-d79239227e049007.js b/review/1654-focus-state-dev-research/_next/static/chunks/951-d79239227e049007.js new file mode 100644 index 00000000000..ef90b250755 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/951-d79239227e049007.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[951],{951:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return c}});var n=e(52322),s=e(45392),l=e(65854);let r={annotations:l.ds,Code:l.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return r||_missingMdxReference("CH",!1),r.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">(Default) Adaptive",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"icon",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"account",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">(Default) Adaptive",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"(Default) Adaptive",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">Critical",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">Critical",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Critical",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">Informational",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">Informational",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Informational",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">Successful",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">Successful",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Successful",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">Warning",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" link",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"href",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"#",props:{style:{color:"#A3BE8C"}}},{content:'", ',props:{style:{color:"#ECEFF4"}}},{content:"text",props:{style:{color:"#D8DEE9"}}},{content:': "',props:{style:{color:"#ECEFF4"}}},{content:"Link",props:{style:{color:"#A3BE8C"}}},{content:'" }',props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBAlert type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"alert",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"headline",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Headline",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:":link=\"{'href':'#','text':'Link'}\">Warning",props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Headline",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"

    ",props:{style:{color:"#81A1C1"}}},{content:"Warning",props:{style:{color:"#D8DEE9FF"}}},{content:"

    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Link",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Close Button",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/9596-43268ade4b975477.js b/review/1654-focus-state-dev-research/_next/static/chunks/9596-43268ade4b975477.js new file mode 100644 index 00000000000..dd6aac46e5a --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/9596-43268ade4b975477.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9596],{39596:function(o,t,e){e.r(t),e.d(t,{CH:function(){return l},chCodeConfig:function(){return r}});var n=e(52322),s=e(45392),c=e(65854);let l={annotations:c.ds,Code:c.EK},r={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return l||_missingMdxReference("CH",!1),l.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"functional",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"regular (Default)",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(l.Code,{codeConfig:r,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBButton",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"expressive",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(l.Code,{codeConfig:r,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/9620-7afe8cf6b23ae4fb.js b/review/1654-focus-state-dev-research/_next/static/chunks/9620-7afe8cf6b23ae4fb.js new file mode 100644 index 00000000000..e1d2eb230ae --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/9620-7afe8cf6b23ae4fb.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9620],{59620:function(o,t,n){n.r(t),n.d(t,{CH:function(){return c},chCodeConfig:function(){return l}});var e=n(52322),s=n(45392),r=n(65854);let c={annotations:r.ds,Code:r.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return c||_missingMdxReference("CH",!1),c.Code||_missingMdxReference("CH.Code",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,e.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) neutral",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"neutral",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) neutral",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"neutral",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) neutral",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) neutral",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) neutral",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"neutral",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) neutral",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"neutral",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) neutral",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" (Default) neutral",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" neutral-strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"neutral-strong",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" neutral-strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"neutral-strong",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" neutral-strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" neutral-strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" neutral-strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"neutral-strong",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" neutral-strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"neutral-strong",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" neutral-strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" neutral-strong",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" primary",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"primary",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" primary",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"primary",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" primary",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" primary",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" primary",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"primary",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" primary",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"primary",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" primary",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" primary",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"critical",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" critical",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"successful",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" successful",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"warning",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" warning",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,e.jsxs)(c.Code,{codeConfig:l,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBCard colorVariant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"informational",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"variant",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"interactive",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"spacing",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"small",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,e.jsx)(c.Code,{codeConfig:l,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" informational",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,e.jsx)(t,Object.assign({},o,{children:(0,e.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/9793-530c0cd7de306ce2.js b/review/1654-focus-state-dev-research/_next/static/chunks/9793-530c0cd7de306ce2.js new file mode 100644 index 00000000000..35dda08b825 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/9793-530c0cd7de306ce2.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9793],{49793:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Vue"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/v-components",children:"v-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["App.vue"],active:"App.vue",heightRatio:1},files:[{name:"App.vue",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"vue"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/9864-f0000dff20dd9427.js b/review/1654-focus-state-dev-research/_next/static/chunks/9864-f0000dff20dd9427.js new file mode 100644 index 00000000000..fe5147d6f55 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/9864-f0000dff20dd9427.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9864],{39864:function(o,t,e){e.r(t),e.d(t,{CH:function(){return r},chCodeConfig:function(){return c}});var n=e(52322),s=e(45392),l=e(65854);let r={annotations:l.ds,Code:l.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){return r||_missingMdxReference("CH",!1),r.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}},{content:"Default",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Default",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Input Text",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Input Text",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Input Text",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Input Text",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled Number",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"123456",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"number",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled Number",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"123456",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"number",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled Number",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled Number",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled Number",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"123456",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"number",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled Number",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"123456",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"type",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"number",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled Number",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Filled Number",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Invalid",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"required minLength",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"5",props:{style:{color:"#B48EAD"}}},{content:"}>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Invalid",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':required="true" :minLength="5">Invalid',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Invalid",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Invalid",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"required minLength",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"5",props:{style:{color:"#B48EAD"}}},{content:"}>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Invalid",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':required="true" :minLength="5">Invalid',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Invalid",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true">Disabled',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true">Disabled',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled filled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Input Text",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Input Text",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true">Disabled filled',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Disabled filled",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Input Text",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"disabled",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Input Text",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':disabled="true">Disabled filled',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Disabled filled",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]}),"\n",(0,n.jsxs)(r.Code,{codeConfig:c,northPanel:{tabs:["angular","react","vue","html"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Required",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]},{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Input Text",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"required",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Input Text",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':required="true">Required',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]},{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}],children:[(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["angular"],active:"angular",heightRatio:1},files:[{name:"angular",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#81A1C1"}}},{content:"Required",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"html"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["react"],active:"react",heightRatio:1},files:[{name:"react",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Input Text",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"required",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["vue"],active:"vue",heightRatio:1},files:[{name:"vue",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#81A1C1"}}},{content:"DBInput label",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Label",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:"value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Input Text",props:{style:{color:"#A3BE8C"}}},{content:'" ',props:{style:{color:"#ECEFF4"}}},{content:':required="true">Required',props:{style:{color:"#D8DEE9"}}}]}],lang:"tsx"},annotations:[]}]}),(0,n.jsx)(r.Code,{codeConfig:c,northPanel:{tabs:["html"],active:"html",heightRatio:1},files:[{name:"html",focus:"",code:{lines:[{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}},{content:"Label",props:{style:{color:"#D8DEE9FF"}}},{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Required",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"
    ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"html"},annotations:[]}]})]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,s.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/9931-3dff82448a5dbe7e.js b/review/1654-focus-state-dev-research/_next/static/chunks/9931-3dff82448a5dbe7e.js new file mode 100644 index 00000000000..ec2752c3b00 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/9931-3dff82448a5dbe7e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9931],{79931:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return l}});var n=e(52322),r=e(45392),c=e(65854);let s={annotations:c.ds,Code:c.EK},l={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3",code:"code"},(0,r.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"Vue"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/v-components",children:"v-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsxs)(t.p,{children:["We try to set ",(0,n.jsx)(t.code,{children:"areaPopup"})," (has/hasn't sub-navigation) inside the component, but this doesn't work in all frameworks. If you encounter some problems you have the set ",(0,n.jsx)(t.code,{children:"areaPopup"})," with ",(0,n.jsx)(t.code,{children:"true/false"})," for sub-navigation or link"]}),"\n",(0,n.jsx)(s.Code,{codeConfig:l,northPanel:{tabs:["App.vue"],active:"App.vue",heightRatio:1},files:[{name:"App.vue",focus:"",code:{lines:[{tokens:[{content:"",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"",props:{style:{color:"#81A1C1"}}}]}],lang:"vue"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,r.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/9977-d9ff0bbcc1f9e07f.js b/review/1654-focus-state-dev-research/_next/static/chunks/9977-d9ff0bbcc1f9e07f.js new file mode 100644 index 00000000000..9ca75f52b1f --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/9977-d9ff0bbcc1f9e07f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9977],{9977:function(o,t,e){e.r(t),e.d(t,{CH:function(){return s},chCodeConfig:function(){return p}});var n=e(52322),c=e(45392),r=e(65854);let s={annotations:r.ds,Code:r.EK},p={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"nord"};function _createMdxContent(o){let t=Object.assign({h2:"h2",p:"p",a:"a",h3:"h3"},(0,c.ah)(),o.components);return s||_missingMdxReference("CH",!1),s.Code||_missingMdxReference("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }'}}),"\n",(0,n.jsx)(t.h2,{children:"React"}),"\n",(0,n.jsxs)(t.p,{children:["For general installation and configuration take a look at the ",(0,n.jsx)(t.a,{href:"https://www.npmjs.com/package/@db-ui/react-components",children:"react-components"})," package."]}),"\n",(0,n.jsx)(t.h3,{children:"Use component"}),"\n",(0,n.jsx)(s.Code,{codeConfig:p,northPanel:{tabs:["App.tsx"],active:"App.tsx",heightRatio:1},files:[{name:"App.tsx",focus:"",code:{lines:[{tokens:[{content:"// App.tsx",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"useState ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"import ",props:{style:{color:"#81A1C1"}}},{content:"{ ",props:{style:{color:"#ECEFF4"}}},{content:"DBCheckbox ",props:{style:{color:"#D8DEE9"}}},{content:"} ",props:{style:{color:"#ECEFF4"}}},{content:"from ",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"@db-ui/react-components",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#81A1C1"}}},{content:"App ",props:{style:{color:"#88C0D0"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"() ",props:{style:{color:"#ECEFF4"}}},{content:"=> ",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" const ",props:{style:{color:"#81A1C1"}}},{content:"[",props:{style:{color:"#ECEFF4"}}},{content:"checkbox",props:{style:{color:"#D8DEE9"}}},{content:", ",props:{style:{color:"#ECEFF4"}}},{content:"setCheckbox",props:{style:{color:"#D8DEE9"}}},{content:"] ",props:{style:{color:"#ECEFF4"}}},{content:"= ",props:{style:{color:"#81A1C1"}}},{content:"useState",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:'""',props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" return",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" <",props:{style:{color:"#81A1C1"}}},{content:"DBCheckbox",props:{style:{color:"#8FBCBB"}}}]},{tokens:[{content:" name",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"checkbox",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" value",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"Checkbox checked",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" onChange",props:{style:{color:"#8FBCBB"}}},{content:"={",props:{style:{color:"#81A1C1"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"event",props:{style:{color:"#D8DEE9"}}},{content:") ",props:{style:{color:"#ECEFF4"}}},{content:"=> ",props:{style:{color:"#81A1C1"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" setCheckbox",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"event",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"target",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"checked",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" }",props:{style:{color:"#ECEFF4"}}},{content:"}",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" >",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" Checkbox",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" )",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"export default ",props:{style:{color:"#81A1C1"}}},{content:"App",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}]})]})}function _missingMdxReference(o,t){throw Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}t.default=function(){let o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,c.ah)(),o.components);return t?(0,n.jsx)(t,Object.assign({},o,{children:(0,n.jsx)(_createMdxContent,o)})):_createMdxContent(o)}}}]); \ No newline at end of file diff --git a/review/1654-focus-state-dev-research/_next/static/chunks/framework-f211a704e11e65a7.js b/review/1654-focus-state-dev-research/_next/static/chunks/framework-f211a704e11e65a7.js new file mode 100644 index 00000000000..518c14c3927 --- /dev/null +++ b/review/1654-focus-state-dev-research/_next/static/chunks/framework-f211a704e11e65a7.js @@ -0,0 +1,33 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9774],{52967:function(n,t,a){/** + * @license React + * react-dom.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */var u,i,o,s,w,x,C=a(2784),_=a(14616);function p(n){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+n,a=1;a