{children}
{showNotificationDot && (
)}
);
};
export { IconContainer };
`,__src__:"registry/default/ui/icon-container.tsx",__style__:"default",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" *"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" as"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" React "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { cva, VariantProps } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "class-variance-authority"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,e.jsx)(n.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,e.jsx)(n.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" iconContainerStyles"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" cva"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "flex items-center justify-center relative bg-muted"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" variants: {"})}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" variant: {"})}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" square: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"rounded-lg"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" round: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"rounded-full"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" size: {"})}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" xl: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"size-28 [&_svg]:size-10"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" lg: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"size-12 [&_svg]:size-6"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" md: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"size-10 [&_svg]:size-5"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" sm: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"size-8 [&_svg]:size-4"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" xs: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"size-4 [&_svg]:size-4"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" compoundVariants: ["})}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" variant: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"square"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" size: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"xs"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" class: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"rounded-sm"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ],"})}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" defaultVariants: {"})}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" variant: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"round"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" size: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"md"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:");"})}),`
`,(0,e.jsx)(n.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" IconContainer"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ({"})]}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" variant,"})}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" size,"})}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" className,"})}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" showNotificationDot "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" false"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" children,"})}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ..."}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"props"})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" React"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"ComponentProps"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"div"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"> "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"&"})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" VariantProps"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"typeof"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" iconContainerStyles> "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"&"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" showNotificationDot"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" boolean"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"; "}),(0,e.jsx)(n.span,{style:{color:"#6A737D"},children:"// If true, show the notification dot"})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" data-slot"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"icon-container"'})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"iconContainerStyles"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({ variant, size, className })}"})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"props}"})]}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {children}"})}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {showNotificationDot "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"&&"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"cn"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "absolute rounded-full w-3 h-3 bg-orange-500 top-0 right-0"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" variant "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"==="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "square"'}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" &&"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "-right-1"'})]}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )}"})}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )}"})}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),`
`,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"};"})}),`
`,(0,e.jsx)(n.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { IconContainer };"})]})]})})})}),(0,e.jsx)(o,{children:"Update the import paths to match your project setup."})]})})]}),`
`,(0,e.jsxs)(n.h2,{id:"usage",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Usage"]}),`
`,(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { IconContainer } from "