var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var u=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),m=(n,l)=>{for(var c in l)s(n,c,{get:l[c],enumerable:!0})},a=(n,l,c,r)=>{if(l&&typeof l=="object"||typeof l=="function")for(let t of y(l))!S.call(n,t)&&t!==c&&s(n,t,{get:()=>l[t],enumerable:!(r=h(l,t))||r.enumerable});return n};var f=(n,l,c)=>(c=n!=null?p(E(n)):{},a(l||!n||!n.__esModule?s(c,"default",{value:n,enumerable:!0}):c,n)),C=n=>a(s({},"__esModule",{value:!0}),n);var d=u((x,i)=>{i.exports=_jsx_runtime});var b={};m(b,{default:()=>I,frontmatter:()=>g});var e=f(d()),g={title:"Select",description:"Let your users pick what they want.",lastUpdated:"1 Mar, 2024",links:{api_reference:"https://www.radix-ui.com/primitives/docs/components/select#api-reference",source:"https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Select.tsx"}};function F(n){let l=Object.assign({figure:"figure",pre:"pre",code:"code",span:"span",h2:"h2",h4:"h4",h3:"h3"},n.components),{ComponentShowcase:c,ComponentInstall:r,ComponentSource:t}=l;return r||o("ComponentInstall",!0),r.Cli||o("ComponentInstall.Cli",!0),r.Manual||o("ComponentInstall.Manual",!0),c||o("ComponentShowcase",!0),t||o("ComponentSource",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(c,{name:"select-style-default",children:(0,e.jsx)(l.figure,{__src__:"preview/components/select-style-default.tsx",__rawString__:`import { Select } from "@/components/retroui/Select"; import React from "react"; export default function SelectStyleDefault() { return ( ); } `,"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Select } "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Select"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#62E884"},children:" SelectStyleDefault"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select.Trigger"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"w-60"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select.Value"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"Pick your Pokemon"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select.Content"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select.Group"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select.Item"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"pikachu"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Pikachu"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select.Item"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"charizard"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Charizard"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select.Item"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"bulbasaur"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Bulbasaur"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select.Item"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"squirtle"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Squirtle"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)(l.h2,{id:"installation",children:"Installation"}),` `,(0,e.jsxs)(r,{children:[(0,e.jsx)(r.Cli,{npmCommand:"npx shadcn@latest add 'https://retroui.dev/r/select.json'"}),(0,e.jsxs)(r.Manual,{children:[(0,e.jsx)(l.h4,{id:"1-install-dependencies",children:"1. Install dependencies:"}),(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,e.jsx)(l.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#62E884"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:" install"}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:" @radix-ui/react-select"}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:" class-variance-authority"})]})})})}),(0,e.jsx)("br",{}),(0,e.jsx)(l.h4,{id:"2-copy-the-code--into-your-project",children:"2. Copy the code \u{1F447} into your project:"}),(0,e.jsx)(t,{name:"select",children:(0,e.jsx)(l.figure,{__src__:"/vercel/path0/components/retroui/Select.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"use client"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/lib/utils"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#BF9EEE"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectPrimitive "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"@radix-ui/react-select"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Check, ChevronDown } "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"lucide-react"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Select "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectPrimitive.Root;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#62E884"},children:" SelectTrigger"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ({"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" children,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" ..."}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" SelectPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SelectTriggerProps"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SelectPrimitive.Trigger"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"flex h-10 min-w-40 items-center shadow-md justify-between border-2 border-input border-border bg-transparent px-4 py-2 ring-offset-background placeholder:text-muted-foreground focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {children}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SelectPrimitive.Icon"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ChevronDown"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"ml-2 h-4 w-4"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"};"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectValue "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectPrimitive.Value;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectIcon "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectPrimitive.Icon;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#62E884"},children:" SelectContent"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ({"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" children,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" position "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"popper"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" ..."}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" SelectPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SelectContentProps"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SelectPrimitive.Portal"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SelectPrimitive.Content"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"relative z-50 min-w-[8rem] overflow-hidden border border-border bg-background text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" position "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"popper"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" &&"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" position"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{position}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SelectPrimitive.Viewport"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" position "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"popper"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" &&"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {children}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"};"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectGroup "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectPrimitive.Group;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#62E884"},children:" SelectItem"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ({"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" children,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" ..."}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" SelectPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SelectItemProps"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SelectPrimitive.Item"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"relative flex w-full cursor-default select-none items-center py-1.5 px-2 outline-hidden hover:bg-primary data-disabled:pointer-events-none data-disabled:opacity-50"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SelectPrimitive.ItemText"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">{children}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"absolute right-2 flex h-3.5 w-3.5 items-center justify-center"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SelectPrimitive.ItemIndicator"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Check"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"h-4 w-4 text-foreground"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:");"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectLabel "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectPrimitive.Label;"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectSeparator "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectPrimitive.Separator;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectObj "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Object."}),(0,e.jsx)(l.span,{style:{color:"#62E884"},children:"assign"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"(Select, {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Trigger"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectTrigger,"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Value"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectValue,"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Icon"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectIcon,"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Content"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectContent,"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Group"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectGroup,"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Item"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectItem,"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Label"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectLabel,"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Separator"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SelectSeparator,"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"});"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { SelectObj "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Select };"})]})]})})})})]})]}),` `,(0,e.jsx)(l.h2,{id:"examples",children:"Examples"}),` `,(0,e.jsx)(l.h3,{id:"default",children:"Default"}),` `,(0,e.jsx)(c,{name:"select-style-default",children:(0,e.jsx)(l.figure,{__src__:"preview/components/select-style-default.tsx",__rawString__:`import { Select } from "@/components/retroui/Select"; import React from "react"; export default function SelectStyleDefault() { return ( ); } `,"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Select } "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Select"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#62E884"},children:" SelectStyleDefault"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select.Trigger"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"w-60"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select.Value"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"Pick your Pokemon"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select.Content"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select.Group"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select.Item"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"pikachu"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Pikachu"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select.Item"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"charizard"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Charizard"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select.Item"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"bulbasaur"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Bulbasaur"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Select.Item"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"squirtle"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Squirtle"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})})]})}function D(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(F,n)})):F(n)}var I=D;function o(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(b);})(); ;return Component;