{variants.map((variant) => ( ))}

{inputVariants.map((variant) => ( ))}

); }; const countries = [ { key: "cn", flag: "\u{1F1E8}\u{1F1F3}", label: "China" }, { key: "jp", flag: "\u{1F1EF}\u{1F1F5}", label: "Japan" }, { key: "kr", flag: "\u{1F1F0}\u{1F1F7}", label: "Korea" }, { key: "ru", flag: "\u{1F1F7}\u{1F1FA}", label: "Russia" }, { key: "in", flag: "\u{1F1EE}\u{1F1F3}", label: "India" }, { key: "br", flag: "\u{1F1E7}\u{1F1F7}", label: "Brazil" }, { key: "de", flag: "\u{1F1E9}\u{1F1EA}", label: "Germany" }, { key: "fr", flag: "\u{1F1EB}\u{1F1F7}", label: "France" }, { key: "it", flag: "\u{1F1EE}\u{1F1F9}", label: "Italy" }, { key: "es", flag: "\u{1F1EA}\u{1F1F8}", label: "Spain" }, { key: "us", flag: "\u{1F1FA}\u{1F1F8}", label: "United States" }, { key: "ca", flag: "\u{1F1E8}\u{1F1E6}", label: "Canada" }, { key: "mx", flag: "\u{1F1F2}\u{1F1FD}", label: "Mexico" }, { key: "gb", flag: "\u{1F1EC}\u{1F1E7}", label: "United Kingdom" }, { key: "au", flag: "\u{1F1E6}\u{1F1FA}", label: "Australia" }, { key: "nz", flag: "\u{1F1F3}\u{1F1FF}", label: "New Zealand" }, ]; `,__src__:"src/registry/example/select/start-content.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Select,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SelectContent,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SelectItem,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SelectTrigger,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SelectValue,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/ui/select"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { EarthIcon } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useState } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" SelectStartContentExample"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"country"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setCountry"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex flex-col gap-4 w-full max-w-72"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Select"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{country} "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"onValueChange"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{setCountry}>"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectTrigger"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" variant"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"bordered"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"lg"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex items-center gap-2 overflow-hidden"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"country "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"EarthIcon"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"shrink-0 size-5"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectValue"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Select a country"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectContent"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {countries."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"flag"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"label"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectItem"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" key"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{key} "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{key}>"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"flag"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"} ${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"label"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ))}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" countries"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"cn"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", flag: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"\u{1F1E8}\u{1F1F3}"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"China"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"jp"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", flag: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"\u{1F1EF}\u{1F1F5}"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Japan"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"kr"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", flag: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"\u{1F1F0}\u{1F1F7}"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Korea"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"ru"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", flag: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"\u{1F1F7}\u{1F1FA}"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Russia"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"in"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", flag: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"\u{1F1EE}\u{1F1F3}"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"India"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"br"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", flag: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"\u{1F1E7}\u{1F1F7}"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Brazil"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"de"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", flag: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"\u{1F1E9}\u{1F1EA}"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Germany"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"fr"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", flag: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"\u{1F1EB}\u{1F1F7}"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"France"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"it"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", flag: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"\u{1F1EE}\u{1F1F9}"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Italy"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"es"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", flag: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"\u{1F1EA}\u{1F1F8}"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Spain"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"us"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", flag: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"\u{1F1FA}\u{1F1F8}"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"United States"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"ca"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", flag: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"\u{1F1E8}\u{1F1E6}"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Canada"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mx"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", flag: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"\u{1F1F2}\u{1F1FD}"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Mexico"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"gb"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", flag: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"\u{1F1EC}\u{1F1E7}"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"United Kingdom"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"au"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", flag: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"\u{1F1E6}\u{1F1FA}"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Australia"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"nz"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", flag: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"\u{1F1F3}\u{1F1FF}"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"New Zealand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"];"})})]})})})}),` `,(0,e.jsxs)(l.h4,{id:"clearable",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#clearable",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Clearable"]}),` `,(0,e.jsx)(r,{name:"select-clearable-demo",children:(0,e.jsx)(l.figure,{__src__:"src/registry/example/select/clearable.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__raw_string__:`"use client"; import { Button } from "@/ui/button"; import { Select, SelectContent, SelectIcon, SelectItem, SelectTrigger, SelectValue, } from "@/ui/select"; import { XIcon } from "lucide-react"; import { useState } from "react"; export const SelectVariantExample = () => { const variants = ["default", "faded", "bordered", "underline"] as const; const [country, setCountry] = useState(); return (

{variants.map((variant) => ( ))}

); }; const countries = [ { key: "cn", label: "China" }, { key: "jp", label: "Japan" }, { key: "kr", label: "Korea" }, { key: "ru", label: "Russia" }, { key: "in", label: "India" }, { key: "br", label: "Brazil" }, { key: "de", label: "Germany" }, { key: "fr", label: "France" }, { key: "it", label: "Italy" }, { key: "es", label: "Spain" }, { key: "us", label: "United States" }, { key: "ca", label: "Canada" }, { key: "mx", label: "Mexico" }, { key: "gb", label: "United Kingdom" }, { key: "au", label: "Australia" }, { key: "nz", label: "New Zealand" }, ]; `,__src__:"src/registry/example/select/clearable.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/ui/button"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Select,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SelectContent,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SelectIcon,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SelectItem,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SelectTrigger,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SelectValue,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/ui/select"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { XIcon } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useState } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" SelectVariantExample"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" variants"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"default"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"faded"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"bordered"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"underline"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"country"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setCountry"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">();"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex flex-col gap-4 w-full max-w-72"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {variants."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Select"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" key"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{variant}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{country}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" onValueChange"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{setCountry}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectTrigger"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"md"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" variant"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{variant}>"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"w-full flex items-center justify-between gap-1 overflow-hidden"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectValue"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Select a country"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {country "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectIcon"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" asChild"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" onPointerDown"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" e."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"stopPropagation"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" variant"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"ghost"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"icon"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" asChild"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"rounded-full size-4 text-white hover:text-white bg-accent-foreground hover:bg-foreground"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" onClick"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setCountry"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"XIcon"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"shrink-0 scale-75"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectContent"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {countries."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"label"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectItem"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" key"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{key} "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{key}>"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {label}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ))}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ))}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" countries"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"cn"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"China"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"jp"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Japan"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"kr"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Korea"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"ru"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Russia"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"in"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"India"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"br"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Brazil"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"de"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Germany"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"fr"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"France"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"it"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Italy"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"es"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Spain"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"us"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"United States"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"ca"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Canada"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mx"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Mexico"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"gb"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"United Kingdom"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"au"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Australia"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { key: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"nz"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"New Zealand"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"];"})})]})})})})]})}function u(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(B,{...n})}):B(n)}function s(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(_);})(); ;return Component;

Installation

Usage

Example

Size

Variant

Disabled

Invalid

Start Content

Clearable