Module 471936

function(e,l,a){a.d(l,{t:()=>v}),a(321073);var t=a(627968),o=a(64700),n=a(18051),i=a(158954),s=a(116833),r=a(521489),d=a(397927),u=a(314116),c=a(67576),b=a(293804);function p(){return(0,t.jsx)(d.Text,{variant:"text-sm/normal",color:"text-subtle",children:"Lost access to your radness? Talk to your radness provider to refresh your aura."})}function m(e){let{setIsSafetyAccepted:l,setIsHelmetSelected:a}=e,[n,s]=o.useState([]),r=[{label:"I am wearing a helmet",value:"helmet"},{label:"I know where to find my personal flotation device",value:"pfd"},{label:"I completed the safety training",value:"training"}];return o.useEffect(()=>{l(n.length===r.length),a(n.includes("helmet"))},[n,r.length,l,a]),(0,t.jsx)(i.$QX,{label:"Safety checklist",options:r,selectedValues:n,onChange:s})}function x(e){let{setIsPasscodeValid:l}=e,[a,n]=o.useState("");return(0,t.jsx)(d.ksK,{placeholder:"Enter your passcode...",value:a,onChange:e=>{n(e),l(e.length>0)}})}function h(e){let{callbackDelay:l,failOnNext:a,failOnComplete:n,onCompleteAlert:s,onNextAlert:r,customErrorNotice:d,errorNoticeType:u,...c}=e,[b,h]=o.useState("intro"),[v,y]=o.useState(!1),[f,g]=o.useState(!1),[V,C]=o.useState(!1),[j,S]=o.useState(null),k=o.useCallback(async()=>{if(S(null),l>0&&await new Promise(e=>setTimeout(e,1e3*l)),r&&alert("onNext callback fired"),a){if(""!==d.trim())return S({message:d,type:u}),!1;throw Error("onNext failed")}return!0},[l,a,r,d,u]),w=o.useCallback(async()=>{if(S(null),l>0&&await new Promise(e=>setTimeout(e,1e3*l)),s&&alert("onComplete callback fired"),n){if(""!==d.trim())throw S({message:d,type:u}),Error("Custom error");throw Error("onComplete failed")}},[l,n,s,d,u]),T=[{stepKey:"intro",modalProps:{title:"Verify radness",subtitle:"To verify your radness, we need to ask you a few deep and personal questions.",notice:null!=j?{message:j.message,type:j.type}:void 0},body:(0,t.jsx)(p,{}),nextButtonProps:{text:"Verify"},onNext:k},{stepKey:"safety",modalProps:{title:"Safety first",subtitle:"Before we get started verifying your radness, we need to make sure you're safe and sound.",notice:null!=j?{message:j.message,type:j.type}:V?{message:"Great job, helmets are important for protecting your brain!",type:"warning"}:void 0},body:(0,t.jsx)(m,{setIsSafetyAccepted:y,setIsHelmetSelected:C}),nextEnabled:v,onNext:k},{stepKey:"passcode",modalProps:{title:"Enter passcode",subtitle:"Enter your passcode to complete the radness verification process.",notice:null!=j?{message:j.message,type:j.type}:void 0},body:(0,t.jsx)(x,{setIsPasscodeValid:g}),nextButtonProps:{text:"Verify passcode"},nextEnabled:f}],M=T.slice(1).map(e=>e.stepKey);return(0,t.jsx)(i.t04,{steps:T,currentStepKey:b,numberedSteps:M,onStepChange:h,onComplete:w,...c})}let v={title:"Modal",stories:[{name:"Modal",id:"modal",docs:"https://design.discord.tools/components/web/modals/modal",component:function(e){let{showPreview:l,showInput:a,subtitleIcon:o,...n}=e,s=o?{text:n.subtitle??"Default subtitle",leadingIcon:i.N$i}:n.subtitle;return(0,t.jsxs)(d.BJc,{gap:16,align:"center",children:[(0,t.jsx)(d.Text,{variant:"text-md/normal",children:"Click the button below to open the modal"}),(0,t.jsx)(d.Button,{variant:"primary",text:"Open Modal",onClick:()=>(0,d.qfG)(e=>(0,t.jsx)(i.Modal,{...e,...n,title:n.title,subtitle:s,input:a?(0,t.jsx)(d.IWV,{placeholder:"Search...",onChange:()=>{},query:""}):void 0,preview:l?(0,t.jsxs)(d.BJc,{gap:8,children:[(0,t.jsx)(d.Text,{variant:"text-lg/semibold",children:"Preview Content"}),(0,t.jsx)(d.Text,{variant:"text-md/normal",color:"text-subtle",children:"This is preview content that appears in the modal footer."})]}):void 0,actions:[{variant:"secondary",text:"Cancel",onClick:e.onClose},{variant:"primary",text:"Submit",onClick:e.onClose}],children:(0,t.jsxs)(d.BJc,{gap:16,children:[(0,t.jsx)(d.ZiE,{maxOptionsVisible:10,label:"Example Select",selectionMode:"multiple",options:[{label:"Option 1",value:"option1",id:"option1"},{label:"Option 2",value:"option2",id:"option2"},{label:"Option 3",value:"option3",id:"option3"},{label:"Option 4",value:"option4",id:"option4"},{label:"Option 5",value:"option5",id:"option5"},{label:"Option 6",value:"option6",id:"option6"},{label:"Option 7",value:"option7",id:"option7"},{label:"Option 8",value:"option8",id:"option8"}],onSelectionChange:()=>{}}),(0,t.jsx)(d.ksK,{label:"Example Input",placeholder:"Enter some text..."}),(0,t.jsx)(d.Text,{variant:"text-md/normal",children:"This is the main content area of the modal. You can place any content here."})]})}),{dismissable:n.dismissable})})]})},controls:{title:{label:"Title",type:"text",defaultValue:"Example Modal"},subtitle:{label:"Subtitle",type:"text",defaultValue:"This is a modal subtitle"},subtitleIcon:{label:"Subtitle Icon",type:"boolean",defaultValue:!1},size:{label:"Size",type:"select",defaultValue:"md",options:[{label:"Small",value:"sm"},{label:"Medium",value:"md"}]},showInput:{label:"Show Search Input",type:"boolean",defaultValue:!1},showPreview:{label:"Show Preview",type:"boolean",defaultValue:!1},dismissable:{label:"Dismissable",type:"boolean",defaultValue:!0}}},{name:"ConfirmModal [Alpha]",id:"confirm-modal",component:function(e){let{cancelText:l,confirmDelay:a,confirmError:n,subtitle:i,formatSubtitle:s,...r}=e,c=o.useMemo(()=>s?function(e){let l,a=[],o=0,n=/\*\*(.+?)\*\*/g,i=0;for(;null!==(l=n.exec(e));)l.index>o&&a.push(e.substring(o,l.index)),a.push((0,t.jsx)("strong",{children:l[1]},i++)),o=n.lastIndex;return o<e.length&&a.push(e.substring(o)),a.length>0?a:e}(i):i,[i,s]);return(0,t.jsxs)(d.BJc,{gap:16,align:"center",children:[(0,t.jsx)(d.Text,{variant:"text-md/normal",children:"Click the button below to open the confirm modal"}),(0,t.jsx)(d.Button,{variant:"primary",text:"Open Confirm Modal",onClick:()=>(0,u.A)({...r,subtitle:c,cancelText:""===l?void 0:l,onConfirm:async e=>{try{if(await new Promise(e=>setTimeout(e,1e3*a)),n)throw Error("Confirm error")}catch(l){throw e("Something went wrong reticulating splines. Please try again later."),l}}})})]})},controls:{title:{label:"Title",type:"text",defaultValue:"Reticulate splines"},subtitle:{label:"Subtitle",type:"text",defaultValue:"Are you sure you want to permanently reticulate **Spliney McSplineface**?"},formatSubtitle:{label:"Format Subtitle (**bold**)",type:"boolean",defaultValue:!0},confirmText:{label:"Confirm Text",type:"text",defaultValue:"Reticulate"},cancelText:{label:"Cancel Text",type:"text",defaultValue:""},variant:{label:"Variant",type:"select",defaultValue:"critical",options:[{label:"Primary",value:"primary"},{label:"Critical",value:"critical"}]},confirmDelay:{label:"Confirm Delay (seconds)",type:"number",defaultValue:0},confirmError:{label:"Confirm Error",type:"boolean",defaultValue:!1}}},{name:"ExpressiveModal",id:"expressive-modal",docs:"https://design.discord.tools/components/web/modals/expressive-modal",component:function(e){let{graphic:l,subtitleIcon:r,...u}=e,p=r?{text:u.subtitle??"Default subtitle",leadingIcon:i.N$i}:u.subtitle,m=o.useMemo(()=>0===l?{type:"image",src:c}:1===l?{type:"lottie",lottie:()=>a.e("95947").then(a.t.bind(a,604902,19)),aspectRatio:"6/4"}:2===l?{type:"rive",rive:n.PerfTestRive}:3===l?{type:"video",src:b.A,fallbackImageSrc:c,loop:!0,loopAt:2.5}:4===l?{type:"dynamic",component:s.DynamicGraphicComponent.DEMO,aspectRatio:"6/4",props:{text:"Dynamic Content"}}:void 0,[l]);return(0,t.jsxs)(d.BJc,{gap:16,align:"center",children:[(0,t.jsx)(d.Text,{variant:"text-md/normal",children:"Click the button below to open the expressive modal"}),(0,t.jsx)(d.Button,{variant:"primary",text:"Open ExpressiveModal",onClick:()=>(0,d.qfG)(e=>(0,t.jsx)(i.ExpressiveModal,{...e,...u,title:u.title,subtitle:p,graphic:m,actions:[{variant:"secondary",text:"Cancel",onClick:e.onClose},{variant:"primary",text:"Submit",onClick:e.onClose}],children:(0,t.jsx)(d.BJc,{gap:16,children:(0,t.jsx)(d.Text,{variant:"text-md/normal",children:"This is an expressive modal with a gradient background and optional badge."})})}),{dismissable:u.dismissable})})]})},controls:{title:{label:"Title",type:"text",defaultValue:"Expressive Modal"},subtitle:{label:"Subtitle",type:"text",defaultValue:"This modal has a gradient background"},subtitleIcon:{label:"Subtitle Icon",type:"boolean",defaultValue:!1},gradientColor:{label:"Gradient Color",type:"select",defaultValue:"purple",options:[{label:"Purple",value:"purple"},{label:"Blue",value:"blue"},{label:"Nitro Pink",value:"nitro-pink"}]},graphic:{label:"Graphic",type:"select",defaultValue:0,options:[{label:"Image",value:0},{label:"Lottie",value:1},{label:"Rive",value:2},{label:"Looping Video",value:3},{label:"Dynamic Content",value:4}]},badge:{label:"Badge",type:"select",defaultValue:"new",options:[{label:"None",value:void 0},{label:"New",value:"new"},{label:"Beta",value:"beta"},{label:"Early Access",value:"early_access"}]},dismissable:{label:"Dismissable",type:"boolean",defaultValue:!0}}},{name:"Dynamic Graphic Modal",id:"dynamic-graphic-modal",component:function(e){let{dynamicText:l,...o}=e,n={type:"dynamic",component:s.DynamicGraphicComponent.DEMO,aspectRatio:"6/4",props:{text:l}};return(0,t.jsxs)(d.BJc,{gap:16,align:"center",children:[(0,t.jsx)(d.Text,{variant:"text-md/normal",children:"This example demonstrates the DynamicGraphic component rendering a React component inside the modal header."}),(0,t.jsx)(d.Button,{variant:"primary",text:"Open Dynamic Graphic Modal",onClick:()=>(0,d.mMO)(async()=>{let{ExpressiveModal:e}=await Promise.resolve().then(a.bind(a,158954));return l=>(0,t.jsx)(e,{...l,...o,title:o.title,subtitle:o.subtitle,graphic:n,actions:[{variant:"secondary",text:"Cancel",onClick:l.onClose},{variant:"primary",text:"Submit",onClick:l.onClose}],children:(0,t.jsx)(d.BJc,{gap:16,children:(0,t.jsx)(d.Text,{variant:"text-md/normal",children:"The header above is rendered using a React component via DynamicGraphic, allowing for dynamic, interactive content in the modal header."})})})},{dismissable:o.dismissable})})]})},controls:{title:{label:"Title",type:"text",defaultValue:"Dynamic Graphic Modal"},subtitle:{label:"Subtitle",type:"text",defaultValue:"This modal uses a React component in the header"},dynamicText:{label:"Dynamic Text",type:"text",defaultValue:"Hello from DynamicGraphic!"},gradientColor:{label:"Gradient Color",type:"select",defaultValue:"purple",options:[{label:"Purple",value:"purple"},{label:"Blue",value:"blue"},{label:"Nitro Pink",value:"nitro-pink"}]},badge:{label:"Badge",type:"select",defaultValue:void 0,options:[{label:"None",value:void 0},{label:"New",value:"new"},{label:"Beta",value:"beta"},{label:"Early Access",value:"early_access"}]},dismissable:{label:"Dismissable",type:"boolean",defaultValue:!0}}},{name:"LayerModal",id:"layer-modal",component:function(e){let{...l}=e;return(0,t.jsxs)(d.BJc,{gap:16,align:"center",children:[(0,t.jsx)(d.Text,{variant:"text-md/normal",children:"Click the button below to open the layer modal"}),(0,t.jsx)(d.Button,{variant:"primary",text:"Open Layer Modal",onClick:()=>(0,d.qfG)(e=>(0,t.jsx)(r.N,{...e,...l,children:(0,t.jsx)(d.BJc,{gap:16,children:(0,t.jsx)(d.Text,{variant:"text-md/normal",children:"This is the layer modal content"})})}))})]})}},{name:"MultiStepModal [Alpha]",id:"multi-step-modal",component:function(e){let{callbackDelay:l,failOnNext:a,failOnComplete:o,onCompleteAlert:n,onNextAlert:i,customErrorNotice:s,errorNoticeType:r}=e;return(0,t.jsxs)(d.BJc,{gap:16,align:"center",children:[(0,t.jsx)(d.Text,{variant:"text-md/normal",children:"Click the button below to open the multi-step modal"}),(0,t.jsx)(d.Button,{variant:"primary",text:"Open MultiStepModal",onClick:()=>(0,d.qfG)(e=>(0,t.jsx)(h,{...e,callbackDelay:l,failOnNext:a,failOnComplete:o,onCompleteAlert:n,onNextAlert:i,customErrorNotice:s,errorNoticeType:r}))})]})},controls:{callbackDelay:{label:"Delay Callbacks (seconds)",type:"number",defaultValue:0},failOnNext:{label:"Fail onNext",type:"boolean",defaultValue:!1},failOnComplete:{label:"Fail onComplete",type:"boolean",defaultValue:!1},onCompleteAlert:{label:"onComplete Alert",type:"boolean",defaultValue:!1},onNextAlert:{label:"onNext Alert",type:"boolean",defaultValue:!1},customErrorNotice:{label:"Custom Error Notice",type:"text",defaultValue:""},errorNoticeType:{label:"Error Notice Type",type:"select",defaultValue:"critical",options:[{label:"Critical",value:"critical"},{label:"Warning",value:"warning"},{label:"Info",value:"info"},{label:"Success",value:"success"}]}}},{name:"BaseModal",id:"base-modal",component:function(e){let{dismissable:l,tallContent:a,...o}=e;return(0,t.jsxs)(d.BJc,{gap:16,align:"center",children:[(0,t.jsx)(d.Text,{variant:"text-md/normal",children:"Click the button below to open the base modal"}),(0,t.jsx)(d.Button,{variant:"primary",text:"Open BaseModal",onClick:()=>(0,d.qfG)(e=>(0,t.jsx)(i.dWK,{...e,...o,"aria-label":"Base Modal Example",children:(0,t.jsx)(i.cwr,{children:(0,t.jsxs)(d.BJc,{gap:16,children:[(0,t.jsx)(d.Text,{variant:"text-lg/semibold",children:"BaseModal Content"}),(0,t.jsx)(d.Text,{variant:"text-md/normal",children:"This is the raw BaseModal container. It provides the modal chrome (animation, sizing, padding, focus management) without any opinionated header, body, or action bar layout."}),a?Array.from({length:20},(e,l)=>(0,t.jsxs)(d.Text,{variant:"text-md/normal",children:["Item ",l+1," — This is filler content to demonstrate overflow and scrolling behavior."]},l)):null]})})}),{dismissable:l})})]})},controls:{size:{label:"Size",type:"select",defaultValue:"md",options:[{label:"Small",value:"sm"},{label:"Medium",value:"md"},{label:"Large",value:"lg"},{label:"Extra Large",value:"xl"},{label:"Extra Extra Large",value:"xxl"}]},paddingSize:{label:"Padding Size",type:"select",defaultValue:"sm",options:[{label:"Small (24px)",value:"sm"},{label:"Large (32px)",value:"lg"}]},animationVariant:{label:"Animation Variant",type:"select",defaultValue:"default",options:[{label:"Default",value:"default"},{label:"Subtle",value:"subtle"}]},fullScreenOnMobile:{label:"Full Screen on Mobile",type:"boolean",defaultValue:!0},role:{label:"Role",type:"select",defaultValue:"dialog",options:[{label:"Dialog",value:"dialog"},{label:"Alert Dialog",value:"alertdialog"}]},maxHeight:{label:"Max Height",type:"select",defaultValue:"default",options:[{label:"Default",value:"default"},{label:"Viewport",value:"viewport"}]},dismissable:{label:"Dismissable",type:"boolean",defaultValue:!0},tallContent:{label:"Tall Content",type:"boolean",defaultValue:!1}}}]}}