Module 645136

function(e,l,a){a.r(l),a.d(l,{manaCollection:()=>ag,playgroundConfig:()=>af});var t=a(477900),o=a(582128),i=a(17928),n=a(287809),s=a(97808),r=a(818348),d=a(778712);let u={id:"avatar",name:"Avatar",component:function(e){let{size:l=d._3.SIZE_48,status:a,isVR:o=!1,isMobile:r=!1}=e,{user:u}=(0,i.cf)([n.default],()=>({user:n.default.getCurrentUser()})),c=Number(l.split("_")[1]);return(0,t.jsx)(s.eu,{src:u?.getAvatarURL(void 0,c),size:l,"aria-label":"Sample User",status:a,isVR:o,isMobile:r})},controls:{size:{type:"select",label:"Size",defaultValue:d._3.SIZE_48,options:Object.keys(d._3).map(e=>({label:e,value:d._3[e]}))},status:{type:"select",label:"Status",defaultValue:null,options:[{label:"None",value:null}].concat(Object.keys(r.cl).map(e=>({label:e,value:r.cl[e]})))},isVR:{type:"boolean",label:"VR",defaultValue:!1},isMobile:{type:"boolean",label:"Mobile",defaultValue:!1}}};var c=a(503698),b=a.n(c),p=a(834730),m=a(38327);let x={blurpleLight:"blurple-light",blurpleMedium:"blurple-medium",blurpleDark:"blurple-dark",purpleLight:"purple-light",purpleMedium:"purple-medium",purpleDark:"purple-dark",greenLight:"green-light",greenMedium:"green-medium",greenDark:"green-dark",orangeLight:"orange-light",orangeMedium:"orange-medium",orangeDark:"orange-dark",yellowLight:"yellow-light",yellowMedium:"yellow-medium",yellowDark:"yellow-dark",pinkLight:"pink-light",pinkMedium:"pink-medium",pinkDark:"pink-dark",redLight:"red-light",redMedium:"red-medium",redDark:"red-dark",grayLight:"gray-light",grayMedium:"gray-medium",grayDark:"gray-dark"};function y(e){let{text:l,variant:a="grayLight",icon:o,iconColor:i}=e,n=x[a],s=null!=o?(0,t.jsx)(o,{color:i??"currentColor",size:"xxs","aria-hidden":!0,className:m.icon}):null;return(0,t.jsxs)(p.E,{variant:"eyebrow",className:b()(m.chip,m[n],{[m["with-icon"]]:null!=o}),children:[s,l]})}var h=a(112258);let v=["blurple","purple","green","orange","yellow","pink","red","gray"],g=["Light","Medium","Dark"],f={title:"Chip",stories:[{name:"Chip",id:"chip",component:y,controls:{text:{label:"Text",type:"text",defaultValue:"New"},variant:{label:"Variant",type:"select",defaultValue:"grayLight",options:[{label:"Blurple Light",value:"blurpleLight"},{label:"Blurple Medium",value:"blurpleMedium"},{label:"Blurple Dark",value:"blurpleDark"},{label:"Purple Light",value:"purpleLight"},{label:"Purple Medium",value:"purpleMedium"},{label:"Purple Dark",value:"purpleDark"},{label:"Green Light",value:"greenLight"},{label:"Green Medium",value:"greenMedium"},{label:"Green Dark",value:"greenDark"},{label:"Orange Light",value:"orangeLight"},{label:"Orange Medium",value:"orangeMedium"},{label:"Orange Dark",value:"orangeDark"},{label:"Yellow Light",value:"yellowLight"},{label:"Yellow Medium",value:"yellowMedium"},{label:"Yellow Dark",value:"yellowDark"},{label:"Pink Light",value:"pinkLight"},{label:"Pink Medium",value:"pinkMedium"},{label:"Pink Dark",value:"pinkDark"},{label:"Red Light",value:"redLight"},{label:"Red Medium",value:"redMedium"},{label:"Red Dark",value:"redDark"},{label:"Gray Light",value:"grayLight"},{label:"Gray Medium",value:"grayMedium"},{label:"Gray Dark",value:"grayDark"}]}}},{name:"All Variants",id:"chip-all-variants",component:function(){return(0,t.jsx)("div",{className:h.lx,children:g.map(e=>(0,t.jsxs)("div",{className:h.uW,children:[(0,t.jsx)("h3",{className:h.Gf,children:e}),(0,t.jsx)("div",{className:h.f2,children:v.map(l=>{let a=`${l}${e}`;return(0,t.jsx)(y,{text:l,variant:a},a)})})]},e))})}}]};var V=a(993077),C=a(821609),j=a(235986),S=a(244367),k=a(742158),w=a(76529);V.Z.Types;function M(e){let l,a,{type:o=V.Z.Types.DANGER,imageData:i,button:n,className:s,iconClassName:r,title:d,body:u,style:c,align:p=j.A.Align.START}=e,m=j.A.Direction.HORIZONTAL;if(null!=i){let{position:e,...a}=i;l=(0,t.jsx)(j.A.Child,{grow:0,shrink:0,children:(0,t.jsx)("img",{alt:"",className:b()(w.Kk,r),...a})}),"right"===e&&(m=j.A.Direction.HORIZONTAL_REVERSE)}else null!=n&&(a=n);let x=!0;return o===V.Z.Types.PRIMARY&&(x=!1),(0,t.jsx)(V.Z,{className:b()(w.RJ,s),type:o,style:c,children:(0,t.jsxs)(j.A,{direction:m,align:p,children:[l,(0,t.jsxs)(j.A.Child,{children:[null!=d&&""!==d?(0,t.jsx)(k.z,{"data-migration-pending":!0,className:b()(w.$G,{[w.vV]:x}),children:d}):null,(0,t.jsx)(S.a,{"data-migration-pending":!0,className:b()(w.Vz,{[w.vV]:x}),children:u}),a]})]})})}M.Types=V.Z.Types;let T={title:"Form Components",stories:[{id:"formnotice",name:"FormNotice",component:function(e){let{type:l,title:a,body:o,hasButton:i}=e,n=i?(0,t.jsx)(C.$,{text:"Action"}):void 0;return(0,t.jsx)(M,{"data-migration-pending":!0,type:l,title:a,body:o,button:n})},controls:{type:{type:"select",label:"Type",defaultValue:V.Z.Types.DANGER,options:[{label:"Primary",value:V.Z.Types.PRIMARY},{label:"Danger",value:V.Z.Types.DANGER},{label:"Warning",value:V.Z.Types.WARNING},{label:"Success",value:V.Z.Types.SUCCESS},{label:"Brand",value:V.Z.Types.BRAND},{label:"Custom",value:V.Z.Types.CUSTOM}]},title:{type:"text",label:"Title",defaultValue:"Important Notice"},body:{type:"text",label:"Body",defaultValue:"This is an important message that you should pay attention to."},hasButton:{type:"boolean",label:"Has Button",defaultValue:!1}}},{id:"formtitle",name:"FormTitle",component:function(e){let{children:l,disabled:a,required:o,errorMessage:i}=e,n=i?.trim()===""?void 0:i;return(0,t.jsx)("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:["h1","h2","h3","h4","h5","legend"].map(e=>(0,t.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[(0,t.jsxs)("code",{style:{minWidth:"60px",fontSize:"12px",color:"#666"},children:[e,":"]}),(0,t.jsx)(k.z,{"data-migration-pending":!0,tag:e,disabled:a,required:o,error:n,errorId:null!=n?`error-id-${e}`:void 0,children:l})]},e))})},controls:{children:{type:"text",label:"Title Text",defaultValue:"Form Title"},disabled:{type:"boolean",label:"Disabled",defaultValue:!1},required:{type:"boolean",label:"Required",defaultValue:!1},errorMessage:{type:"text",label:"Error Message",defaultValue:""}}}]};var D=a(331322),E=a(452027),L=a(512950),I=a(22231),A=a(366605),R=a(624479),N=a(625903),P=a(509434),O=a(241326),B=a(922016),z=a(980707),G=a(477782),F=a(913506);let $={title:"Menu",stories:[{name:"Menu",id:"menu",component:function(e){let{variant:l,hideScroller:a,showGroups:i,showCheckboxItems:n,showRadioItems:s,showSwitchItems:r,showSubmenus:d,showIcons:u,showShortcuts:c,showSubtext:b,showDisabledItems:p,showColoredItems:m,showLoading:x,showTrailingIndicator:y,dangerItemColor:h}=e,[v,g]=o.useState(!0),[f,V]=o.useState(!1),[j,S]=o.useState("text"),[k,w]=o.useState("cozy"),[M,T]=o.useState(!0),D=o.useRef(null);return(0,t.jsxs)("div",{className:F.k,children:[!M&&(0,t.jsx)(C.$,{text:"Open Menu",onClick:()=>T(!0)}),(0,t.jsx)(B.Y,{renderPopout:e=>{let{closePopout:o}=e;return(0,t.jsxs)(z.W,{"data-menu-migrated":!0,navId:"menu-story","aria-label":"Story Menu",variant:l,hideScroller:a,onClose:o,onSelect:()=>{},children:[(0,t.jsx)(G.Dr,{id:"edit",label:"Edit Message",icon:u?I.R:void 0,leadingAccessory:u?{type:"icon",icon:I.R}:void 0,shortcut:c?"\u2318E":void 0,action:()=>{}}),(0,t.jsx)(G.Dr,{id:"pin",label:"Pin Message",icon:u?A.t:void 0,leadingAccessory:u?{type:"icon",icon:A.t}:void 0,subtext:b?"Pin this message to the channel":void 0,badge:"beta",loading:x,action:()=>{}}),(0,t.jsx)(G.Dr,{id:"copy",label:"Copy Message Link",icon:u?R.T:void 0,leadingAccessory:u?{type:"icon",icon:R.T}:void 0,badge:"new",action:()=>{}}),p&&(0,t.jsx)(G.Dr,{id:"disabled",label:"Disabled Item",icon:u?N.Z:void 0,leadingAccessory:u?{type:"icon",icon:N.Z}:void 0,disabled:!0,action:()=>{}}),m&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(G.bX,{}),(0,t.jsx)(G.Dr,{id:"brand-item",label:"Brand Item",color:"brand",trailingIndicator:y?{type:"icon",icon:P.I}:void 0,action:()=>{}}),(0,t.jsx)(G.Dr,{id:"premium-item",label:"Premium Item",color:"premium",icon:u?N.Z:void 0,leadingAccessory:u?{type:"icon",icon:N.Z}:void 0,action:()=>{}}),(0,t.jsx)(G.Dr,{id:"success-item",label:"Success Item",color:"success",icon:u?N.Z:void 0,leadingAccessory:u?{type:"icon",icon:N.Z}:void 0,action:()=>{}})]}),d&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(G.bX,{}),(0,t.jsxs)(G.Dr,{id:"submenu",label:"More Options",icon:u?N.Z:void 0,children:[(0,t.jsx)(G.Dr,{id:"submenu-1",label:"Submenu Item 1",action:()=>{}}),(0,t.jsx)(G.Dr,{id:"submenu-2",label:"Submenu Item 2",action:()=>{}}),(0,t.jsx)(G.Dr,{id:"submenu-3",label:"Submenu Item 3",action:()=>{}})]})]}),n&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(G.bX,{}),(0,t.jsx)(G.sL,{id:"notifications",label:"Enable Notifications Enable Notifications Enable Notifications",checked:v,action:()=>g(!v)}),(0,t.jsx)(G.sL,{id:"mute",label:"Mute Channel",checked:f,action:()=>V(!f)})]}),r&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(G.bX,{}),(0,t.jsx)(G.fP,{id:"switch-notifications",label:"Push Notifications",checked:v,action:()=>g(!v)})]}),s&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(G.bX,{}),(0,t.jsxs)(G.rX,{label:"Channel Type",children:[(0,t.jsx)(G.iD,{id:"radio-text",group:"channel-type",label:"Text Channel Text Channel Text Channel Text Channel Text Channel Text Channel ",checked:"text"===j,action:()=>S("text")}),(0,t.jsx)(G.iD,{id:"radio-voice",group:"channel-type",label:"Voice Channel",checked:"voice"===j,action:()=>S("voice")})]}),(0,t.jsx)(G.bX,{}),(0,t.jsxs)(G.rX,{label:"View Mode",children:[(0,t.jsx)(G.iD,{id:"radio-cozy",group:"view-mode",label:"Cozy",checked:"cozy"===k,action:()=>w("cozy")}),(0,t.jsx)(G.iD,{id:"radio-compact",group:"view-mode",label:"Compact",checked:"compact"===k,action:()=>w("compact")})]})]}),i&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(G.bX,{}),(0,t.jsxs)(G.rX,{label:"Grouped Items",children:[(0,t.jsx)(G.Dr,{id:"group-1",label:"Group Item 1",action:()=>{}}),(0,t.jsx)(G.Dr,{id:"group-2",label:"Group Item 2",action:()=>{}}),(0,t.jsx)(G.Dr,{id:"group-3",label:"Group Item 3",action:()=>{}})]})]}),(0,t.jsx)(G.bX,{}),(0,t.jsx)(G.Dr,{id:"delete",label:"Delete Message",color:h,icon:u?O.u:void 0,action:()=>{}})]})},position:"bottom",align:"center",shouldShow:!0,targetElementRef:D,onRequestClose:()=>T(!1),children:()=>(0,t.jsx)("div",{ref:D,style:{width:1,height:1,opacity:0,pointerEvents:"none"}})})]})},controls:{variant:{type:"select",label:"Variant",defaultValue:"flexible",options:[{label:"Fixed",value:"fixed"},{label:"Flexible",value:"flexible"}]},hideScroller:{type:"boolean",label:"Hide Scroller",defaultValue:!1},showGroups:{type:"boolean",label:"Show Groups",defaultValue:!0},showCheckboxItems:{type:"boolean",label:"Show Checkbox Items",defaultValue:!0},showRadioItems:{type:"boolean",label:"Show Radio Items",defaultValue:!0},showSwitchItems:{type:"boolean",label:"Show Switch Items",defaultValue:!0},showSubmenus:{type:"boolean",label:"Show Submenus",defaultValue:!0},showIcons:{type:"boolean",label:"Show Icons",defaultValue:!0},showShortcuts:{type:"boolean",label:"Show Shortcuts",defaultValue:!0},showSubtext:{type:"boolean",label:"Show Subtext",defaultValue:!1},showDisabledItems:{type:"boolean",label:"Show Disabled Items",defaultValue:!0},showColoredItems:{type:"boolean",label:"Show Colored Items",defaultValue:!0},showLoading:{type:"boolean",label:"Show Loading",defaultValue:!1},showTrailingIndicator:{type:"boolean",label:"Show Trailing Indicator",defaultValue:!1},dangerItemColor:{type:"select",label:"Danger Item Color",defaultValue:"danger",options:[{label:"Default",value:"default"},{label:"Brand",value:"brand"},{label:"Danger",value:"danger"},{label:"Premium",value:"premium"},{label:"Premium Gradient",value:"premium-gradient"},{label:"Success",value:"success"}]}}}]};var _=a(417098);let H={title:"Notice",stories:[{id:"notice",name:"Notice",component:function(e){let{color:l,message:a}=e,o={BRAND:_.Hv.BRAND,INFO:_.Hv.INFO,WARNING:_.Hv.WARNING,DANGER:_.Hv.DANGER,DEFAULT:_.Hv.DEFAULT,NEUTRAL:_.Hv.NEUTRAL};return(0,t.jsx)(_.$T,{color:o[l],children:a})},controls:{color:{type:"select",label:"Color",defaultValue:"BRAND",options:[{label:"Brand",value:"BRAND"},{label:"Info",value:"INFO"},{label:"Warning",value:"WARNING"},{label:"Danger",value:"DANGER"},{label:"Default",value:"DEFAULT"},{label:"Neutral",value:"NEUTRAL"}]},message:{type:"text",label:"Message",defaultValue:"This is a notice message with important information."}}}]};var q=a(106236);let U={title:"Slider",stories:[{id:"slider",name:"Slider",component:function(e){let{minValue:l,maxValue:a,initialValue:o,markerCount:i,stickToMarkers:n,disabled:s,equidistant:r,label:d,description:u}=e,c=i>0?Array.from({length:i},(e,t)=>Math.floor(l+t/(i-1)*(a-l))):void 0;return(0,t.jsx)(q.A,{label:d,description:u,layout:"horizontal-responsive",minValue:l,maxValue:a,initialValue:o,markers:c,stickToMarkers:n,disabled:s,equidistant:r},i)},controls:{label:{type:"text",label:"Label",defaultValue:"This is a slider"},description:{type:"text",label:"Description",defaultValue:"This is a description of the slider"},minValue:{type:"number",label:"Min Value",defaultValue:0},maxValue:{type:"number",label:"Max Value",defaultValue:100},initialValue:{type:"number",label:"Initial Value",defaultValue:50},markerCount:{type:"number",label:"Marker Count",minValue:3,defaultValue:3},stickToMarkers:{type:"boolean",label:"Stick to Markers",defaultValue:!1},disabled:{type:"boolean",label:"Disabled",defaultValue:!1},equidistant:{type:"boolean",label:"Equidistant",defaultValue:!1}}}]};var X=a(548118),W=a(71393),Z=a(342952),Y=a(692617);let K={id:"stacked-avatars",name:"StackedAvatars",component:function(e){let{size:l=d._3.SIZE_24,maxUsers:a=3,hideOverflowCount:o=!1}=e,{users:s}=(0,i.cf)([n.default],()=>({users:Object.values(n.default.getUsers()).slice(0,10)}));return 0===s.length?null:(0,t.jsx)(Z.I,{users:s,maxUsers:a,size:l,hideOverflowCount:o})},controls:{size:{type:"select",label:"Size",defaultValue:d._3.SIZE_24,options:[{label:"SIZE_16",value:d._3.SIZE_16},{label:"SIZE_20",value:d._3.SIZE_20},{label:"SIZE_24",value:d._3.SIZE_24}]},maxUsers:{type:"number",label:"Max Users",defaultValue:3,minValue:1},hideOverflowCount:{type:"boolean",label:"Hide Overflow Count",defaultValue:!1}}},Q={id:"stacked-guild-icons",name:"StackedGuildIcons",component:function(e){let{size:l=X.Ay.Sizes.SMALLER,maxGuilds:a=3,hideOverflowCount:o=!1,disableGuildNameTooltip:n=!1}=e,{guilds:s}=(0,i.cf)([W.A],()=>({guilds:W.A.getGuildsArray().slice(0,10)}));return 0===s.length?null:(0,t.jsx)(Y.A,{guilds:s,maxGuilds:a,size:l,hideOverflowCount:o,disableGuildNameTooltip:n})},controls:{size:{type:"select",label:"Size",defaultValue:X.Ay.Sizes.SMALLER,options:[{label:"SMOL",value:X.Ay.Sizes.SMOL},{label:"MINI",value:X.Ay.Sizes.MINI},{label:"SMALLER",value:X.Ay.Sizes.SMALLER}]},maxGuilds:{type:"number",label:"Max Guilds",defaultValue:3,minValue:1},hideOverflowCount:{type:"boolean",label:"Hide Overflow Count",defaultValue:!1},disableGuildNameTooltip:{type:"boolean",label:"Disable Guild Name Tooltip",defaultValue:!1}}};var J=a(761508);let ee={title:"TabBar",stories:[{id:"tabbar",name:"TabBar",component:function(e){let{look:l,type:a,tabCount:i}=e,[n,s]=o.useState("tab1"),r=Array.from({length:i},(e,l)=>({id:`tab${l+1}`,name:`Tab ${l+1}`}));return(0,t.jsx)(J.V,{type:a,look:l,selectedItem:n,onItemSelect:s,children:r.map(e=>(0,t.jsx)(J.V.Item,{id:e.id,children:e.name},e.id))})},controls:{look:{type:"select",label:"Look",defaultValue:"brand",options:[{label:"Brand",value:"brand"},{label:"Grey",value:"grey"},{label:"Custom",value:"custom"}]},type:{type:"select",label:"Type",defaultValue:"top",options:[{label:"Top",value:"top"},{label:"Side",value:"side"},{label:"Top Pill",value:"top-pill"}]},tabCount:{type:"number",label:"Number of Tabs",defaultValue:3}}}]};var el=a(444550),ea=a(843282);let et=[{value:"red",label:"Red"},{value:"green",label:"Green"},{value:"blue",label:"Blue"},{value:"yellow",label:"Yellow"},{value:"purple",label:"Purple"},{value:"orange",label:"Orange"},{value:"pink",label:"Pink"},{value:"brown",label:"Brown"}],eo={id:"select",name:"Select",component:function(e){let{label:l,description:a,isDisabled:i,isProcessing:n,placeholder:s,maxVisibleItems:r,clearable:d,closeOnSelect:u,popoutPosition:c,variant:b}=e,[p,m]=o.useState("blue");return(0,t.jsx)(ea.Te,{variant:b,label:l,description:a,value:p,onChange:m,options:et,placeholder:s,isDisabled:i,isProcessing:n,maxVisibleItems:r,clearable:d,closeOnSelect:u,popoutPosition:c})},controls:{label:{type:"text",label:"Label",defaultValue:"Color"},description:{type:"text",label:"Description",defaultValue:"Choose a color"},placeholder:{type:"text",label:"Placeholder",defaultValue:"Choose a color"},variant:{type:"select",label:"Variant",defaultValue:"filled",options:[{label:"Filled",value:"filled"},{label:"Text Only",value:"text-only"}]},isDisabled:{type:"boolean",label:"Disabled",defaultValue:!1},isProcessing:{type:"boolean",label:"Processing",defaultValue:!1},clearable:{type:"boolean",label:"Clearable",defaultValue:!0},closeOnSelect:{type:"boolean",label:"Close On Select",defaultValue:!0},maxVisibleItems:{type:"number",label:"Max Visible Items",defaultValue:5},popoutPosition:{type:"select",label:"Popout Position",defaultValue:"bottom",options:[{label:"Bottom",value:"bottom"},{label:"Top",value:"top"},{label:"Center",value:"center"},{label:"Left",value:"left"},{label:"Right",value:"right"},{label:"Window Center",value:"window_center"}]}}},ei={id:"searchable-select",name:"Searchable Select",component:function(e){let{placeholder:l,isDisabled:a,isProcessing:i,clearable:n,closeOnSelect:s,clearQueryOnSelect:r,filter:d,...u}=e,[c,b]=o.useState("blue"),[p,m]=o.useState(["blue"]);return(0,t.jsxs)(D.B,{gap:24,children:[(0,t.jsx)(el.p,{...u,value:c,onChange:b,options:et,placeholder:l,isDisabled:a,isProcessing:i,clearable:n,clearQueryOnSelect:r,filter:d}),(0,t.jsx)(el.p,{...u,multi:!0,value:p,onChange:m,options:et,placeholder:l,isDisabled:a,isProcessing:i,clearable:n,closeOnSelect:s,clearQueryOnSelect:r,filter:d})]})},controls:{...eo.controls,placeholder:{type:"text",label:"Placeholder",defaultValue:"Search for a color"},isDisabled:{type:"boolean",label:"Disabled",defaultValue:!1},isProcessing:{type:"boolean",label:"Processing",defaultValue:!1},clearable:{type:"boolean",label:"Clearable",defaultValue:!0},closeOnSelect:{type:"boolean",label:"Close On Select",defaultValue:!0},clearQueryOnSelect:{type:"boolean",label:"Clear Query On Select",defaultValue:!1},filter:{type:"boolean",label:"Filter",defaultValue:!0}}};var en=a(95477),es=a(582306),er=a(666944);let ed=[{value:"red",label:"Red"},{value:"green",label:"Green"},{value:"blue",label:"Blue"},{value:"yellow",label:"Yellow"},{value:"purple",label:"Purple"},{value:"orange",label:"Orange"},{value:"pink",label:"Pink"},{value:"brown",label:"Brown"}],eu={id:"void",name:"Void",deprecationNotice:"Void is deprecated. Use Mana instead.",groups:[{title:"HelpMessage",stories:[{name:"HelpMessage",id:"help-message",component:function(e){let{text:l}=e;return(0,t.jsx)(D.B,{gap:16,children:Object.values(L.Y).map(e=>(0,t.jsx)(E.D,{label:e,children:(0,t.jsx)(L.p,{messageType:e,children:l},e)},e))})},controls:{text:{label:"Text",type:"text",defaultValue:"This is a help message"}}}]},{title:"Select",stories:[eo,ei]},U,ee,{title:"Avatar",stories:[u]},f,H,{title:"VoidInputs",stories:[{name:"VoidInputs",id:"void-inputs",component:function(e){let{disabled:l,placeholder:a}=e,[i,n]=o.useState(void 0),[s,r]=o.useState(void 0),[d,u]=o.useState(void 0);return(0,t.jsxs)(D.B,{gap:8,children:[(0,t.jsx)(ea.Te,{value:i,onChange:n,options:ed,placeholder:a,isDisabled:l}),(0,t.jsx)(en.k,{placeholder:a,disabled:l}),(0,t.jsx)(el.p,{value:i,onChange:n,options:ed,placeholder:a,isDisabled:l}),(0,t.jsx)(es.J,{onSelect:r,value:s,disabled:l}),(0,t.jsx)(er.c,{onChange:u,value:d,disabled:l})]})},controls:{disabled:{type:"boolean",label:"Disabled",defaultValue:!1},placeholder:{type:"text",label:"Placeholder",defaultValue:"Placeholder"}}}]},T,$,{title:"Stacked Avatars",stories:[K]},{title:"Stacked Guild Icons",stories:[Q]}]};var ec=a(27232),eb=a(825860),ep=a(175841),em=a(406810),ex=a(260981),ey=a(540418),eh=a(907085),ev=a(179820),eg=a(508770);let ef={none:void 0,StarIcon:ec.G,FireIcon:eb.Y,SparklesIcon:ep.B,ClockIcon:em.O,ExperimentalCommonIcon:ex.p,ExperimentalRareIcon:ey.A,ExperimentalEpicIcon:eh.b,ExperimentalMythicIcon:ev.O},eV={title:"Badge",stories:[{name:"Badge",id:"badge",component:function(e){let{type:l,customText:a,variant:o,iconName:i}=e,n=null!=i&&""!==i&&"none"!==i?ef[i]:void 0;return(0,t.jsx)(eg.E,{type:"custom"===l&&null!=a&&""!==a?{text:a}:l,variant:o,icon:n})},docs:"https://design.discord.tools/components/web/badge",controls:{type:{label:"Type",type:"select",defaultValue:"new",options:[{label:"New",value:"new"},{label:"Beta",value:"beta"},{label:"Early Access",value:"early_access"},{label:"Free Trial",value:"free_trial"},{label:"Custom Text",value:"custom"}]},customText:{label:"Custom Text",type:"text",defaultValue:"Custom"},variant:{label:"Variant",type:"select",defaultValue:"default",options:[{label:"Default",value:"default"},{label:"Brand",value:"brand"},{label:"Expressive",value:"expressive"},{label:"Rarity \u2014 Common",value:"rarity-common"},{label:"Rarity \u2014 Rare",value:"rarity-rare"},{label:"Rarity \u2014 Epic",value:"rarity-epic"},{label:"Rarity \u2014 Mythic",value:"rarity-mythic"}]},iconName:{label:"Icon",type:"select",defaultValue:"none",options:[{label:"None",value:"none"},{label:"Star",value:"StarIcon"},{label:"Fire",value:"FireIcon"},{label:"Sparkles",value:"SparklesIcon"},{label:"Clock",value:"ClockIcon"},{label:"Rarity \u2014 Common",value:"ExperimentalCommonIcon"},{label:"Rarity \u2014 Rare",value:"ExperimentalRareIcon"},{label:"Rarity \u2014 Epic",value:"ExperimentalEpicIcon"},{label:"Rarity \u2014 Mythic",value:"ExperimentalMythicIcon"}]}}}]};var eC=a(408278),ej=a(111159),eS=a(123292),ek=a(825484);let ew={title:"Buttons",stories:[{name:"Button",id:"button",component:C.$,docs:"https://design.discord.tools/components/web/buttons/button",controls:{text:{label:"Text",type:"text",defaultValue:"Click me"},variant:{label:"Variant",type:"select",defaultValue:"primary",options:[{label:"Primary",value:"primary"},{label:"Secondary",value:"secondary"},{label:"Critical Primary",value:"critical-primary"},{label:"Critical Secondary",value:"critical-secondary"},{label:"Active",value:"active"},{label:"Overlay Primary",value:"overlay-primary"},{label:"Overlay Secondary",value:"overlay-secondary"},{label:"Expressive",value:"expressive"}]},size:{label:"Size",type:"select",defaultValue:"md",options:[{label:"Small",value:"sm"},{label:"Medium",value:"md"}]},disabled:{label:"Disabled",type:"boolean",defaultValue:!1},loading:{label:"Loading",type:"boolean",defaultValue:!1},fullWidth:{label:"Full Width",type:"boolean",defaultValue:!1},minWidth:{label:"Min width",type:"text",defaultValue:""}}},{name:"IconButton",id:"icon-button",docs:"https://design.discord.tools/components/web/buttons/icon-button",component:function(e){return(0,t.jsx)(eC.K,{...e,icon:ej.p,"aria-label":"Clyde"})},controls:{variant:{label:"Variant",type:"select",defaultValue:"primary",options:[{label:"Primary",value:"primary"},{label:"Secondary",value:"secondary"},{label:"Critical Primary",value:"critical-primary"},{label:"Critical Secondary",value:"critical-secondary"},{label:"Active",value:"active"},{label:"Overlay Primary",value:"overlay-primary"},{label:"Overlay Secondary",value:"overlay-secondary"},{label:"Icon Only",value:"icon-only"}]},size:{label:"Size",type:"select",defaultValue:"md",options:[{label:"Small",value:"sm"},{label:"Medium",value:"md"}]},disabled:{label:"Disabled",type:"boolean",defaultValue:!1},loading:{label:"Loading",type:"boolean",defaultValue:!1}}},{name:"TextButton",id:"text-button",docs:"https://design.discord.tools/components/web/buttons/text-button",component:eS.Q,controls:{text:{label:"Text",type:"text",defaultValue:"Link Button"},variant:{label:"Variant",type:"select",defaultValue:"primary",options:[{label:"Primary",value:"primary"},{label:"Secondary",value:"secondary"},{label:"Always White",value:"always-white"},{label:"Critical",value:"critical"}]},disabled:{label:"Disabled",type:"boolean",defaultValue:!1}}},{name:"ButtonGroup",id:"button-group",docs:"https://design.discord.tools/components/web/buttons/button-group",component:function(e){return(0,t.jsxs)(ek.e,{...e,children:[(0,t.jsx)(C.$,{variant:"secondary",text:"Cancel"}),(0,t.jsx)(C.$,{variant:"primary",text:"Submit"})]})},controls:{size:{label:"Size",type:"select",defaultValue:"md",options:[{label:"Small",value:"sm"},{label:"Medium",value:"md"}]},direction:{label:"Direction",type:"select",defaultValue:"horizontal",options:[{label:"Horizontal",value:"horizontal"},{label:"Vertical",value:"vertical"}]},fullWidth:{label:"Full Width",type:"boolean",defaultValue:!1}}}]};var eM=a(939546),eT=a(928231),eD=a(822986),eE=a(720341),eL=a(683071);let eI=(0,a(240921).Ay)({kind:"user",name:"2025-10-mana-date-inputs",defaultConfig:{enabled:!1},variations:{1:{enabled:!0}}});function eA(e){return eI.useConfig({location:e}).enabled}let eR={title:"Calendar",stories:[{id:"calendar",name:"Calendar",component:function(e){let{disabled:l,readOnly:a,showMinMax:i}=e,[n,s]=o.useState((0,eM.Ec)((0,eM.Xj)())),r=o.useCallback(e=>{s(e)},[]),d=o.useCallback(()=>{s(null)},[]),u=o.useCallback(()=>{s((0,eM.Ec)((0,eM.Xj)()))},[]),c=o.useCallback(()=>{s((0,eT._U)("2024-12-25"))},[]);return eA("CalendarStory")?(0,t.jsxs)(D.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(eE.V,{value:n,onChange:r,disabled:l,readOnly:a,minValue:i?(0,eT._U)("2024-01-01"):void 0,maxValue:i?(0,eT._U)("2024-12-31"):void 0,"aria-label":"Select a date"}),(0,t.jsxs)(p.E,{variant:"text-sm/normal",children:["Selected date: ",null!=n?(0,eD.default)(n.toDate((0,eM.Xj)()),"MMMM d, yyyy"):"None"]}),(0,t.jsxs)(D.B,{direction:"horizontal",gap:"sm",children:[(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"Clear",onClick:d,disabled:l||a}),(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"Set Today",onClick:u,disabled:l||a}),(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"Set Dec 25",onClick:c,disabled:l||a})]})]}):(0,t.jsxs)(eL.w,{type:"critical",children:["This component is experimental and only available behind the ",(0,t.jsx)("code",{children:"2025-10-mana-date-inputs"})," ","experiment. Do not use this in production yet."]})},controls:{disabled:{type:"boolean",label:"Disabled",defaultValue:!1},readOnly:{type:"boolean",label:"Read Only",defaultValue:!1},showMinMax:{type:"boolean",label:"Show Min/Max (2024)",defaultValue:!1}}}]};var eN=a(885574),eP=a(150934);let eO={title:"Checkbox",stories:[{id:"checkbox",name:"Checkbox",component:function(e){let{label:l,description:a,disabled:i,labelType:n,showIcons:s}=e,[r,d]=o.useState(!1),u=o.useCallback(()=>{d(!0)},[]),c=o.useCallback(()=>{d(!1)},[]),b=o.useCallback(()=>{d(e=>!e)},[]);return(0,t.jsxs)(D.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(eP.S,{checked:r,onChange:e=>d(e),disabled:i,label:l,description:null!=a||""===a?a:void 0,value:"checkbox-value",labelType:n,leadingIcon:s?eN.m:void 0}),(0,t.jsxs)(p.E,{variant:"text-sm/normal",children:["Current state: ",r?"Checked":"Unchecked"]}),(0,t.jsxs)(D.B,{direction:"horizontal",gap:"sm",children:[(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"Check",onClick:u,disabled:i}),(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"Uncheck",onClick:c,disabled:i}),(0,t.jsx)(C.$,{variant:"primary",size:"sm",text:"Toggle",onClick:b,disabled:i})]})]})},controls:{label:{type:"text",label:"Label",defaultValue:"Accept terms and conditions"},disabled:{type:"boolean",label:"Disabled",defaultValue:!1},labelType:{type:"select",label:"Label Type",options:[{label:"Primary",value:"primary"},{label:"Secondary",value:"secondary"}],defaultValue:"primary"},description:{type:"text",label:"Description",defaultValue:""},showIcons:{type:"boolean",label:"Show Icons",defaultValue:!1}}}]};var eB=a(167417);let ez={title:"CheckboxGroup",stories:[{id:"checkboxgroup",name:"CheckboxGroup",component:function(e){let{disabled:l,optionCount:a,label:i,optionLabel:n,description:s,showIcons:r,withMixedDisabledOptions:d}=e,[u,c]=o.useState(["option1"]),b=o.useMemo(()=>[{label:null!=n?`${n} 1`:"Option 1",value:"option1",description:null==s||""===s?void 0:s,leadingIcon:r?eN.m:void 0,disabled:!d&&void 0},{label:null!=n?`${n} 2`:"Option 2",value:"option2",description:null==s||""===s?void 0:s,leadingIcon:r?eN.m:void 0,disabled:!!d||void 0},{label:null!=n?`${n} 3`:"Option 3",value:"option3",description:null==s||""===s?void 0:s,leadingIcon:r?eN.m:void 0,disabled:!d&&void 0},{label:null!=n?`${n} 4`:"Option 4",value:"option4",description:null==s||""===s?void 0:s,leadingIcon:r?eN.m:void 0,disabled:!!d||void 0},{label:null!=n?`${n} 5`:"Option 5",value:"option5",description:null==s||""===s?void 0:s,leadingIcon:r?eN.m:void 0,disabled:!d&&void 0}].slice(0,Math.max(1,Math.min(5,a))),[a,n,s,r,d]),m=o.useCallback(e=>{c(e)},[]),x=o.useCallback(()=>{c(b.map(e=>e.value))},[b]),y=o.useCallback(()=>{c([])},[]),h=o.useCallback(()=>{b.length>0&&c([b[0].value])},[b]);return(0,t.jsxs)(D.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(eB.$,{selectedValues:u,label:i,onChange:m,options:b,disabled:l}),(0,t.jsxs)(p.E,{variant:"text-sm/normal",children:["Current selection: ",u.length>0?u.join(", "):"None"]}),(0,t.jsxs)(D.B,{direction:"horizontal",gap:"sm",children:[(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"Select All",onClick:x,disabled:l||0===b.length}),(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"Select First",onClick:h,disabled:l||0===b.length}),(0,t.jsx)(C.$,{variant:"primary",size:"sm",text:"Clear All",onClick:y,disabled:l})]})]})},controls:{label:{type:"text",label:"Label",defaultValue:"Mana Checkbox Group"},disabled:{type:"boolean",label:"Disabled",defaultValue:!1},optionCount:{type:"select",label:"Number of Options",options:[{label:"1",value:1},{label:"2",value:2},{label:"3",value:3},{label:"4",value:4},{label:"5",value:5}],defaultValue:3},optionLabel:{type:"text",label:"Option Label",defaultValue:"Option"},description:{type:"text",label:"Description",defaultValue:""},showIcons:{type:"boolean",label:"Show Icons",defaultValue:!1},withMixedDisabledOptions:{type:"boolean",label:"Mixed Disabled Options",defaultValue:!1}}}]};var eG=a(441349);let eF={title:"DatePicker",stories:[{id:"date-picker",name:"DatePicker",component:function(e){let{label:l,description:a,errorMessage:i,disabled:n,required:s,showMinMax:r}=e,[d,u]=o.useState((0,eM.Ec)((0,eM.Xj)())),c=o.useCallback(e=>{u(e)},[]),b=o.useCallback(()=>{u(null)},[]),p=o.useCallback(()=>{u((0,eM.Ec)((0,eM.Xj)()))},[]),m=o.useCallback(()=>{u((0,eT._U)("2024-12-25"))},[]);return eA("CalendarStory")?(0,t.jsxs)(D.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(eG.l,{label:l,description:""!==a?a:void 0,value:d,onChange:c,disabled:n,required:s,minValue:r?(0,eT._U)("2024-01-01"):void 0,maxValue:r?(0,eT._U)("2024-12-31"):void 0,errorMessage:""!==i?i:void 0,helperText:null!=d?(0,eD.default)(d.toDate((0,eM.Xj)()),"MMMM d, yyyy"):""}),(0,t.jsxs)(D.B,{direction:"horizontal",gap:"sm",children:[(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"Clear",onClick:b,disabled:n}),(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"Set Today",onClick:p,disabled:n}),(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"Set Dec 25",onClick:m,disabled:n})]})]}):(0,t.jsxs)(eL.w,{type:"critical",children:["This component is experimental and only available behind the ",(0,t.jsx)("code",{children:"2025-10-mana-date-inputs"})," ","experiment. Do not use this in production yet."]})},controls:{label:{type:"text",label:"Label",defaultValue:"Select a date"},description:{type:"text",label:"Description",defaultValue:"Choose your preferred date"},errorMessage:{type:"text",label:"Error Message",defaultValue:""},disabled:{type:"boolean",label:"Disabled",defaultValue:!1},required:{type:"boolean",label:"Required",defaultValue:!1},showMinMax:{type:"boolean",label:"Show Min/Max (2024)",defaultValue:!1}}}]};var e$=a(421114),e_=a(830840),eH=a(719659),eq=a(711846),eU=a(538790),eX=a(794655),eW=a(561392),eZ=a(499957),eY=a(81466),eK=a(862301),eQ=a(460890),eJ=a(345810),e0=a(376887),e1=a(668953),e2=a(881636),e4=a(22161);function e3(e){let{value:l,onChange:a,minValue:i,maxValue:n,isDisabled:s=!1,isReadOnly:r=!1,visibleMonths:d=1,className:u,"aria-label":c}=e,{i18n:m,locale:x}=(0,eQ.G9)(),y=l?.start??null,[h,v]=o.useState(y);return o.useEffect(()=>{v(y)},[y]),(0,t.jsx)(eJ._e,{value:l,focusedValue:h,onFocusChange:v,onChange:a,minValue:i,maxValue:n,isDisabled:s,isReadOnly:r,visibleDuration:{months:d},"aria-label":c,"data-mana-component":"range-calendar",className:b()(e4.BJ,d>1&&e4.Q7,u),children:e=>(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)("header",{className:e4.I4,children:[(0,t.jsx)(eC.K,{variant:"icon-only",size:"sm",icon:e1.f,"aria-label":m.CALENDAR_PREVIOUS_MONTH_LABEL,onClick:()=>e.state.focusPreviousPage(),slot:"previous"}),(0,t.jsx)("div",{className:e4.Wb,"aria-live":"polite",children:Array.from({length:d},(l,a)=>{let o=e.state.visibleRange.start.add({months:a}).toDate(e.state.timeZone).toLocaleDateString(x,{month:"long",year:"numeric"});return(0,t.jsx)(p.E,{variant:"text-md/medium",color:"text-strong",children:o},a)})}),(0,t.jsx)(eC.K,{variant:"icon-only",size:"sm",icon:e2.u,onClick:()=>e.state.focusNextPage(),"aria-label":m.CALENDAR_NEXT_MONTH_LABEL,slot:"next"})]}),(0,t.jsx)("div",{className:e4.US,children:Array.from({length:d},(e,l)=>(0,t.jsx)(e0.N,{offset:{months:l},isRangeSelection:!0},l))})]})})}var e6=a(380641);function e5(e){let{value:l,onChange:a,minValue:o,maxValue:i,placeholderValue:n,startName:s,endName:r,fullWidth:d=!1,granularity:u="day",...c}=e,{i18n:p}=(0,eQ.G9)(),{fieldProps:m}=(0,E.n)(c),{disabled:x,errorMessage:y,required:h=!1}=m,v={hasError:null!=y&&""!==y},{refs:g,floatingStyles:f,isOpen:V,setIsOpen:C,context:j,getFloatingProps:S,getReferenceProps:k}=(0,eW.u)({matchReferenceWidth:!1,placement:"bottom-start"}),{isMounted:w,styles:M}=(0,eZ.DL)(j,{common:e=>{let{side:l}=e;return{transformOrigin:`${"top"===l?"bottom":"top"} center`}},initial:{opacity:.5,transform:"scaleY(0.96)"},duration:100}),T=e=>{a(e),e?.start!=null&&e?.end!=null&&C(!1)};return(0,t.jsx)(E.D,{...m,children:e=>(0,t.jsx)(eK.F,{className:d?e6.e2:"minute"===u?e6.oU:e6.qX,validation:v,ref:g.setReference,...k(),children:(0,t.jsxs)(e_.Ur,{id:e.controlId,"aria-labelledby":e.labelId,"aria-describedby":e.describedById,"aria-invalid":null!=e.errorMessageId,"aria-errormessage":e.errorMessageId,value:l,onChange:T,isDisabled:x,isRequired:h,minValue:o,maxValue:i,placeholderValue:n,granularity:u,startName:s,endName:r,"data-mana-component":"date-range-picker",className:e6.Nz,children:[(0,t.jsxs)(eH.Y,{className:e6.wO,children:[(0,t.jsx)(eq.J3,{slot:"start",children:e=>(0,t.jsx)(eq.Eu,{segment:e,className:b()(e6.mX,e.isPlaceholder&&e6.qf)})}),(0,t.jsx)("span",{className:e6.me,"aria-hidden":"true",children:"\u2192"}),(0,t.jsx)(eq.J3,{slot:"end",children:e=>(0,t.jsx)(eq.Eu,{segment:e,className:b()(e6.mX,e.isPlaceholder&&e6.qf)})}),(0,t.jsx)(eU.$,{className:e6.B7,onClick:()=>C(!V),"aria-label":p.DATE_INPUT_OPEN_CALENDAR_LABEL,children:(0,t.jsx)(eY.C,{size:"sm",color:"currentColor"})})]}),V&&w&&(0,t.jsx)("div",{...S(),ref:g.setFloating,style:f,className:e6.oO,children:(0,t.jsx)(e$.n1,{contain:!0,restoreFocus:!0,children:(0,t.jsx)(eX.lG,{"aria-label":p.DATE_INPUT_OPEN_CALENDAR_LABEL,style:M,className:e6.r3,children:(0,t.jsx)(e3,{value:l,onChange:T,minValue:o,maxValue:i,isDisabled:x,visibleMonths:2})})})})]})})})}let e8={title:"DateRangePicker",stories:[{id:"date-range-picker",name:"DateRangePicker",component:function(e){let{label:l,errorMessage:a,description:i,disabled:n,required:s,showMinMax:r}=e,[d,u]=o.useState({start:(0,eM.Ec)((0,eM.Xj)()),end:(0,eM.Ec)((0,eM.Xj)()).add({days:7})}),c=o.useCallback(e=>{u(e)},[]),b=o.useCallback(()=>{u(null)},[]),p=o.useCallback(()=>{let e=(0,eM.Ec)((0,eM.Xj)());u({start:e,end:e.add({days:7})})},[]),m=(0,eM.Ec)((0,eM.Xj)()),x=r?m.subtract({weeks:1}):void 0,y=r?m.add({weeks:2}):void 0;return eA("DateRangePickerStory")?(0,t.jsxs)(D.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(e5,{label:l,description:""!==i?i:void 0,value:d,onChange:c,disabled:n,required:s,errorMessage:""!==a?a:void 0,minValue:x,maxValue:y,helperText:function(){if(null==d)return"";let e=(0,eD.default)(d.start.toDate((0,eM.Xj)()),"MMMM d, yyyy"),l=(0,eD.default)(d.end.toDate((0,eM.Xj)()),"MMMM d, yyyy");return`${e} \u{2013} ${l}`}()}),(0,t.jsxs)(D.B,{direction:"horizontal",gap:"sm",children:[(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"Clear",onClick:b,disabled:n}),(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"This Week",onClick:p,disabled:n})]})]}):(0,t.jsxs)(eL.w,{type:"critical",children:["This component is experimental and only available behind the ",(0,t.jsx)("code",{children:"2025-10-mana-date-inputs"})," ","experiment. Do not use this in production yet."]})},controls:{label:{type:"text",label:"Label",defaultValue:"Select a date range"},description:{type:"text",label:"Description",defaultValue:"Choose your preferred date range"},errorMessage:{type:"text",label:"Error Message",defaultValue:""},disabled:{type:"boolean",label:"Disabled",defaultValue:!1},required:{type:"boolean",label:"Required",defaultValue:!1},showMinMax:{type:"boolean",label:"Show Min/Max (\xb11 week)",defaultValue:!1}}}]};var e7=a(270003),e9=a(194261),le=a(243721),ll=a(691885),la=a(508274),lt=a(109802),lo=a(259646);let li=[{label:"Aardvark",value:"aardvark",id:"aardvark"},{label:"Cat",value:"cat",id:"cat"},{label:"Dog",value:"dog",id:"dog"}],ln=[1752220,3066993,3447003,0x9b59b6,0xe91e63,0xf1c40f,0xe67e22,0xe74c3c];function ls(e){let{title:l,children:a,auxiliaryContentPosition:o}=e;return(0,t.jsx)(E.D,{disabled:!0,label:l,description:"This row is disabled at the Field level and at the control level.",helperText:"Every leaf (label, description, helper text, control) should render at a single 0.5 opacity layer.",auxiliaryContentPosition:o,children:a})}function lr(e){let{auxiliaryContentPosition:l}=e;return(0,t.jsxs)(D.B,{direction:"vertical",gap:24,children:[(0,t.jsx)(ls,{title:"Button",auxiliaryContentPosition:l,children:(0,t.jsx)("div",{children:(0,t.jsx)(C.$,{text:"Remove",variant:"critical-primary",disabled:!0})})}),(0,t.jsx)(ls,{title:"TextButton",auxiliaryContentPosition:l,children:(0,t.jsx)("div",{children:(0,t.jsx)(eS.Q,{text:"View details",variant:"primary",disabled:!0})})}),(0,t.jsx)(ls,{title:"Switch",auxiliaryContentPosition:l,children:(0,t.jsx)(le.d,{label:"Allow direct messages",disabled:!0,checked:!1,onChange:()=>{}})}),(0,t.jsx)(ls,{title:"Checkbox",auxiliaryContentPosition:l,children:(0,t.jsx)(eP.S,{label:"Accept terms",disabled:!0,checked:!1,onChange:()=>{},value:"accept-terms"})}),(0,t.jsx)(ls,{title:"InputField",auxiliaryContentPosition:l,children:(0,t.jsx)(eK.F,{disabled:!0,children:(0,t.jsx)(p.E,{variant:"text-md/normal",color:"text-subtle",children:"Inner InputField content"})})}),(0,t.jsx)(ls,{title:"Select",auxiliaryContentPosition:l,children:(0,t.jsx)(ll.l,{label:"Animal",hideLabel:!0,options:li,selectionMode:"single",onSelectionChange:()=>{},disabled:!0})}),(0,t.jsx)(ls,{title:"CopyInput",auxiliaryContentPosition:l,children:(0,t.jsx)(lt.e,{value:"https://discord.gg/disabled-example",supportsCopy:!0,onCopy:()=>{},disabled:!0})}),(0,t.jsx)(ls,{title:"ColorPicker",auxiliaryContentPosition:l,children:(0,t.jsx)(la.sk,{defaultColor:ln[0],customColor:null,colors:ln,value:ln[0],disabled:!0,onChange:()=>{},renderDefaultButton:e=>(0,t.jsx)(la.fy,{...e}),renderCustomButton:e=>(0,t.jsx)(la.nJ,{...e})})}),(0,t.jsx)(ls,{title:"TextInput",auxiliaryContentPosition:l,children:(0,t.jsx)(en.k,{label:"Username",hideLabel:!0,value:"disabled-user",onChange:()=>{},disabled:!0})})]})}let ld={title:"Forms",stories:[{name:"FieldSet",id:"fieldset",component:function(e){let{label:l}=e;return(0,t.jsx)("div",{children:(0,t.jsxs)(e7.n,{label:""===l?void 0:l,children:[(0,t.jsx)(en.k,{label:"First Name"}),(0,t.jsx)(en.k,{label:"Last Name"}),(0,t.jsx)(en.k,{label:"Address"})]})})},controls:{label:{type:"text",label:"Label",defaultValue:"Billing Address"}}},{name:"Field",id:"formcontrol",component:function(e){let{description:l,...a}=e;return(0,t.jsx)("div",{children:(0,t.jsx)(E.D,{...a,description:""===l?void 0:l,icon:a.showIcon?e9.X:void 0,children:(0,t.jsx)("div",{className:lo.q,children:(0,t.jsx)(p.E,{color:"text-subtle",variant:"text-md/medium",children:"Field"})})})})},controls:{label:{type:"text",label:"Label",defaultValue:"First Name"},description:{type:"text",label:"Description",defaultValue:"This is the first name of the user"},helperText:{type:"text",label:"Helper Text",defaultValue:"This is the helper text for the form control"},required:{type:"boolean",label:"Required",defaultValue:!1},errorMessage:{type:"text",label:"Error Message",defaultValue:""},layout:{type:"select",label:"Layout",defaultValue:"vertical",options:[{label:"Vertical",value:"vertical"},{label:"Horizontal",value:"horizontal"},{label:"Horizontal (Responsive)",value:"horizontal-responsive"}]},badge:{type:"select",label:"Badge",defaultValue:void 0,options:[{label:"None",value:void 0},{label:"New",value:"new"},{label:"Beta",value:"beta"},{label:"Early Access",value:"early_access"},{label:"Free Trial",value:"free_trial"}]},showIcon:{type:"boolean",label:"Show Icon",defaultValue:!1}}},{name:"Field (Disabled, under-control)",id:"field-disabled-under-control",component:lr,controls:{auxiliaryContentPosition:{type:"select",label:"Auxiliary Content Position",defaultValue:"under-control",options:[{label:"Under Control (default)",value:"under-control"},{label:"Under Label",value:"under-label"}]}}},{name:"Field (Disabled, under-label)",id:"field-disabled-under-label",component:function(){return(0,t.jsx)(lr,{auxiliaryContentPosition:"under-label"})}}]};var lu=a(935063),lc=a(307301),lb=a(404778),lp=a(661531),lm=a(584454),lx=a(892547),ly=a(260598);let lh=[{id:"strength",label:"Strength",icon:lu.X},{id:"wisdom",label:"Wisdom",icon:{type:"role",color:lp.A.unsafe_rawColors.BRAND_500.css}},{id:"charisma",label:"Charisma"},{id:"intelligence",label:"Intelligence"},{id:"dexterity",label:"Dexterity"},{id:"constitution",label:"Constitution"}],lv={title:"Input Components",stories:[{name:"TextInput",component:function(e){let{leading:l,trailing:a,...i}=e,[n,s]=o.useState(""),[d,u]=o.useState(lh),c=o.useCallback(e=>{u(d.filter(l=>!e.has(l.id)))},[d]);return(0,t.jsxs)(D.B,{gap:16,children:[(0,t.jsx)(en.k,{...i,value:n,onChange:s,leading:function(e){switch(e){case"tags":return{type:"tags",label:"Tags",items:d,onRemove:c};case"icon":return{icon:lu.X,onClick:r.tE,"aria-label":"At"};case"text":return"https://discord.gg/";default:return}}(l),trailing:"icon"===a?{icon:lc.j,onClick:r.tE,"aria-label":"At"}:void 0,maxLength:500}),"tags"===l?(0,t.jsx)(C.$,{text:"Reset Tags",size:"sm",variant:"secondary",onClick:()=>u(lh)}):null]})},id:"text-input",controls:{type:{label:"Input Type",type:"select",defaultValue:"text",options:[{label:"Text",value:"text"},{label:"Password",value:"password"},{label:"Email",value:"email"}]},label:{label:"Label",type:"text",defaultValue:"Example Label"},hideLabel:{label:"Hide Label",type:"boolean",defaultValue:!1},description:{label:"Description",type:"text",defaultValue:"This is an example description"},required:{label:"Required",type:"boolean",defaultValue:!1},placeholder:{label:"Placeholder",type:"text",defaultValue:"Enter some text..."},error:{label:"Error Message",type:"text",defaultValue:void 0},helperText:{label:"Helper Text",type:"text",defaultValue:void 0},minLength:{label:"Min Length",type:"number",defaultValue:0},showCharacterCount:{label:"Show Character Count",type:"boolean",defaultValue:!1},clearable:{label:"Clearable",type:"boolean",defaultValue:!1},disabled:{label:"Disabled",type:"boolean",defaultValue:!1},readOnly:{label:"Read Only",type:"boolean",defaultValue:!1},leading:{label:"Leading",type:"select",defaultValue:"none",options:[{label:"None",value:"none"},{label:"Tags",value:"tags"},{label:"Icon",value:"icon"},{label:"Text",value:"text"}]},trailing:{label:"Trailing",type:"select",defaultValue:"none",options:[{label:"None",value:"none"},{label:"Icon",value:"icon"}]}}},{name:"SearchBar",component:function(e){let[l,a]=o.useState("");return(0,t.jsx)(lx.I,{...e,query:l,onChange:a,onClear:e.clearable?()=>a(""):void 0})},id:"search-bar",controls:{placeholder:{label:"Placeholder",type:"text",defaultValue:"Search..."},size:{label:"Size",type:"select",defaultValue:"md",options:[{label:"Small",value:"sm"},{label:"Medium",value:"md"}]},clearable:{label:"Clearable",type:"boolean",defaultValue:!1},disabled:{label:"Disabled",type:"boolean",defaultValue:!1}}},{name:"TextArea",id:"text-area",component:function(e){let[l,a]=o.useState("");return(0,t.jsx)(ly.f,{...e,value:l,onChange:a})},controls:{label:{label:"Label",type:"text",defaultValue:"Example Label"},hideLabel:{label:"Hide Label",type:"boolean",defaultValue:!1},required:{label:"Required",type:"boolean",defaultValue:!1},description:{label:"Description",type:"text",defaultValue:"This is an example description"},helperText:{label:"Helper Text",type:"text",defaultValue:void 0},placeholder:{label:"Placeholder",type:"text",defaultValue:"Enter your message..."},error:{label:"Error Message",type:"text",defaultValue:void 0},rows:{label:"Rows",type:"number",defaultValue:3},autosize:{label:"Autosize",type:"boolean",defaultValue:!1},maxLength:{label:"Max Length",type:"number",defaultValue:1e3},showCharacterCount:{label:"Show Character Count",type:"boolean",defaultValue:!1},disabled:{label:"Disabled",type:"boolean",defaultValue:!1}}},{name:"NumberInput",id:"number-input",component:function(e){let[l,a]=o.useState(0);return(0,t.jsx)(lm.Q,{...e,value:l,onChange:a})},controls:{label:{label:"Label",type:"text",defaultValue:"Example Label"},hideLabel:{label:"Hide Label",type:"boolean",defaultValue:!1},description:{label:"Description",type:"text",defaultValue:"This is an example description"},required:{label:"Required",type:"boolean",defaultValue:!1},placeholder:{label:"Placeholder",type:"text",defaultValue:"Enter a number..."},error:{label:"Error Message",type:"text",defaultValue:void 0},helperText:{label:"Helper Text",type:"text",defaultValue:void 0},min:{label:"Min",type:"number",defaultValue:void 0},max:{label:"Max",type:"number",defaultValue:void 0},step:{label:"Step",type:"number",defaultValue:1},mode:{label:"Mode",type:"select",defaultValue:"integer",options:[{label:"Integer",value:"integer"},{label:"Decimal",value:"decimal"}]},clearable:{label:"Clearable",type:"boolean",defaultValue:!1},disabled:{label:"Disabled",type:"boolean",defaultValue:!1},readOnly:{label:"Read Only",type:"boolean",defaultValue:!1}}},{name:"Input Collection",id:"input-collection",component:function(e){let{label:l,hideLabel:a,description:o,required:i,error:n,disabled:s,placeholder:d,value:u="",readOnly:c,helperText:b,successMessage:p,showCharacterCount:m}=e,x={label:l,hideLabel:a,description:o,required:i,value:u,error:n,disabled:s,placeholder:d,readOnly:c,helperText:b,showCharacterCount:m,successMessage:p};return(0,t.jsxs)(D.B,{gap:24,children:[(0,t.jsxs)(e7.n,{label:"Text Input",children:[(0,t.jsx)(en.k,{...x}),(0,t.jsx)(en.k,{...x,clearable:!0}),(0,t.jsx)(en.k,{...x,leading:{icon:lu.X,onClick:r.tE,"aria-label":"At"}}),(0,t.jsx)(en.k,{...x,leading:lu.X}),(0,t.jsx)(en.k,{...x,leading:"https://discord.gg/"}),(0,t.jsx)(en.k,{...x,trailing:{icon:lu.X,onClick:r.tE,"aria-label":"At"}}),(0,t.jsx)(en.k,{...x,trailing:lu.X}),(0,t.jsx)(en.k,{...x,leading:{type:"tags",label:"Tags",items:lh.slice(0,3)}})]}),(0,t.jsx)(lb.c,{}),(0,t.jsxs)(e7.n,{label:"Search Bar",children:[(0,t.jsx)(lx.I,{query:u,onChange:r.tE,disabled:s,placeholder:d}),(0,t.jsx)(lx.I,{query:u,onChange:r.tE,size:"sm",disabled:s,placeholder:d})]}),(0,t.jsx)(lb.c,{}),(0,t.jsx)(e7.n,{label:"Text Area",children:(0,t.jsx)(ly.f,{...x})})]})},controls:{value:{label:"Value",type:"text",defaultValue:""},placeholder:{label:"Placeholder",type:"text",defaultValue:"Enter some text..."},label:{label:"Label",type:"text",defaultValue:"Example Label"},hideLabel:{label:"Hide Label",type:"boolean",defaultValue:!1},description:{label:"Description",type:"text",defaultValue:"This is an example description"},required:{label:"Required",type:"boolean",defaultValue:!1},error:{label:"Error Message",type:"text",defaultValue:void 0},successMessage:{label:"Success Message",type:"text",defaultValue:void 0},helperText:{label:"Helper Text",type:"text",defaultValue:void 0},showCharacterCount:{label:"Show Character Count",type:"boolean",defaultValue:!1},disabled:{label:"Disabled",type:"boolean",defaultValue:!1},readOnly:{label:"Read Only",type:"boolean",defaultValue:!1}}}]};a(321073);var lg=a(102079),lf=a(224640),lV=a(430993),lC=a(276293),lj=a(189213),lS=a(772707),lk=a(347704),lw=a(192308),lM=a(116833),lT=a(783878),lD=a(521489),lE=a(314116);let lL="/assets/f66ae7bb8510ab4f.svg";function lI(){return(0,t.jsx)(p.E,{variant:"text-sm/normal",color:"text-subtle",children:"Lost access to your radness? Talk to your radness provider to refresh your aura."})}function lA(e){let{setIsSafetyAccepted:l,setIsHelmetSelected:a}=e,[i,n]=o.useState([]),s=[{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(i.length===s.length),a(i.includes("helmet"))},[i,s.length,l,a]),(0,t.jsx)(eB.$,{label:"Safety checklist",options:s,selectedValues:i,onChange:n})}function lR(e){let{setIsPasscodeValid:l}=e,[a,i]=o.useState("");return(0,t.jsx)(en.k,{placeholder:"Enter your passcode...",value:a,onChange:function(e){i(e),l(e.length>0)}})}function lN(e){let{callbackDelay:l,failOnNext:a,failOnComplete:i,onCompleteAlert:n,onNextAlert:s,customErrorNotice:r,errorNoticeType:d,...u}=e,[c,b]=o.useState("intro"),[p,m]=o.useState(!1),[x,y]=o.useState(!1),[h,v]=o.useState(!1),[g,f]=o.useState(null),V=o.useCallback(async()=>{if(f(null),l>0&&await new Promise(e=>setTimeout(e,1e3*l)),s&&alert("onNext callback fired"),a){if(""!==r.trim())return f({message:r,type:d}),!1;throw Error("onNext failed")}return!0},[l,a,s,r,d]),C=o.useCallback(async()=>{if(f(null),l>0&&await new Promise(e=>setTimeout(e,1e3*l)),n&&alert("onComplete callback fired"),i){if(""!==r.trim())throw f({message:r,type:d}),Error("Custom error");throw Error("onComplete failed")}},[l,i,n,r,d]),j=[{stepKey:"intro",modalProps:{title:"Verify radness",subtitle:"To verify your radness, we need to ask you a few deep and personal questions.",notice:null!=g?{message:g.message,type:g.type}:void 0},body:(0,t.jsx)(lI,{}),nextButtonProps:{text:"Verify"},onNext:V},{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!=g?{message:g.message,type:g.type}:h?{message:"Great job, helmets are important for protecting your brain!",type:"warning"}:void 0},body:(0,t.jsx)(lA,{setIsSafetyAccepted:m,setIsHelmetSelected:v}),nextEnabled:p,onNext:V},{stepKey:"passcode",modalProps:{title:"Enter passcode",subtitle:"Enter your passcode to complete the radness verification process.",notice:null!=g?{message:g.message,type:g.type}:void 0},body:(0,t.jsx)(lR,{setIsPasscodeValid:y}),nextButtonProps:{text:"Verify passcode"},nextEnabled:x}],S=j.slice(1).map(e=>e.stepKey);return(0,t.jsx)(lk.t,{steps:j,currentStepKey:c,numberedSteps:S,onStepChange:b,onComplete:C,...u})}let lP={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,...i}=e,n=o?{text:i.subtitle??"Default subtitle",leadingIcon:lC.N}:i.subtitle;return(0,t.jsxs)(D.B,{gap:16,align:"center",children:[(0,t.jsx)(p.E,{variant:"text-md/normal",children:"Click the button below to open the modal"}),(0,t.jsx)(C.$,{variant:"primary",text:"Open Modal",onClick:()=>(0,lw.openModal)(e=>(0,t.jsx)(lj.Modal,{...e,...i,title:i.title,subtitle:n,input:a?(0,t.jsx)(lx.I,{placeholder:"Search...",onChange:()=>{},query:""}):void 0,preview:l?(0,t.jsxs)(D.B,{gap:8,children:[(0,t.jsx)(p.E,{variant:"text-lg/semibold",children:"Preview Content"}),(0,t.jsx)(p.E,{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.B,{gap:16,children:[(0,t.jsx)(lT.Z,{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)(en.k,{label:"Example Input",placeholder:"Enter some text..."}),(0,t.jsx)(p.E,{variant:"text-md/normal",children:"This is the main content area of the modal. You can place any content here."})]})}),{dismissable:i.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:i,subtitle:n,formatSubtitle:s,...r}=e,d=o.useMemo(()=>s?function(e){let l,a=[],o=0,i=/\*\*(.+?)\*\*/g,n=0;for(;null!==(l=i.exec(e));)l.index>o&&a.push(e.substring(o,l.index)),a.push((0,t.jsx)("strong",{children:l[1]},n++)),o=i.lastIndex;return o<e.length&&a.push(e.substring(o)),a.length>0?a:e}(n):n,[n,s]);return(0,t.jsxs)(D.B,{gap:16,align:"center",children:[(0,t.jsx)(p.E,{variant:"text-md/normal",children:"Click the button below to open the confirm modal"}),(0,t.jsx)(C.$,{variant:"primary",text:"Open Confirm Modal",onClick:()=>(0,lE.A)({...r,subtitle:d,cancelText:""===l?void 0:l,onConfirm:async e=>{try{if(await new Promise(e=>setTimeout(e,1e3*a)),i)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:i,...n}=e,s=i?{text:n.subtitle??"Default subtitle",leadingIcon:lC.N}:n.subtitle,r=o.useMemo(()=>{switch(l){case 0:return{type:"image",src:lL};case 1:return{type:"lottie",lottie:()=>a.e("995947").then(a.t.bind(a,604902,19)),aspectRatio:"6/4"};case 2:return{type:"rive",rive:lg.Q};case 3:return{type:"video",src:"https://cdn.discordapp.com/assets/content/06fafa729efafb6235e0ee9df9482566fa9e74b96a792a9265dca70113c71ab7.webm",fallbackImageSrc:lL,loop:!0,loopAt:2.5};case 4:return{type:"dynamic",component:lM.DynamicGraphicComponent.DEMO,aspectRatio:"6/4",props:{text:"Dynamic Content"}};default:return}},[l]);return(0,t.jsxs)(D.B,{gap:16,align:"center",children:[(0,t.jsx)(p.E,{variant:"text-md/normal",children:"Click the button below to open the expressive modal"}),(0,t.jsx)(C.$,{variant:"primary",text:"Open ExpressiveModal",onClick:()=>(0,lw.openModal)(e=>(0,t.jsx)(lS.k,{...e,...n,title:n.title,subtitle:s,graphic:r,actions:[{variant:"secondary",text:"Cancel",onClick:e.onClose},{variant:"primary",text:"Submit",onClick:e.onClose}],children:(0,t.jsx)(D.B,{gap:16,children:(0,t.jsx)(p.E,{variant:"text-md/normal",children:"This is an expressive modal with a gradient background and optional badge."})})}),{dismissable:n.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,i={type:"dynamic",component:lM.DynamicGraphicComponent.DEMO,aspectRatio:"6/4",props:{text:l}};return(0,t.jsxs)(D.B,{gap:16,align:"center",children:[(0,t.jsx)(p.E,{variant:"text-md/normal",children:"This example demonstrates the DynamicGraphic component rendering a React component inside the modal header."}),(0,t.jsx)(C.$,{variant:"primary",text:"Open Dynamic Graphic Modal",onClick:()=>(0,lw.openModalLazy)(async()=>{let{ExpressiveModal:e}=await a.e("304823").then(a.bind(a,158954));return l=>(0,t.jsx)(e,{...l,...o,title:o.title,subtitle:o.subtitle,graphic:i,actions:[{variant:"secondary",text:"Cancel",onClick:l.onClose},{variant:"primary",text:"Submit",onClick:l.onClose}],children:(0,t.jsx)(D.B,{gap:16,children:(0,t.jsx)(p.E,{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.B,{gap:16,align:"center",children:[(0,t.jsx)(p.E,{variant:"text-md/normal",children:"Click the button below to open the layer modal"}),(0,t.jsx)(C.$,{variant:"primary",text:"Open Layer Modal",onClick:()=>(0,lw.openModal)(e=>(0,t.jsx)(lD.N,{...e,...l,children:(0,t.jsx)(D.B,{gap:16,children:(0,t.jsx)(p.E,{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:i,onNextAlert:n,customErrorNotice:s,errorNoticeType:r}=e;return(0,t.jsxs)(D.B,{gap:16,align:"center",children:[(0,t.jsx)(p.E,{variant:"text-md/normal",children:"Click the button below to open the multi-step modal"}),(0,t.jsx)(C.$,{variant:"primary",text:"Open MultiStepModal",onClick:()=>(0,lw.openModal)(e=>(0,t.jsx)(lN,{...e,callbackDelay:l,failOnNext:a,failOnComplete:o,onCompleteAlert:i,onNextAlert:n,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.B,{gap:16,align:"center",children:[(0,t.jsx)(p.E,{variant:"text-md/normal",children:"Click the button below to open the base modal"}),(0,t.jsx)(C.$,{variant:"primary",text:"Open BaseModal",onClick:()=>(0,lw.openModal)(e=>(0,t.jsx)(lf.d,{...e,...o,"aria-label":"Base Modal Example",children:(0,t.jsx)(lV.c,{children:(0,t.jsxs)(D.B,{gap:16,children:[(0,t.jsx)(p.E,{variant:"text-lg/semibold",children:"BaseModal Content"}),(0,t.jsx)(p.E,{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)(p.E,{variant:"text-md/normal",children:["Item ",l+1," \u2014 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}}}]};var lO=a(249686),lB=a.n(lO),lz=a(43105),lG=a(338854),lF=a(353795),l$=a(273875),l_=a(798618),lH=a(916845),lq=a(627330),lU=a(375708),lX=a(753094);function lW(e){let{steps:l,caretConfig:a={align:"center"},size:i="md",onStepChange:n,onRequestClose:s,popoverRef:r,shouldShow:d,position:u,...c}=e,[m,x]=o.useState(0);o.useEffect(()=>{d&&x(0)},[d]),o.useEffect(()=>{n?.(m)},[m,n]);let y=l[m],h=m+1===l.length,v=o.useCallback(()=>{y?.onCta?.(),h?s?.():x(e=>e+1)},[y,h,s]),g=o.useCallback(()=>{s?.()},[s]),f=o.useCallback(()=>{s?.()},[s]);if(!d||null==y)return null;let V={text:y.action?.text??(h?lU.intl.string(lU.t.i4jeWR):lU.intl.string(lU.t.PDTjLN)),variant:y.action?.variant??"primary",onClick:v,...y.action},j={targetElementRef:c.targetElementRef,hasVideo:c.hasVideo,scrollBehavior:c.scrollBehavior,position:u,shouldShow:d,onRequestClose:g,gradientColor:y.gradientColor,caretConfig:a,..."edge"===c.alignmentStrategy?{alignmentStrategy:"edge",align:c.align}:{alignmentStrategy:"trigger-center"}};return(0,t.jsx)(l$.x,{...j,children:(0,t.jsxs)("div",{ref:r,children:[(0,t.jsx)(lH.q,{onClick:f,variant:null!=y.gradientColor?"color-mix":void 0}),null!=y.graphic&&(0,t.jsx)("div",{className:b()(lX.graphic,{[lX[`graphic--${i}`]]:null!=i}),children:(0,t.jsx)(lF.v,{...y.graphic,aspectRatio:y.graphic.aspectRatio??("sm"===i?"2/1":"16/9")})}),(0,t.jsx)(lq.D,{title:y.title,body:y.body,badge:y.badge,textLink:y.textLink}),(0,t.jsx)("div",{className:lX.actionBar,children:(0,t.jsxs)("div",{className:lX.multistepActionLayout,children:[(0,t.jsx)(p.E,{variant:"text-xs/normal",className:lX.multistepIndicator,children:lU.intl.formatToPlainString(lU.t.rO31eY,{count:m+1,totalSteps:l.length})}),(0,t.jsx)(C.$,{size:"sm",...V})]})}),(0,t.jsx)(l_.F,{})]})})}let lZ="https://cdn.discordapp.com/assets/content/26736d800236761a21973e6fe690dfd5fa484f664976b3bba91b98d5d47bb1f7.svg",lY={title:"Popover",stories:[{name:"Popover",id:"popover",docs:"https://design.discord.tools/components/web/popover",component:function(e){let{showAsset:l,showActions:a,showTextLink:i,caretAlign:n,alignmentStrategy:s,align:r,size:d,position:u,...c}=e,[b,p]=o.useState(!1),m=o.useRef(null);return(0,t.jsxs)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",minHeight:"400px"},children:[(0,t.jsx)(lz.A,{...c,position:u,size:d,align:r,alignmentStrategy:s,targetElementRef:m,shouldShow:b,onRequestClose:()=>p(!1),graphic:l?{type:"image",src:"sm"===d?"https://cdn.discordapp.com/assets/content/7c8ee05f499cdf960d0b69208667276e8ca276aa2edcee6141d55e237d1ed5d2.svg":lZ}:void 0,caretConfig:{align:n},actions:a?[{text:"Close",onClick:()=>p(!1)}]:void 0,textLink:i?{text:"Learn More",link:"https://discord.com",external:!0}:void 0},u),(0,t.jsx)(C.$,{variant:"primary",text:"Toggle Popover",buttonRef:m,onClick:()=>p(!b)})]})},controls:{title:{label:"Title",type:"text",defaultValue:"Sample Popover"},body:{label:"Body Text",type:"text",defaultValue:"This is a sample popover with customizable properties."},position:{label:"Position",type:"select",defaultValue:"top",options:[{label:"Top",value:"top"},{label:"Bottom",value:"bottom"},{label:"Left",value:"left"},{label:"Right",value:"right"}]},size:{label:"Size",type:"select",defaultValue:"md",options:[{label:"Small",value:"sm"},{label:"Medium",value:"md"}]},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"}]},gradientColor:{label:"Gradient Color",type:"select",defaultValue:void 0,options:[{label:"None",value:void 0},{label:"Purple",value:"purple"},{label:"Blue",value:"blue"},{label:"Nitro Pink",value:"nitro-pink"}]},caretAlign:{label:"Caret Align",type:"select",defaultValue:"center",options:[{label:"Center",value:"center"},{label:"Start",value:"start"},{label:"End",value:"end"}]},alignmentStrategy:{label:"Alignment Strategy",type:"select",defaultValue:"trigger-center",options:[{label:"Trigger Center (caret points at trigger)",value:"trigger-center"},{label:"Edge (popover edge aligns with trigger)",value:"edge"}]},align:{label:'Align (only applies with "edge" strategy)',type:"select",defaultValue:void 0,options:[{label:"None",value:void 0},{label:"Top",value:"top"},{label:"Center",value:"center"},{label:"Bottom",value:"bottom"},{label:"Left",value:"left"},{label:"Right",value:"right"}]},showAsset:{label:"Show Asset",type:"boolean",defaultValue:!0},showActions:{label:"Show Actions",type:"boolean",defaultValue:!0},showTextLink:{label:"Show Text Link",type:"boolean",defaultValue:!1}}},{name:"VideoPopover",id:"video-popover",docs:"https://design.discord.tools/components/web/popover",component:function(e){let{showActions:l,previewUrl:a,assetUrl:i,...n}=e,[s,r]=o.useState(!1),d=o.useRef(null);return(0,t.jsxs)("div",{children:[(0,t.jsx)(lG.H,{...n,targetElementRef:d,shouldShow:s,onRequestClose:()=>r(!1),title:"Video Popover Demo",body:"Click the video to view it in the media viewer!",assetUrl:i,previewUrl:lB()(a)?void 0:a,badge:"new",action:l?{text:"Learn More",onClick:()=>r(!1)}:void 0},n.position),(0,t.jsx)(C.$,{variant:"primary",text:"Show Video Popover",buttonRef:d,onClick:()=>r(!s)})]})},controls:{showActions:{label:"Show Actions",type:"boolean",defaultValue:!0},assetUrl:{label:"Asset URL",type:"text",defaultValue:"https://cdn.discordapp.com/assets/server-subscription-tier-template/upsell.mov"},previewUrl:{label:"Preview URL",type:"text",defaultValue:""}}},{name:"MultiStepPopover",id:"multi-step-popover",docs:"https://design.discord.tools/components/web/popover",component:function(e){let{showExpressive:l,...a}=e,[i,n]=o.useState(!1),s=o.useRef(null),r=[{title:"Welcome to the Feature!",body:"This is the first step of our multi-step introduction.",asset:(0,t.jsx)("img",{src:lZ,alt:"Step 1"}),badge:"new",action:{text:"Next"},gradientColor:"blue"},{title:"Learn the Benefits",body:"Here are the amazing benefits you can enjoy with this feature.",asset:(0,t.jsx)("img",{src:"https://cdn.discordapp.com/assets/content/cd20f95b793bd4bdd462960744dae563a5409fc0a918a6a006c0d61f89fb6119.svg",alt:"Step 2"}),action:{text:"Continue"},gradientColor:"purple"},{title:"Get Started!",body:"You're all set to begin using this awesome feature.",asset:(0,t.jsx)("img",{src:lZ,alt:"Step 3"}),action:{text:"Get Started",variant:l?"expressive":void 0},gradientColor:"nitro-pink",textLink:{text:"Learn More",link:"https://discord.com",external:!0}}];return(0,t.jsxs)("div",{children:[(0,t.jsx)(lW,{...a,targetElementRef:s,shouldShow:i,onRequestClose:()=>n(!1),steps:r,caretConfig:{align:"center"},onStepChange:()=>{}},a.position),(0,t.jsx)(C.$,{variant:"primary",text:"Show Multi-Step",buttonRef:s,onClick:()=>n(!i)})]})},controls:{showExpressive:{label:"Show Expressive Button",type:"boolean",defaultValue:!1},size:{label:"Size",type:"select",defaultValue:"md",options:[{label:"Small",value:"sm"},{label:"Medium",value:"md"}]}}}]};var lK=a(911608);let lQ={title:"ProgressBar",stories:[{name:"ProgressBar",id:"progress-bar",component:function(e){let{value:l,isIndeterminate:a,size:o,animate:i,valueLabel:n,ariaLabel:s}=e,r=""!==n?n:void 0,d=""!==s?s:"Progress";return a?(0,t.jsx)(lK.z,{isIndeterminate:!0,size:o,animate:i,valueLabel:r,"aria-label":d}):(0,t.jsx)(lK.z,{value:l,size:o,animate:i,valueLabel:r,"aria-label":d})},controls:{value:{label:"Value",type:"slider",defaultValue:50,minValue:0,maxValue:100},isIndeterminate:{label:"Indeterminate",type:"boolean",defaultValue:!1},size:{label:"Size",type:"select",defaultValue:"lg",options:[{label:"xs (2px)",value:"xs"},{label:"sm (4px)",value:"sm"},{label:"md (6px)",value:"md"},{label:"lg (8px)",value:"lg"}]},animate:{label:"Animate",type:"boolean",defaultValue:!0},valueLabel:{label:"Value label (overrides aria-valuetext)",type:"text",defaultValue:""},ariaLabel:{label:"Accessible name (aria-label)",type:"text",defaultValue:"Progress"}}}]};var lJ=a(144228);let l0={title:"RadioGroup",stories:[{id:"radiogroup",name:"RadioGroup",component:function(e){let{disabled:l,optionCount:a,label:i,optionLabel:n,description:s,showIcons:r,withMixedDisabledOptions:d}=e,[u,c]=o.useState("option1"),b=o.useMemo(()=>[{name:null!=n?`${n} 1`:"Option 1",value:"option1",desc:null==s||""===s?void 0:s,leadingIcon:r?eN.m:void 0,disabled:!d&&void 0},{name:null!=n?`${n} 2`:"Option 2",value:"option2",desc:null==s||""===s?void 0:s,leadingIcon:r?eN.m:void 0,disabled:!!d||void 0},{name:null!=n?`${n} 3`:"Option 3",value:"option3",desc:null==s||""===s?void 0:s,leadingIcon:r?eN.m:void 0,disabled:!d&&void 0},{name:null!=n?`${n} 4`:"Option 4",value:"option4",desc:null==s||""===s?void 0:s,leadingIcon:r?eN.m:void 0,disabled:!!d||void 0},{name:null!=n?`${n} 5`:"Option 5",value:"option5",desc:null==s||""===s?void 0:s,leadingIcon:r?eN.m:void 0,disabled:!d&&void 0}].slice(0,Math.max(1,Math.min(5,a))),[a,n,s,r,d]),m=o.useCallback(e=>{c(e)},[]),x=o.useCallback(()=>{b.length>0&&c(b[0].value)},[b]),y=o.useCallback(()=>{b.length>0&&c(b[b.length-1].value)},[b]),h=o.useCallback(()=>{c(void 0)},[]);return(0,t.jsxs)(D.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(lJ.z,{value:u,label:i,onChange:m,options:b,disabled:l}),(0,t.jsxs)(p.E,{variant:"text-sm/normal",children:["Current selection: ","string"==typeof u&&""!==u?u:"None"]}),(0,t.jsxs)(D.B,{direction:"horizontal",gap:"sm",children:[(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"Select First",onClick:x,disabled:l||0===b.length}),(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"Select Last",onClick:y,disabled:l||0===b.length}),(0,t.jsx)(C.$,{variant:"primary",size:"sm",text:"Clear",onClick:h,disabled:l})]})]})},controls:{label:{type:"text",label:"Label",defaultValue:"Mana Radio Group"},disabled:{type:"boolean",label:"Disabled",defaultValue:!1},optionCount:{type:"select",label:"Number of Options",options:[{label:"1",value:1},{label:"2",value:2},{label:"3",value:3},{label:"4",value:4},{label:"5",value:5}],defaultValue:3},optionLabel:{type:"text",label:"Option Label",defaultValue:"Option"},description:{type:"text",label:"Description",defaultValue:""},showIcons:{type:"boolean",label:"Show Icons",defaultValue:!1},withMixedDisabledOptions:{type:"boolean",label:"Mixed Disabled Options",defaultValue:!1}}}]},l1={title:"RangeCalendar",stories:[{id:"range-calendar",name:"RangeCalendar",component:function(e){let{disabled:l,readOnly:a,showMinMax:i}=e,[n,s]=o.useState({start:(0,eM.Ec)((0,eM.Xj)()),end:(0,eM.Ec)((0,eM.Xj)()).add({days:7})}),r=o.useCallback(e=>{s(e)},[]),d=o.useCallback(()=>{s(null)},[]),u=o.useCallback(()=>{let e=(0,eM.Ec)((0,eM.Xj)());s({start:e,end:e.add({days:7})})},[]),c=o.useCallback(()=>{s({start:(0,eT._U)("2024-12-01"),end:(0,eT._U)("2024-12-31")})},[]);if(!eA("RangeCalendarStory"))return(0,t.jsxs)(eL.w,{type:"critical",children:["This component is experimental and only available behind the ",(0,t.jsx)("code",{children:"2025-10-mana-date-inputs"})," ","experiment. Do not use this in production yet."]});function b(e){return null==e?"None":(0,eD.default)(e.toDate((0,eM.Xj)()),"MMMM d, yyyy")}return(0,t.jsxs)(D.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(e3,{value:n,onChange:r,isDisabled:l,isReadOnly:a,minValue:i?(0,eT._U)("2024-01-01"):void 0,maxValue:i?(0,eT._U)("2024-12-31"):void 0,"aria-label":"Select a date range"}),(0,t.jsxs)(p.E,{variant:"text-sm/normal",children:["Selected range: ",null!=n?`${b(n.start)} \u{2013} ${b(n.end)}`:"None"]}),(0,t.jsxs)(D.B,{direction:"horizontal",gap:"sm",children:[(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"Clear",onClick:d,disabled:l||a}),(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"This Week",onClick:u,disabled:l||a}),(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"December",onClick:c,disabled:l||a})]})]})},controls:{disabled:{type:"boolean",label:"Disabled",defaultValue:!1},readOnly:{type:"boolean",label:"Read Only",defaultValue:!1},showMinMax:{type:"boolean",label:"Show Min/Max (2024)",defaultValue:!1}}}]};var l2=a(593924),l4=a(844222),l3=a(158127);let l6=Object.entries(l2).filter(e=>{let l=e[1];return"function"==typeof l&&"riveSrc"in l}).map(e=>{let[l,a]=e;return{name:l,Component:a}}).sort((e,l)=>e.name.localeCompare(l.name));var l5=a(540637),l8=a(715022),l7=a(732771),l9=a(379649);let ae=[{label:"Aardvark",value:"aardvark",id:"aardvark",description:"This is an aardvark"},{label:"Cat",value:"cat",id:"cat",description:"This is a cat"},{label:"Dog",value:"dog",id:"dog"},{label:"Kangaroo",value:"kangaroo",id:"kangaroo",description:"This is a kangaroo"},{label:"Panda",value:"panda",id:"panda"},{label:"Snake",value:"snake",id:"snake",disabled:!0}],al=[{label:"Aardvark",value:"aardvark",id:"aardvark",leading:lC.N,trailing:{type:"badge",badgeType:"new"},description:"This is an aardvark"},{label:"Cat",value:"cat",id:"cat",leading:lC.N,trailing:"20m",description:"This is a cat"},{label:"Dog",value:"dog",id:"dog",leading:lC.N},{label:"Kangaroo",value:"kangaroo",id:"kangaroo",leading:{type:"image",src:l9}},{label:"Panda",value:"panda",id:"panda",leading:{type:"avatar",src:l9}},{label:"Snake",value:"snake",id:"snake",leading:lC.N,disabled:!0}],aa=[{label:"Domesticated",options:[{label:"Cat",value:"cat",id:"cat",description:"This is a cat"},{label:"Dog",value:"dog",id:"dog"}]},{label:"Wild",options:[{label:"Aardvark",value:"aardvark",id:"aardvark",description:"This is an aardvark"},{label:"Kangaroo",value:"kangaroo",id:"kangaroo",description:"This is a kangaroo"},{label:"Panda",value:"panda",id:"panda"},{label:"Snake",value:"snake",id:"snake",disabled:!0}]}],at={title:"Select",stories:[{id:"select",name:"Select",component:function(e){let{selectionMode:l,withLeadingAndTrailing:a,withGroups:i,...n}=e,[s,r]=o.useState(void 0),[d,u]=o.useState([]),c=ao(a,n.asyncOptions,i);return"single"===l?(0,t.jsx)(ll.l,{...n,selectionMode:l,options:c,onSelectionChange:r,value:s}):(0,t.jsx)(ll.l,{...n,selectionMode:l,options:c,onSelectionChange:u,value:d})},controls:{selectionMode:{label:"SelectionType",type:"select",options:[{label:"Single",value:"single"},{label:"Multiple",value:"multiple"}],defaultValue:"single"},withLeadingAndTrailing:{label:"Show leading and trailing content",type:"boolean",defaultValue:!1},asyncOptions:{label:"Async loaded options",type:"boolean",defaultValue:!1},withGroups:{label:"Group options under headers",type:"boolean",defaultValue:!1},required:{label:"Required",type:"boolean",defaultValue:!1},disabled:{type:"boolean",label:"Disabled",defaultValue:!1},readOnly:{type:"boolean",label:"Read Only",defaultValue:!1},clearable:{type:"boolean",label:"Clearable",defaultValue:!1},fullWidth:{type:"boolean",label:"Full width",defaultValue:!1},closeOnSelect:{type:"boolean",label:"Close on select",defaultValue:!1},shouldFocusWrap:{type:"boolean",label:"Should listbox focus wrap",defaultValue:!1},wrapTags:{type:"boolean",label:"Wrap tags",defaultValue:!1},maxOptionsVisible:{type:"number",label:"Max options visible",defaultValue:5},label:{type:"text",label:"Label",defaultValue:"Sort by"},helperText:{type:"text",label:"Helper text",defaultValue:void 0},hideLabel:{type:"boolean",label:"Hide Label",defaultValue:!1},placeholder:{type:"text",label:"Placeholder",defaultValue:void 0},description:{type:"text",label:"Description",defaultValue:"This is an example description"},errorMessage:{type:"text",label:"Error Message",defaultValue:""},successMessage:{type:"text",label:"Success Message",defaultValue:""},layout:{type:"select",label:"Layout",defaultValue:"vertical",options:[{label:"Vertical",value:"vertical"},{label:"Horizontal",value:"horizontal"},{label:"Horizontal (Responsive)",value:"horizontal-responsive"}]}}},{id:"searchable-select",name:"SearchableSelect",component:function(e){let{selectionMode:l,withLeadingAndTrailing:a,asyncOptions:i,withGroups:n,...s}=e,[r,d]=o.useState(void 0),[u,c]=o.useState([]),b=ao(a,i,n);return"single"===l?(0,t.jsx)(lT.Z,{...s,selectionMode:l,onSelectionChange:d,value:r,options:b}):(0,t.jsx)(lT.Z,{...s,selectionMode:l,onSelectionChange:c,value:u,options:b})},controls:{selectionMode:{label:"Selection Mode",type:"select",options:[{label:"Single",value:"single"},{label:"Multiple",value:"multiple"}],defaultValue:"single"},withLeadingAndTrailing:{label:"Show leading and trailing content",type:"boolean",defaultValue:!1},asyncOptions:{label:"Async loaded options",type:"boolean",defaultValue:!1},withGroups:{label:"Group options under headers",type:"boolean",defaultValue:!1},required:{label:"Required",type:"boolean",defaultValue:!1},disabled:{type:"boolean",label:"Disabled",defaultValue:!1},clearable:{type:"boolean",label:"Clearable",defaultValue:!1},closeOnSelect:{type:"boolean",label:"Close on select",defaultValue:!1},shouldFocusWrap:{type:"boolean",label:"Should listbox focus wrap",defaultValue:!1},wrapTags:{type:"boolean",label:"Wrap tags",defaultValue:!1},maxOptionsVisible:{type:"number",label:"Max options visible",defaultValue:5},label:{type:"text",label:"Label",defaultValue:"Sort by"},hideLabel:{type:"boolean",label:"Hide Label",defaultValue:!1},placeholder:{type:"text",label:"Placeholder",defaultValue:void 0},description:{type:"text",label:"Description",defaultValue:"This is an example description"},helperText:{type:"text",label:"Helper Text",defaultValue:"This is an example of helper text, which can be used to provide additional information about the field."},errorMessage:{type:"text",label:"Error Message",defaultValue:""},successMessage:{type:"text",label:"Success Message",defaultValue:""}}},{id:"combobox",name:"ComboBox",component:function(e){let{selectionMode:l,label:a,hideLabel:i,description:n,helperText:s,errorMessage:r,successMessage:d,wrapTags:u,withLeadingAndTrailing:c,withGroups:b,placeholder:p,...m}=e,{required:x,disabled:y}=m,h=ao(c,m.asyncOptions,b),[v,g]=o.useState(null);return(0,t.jsxs)(l7.iS,{selectionMode:l,onSelectionChange:g,options:h,value:v,...m,children:[(0,t.jsx)(l7.a3,{label:a,hideLabel:i,placeholder:p,required:x,disabled:y,description:n,helperText:s,errorMessage:r,successMessage:d,wrapTags:u}),(0,t.jsx)(l7.X2,{})]})},controls:{selectionMode:{label:"Selection Mode",type:"select",options:[{label:"Single",value:"single"},{label:"Multiple",value:"multiple"}],defaultValue:"single"},withLeadingAndTrailing:{label:"Show leading and trailing content",type:"boolean",defaultValue:!1},asyncOptions:{label:"Async loaded options",type:"boolean",defaultValue:!1},withGroups:{label:"Group options under headers",type:"boolean",defaultValue:!1},required:{label:"Required",type:"boolean",defaultValue:!1},disabled:{type:"boolean",label:"Disabled",defaultValue:!1},clearable:{type:"boolean",label:"Clearable",defaultValue:!1},closeOnSelect:{type:"boolean",label:"Close on select",defaultValue:!1},shouldFocusWrap:{type:"boolean",label:"Should listbox focus wrap",defaultValue:!1},wrapTags:{type:"boolean",label:"Wrap tags",defaultValue:!1},label:{type:"text",label:"Label",defaultValue:"Sort by"},hideLabel:{type:"boolean",label:"Hide Label",defaultValue:!1},placeholder:{type:"text",label:"Placeholder",defaultValue:void 0},description:{type:"text",label:"Description",defaultValue:"This is an example description"},helperText:{type:"text",label:"Helper Text",defaultValue:"This is an example of helper text, which can be used to provide additional information about the field."},errorMessage:{type:"text",label:"Error Message",defaultValue:""},successMessage:{type:"text",label:"Success Message",defaultValue:""}}},{id:"listbox",name:"ListBox",component:function(e){let{selectionMode:l,required:a,shouldFocusWrap:i,withLeadingAndTrailing:n,withGroups:s}=e,[r,d]=o.useState(null),{flatOptions:u,groups:c}=o.useMemo(()=>(0,l8.yG)(aa),[]);return(0,t.jsx)(l5.q,{selectionMode:l,required:a,shouldFocusWrap:i,items:s?u:n?al:ae,groups:s?c:void 0,onSelectionChange:d,selectedItems:r})},controls:{selectionMode:{label:"Selection Mode",type:"select",options:[{label:"Single",value:"single"},{label:"Multiple",value:"multiple"}],defaultValue:"single"},withLeadingAndTrailing:{label:"Show leading and trailing content",type:"boolean",defaultValue:!1},withGroups:{label:"Group options under headers",type:"boolean",defaultValue:!1},required:{label:"Required",type:"boolean",defaultValue:!1},shouldFocusWrap:{label:"Should focus wrap",type:"boolean",defaultValue:!1}}}]};function ao(e,l,a){let t=o.useRef(null);return o.useMemo(()=>{let o=a?aa:e?al:ae;return l?e=>new Promise(null!=t.current?e=>e(t.current):e=>setTimeout(()=>(t.current=o,e(o)),1e3)):o},[e,l,a])}let ai={title:"Switch",stories:[{id:"switch",name:"Switch",component:function(e){let{disabled:l,hasIcon:a,label:i,description:n,required:s,errorMessage:r}=e,[d,u]=o.useState(!1);return(0,t.jsx)(le.d,{label:i,description:n,required:s,errorMessage:r,hasIcon:a,onChange:u,disabled:l,checked:d})},controls:{disabled:{type:"boolean",label:"Disabled",defaultValue:!1},label:{type:"text",label:"Label",defaultValue:"Always underline links"},description:{type:"text",label:"Description",defaultValue:"Make links to websites, help articles, and other pages stand out more by underlining them."},required:{type:"boolean",label:"Required",defaultValue:!1},errorMessage:{type:"text",label:"Error Message",defaultValue:""},hasIcon:{type:"boolean",label:"Has Icon",defaultValue:!1}}}]};var an=a(11779),as=a(340351);let ar={title:"TagGroup",stories:[{name:"TagGroup",id:"tag-group",component:function(e){let{selectionMode:l,removeable:a,layout:s}=e,r=(0,i.bG)([n.default],()=>n.default.getCurrentUser()),d=o.useMemo(()=>[{id:"strength",label:"Strength",icon:an.r},{id:"dexterity",label:"Dexterity",icon:{type:"role",color:"#ff44aa"}},{id:"wisdom",label:"Wisdom",icon:{type:"avatar",src:r?.getAvatarURL(void 0,16)??""}},{id:"charisma",label:"Charisma"}],[r]),[u,c]=o.useState(d),b=o.useCallback(e=>{c(u.filter(l=>!e.has(l.id)))},[u]),p=o.useCallback(()=>{c(d)},[d]),m=(0,t.jsx)(as.C,{label:"Categories",selectionMode:l,layout:s,items:u,onRemove:a?b:void 0}),x=a&&(0,t.jsx)(C.$,{disabled:u.length===d.length,text:"Reset",onClick:p});return"inline"===s?(0,t.jsxs)(D.B,{gap:24,children:[(0,t.jsx)("div",{style:{display:"flex",gap:4},children:m}),x]}):(0,t.jsxs)(D.B,{gap:24,children:[m,x]})},controls:{selectionMode:{label:"Selection Mode",type:"select",defaultValue:"multiple",options:[{label:"None",value:"none"},{label:"Single",value:"single"},{label:"Multiple",value:"multiple"}]},removeable:{label:"Removeable",type:"boolean",defaultValue:!1},layout:{label:"Layout",type:"select",defaultValue:"default",options:[{label:"Default",value:"default"},{label:"Inline",value:"inline"}]}}}]};var ad=a(364522);let au=["heading-sm/normal","heading-sm/medium","heading-sm/semibold","heading-sm/bold","heading-sm/extrabold","heading-md/normal","heading-md/medium","heading-md/semibold","heading-md/bold","heading-md/extrabold","heading-lg/normal","heading-lg/medium","heading-lg/semibold","heading-lg/bold","heading-lg/extrabold","heading-xl/normal","heading-xl/medium","heading-xl/semibold","heading-xl/bold","heading-xl/extrabold","heading-xxl/normal","heading-xxl/medium","heading-xxl/semibold","heading-xxl/bold","heading-xxl/extrabold","experimental/heading-xs/medium","experimental/heading-xs/semibold","experimental/heading-sm/medium","experimental/heading-sm/semibold","experimental/heading-md/medium","experimental/heading-md/semibold","experimental/heading-lg/medium","experimental/heading-lg/semibold","experimental/heading-xl/medium","experimental/heading-xl/semibold","experimental/heading-xxl/medium","experimental/heading-xxl/semibold","eyebrow","heading-deprecated-12/normal","heading-deprecated-12/medium","heading-deprecated-12/semibold","heading-deprecated-12/bold","heading-deprecated-12/extrabold","redesign/heading-18/medium","redesign/heading-18/semibold","redesign/heading-18/bold","text-xxs/normal","text-xxs/medium","text-xxs/semibold","text-xxs/bold","text-xs/normal","text-xs/medium","text-xs/semibold","text-xs/bold","text-sm/normal","text-sm/medium","text-sm/semibold","text-sm/bold","text-md/normal","text-md/medium","text-md/semibold","text-md/bold","text-lg/normal","text-lg/medium","text-lg/semibold","text-lg/bold","redesign/message-preview/normal","redesign/message-preview/medium","redesign/message-preview/semibold","redesign/message-preview/bold","redesign/channel-title/normal","redesign/channel-title/medium","redesign/channel-title/semibold","redesign/channel-title/bold","experimental/body-xs/normal","experimental/body-xs/medium","experimental/body-xs/semibold","experimental/body-sm/normal","experimental/body-sm/medium","experimental/body-sm/semibold","experimental/body-md/normal","experimental/body-md/medium","experimental/body-md/semibold","experimental/body-lg/normal","experimental/body-lg/medium","experimental/body-lg/semibold","experimental/footnote/normal","experimental/footnote/medium","experimental/footnote/semibold","display-sm","display-md","display-lg","experimental/display-xs","experimental/display-sm","experimental/display-md","experimental/display-lg","code","experimental/mono-md/normal","experimental/mono-md/bold"];var ac=a(184501);let ab={name:"Text",id:"text",component:p.E,controls:{variant:{label:"Variant",type:"select",defaultValue:"text-sm/normal",options:Object.values(au).map(e=>({label:e,value:e}))},color:{label:"Color",type:"select",defaultValue:"text-strong",options:[{label:"Text Primary",value:"text-strong"},{label:"Text Secondary",value:"text-subtle"},{label:"Text Tertiary",value:"text-muted"},{label:"Text Muted",value:"text-muted"},{label:"Header Primary",value:"text-strong"},{label:"Header Secondary",value:"text-default"},{label:"Header Muted",value:"text-muted"},{label:"Feedback Positive",value:"text-feedback-positive"},{label:"Feedback Critical",value:"text-feedback-critical"},{label:"Feedback Warning",value:"text-feedback-warning"},{label:"Feedback Info",value:"text-feedback-info"}]},children:{label:"Text",type:"text",defaultValue:"Hello, world!"}}};var ap=a(866665),am=a(459192),ax=a(557464);let ay={title:"Tooltip",stories:[{name:"Tooltip",id:"tooltip",docs:"https://design.discord.tools/components/web/tooltip",component:function(e){let{text:l,position:a,align:i,caretAlign:n,customOffset:s,delay:r,spacing:d,ariaHidden:u,...c}=e,b=o.useMemo(()=>{if("center"!==n&&null!=n)return"custom"===n?{align:n,customOffset:s}:{align:n}},[n,s]);return(0,t.jsx)(ap.m,{text:l,position:a,align:i,delay:r,spacing:d,caretConfig:b,ariaHidden:u,...c,children:(0,t.jsx)(C.$,{variant:"primary",text:"Hover me"})})},controls:{text:{label:"Text",type:"text",defaultValue:"Here's a tooltip!"},position:{label:"Position",type:"select",defaultValue:"top",options:[{label:"Top",value:"top"},{label:"Bottom",value:"bottom"},{label:"Left",value:"left"},{label:"Right",value:"right"}]},align:{label:"Align",type:"select",defaultValue:"center",options:[{label:"Top",value:"top"},{label:"Center",value:"center"},{label:"Bottom",value:"bottom"},{label:"Left",value:"left"},{label:"Right",value:"right"}]},caretAlign:{label:"Caret Align",type:"select",defaultValue:"center",options:[{label:"Start",value:"start"},{label:"Center",value:"center"},{label:"End",value:"end"},{label:"Custom",value:"custom"}]},customOffset:{label:"Custom Offset",type:"number",defaultValue:0},delay:{label:"Delay (ms)",type:"number",defaultValue:0},spacing:{label:"Spacing (px)",type:"number",defaultValue:11},keyboardShortcut:{label:"Keyboard Shortcut",type:"text",defaultValue:"mod+k"},ariaHidden:{label:"Aria Hidden",type:"boolean",defaultValue:!1}}},{name:"RichTooltip",id:"rich-tooltip",docs:"https://design.discord.tools/components/web/tooltip",component:function(e){let{title:l,body:a,showAsset:i,assetSize:n,padding:s,position:r,align:d,caretAlign:u,customOffset:c,delay:b,spacing:p,forceOpen:m,...x}=e,y=o.useMemo(()=>{if("center"!==u&&null!=u)return"custom"===u?{align:u,customOffset:c}:{align:u}},[u,c]),h=o.useMemo(()=>i?{type:"image",src:ax.A,aspectRatio:"1/1"}:void 0,[i]);return(0,t.jsx)(am.u,{title:l,body:a,position:r,align:d,padding:s,delay:b,spacing:p,caretConfig:y,asset:h,assetSize:n,forceOpen:m,...x,children:(0,t.jsx)(C.$,{variant:"primary",text:"Hover me (rich)"})})},controls:{title:{label:"Title",type:"text",defaultValue:"Title goes here"},body:{label:"Body",type:"text",defaultValue:"Body copy goes in this section."},assetSize:{label:"Asset Size",type:"select",defaultValue:16,options:[{label:"16px",value:16},{label:"20px",value:20},{label:"24px",value:24},{label:"32px",value:32},{label:"48px",value:48},{label:"80px",value:80}]},padding:{label:"Padding",type:"select",defaultValue:"default",options:[{label:"Default",value:"default"},{label:"Large",value:"lg"}]},position:{label:"Position",type:"select",defaultValue:"top",options:[{label:"Top",value:"top"},{label:"Bottom",value:"bottom"},{label:"Left",value:"left"},{label:"Right",value:"right"}]},align:{label:"Align",type:"select",defaultValue:"center",options:[{label:"Top",value:"top"},{label:"Center",value:"center"},{label:"Bottom",value:"bottom"},{label:"Left",value:"left"},{label:"Right",value:"right"}]},caretAlign:{label:"Caret Align",type:"select",defaultValue:"center",options:[{label:"Start",value:"start"},{label:"Center",value:"center"},{label:"End",value:"end"},{label:"Custom",value:"custom"}]},customOffset:{label:"Custom Offset",type:"number",defaultValue:0},delay:{label:"Delay (ms)",type:"number",defaultValue:0},spacing:{label:"Spacing (px)",type:"number",defaultValue:11},forceOpen:{label:"Force Open",type:"boolean",defaultValue:!1},showAsset:{label:"Show Asset",type:"boolean",defaultValue:!0}}}]};var ah=a(508382),av=a(60992);let ag={id:"mana",name:"Mana",groups:[{title:"Text",stories:[ab,{name:"Typography Scales",id:"text-scales",component:function(e){return(0,t.jsx)(ad.Ar,{className:ac.H,children:Object.values(au).map(l=>(0,t.jsxs)(V.Z,{className:ac.N,children:[(0,t.jsx)(p.E,{...e,variant:l,children:e.children}),(0,t.jsx)(p.E,{variant:"text-xs/normal",color:"text-subtle",children:l})]},l))})},controls:{children:{label:"Text",type:"text",defaultValue:"Hello, world!"}}}]},eV,ew,eR,eO,ez,eF,e8,l0,l1,ai,lP,lv,at,lY,lQ,ay,ar,ld,{title:"FloatingLayer",stories:[{name:"FloatingLayer",id:"popover-layer",component:function(e){let{placement:l,spacing:a,autoFlip:i,autoShift:n,strategy:s,portal:r,blockPointerEvents:d}=e,[u,c]=o.useState(!1);return(0,t.jsx)(ah.Ow,{open:u,onOpenChange:c,placement:l,spacing:a,autoFlip:i,autoShift:n,strategy:s,portal:r,blockPointerEvents:d,renderLayer:()=>(0,t.jsx)("div",{className:av.q,children:(0,t.jsx)(p.E,{variant:"text-sm/medium",children:"FloatingLayer Content"})}),children:e=>{let{ref:l,props:a}=e;return(0,t.jsx)(C.$,{variant:"primary",text:"Target Element",onClick:()=>c(!u),...a,buttonRef:l})}})},controls:{placement:{label:"Placement",type:"select",defaultValue:"bottom",options:[{label:"Top",value:"top"},{label:"Top Start",value:"top-start"},{label:"Top End",value:"top-end"},{label:"Bottom",value:"bottom"},{label:"Bottom Start",value:"bottom-start"},{label:"Bottom End",value:"bottom-end"},{label:"Left",value:"left"},{label:"Left Start",value:"left-start"},{label:"Left End",value:"left-end"},{label:"Right",value:"right"},{label:"Right Start",value:"right-start"},{label:"Right End",value:"right-end"}]},spacing:{label:"Spacing (px)",type:"number",defaultValue:8},autoFlip:{label:"Auto Flip",type:"boolean",defaultValue:!0},autoShift:{label:"Auto Shift",type:"boolean",defaultValue:!0},strategy:{label:"Strategy",type:"select",defaultValue:"fixed",options:[{label:"Fixed",value:"fixed"},{label:"Absolute",value:"absolute"}]},portal:{label:"Portal",type:"boolean",defaultValue:!0},blockPointerEvents:{label:"Block Pointer Events",type:"boolean",defaultValue:!1}}}]},{title:"Rive Animations",stories:[{name:"All Animations",id:"rive-all-animations",component:function(){let[e,l]=o.useState(!0),a=o.useContext(l4.C),[i,n]=o.useState(0);return(0,t.jsxs)(l4.C.Provider,{value:{...a,reducedMotion:{...a.reducedMotion,enabled:e}},children:[(0,t.jsx)("div",{className:l3.QT,children:(0,t.jsxs)(D.B,{gap:8,children:[(0,t.jsx)(le.d,{onChange:()=>l(e=>!e),label:"Force reduced motion",checked:e}),(0,t.jsx)(C.$,{onClick:()=>n(e=>e+1),text:"Reset animations"})]})}),(0,t.jsx)("div",{className:l3.Vg,children:l6.map(e=>{let{name:l,Component:a}=e;return(0,t.jsxs)("div",{className:l3.Hn,children:[(0,t.jsx)("div",{className:l3.k$,children:(0,t.jsx)(a,{style:{width:"100%",height:"100%"}})}),(0,t.jsx)(p.E,{variant:"text-xs/normal",color:"text-subtle",className:l3.Pf,children:l})]},l)})},i)]})}}]}]},af={collections:[ag,eu]}}