var Component=(()=>{var f=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var B=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),M=(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 h(e))!p.call(o,i)&&i!==t&&r(o,i,{get:()=>e[i],enumerable:!(s=u(e,i))||s.enumerable});return o};var x=(o,e,t)=>(t=o!=null?f(m(o)):{},a(e||!o||!o.__esModule?r(t,"default",{value:o,enumerable:!0}):t,o)),g=o=>a(r({},"__esModule",{value:!0}),o);var l=B((T,d)=>{d.exports=_jsx_runtime});var k={};M(k,{default:()=>C,frontmatter:()=>b});var n=x(l()),b={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=Object.assign({p:"p",code:"code",h2:"h2",ul:"ul",li:"li",pre:"pre",h3:"h3"},o.components),{ComponentLinks:t}=e;return t||w("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 y(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(c,o)})):c(o)}var C=y;function w(o,e){throw new Error("Expected "+(e?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}return g(k);})(); ;return Component;