var Component=(()=>{var m=Object.create;var o=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var x=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),A=(e,n)=>{for(var s in n)o(e,s,{get:n[s],enumerable:!0})},h=(e,n,s,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of C(n))!b.call(e,r)&&r!==s&&o(e,r,{get:()=>n[r],enumerable:!(c=D(n,r))||c.enumerable});return e};var v=(e,n,s)=>(s=e!=null?m(f(e)):{},h(n||!e||!e.__esModule?o(s,"default",{value:e,enumerable:!0}):s,e)),_=e=>h(o({},"__esModule",{value:!0}),e);var u=x((T,y)=>{y.exports=_jsx_runtime});var P={};A(P,{default:()=>B});var l=v(u());function g(e){let n={a:"a",code:"code",figure:"figure",h2:"h2",pre:"pre",span:"span",...e.components},{ComponentPreview:s,ComponentSource:c,Step:r,Steps:t,Tabs:d,TabsContent:F,TabsList:p,TabsTrigger:i}=n;return s||a("ComponentPreview",!0),c||a("ComponentSource",!0),r||a("Step",!0),t||a("Steps",!0),d||a("Tabs",!0),F||a("TabsContent",!0),p||a("TabsList",!0),i||a("TabsTrigger",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(s,{name:"page-banner-demo",description:"A page banner with some text",children:[(0,l.jsx)(n.figure,{__src__:"registry/default/example/page-banner-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" { PageBanner } "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/page-banner"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" PaginationDemo"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#72F088"},children:"PageBanner"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" dismissable"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:">New features! \u{1F389};"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"}"})})]})})}),(0,l.jsx)(n.figure,{__src__:"registry/austin/example/page-banner-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" { PageBanner } "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/page-banner"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" PaginationDemo"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#72F088"},children:"PageBanner"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" dismissable"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:">New features! \u{1F389};"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"}"})})]})})}),(0,l.jsx)(n.figure,{__src__:"registry/dc/example/page-banner-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" { PageBanner } "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/page-banner"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" PaginationDemo"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#72F088"},children:"PageBanner"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" dismissable"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:">New features! \u{1F389};"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(n.h2,{id:"installation",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(d,{defaultValue:"cli",children:[(0,l.jsxs)(p,{children:[(0,l.jsx)(i,{value:"cli",children:"CLI"}),(0,l.jsx)(i,{value:"manual",children:"Manual"})]}),(0,l.jsx)(F,{value:"cli",children:(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark-high-contrast",children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:"bunx"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" --bun"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:" @uplusion23/forge-ui"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:" add"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:" page-banner"})]})})})})}),(0,l.jsx)(F,{value:"manual",children:(0,l.jsxs)(t,{children:[(0,l.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,l.jsxs)(c,{name:"page-banner",children:[(0,l.jsx)(n.figure,{__src__:"registry/default/ui/page-banner.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"use client"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" React "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "react"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" { XIcon } "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "lucide-react"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" { cn, cva, "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"type"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" VariantProps } "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "@/lib/utils"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" { Button } "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/button"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" bannerVariants"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" cva"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "sticky flex min-h-4 w-full items-center justify-center py-2 font-mono text-sm transition-all duration-200"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" {"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" variants: {"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" variant: {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" default: "}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"bg-primary text-primary-foreground"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" secondary: "}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"bg-secondary text-secondary-foreground"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" destructive: "}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"bg-destructive text-destructive-foreground"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ghost: "}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"bg-transparent text-foreground"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" defaultVariants: {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" variant: "}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"default"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" interface"}),(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" PageBannerProps"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" extends"}),(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" React"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"InputHTMLAttributes"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:">,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" VariantProps"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"typeof"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" bannerVariants> {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" dismissable"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" boolean"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" animateDismiss"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" boolean"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" alwaysOnTop"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" boolean"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"}"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" PageBanner"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ({"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" className,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" variant,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" children,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" dismissable,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" animateDismiss "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" true"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" alwaysOnTop,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"props"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" PageBannerProps"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"dismissed"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"setDismissed"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" React."}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"dismissing"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"setDismissing"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" React."}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" dismiss"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" setDismissing"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" setTimeout"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" setDismissed"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"1000"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" };"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#72F088"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" bannerVariants"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"({ variant }),"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" className,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" dismissing "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "h-0 min-h-0 overflow-hidden py-0"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" dismissed "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "hidden"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" alwaysOnTop "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "sticky top-0 z-[999]"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" )"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"children"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"dismissable "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#72F088"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"ghost"'}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"absolute right-4 size-5 p-0"'}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"() "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" dismiss"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#72F088"},children:"XIcon"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"size-4 text-current"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" )"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"};"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" { PageBanner };"})]})]})})}),(0,l.jsx)(n.figure,{__src__:"registry/austin/ui/page-banner.tsx",__style__:"austin","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"use client"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" React "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "react"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" { XIcon } "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "lucide-react"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" { cn, cva, "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"type"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" VariantProps } "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "@/lib/utils"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" { Button } "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/button"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" bannerVariants"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" cva"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "sticky flex min-h-4 w-full items-center justify-center py-1 font-mono text-sm transition-all duration-200"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" {"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" variants: {"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" variant: {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" default: "}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"bg-primary text-primary-foreground"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" secondary: "}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"bg-secondary text-secondary-foreground"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" destructive: "}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"bg-destructive text-destructive-foreground"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ghost: "}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"bg-transparent text-foreground"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" defaultVariants: {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" variant: "}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"default"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" interface"}),(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" PageBannerProps"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" extends"}),(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" React"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"InputHTMLAttributes"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:">,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" VariantProps"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"typeof"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" bannerVariants> {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" dismissable"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" boolean"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" animateDismiss"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" boolean"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" alwaysOnTop"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" boolean"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"}"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" PageBanner"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ({"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" className,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" variant,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" children,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" dismissable,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" animateDismiss "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" true"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" alwaysOnTop,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"props"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" PageBannerProps"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"dismissed"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"setDismissed"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" React."}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"dismissing"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"setDismissing"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" React."}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" dismiss"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" setDismissing"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" setTimeout"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" setDismissed"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"1000"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" };"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#72F088"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" bannerVariants"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"({ variant }),"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" className,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" dismissing "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "h-0 min-h-0 overflow-hidden py-0"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" dismissed "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "hidden"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" alwaysOnTop "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "sticky top-0 z-[999]"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" )"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"children"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"dismissable "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#72F088"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"ghost"'}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"absolute right-4 size-5 p-0"'}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"() "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" dismiss"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#72F088"},children:"XIcon"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"size-4 text-current"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" )"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"};"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" { PageBanner };"})]})]})})}),(0,l.jsx)(n.figure,{__src__:"registry/dc/ui/page-banner.tsx",__style__:"dc","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"use client"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" React "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "react"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" { XIcon } "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "lucide-react"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" { cn, cva, "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"type"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" VariantProps } "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "@/lib/utils"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" { Button } "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/button"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" bannerVariants"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" cva"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "sticky flex min-h-4 w-full items-center justify-center py-1 font-mono text-sm transition-all duration-200"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" {"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" variants: {"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" variant: {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" default: "}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"bg-primary text-primary-foreground"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" secondary: "}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"bg-secondary text-secondary-foreground"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" destructive: "}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"bg-destructive text-destructive-foreground"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ghost: "}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"bg-transparent text-foreground"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" defaultVariants: {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" variant: "}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"default"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" interface"}),(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" PageBannerProps"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" extends"}),(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" React"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"InputHTMLAttributes"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:">,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" VariantProps"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"typeof"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" bannerVariants> {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" dismissable"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" boolean"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" animateDismiss"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" boolean"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" alwaysOnTop"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" boolean"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"}"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" PageBanner"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ({"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" className,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" variant,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" children,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" dismissable,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" animateDismiss "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" true"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" alwaysOnTop,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"props"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFB757"},children:" PageBannerProps"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"dismissed"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"setDismissed"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" React."}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"dismissing"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"setDismissing"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" React."}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" dismiss"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" setDismissing"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" setTimeout"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" setDismissed"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:"1000"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" };"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#72F088"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" bannerVariants"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"({ variant }),"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" className,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" dismissing "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "h-0 min-h-0 overflow-hidden py-0"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" dismissed "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "hidden"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" alwaysOnTop "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "sticky top-0 z-[999]"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" )"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"children"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"dismissable "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#72F088"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"ghost"'}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"absolute right-4 size-5 p-0"'}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"() "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#DBB7FF"},children:" dismiss"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#72F088"},children:"XIcon"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:'"size-4 text-current"'}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" )"}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"};"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" { PageBanner };"})]})]})})})]}),(0,l.jsx)(r,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,l.jsxs)(n.h2,{id:"usage",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,l.jsx)(n.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" { PageBanner } "}),(0,l.jsx)(n.span,{style:{color:"#FF9492"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/page-banner"'})]})})})}),` `,(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#72F088"},children:"PageBanner"}),(0,l.jsx)(n.span,{style:{color:"#91CBFF"},children:" dismissable"}),(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:" We have new features! \u{1F389}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F0F3F6"},children:""})]})]})})})]})}function B(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(g,{...e})}):g(e)}function a(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return _(P);})(); ;return Component;

Page Banner

Installation

Usage