'})," or via the HTML ",(0,n.jsx)(l.code,{children:"

"})," element. The Icon component supports additional UI states, and can be used standalone or as part of a larger pattern such as NumberField or DatePicker."]}),` `,(0,n.jsxs)(s,{name:"icon-demo",children:[(0,n.jsx)(l.figure,{__src__:"registry/default/example/icon/icon-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#101010",color:"#FFF"},tabIndex:"0","data-language":"tsx","data-theme":"vesper",__rawString__:`import React from "react" import { Icon, IconVariant, IconSize, IconColor } from "@/components/ui/icon" import { Check, X, AlertTriangle, Info, Bell, Sun, Moon, Star, Heart, Zap } from "lucide-react" const variants: IconVariant[] = ["simple", "light", "shadow", "solid", "outlined"] const sizes: IconSize[] = ["xs", "sm", "md", "lg", "xl"] const colors: IconColor[] = ["default", "primary", "secondary", "destructive", "muted"] const icons = [Check, X, AlertTriangle, Info, Bell, Sun, Moon, Star, Heart, Zap] export function IconDemo() { return (

Icon Variants

{variants.map((variant) => (

{variant}

))}

Icon Sizes

{sizes.map((size) => (

{size}

))}

Icon Colors

{colors.map((color) => (

{color}

))}

Icon Gallery

{icons.map((IconComponent, index) => (

{IconComponent.name}

))}

) }`,__src__:"registry/default/example/icon/icon-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"vesper",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:' "react"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" { Icon, IconVariant, IconSize, IconColor } "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:' "@/components/ui/icon"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" { "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Check, X, AlertTriangle, Info, Bell, "})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Sun, Moon, Star, Heart, Zap"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:' "lucide-react"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" variants"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:" IconVariant"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"[] "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"simple"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"light"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"shadow"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"solid"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"outlined"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"]"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" sizes"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:" IconSize"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"[] "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"xs"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"sm"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"md"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"lg"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"xl"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"]"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" colors"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:" IconColor"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"[] "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"default"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"primary"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"secondary"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"destructive"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"muted"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"]"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" icons "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" [Check, X, AlertTriangle, Info, Bell, Sun, Moon, Star, Heart, Zap]"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:" IconDemo"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"space-y-8"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"section"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"text-lg font-semibold mb-4"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Icon Variants"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"flex flex-wrap gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"variants."}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"((variant) "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" key={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"flex flex-col items-center"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"Icon"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" icon={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Star"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" variant={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" size="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"md"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" color="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"primary"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"text-sm mt-2"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"section"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"text-lg font-semibold mb-4"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Icon Sizes"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"flex flex-wrap gap-4 items-end"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"sizes."}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"((size) "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" key={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"flex flex-col items-center"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"Icon"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" icon={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Star"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" variant="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"solid"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" size={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" color="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"primary"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"text-sm mt-2"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"section"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"text-lg font-semibold mb-4"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Icon Colors"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"flex flex-wrap gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"colors."}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"((color) "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" key={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"color"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"flex flex-col items-center"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"Icon"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" icon={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Star"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" variant="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"solid"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" size="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"md"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" color={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"color"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"text-sm mt-2"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"color"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"section"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"text-lg font-semibold mb-4"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Icon Gallery"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"icons."}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"((IconComponent, index) "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" key={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"flex flex-col items-center"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"Icon"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" icon={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"IconComponent"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" variant={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"variants[index "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"%"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" variants.length]"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" size="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"md"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" color={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"colors[index "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"%"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" colors.length]"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" tooltip={"}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:"`Icon ${"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" +"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:" 1"}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:"}`"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" />"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"text-sm mt-2"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"IconComponent.name"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"}"})})]})})}),(0,n.jsx)(l.figure,{__src__:"registry/new-york/example/icon/icon-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#101010",color:"#FFF"},tabIndex:"0","data-language":"tsx","data-theme":"vesper",__rawString__:`import React from "react" import { Icon, IconVariant, IconSize, IconColor } from "@/registry/default/ui/icon" import { Check, X, AlertTriangle, Info, Bell, Sun, Moon, Star, Heart, Zap } from "lucide-react" const variants: IconVariant[] = ["simple", "light", "shadow", "solid", "outlined"] const sizes: IconSize[] = ["xs", "sm", "md", "lg", "xl"] const colors: IconColor[] = ["default", "primary", "secondary", "destructive", "muted"] const icons = [Check, X, AlertTriangle, Info, Bell, Sun, Moon, Star, Heart, Zap] export function IconDemo() { return (

Icon Variants

{variants.map((variant) => (

{variant}

))}

Icon Sizes

{sizes.map((size) => (

{size}

))}

Icon Colors

{colors.map((color) => (

{color}

))}

Icon Gallery

{icons.map((IconComponent, index) => (

{IconComponent.name}

))}

) }`,__src__:"registry/new-york/example/icon/icon-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"vesper",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:' "react"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" { Icon, IconVariant, IconSize, IconColor } "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:' "@/registry/default/ui/icon"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" { "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Check, X, AlertTriangle, Info, Bell, "})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Sun, Moon, Star, Heart, Zap"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:' "lucide-react"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" variants"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:" IconVariant"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"[] "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"simple"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"light"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"shadow"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"solid"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"outlined"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"]"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" sizes"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:" IconSize"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"[] "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"xs"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"sm"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"md"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"lg"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"xl"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"]"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" colors"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:" IconColor"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"[] "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"default"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"primary"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"secondary"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"destructive"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"muted"'}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"]"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" icons "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" [Check, X, AlertTriangle, Info, Bell, Sun, Moon, Star, Heart, Zap]"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:" IconDemo"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"space-y-8"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"section"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"text-lg font-semibold mb-4"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Icon Variants"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"flex flex-wrap gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"variants."}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"((variant) "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" key={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"flex flex-col items-center"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"Icon"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" icon={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Check"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" variant={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" size="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"md"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" color="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"primary"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"text-sm mt-2"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"section"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"text-lg font-semibold mb-4"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Icon Sizes"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"flex flex-wrap gap-4 items-end"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"sizes."}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"((size) "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" key={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"flex flex-col items-center"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"Icon"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" icon={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Check"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" variant="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"solid"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" size={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" color="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"primary"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"text-sm mt-2"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"section"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"text-lg font-semibold mb-4"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Icon Colors"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"flex flex-wrap gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"colors."}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"((color) "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" key={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"color"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"flex flex-col items-center"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"Icon"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" icon={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Check"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" variant="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"solid"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" size="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"md"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" color={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"color"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"text-sm mt-2"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"color"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"section"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"h2"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"text-lg font-semibold mb-4"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Icon Gallery"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:""})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"icons."}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"((IconComponent, index) "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" key={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"flex flex-col items-center"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"Icon"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" icon={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"IconComponent"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" variant={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"variants[index "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"%"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" variants.length]"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" size="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"md"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" color={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"colors[index "}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"%"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" colors.length]"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" tooltip={"}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:"`Icon ${"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" +"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:" 1"}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:"}`"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" />"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFC799"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" className="}),(0,n.jsx)(l.span,{style:{color:"#99FFE4"},children:'"text-sm mt-2"'}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:">{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"IconComponent.name"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ))"}),(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"}"})})]})})})]})]})}function A(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}function I(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(E);})(); ;return Component;