var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var M=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var t in e)r(o,t,{get:e[t],enumerable:!0})},a=(o,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of m(e))!B.call(o,i)&&i!==t&&r(o,i,{get:()=>e[i],enumerable:!(s=h(e,i))||s.enumerable});return o};var g=(o,e,t)=>(t=o!=null?u(p(o)):{},a(e||!o||!o.__esModule?r(t,"default",{value:o,enumerable:!0}):t,o)),b=o=>a(r({},"__esModule",{value:!0}),o);var l=M((F,d)=>{d.exports=_jsx_runtime});var w={};x(w,{default:()=>f,frontmatter:()=>y});var n=g(l()),y={id:"benefits-modal",title:"Benefits Modal",package:"@saas-ui-pro/react",description:"A benefits modal is used to show case important features or product updates."};function c(o){let e={code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...o.components},{ComponentLinks:t}=e;return t||C("ComponentLinks",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:["Use benefits modals whenever you release a new important feature or when onboarding new users. The benefits modal can be an entry point for a ",(0,n.jsx)(e.code,{children:"Tour"}),`. It's recommended to add an illustration to make complex ideas more accesible, if you don't have suitable illustrations use a `,(0,n.jsx)(e.code,{children:"TourDialog"})," instead."]}),` `,(0,n.jsx)(t,{pro:{gumroad:!0}}),` `,(0,n.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"BenefitsModal"}),": The wrapper that provides context for its children."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"BenefitsModalMedia"}),": An image or video supporting the title and description."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"BenefitsModalHeader"}),": The header with a consise title describing the feature."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"BenefitsModalBody"}),": The body with the main message."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"BenefitsModalFooter"}),": The footer with actions."]}),` `]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { BenefitsModal, BenefitsModalMedia, BenefitsModalHeader, BenefitsModalBody, BenefitsModalFooter, } from '@saas-ui-pro/react' `})}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsx)(e.h3,{id:"default-modal",children:"Default modal"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",inline:"true",children:`import { Button, Icon, Text, useDisclosure } from '@chakra-ui/react' import { BenefitsModal, BenefitsModalHeader, BenefitsModalBody, BenefitsModalFooter, } from '@saas-ui-pro/react' import { FiInfo } from 'react-icons/fi' export default function Basic() { const { isOpen, onOpen, onClose } = useDisclosure() return ( <> Check out this new feature Benefits modals can be used to highlight new features and their benefits in your app. Embed illustrations or videos to make ideas more accessible. ) } `})}),` `,(0,n.jsx)(e.h3,{id:"centered-content",children:"Centered content"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",inline:"true",children:`import { Button, Icon, Text, useDisclosure } from '@chakra-ui/react' import { BenefitsModal, BenefitsModalHeader, BenefitsModalBody, BenefitsModalFooter, } from '@saas-ui-pro/react' import { FiInfo } from 'react-icons/fi' export default function Centered() { const { isOpen, onOpen, onClose } = useDisclosure() return ( <> Check out this new feature Benefits modals can be used to highlight new features and their benefits in your app. Embed illustrations or videos to make ideas more accessible. ) } `})})]})}function f(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(c,{...o})}):c(o)}function C(o,e){throw new Error("Expected "+(e?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(w);})(); ;return Component;