Module 645136

function(e,l,a){a.r(l),a.d(l,{manaCollection:()=>ah,playgroundConfig:()=>ay});var t=a(627968),i=a(64700),o=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:i=!1,isMobile:r=!1}=e,{user:u}=(0,o.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:i,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(489215);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 h(e){let{text:l,variant:a="grayLight",icon:i,iconColor:o}=e,n=x[a],s=null!=i?(0,t.jsx)(i,{color:o??"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!=i}),children:[s,l]})}var y=a(759146);let v=["blurple","purple","green","orange","yellow","pink","red","gray"],g=["Light","Medium","Dark"],f={title:"Chip",stories:[{name:"Chip",id:"chip",component:h,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:y.lx,children:g.map(e=>(0,t.jsxs)("div",{className:y.uW,children:[(0,t.jsx)("h3",{className:y.Gf,children:e}),(0,t.jsx)("div",{className:y.f2,children:v.map(l=>{let a=`${l}${e}`;return(0,t.jsx)(h,{text:l,variant:a},a)})})]},e))})}}]};var V=a(993077),C=a(821609),j=a(235986),S=a(244367),k=a(742158),w=a(743513);V.Z.Types;function M(e){let l,a,{type:i=V.Z.Types.DANGER,imageData:o,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!=o){let{position:e,...a}=o;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 i===V.Z.Types.PRIMARY&&(x=!1),(0,t.jsx)(V.Z,{className:b()(w.RJ,s),type:i,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:i,hasButton:o}=e,n=o?(0,t.jsx)(C.$,{text:"Action"}):void 0;return(0,t.jsx)(M,{"data-migration-pending":!0,type:l,title:a,body:i,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:i,errorMessage:o}=e,n=o?.trim()===""?void 0:o;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:i,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(980707),A=a(477782),N=a(22231),R=a(366605),P=a(624479),O=a(625903),B=a(509434),z=a(241326),F=a(922016),$=a(159402);let G={title:"Menu",stories:[{name:"Menu",id:"menu",component:function(e){let{variant:l,hideScroller:a,showGroups:o,showCheckboxItems:n,showRadioItems:s,showSwitchItems:r,showSubmenus:d,showIcons:u,showShortcuts:c,showSubtext:b,showDisabledItems:p,showColoredItems:m,showLoading:x,showTrailingIndicator:h,dangerItemColor:y}=e,[v,g]=i.useState(!0),[f,V]=i.useState(!1),[j,S]=i.useState("text"),[k,w]=i.useState("cozy"),[M,T]=i.useState(!0),D=i.useRef(null);return(0,t.jsxs)("div",{className:$.k,children:[!M&&(0,t.jsx)(C.$,{text:"Open Menu",onClick:()=>T(!0)}),(0,t.jsx)(F.Y,{renderPopout:e=>{let{closePopout:i}=e;return(0,t.jsxs)(I.W,{"data-menu-migrated":!0,navId:"menu-story","aria-label":"Story Menu",variant:l,hideScroller:a,onClose:i,onSelect:()=>{},children:[(0,t.jsx)(A.Dr,{id:"edit",label:"Edit Message",icon:u?N.R:void 0,leadingAccessory:u?{type:"icon",icon:N.R}:void 0,shortcut:c?"\u2318E":void 0,action:()=>{}}),(0,t.jsx)(A.Dr,{id:"pin",label:"Pin Message",icon:u?R.t:void 0,leadingAccessory:u?{type:"icon",icon:R.t}:void 0,subtext:b?"Pin this message to the channel":void 0,badge:"beta",loading:x,action:()=>{}}),(0,t.jsx)(A.Dr,{id:"copy",label:"Copy Message Link",icon:u?P.T:void 0,leadingAccessory:u?{type:"icon",icon:P.T}:void 0,badge:"new",action:()=>{}}),p&&(0,t.jsx)(A.Dr,{id:"disabled",label:"Disabled Item",icon:u?O.Z:void 0,leadingAccessory:u?{type:"icon",icon:O.Z}:void 0,disabled:!0,action:()=>{}}),m&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(A.bX,{}),(0,t.jsx)(A.Dr,{id:"brand-item",label:"Brand Item",color:"brand",trailingIndicator:h?{type:"icon",icon:B.I}:void 0,action:()=>{}}),(0,t.jsx)(A.Dr,{id:"premium-item",label:"Premium Item",color:"premium",icon:u?O.Z:void 0,leadingAccessory:u?{type:"icon",icon:O.Z}:void 0,action:()=>{}}),(0,t.jsx)(A.Dr,{id:"success-item",label:"Success Item",color:"success",icon:u?O.Z:void 0,leadingAccessory:u?{type:"icon",icon:O.Z}:void 0,action:()=>{}})]}),d&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(A.bX,{}),(0,t.jsxs)(A.Dr,{id:"submenu",label:"More Options",icon:u?O.Z:void 0,children:[(0,t.jsx)(A.Dr,{id:"submenu-1",label:"Submenu Item 1",action:()=>{}}),(0,t.jsx)(A.Dr,{id:"submenu-2",label:"Submenu Item 2",action:()=>{}}),(0,t.jsx)(A.Dr,{id:"submenu-3",label:"Submenu Item 3",action:()=>{}})]})]}),n&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(A.bX,{}),(0,t.jsx)(A.sL,{id:"notifications",label:"Enable Notifications Enable Notifications Enable Notifications",checked:v,action:()=>g(!v)}),(0,t.jsx)(A.sL,{id:"mute",label:"Mute Channel",checked:f,action:()=>V(!f)})]}),r&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(A.bX,{}),(0,t.jsx)(A.fP,{id:"switch-notifications",label:"Push Notifications",checked:v,action:()=>g(!v)})]}),s&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(A.bX,{}),(0,t.jsxs)(A.rX,{label:"Channel Type",children:[(0,t.jsx)(A.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)(A.iD,{id:"radio-voice",group:"channel-type",label:"Voice Channel",checked:"voice"===j,action:()=>S("voice")})]}),(0,t.jsx)(A.bX,{}),(0,t.jsxs)(A.rX,{label:"View Mode",children:[(0,t.jsx)(A.iD,{id:"radio-cozy",group:"view-mode",label:"Cozy",checked:"cozy"===k,action:()=>w("cozy")}),(0,t.jsx)(A.iD,{id:"radio-compact",group:"view-mode",label:"Compact",checked:"compact"===k,action:()=>w("compact")})]})]}),o&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(A.bX,{}),(0,t.jsxs)(A.rX,{label:"Grouped Items",children:[(0,t.jsx)(A.Dr,{id:"group-1",label:"Group Item 1",action:()=>{}}),(0,t.jsx)(A.Dr,{id:"group-2",label:"Group Item 2",action:()=>{}}),(0,t.jsx)(A.Dr,{id:"group-3",label:"Group Item 3",action:()=>{}})]})]}),(0,t.jsx)(A.bX,{}),(0,t.jsx)(A.Dr,{id:"delete",label:"Delete Message",color:y,icon:u?z.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,i={BRAND:_.Hv.BRAND,INFO:_.Hv.INFO,WARNING:_.Hv.WARNING,DANGER:_.Hv.DANGER,DEFAULT:_.Hv.DEFAULT,NEUTRAL:_.Hv.NEUTRAL};return(0,t.jsx)(_.$T,{color:i[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:i,markerCount:o,stickToMarkers:n,disabled:s,equidistant:r,label:d,description:u}=e,c=o>0?Array.from({length:o},(e,t)=>Math.floor(l+t/(o-1)*(a-l))):void 0;return(0,t.jsx)(q.A,{label:d,description:u,layout:"horizontal-responsive",minValue:l,maxValue:a,initialValue:i,markers:c,stickToMarkers:n,disabled:s,equidistant:r},o)},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),Z=a(71393),W=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:i=!1}=e,{users:s}=(0,o.cf)([n.default],()=>({users:Object.values(n.default.getUsers()).slice(0,10)}));return 0===s.length?null:(0,t.jsx)(W.I,{users:s,maxUsers:a,size:l,hideOverflowCount:i})},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:i=!1,disableGuildNameTooltip:n=!1}=e,{guilds:s}=(0,o.cf)([Z.A],()=>({guilds:Z.A.getGuildsArray().slice(0,10)}));return 0===s.length?null:(0,t.jsx)(Y.A,{guilds:s,maxGuilds:a,size:l,hideOverflowCount:i,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:o}=e,[n,s]=i.useState("tab1"),r=Array.from({length:o},(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"}],ei={id:"select",name:"Select",component:function(e){let{label:l,description:a,isDisabled:o,isProcessing:n,placeholder:s,maxVisibleItems:r,clearable:d,closeOnSelect:u,popoutPosition:c,variant:b}=e,[p,m]=i.useState("blue");return(0,t.jsx)(ea.Te,{variant:b,label:l,description:a,value:p,onChange:m,options:et,placeholder:s,isDisabled:o,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"}]}}},eo={id:"searchable-select",name:"Searchable Select",component:function(e){let{placeholder:l,isDisabled:a,isProcessing:o,clearable:n,closeOnSelect:s,clearQueryOnSelect:r,filter:d,...u}=e,[c,b]=i.useState("blue"),[p,m]=i.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:o,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:o,clearable:n,closeOnSelect:s,clearQueryOnSelect:r,filter:d})]})},controls:{...ei.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(582306),es=a(292666),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:[ei,eo]},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,[o,n]=i.useState(void 0),[s,r]=i.useState(void 0),[d,u]=i.useState(void 0);return(0,t.jsxs)(D.B,{gap:8,children:[(0,t.jsx)(ea.Te,{value:o,onChange:n,options:ed,placeholder:a,isDisabled:l}),(0,t.jsx)(es.k,{placeholder:a,disabled:l}),(0,t.jsx)(el.p,{value:o,onChange:n,options:ed,placeholder:a,isDisabled:l}),(0,t.jsx)(en.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,G,{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),eh=a(540418),ey=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:eh.A,ExperimentalEpicIcon:ey.b,ExperimentalMythicIcon:ev.O},eV={title:"Badge",stories:[{name:"Badge",id:"badge",component:function(e){let{type:l,customText:a,variant:i,iconName:o}=e,n=null!=o&&""!==o&&"none"!==o?ef[o]:void 0;return(0,t.jsx)(eg.E,{type:"custom"===l&&null!=a&&""!==a?{text:a}:l,variant:i,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(123292),eS=a(825484),ek=a(111159);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:ek.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:ej.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)(eS.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 eN={title:"Calendar",stories:[{id:"calendar",name:"Calendar",component:function(e){let{disabled:l,readOnly:a,showMinMax:o}=e,[n,s]=i.useState((0,eM.Ec)((0,eM.Xj)())),r=i.useCallback(e=>{s(e)},[]),d=i.useCallback(()=>{s(null)},[]),u=i.useCallback(()=>{s((0,eM.Ec)((0,eM.Xj)()))},[]),c=i.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:o?(0,eT._U)("2024-01-01"):void 0,maxValue:o?(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 eR=a(885574),eP=a(150934);let eO={title:"Checkbox",stories:[{id:"checkbox",name:"Checkbox",component:function(e){let{label:l,description:a,disabled:o,labelType:n,showIcons:s}=e,[r,d]=i.useState(!1),u=i.useCallback(()=>{d(!0)},[]),c=i.useCallback(()=>{d(!1)},[]),b=i.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:o,label:l,description:null!=a||""===a?a:void 0,value:"checkbox-value",labelType:n,leadingIcon:s?eR.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:o}),(0,t.jsx)(C.$,{variant:"secondary",size:"sm",text:"Uncheck",onClick:c,disabled:o}),(0,t.jsx)(C.$,{variant:"primary",size:"sm",text:"Toggle",onClick:b,disabled:o})]})]})},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:o,optionLabel:n,description:s,showIcons:r,withMixedDisabledOptions:d}=e,[u,c]=i.useState(["option1"]),b=i.useMemo(()=>[{label:null!=n?`${n} 1`:"Option 1",value:"option1",description:null==s||""===s?void 0:s,leadingIcon:r?eR.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?eR.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?eR.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?eR.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?eR.m:void 0,disabled:!d&&void 0}].slice(0,Math.max(1,Math.min(5,a))),[a,n,s,r,d]),m=i.useCallback(e=>{c(e)},[]),x=i.useCallback(()=>{c(b.map(e=>e.value))},[b]),h=i.useCallback(()=>{c([])},[]),y=i.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:o,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:y,disabled:l||0===b.length}),(0,t.jsx)(C.$,{variant:"primary",size:"sm",text:"Clear All",onClick:h,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 eF=a(441349);let e$={title:"DatePicker",stories:[{id:"date-picker",name:"DatePicker",component:function(e){let{label:l,description:a,errorMessage:o,disabled:n,required:s,showMinMax:r}=e,[d,u]=i.useState((0,eM.Ec)((0,eM.Xj)())),c=i.useCallback(e=>{u(e)},[]),b=i.useCallback(()=>{u(null)},[]),p=i.useCallback(()=>{u((0,eM.Ec)((0,eM.Xj)()))},[]),m=i.useCallback(()=>{u((0,eT._U)("2024-12-25"))},[]);return eA("CalendarStory")?(0,t.jsxs)(D.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(eF.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:""!==o?o: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 eG=a(693321),e_=a(770378),eH=a(521767),eq=a(817724),eU=a(650682),eX=a(987062),eZ=a(561392),eW=a(716263),eY=a(81466),eK=a(862301),eQ=a(460890),eJ=a(577684),e0=a(376887),e1=a(668953),e2=a(881636),e3=a(195529);function e4(e){let{value:l,onChange:a,minValue:o,maxValue:n,isDisabled:s=!1,isReadOnly:r=!1,visibleMonths:d=1,className:u,"aria-label":c}=e,{i18n:m,locale:x}=(0,eQ.G9)(),h=l?.start??null,[y,v]=i.useState(h);return i.useEffect(()=>{v(h)},[h]),(0,t.jsx)(eJ._e,{value:l,focusedValue:y,onFocusChange:v,onChange:a,minValue:o,maxValue:n,isDisabled:s,isReadOnly:r,visibleDuration:{months:d},"aria-label":c,"data-mana-component":"range-calendar",className:b()(e3.BJ,d>1&&e3.Q7,u),children:e=>(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)("header",{className:e3.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:e3.Wb,"aria-live":"polite",children:Array.from({length:d},(l,a)=>{let i=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:i},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:e3.US,children:Array.from({length:d},(e,l)=>(0,t.jsx)(e0.N,{offset:{months:l},isRangeSelection:!0},l))})]})})}var e6=a(760345);function e7(e){let{value:l,onChange:a,minValue:i,maxValue:o,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:h,required:y=!1}=m,v={hasError:null!=h&&""!==h},{refs:g,floatingStyles:f,isOpen:V,setIsOpen:C,context:j,getFloatingProps:S,getReferenceProps:k}=(0,eZ.u)({matchReferenceWidth:!1,placement:"bottom-start"}),{isMounted:w,styles:M}=(0,eW.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:y,minValue:i,maxValue:o,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)(eG.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)(e4,{value:l,onChange:T,minValue:i,maxValue:o,isDisabled:x,visibleMonths:2})})})})]})})})}let e8={title:"DateRangePicker",stories:[{id:"date-range-picker",name:"DateRangePicker",component:function(e){let{label:l,errorMessage:a,description:o,disabled:n,required:s,showMinMax:r}=e,[d,u]=i.useState({start:(0,eM.Ec)((0,eM.Xj)()),end:(0,eM.Ec)((0,eM.Xj)()).add({days:7})}),c=i.useCallback(e=>{u(e)},[]),b=i.useCallback(()=>{u(null)},[]),p=i.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,h=r?m.add({weeks:2}):void 0;return eA("DateRangePickerStory")?(0,t.jsxs)(D.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(e7,{label:l,description:""!==o?o:void 0,value:d,onChange:c,disabled:n,required:s,errorMessage:""!==a?a:void 0,minValue:x,maxValue:h,helperText:(()=>{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 e5=a(270003),e9=a(194261),le=a(243721),ll=a(691885),la=a(109802),lt=a(508274),li=a(121830);let lo=[{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:i}=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:i,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)(ej.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:lo,selectionMode:"single",onSelectionChange:()=>{},disabled:!0})}),(0,t.jsx)(ls,{title:"CopyInput",auxiliaryContentPosition:l,children:(0,t.jsx)(la.e,{value:"https://discord.gg/disabled-example",supportsCopy:!0,onCopy:()=>{},disabled:!0})}),(0,t.jsx)(ls,{title:"ColorPicker",auxiliaryContentPosition:l,children:(0,t.jsx)(lt.sk,{defaultColor:ln[0],customColor:null,colors:ln,value:ln[0],disabled:!0,onChange:()=>{},renderDefaultButton:e=>(0,t.jsx)(lt.fy,{...e}),renderCustomButton:e=>(0,t.jsx)(lt.nJ,{...e})})}),(0,t.jsx)(ls,{title:"TextInput",auxiliaryContentPosition:l,children:(0,t.jsx)(es.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)(e5.n,{label:""===l?void 0:l,children:[(0,t.jsx)(es.k,{label:"First Name"}),(0,t.jsx)(es.k,{label:"Last Name"}),(0,t.jsx)(es.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:li.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(404778),lc=a(935063),lb=a(661531),lp=a(307301),lm=a(892547),lx=a(260598);let lh=[{id:"strength",label:"Strength",icon:lc.X},{id:"wisdom",label:"Wisdom",icon:{type:"role",color:lb.A.unsafe_rawColors.BRAND_500.css}},{id:"charisma",label:"Charisma"},{id:"intelligence",label:"Intelligence"},{id:"dexterity",label:"Dexterity"},{id:"constitution",label:"Constitution"}],ly={title:"Input Components",stories:[{name:"TextInput",component:function(e){let{leading:l,trailing:a,...o}=e,[n,s]=i.useState(""),[d,u]=i.useState(lh),c=i.useCallback(e=>{u(d.filter(l=>!e.has(l.id)))},[d]);return(0,t.jsxs)(D.B,{gap:16,children:[(0,t.jsx)(es.k,{...o,value:n,onChange:s,leading:function(e){switch(e){case"tags":return{type:"tags",label:"Tags",items:d,onRemove:c};case"icon":return{icon:lc.X,onClick:r.tE,"aria-label":"At"};case"text":return"https://discord.gg/";default:return}}(l),trailing:"icon"===a?{icon:lp.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:"Number",value:"number"}]},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]=i.useState("");return(0,t.jsx)(lm.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]=i.useState("");return(0,t.jsx)(lx.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:"Input Collection",id:"input-collection",component:function(e){let{label:l,hideLabel:a,description:i,required:o,error:n,disabled:s,placeholder:d,value:u="",readOnly:c,helperText:b,successMessage:p,showCharacterCount:m}=e,x={label:l,hideLabel:a,description:i,required:o,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)(e5.n,{label:"Text Input",children:[(0,t.jsx)(es.k,{...x}),(0,t.jsx)(es.k,{...x,clearable:!0}),(0,t.jsx)(es.k,{...x,leading:{icon:lc.X,onClick:r.tE,"aria-label":"At"}}),(0,t.jsx)(es.k,{...x,leading:lc.X}),(0,t.jsx)(es.k,{...x,leading:"https://discord.gg/"}),(0,t.jsx)(es.k,{...x,trailing:{icon:lc.X,onClick:r.tE,"aria-label":"At"}}),(0,t.jsx)(es.k,{...x,trailing:lc.X}),(0,t.jsx)(es.k,{...x,leading:{type:"tags",label:"Tags",items:lh.slice(0,3)}})]}),(0,t.jsx)(lu.c,{}),(0,t.jsxs)(e5.n,{label:"Search Bar",children:[(0,t.jsx)(lm.I,{query:u,onChange:r.tE,disabled:s,placeholder:d}),(0,t.jsx)(lm.I,{query:u,onChange:r.tE,size:"sm",disabled:s,placeholder:d})]}),(0,t.jsx)(lu.c,{}),(0,t.jsx)(e5.n,{label:"Text Area",children:(0,t.jsx)(lx.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 lv=a(102079),lg=a(224640),lf=a(430993),lV=a(276293),lC=a(189213),lj=a(772707),lS=a(347704),lk=a(116833),lw=a(521489),lM=a(192308),lT=a(783878),lD=a(314116);let lE="/assets/f66ae7bb8510ab4f.svg";function lL(){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 lI(e){let{setIsSafetyAccepted:l,setIsHelmetSelected:a}=e,[o,n]=i.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 i.useEffect(()=>{l(o.length===s.length),a(o.includes("helmet"))},[o,s.length,l,a]),(0,t.jsx)(eB.$,{label:"Safety checklist",options:s,selectedValues:o,onChange:n})}function lA(e){let{setIsPasscodeValid:l}=e,[a,o]=i.useState("");return(0,t.jsx)(es.k,{placeholder:"Enter your passcode...",value:a,onChange:function(e){o(e),l(e.length>0)}})}function lN(e){let{callbackDelay:l,failOnNext:a,failOnComplete:o,onCompleteAlert:n,onNextAlert:s,customErrorNotice:r,errorNoticeType:d,...u}=e,[c,b]=i.useState("intro"),[p,m]=i.useState(!1),[x,h]=i.useState(!1),[y,v]=i.useState(!1),[g,f]=i.useState(null),V=i.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=i.useCallback(async()=>{if(f(null),l>0&&await new Promise(e=>setTimeout(e,1e3*l)),n&&alert("onComplete callback fired"),o){if(""!==r.trim())throw f({message:r,type:d}),Error("Custom error");throw Error("onComplete failed")}},[l,o,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)(lL,{}),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}:y?{message:"Great job, helmets are important for protecting your brain!",type:"warning"}:void 0},body:(0,t.jsx)(lI,{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)(lA,{setIsPasscodeValid:h}),nextButtonProps:{text:"Verify passcode"},nextEnabled:x}],S=j.slice(1).map(e=>e.stepKey);return(0,t.jsx)(lS.t,{steps:j,currentStepKey:c,numberedSteps:S,onStepChange:b,onComplete:C,...u})}let lR={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:i,...o}=e,n=i?{text:o.subtitle??"Default subtitle",leadingIcon:lV.N}:o.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,lM.openModal)(e=>(0,t.jsx)(lC.Modal,{...e,...o,title:o.title,subtitle:n,input:a?(0,t.jsx)(lm.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)(es.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:o.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:o,subtitle:n,formatSubtitle:s,...r}=e,d=i.useMemo(()=>s?function(e){let l,a=[],i=0,o=/\*\*(.+?)\*\*/g,n=0;for(;null!==(l=o.exec(e));)l.index>i&&a.push(e.substring(i,l.index)),a.push((0,t.jsx)("strong",{children:l[1]},n++)),i=o.lastIndex;return i<e.length&&a.push(e.substring(i)),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,lD.A)({...r,subtitle:d,cancelText:""===l?void 0:l,onConfirm:async e=>{try{if(await new Promise(e=>setTimeout(e,1e3*a)),o)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:o,...n}=e,s=o?{text:n.subtitle??"Default subtitle",leadingIcon:lV.N}:n.subtitle,r=i.useMemo(()=>{switch(l){case 0:return{type:"image",src:lE};case 1:return{type:"lottie",lottie:()=>a.e("95947").then(a.t.bind(a,604902,19)),aspectRatio:"6/4"};case 2:return{type:"rive",rive:lv.Q};case 3:return{type:"video",src:"https://cdn.discordapp.com/assets/content/06fafa729efafb6235e0ee9df9482566fa9e74b96a792a9265dca70113c71ab7.webm",fallbackImageSrc:lE,loop:!0,loopAt:2.5};case 4:return{type:"dynamic",component:lk.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,lM.openModal)(e=>(0,t.jsx)(lj.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,...i}=e,o={type:"dynamic",component:lk.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,lM.openModalLazy)(async()=>{let{ExpressiveModal:e}=await a.e("4823").then(a.bind(a,158954));return l=>(0,t.jsx)(e,{...l,...i,title:i.title,subtitle:i.subtitle,graphic:o,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:i.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,lM.openModal)(e=>(0,t.jsx)(lw.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:i,onCompleteAlert:o,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,lM.openModal)(e=>(0,t.jsx)(lN,{...e,callbackDelay:l,failOnNext:a,failOnComplete:i,onCompleteAlert:o,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,...i}=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,lM.openModal)(e=>(0,t.jsx)(lg.d,{...e,...i,"aria-label":"Base Modal Example",children:(0,t.jsx)(lf.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 lP=a(943854),lO=a.n(lP),lB=a(43105),lz=a(338854),lF=a(353795),l$=a(312640),lG=a(798618),l_=a(916845),lH=a(627330),lq=a(375708),lU=a(824078);function lX(e){let{steps:l,caretConfig:a={align:"center"},size:o="md",onStepChange:n,onRequestClose:s,popoverRef:r,shouldShow:d,position:u,...c}=e,[m,x]=i.useState(0);i.useEffect(()=>{d&&x(0)},[d]),i.useEffect(()=>{n?.(m)},[m,n]);let h=l[m],y=m+1===l.length,v=i.useCallback(()=>{h?.onCta?.(),y?s?.():x(e=>e+1)},[h,y,s]),g=i.useCallback(()=>{s?.()},[s]),f=i.useCallback(()=>{s?.()},[s]);if(!d||null==h)return null;let V={text:h.action?.text??(y?lq.intl.string(lq.t.i4jeWR):lq.intl.string(lq.t.PDTjLN)),variant:h.action?.variant??"primary",onClick:v,...h.action},j={targetElementRef:c.targetElementRef,hasVideo:c.hasVideo,scrollBehavior:c.scrollBehavior,position:u,shouldShow:d,onRequestClose:g,gradientColor:h.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)(l_.q,{onClick:f,variant:null!=h.gradientColor?"color-mix":void 0}),null!=h.graphic&&(0,t.jsx)("div",{className:b()(lU.graphic,{[lU[`graphic--${o}`]]:null!=o}),children:(0,t.jsx)(lF.v,{...h.graphic,aspectRatio:h.graphic.aspectRatio??("sm"===o?"2/1":"16/9")})}),(0,t.jsx)(lH.D,{title:h.title,body:h.body,badge:h.badge,textLink:h.textLink}),(0,t.jsx)("div",{className:lU.actionBar,children:(0,t.jsxs)("div",{className:lU.multistepActionLayout,children:[(0,t.jsx)(p.E,{variant:"text-xs/normal",className:lU.multistepIndicator,children:lq.intl.formatToPlainString(lq.t.rO31eY,{count:m+1,totalSteps:l.length})}),(0,t.jsx)(C.$,{size:"sm",...V})]})}),(0,t.jsx)(lG.F,{})]})})}let lZ="https://cdn.discordapp.com/assets/content/26736d800236761a21973e6fe690dfd5fa484f664976b3bba91b98d5d47bb1f7.svg",lW={title:"Popover",stories:[{name:"Popover",id:"popover",docs:"https://design.discord.tools/components/web/popover",component:function(e){let{showAsset:l,showActions:a,showTextLink:o,caretAlign:n,alignmentStrategy:s,align:r,size:d,position:u,...c}=e,[b,p]=i.useState(!1),m=i.useRef(null);return(0,t.jsxs)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",minHeight:"400px"},children:[(0,t.jsx)(lB.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:o?{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:o,...n}=e,[s,r]=i.useState(!1),d=i.useRef(null);return(0,t.jsxs)("div",{children:[(0,t.jsx)(lz.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:o,previewUrl:lO()(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,[o,n]=i.useState(!1),s=i.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)(lX,{...a,targetElementRef:s,shouldShow:o,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(!o)})]})},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 lY=a(911608);let lK={title:"ProgressBar",stories:[{name:"ProgressBar",id:"progress-bar",component:function(e){let{value:l,isIndeterminate:a,size:i,animate:o,valueLabel:n,ariaLabel:s}=e,r=""!==n?n:void 0,d=""!==s?s:"Progress";return a?(0,t.jsx)(lY.z,{isIndeterminate:!0,size:i,animate:o,valueLabel:r,"aria-label":d}):(0,t.jsx)(lY.z,{value:l,size:i,animate:o,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 lQ=a(773812);let lJ={title:"RadioGroup",stories:[{id:"radiogroup",name:"RadioGroup",component:function(e){let{disabled:l,optionCount:a,label:o,optionLabel:n,description:s,showIcons:r,withMixedDisabledOptions:d}=e,[u,c]=i.useState("option1"),b=i.useMemo(()=>[{name:null!=n?`${n} 1`:"Option 1",value:"option1",desc:null==s||""===s?void 0:s,leadingIcon:r?eR.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?eR.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?eR.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?eR.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?eR.m:void 0,disabled:!d&&void 0}].slice(0,Math.max(1,Math.min(5,a))),[a,n,s,r,d]),m=i.useCallback(e=>{c(e)},[]),x=i.useCallback(()=>{b.length>0&&c(b[0].value)},[b]),h=i.useCallback(()=>{b.length>0&&c(b[b.length-1].value)},[b]),y=i.useCallback(()=>{c(void 0)},[]);return(0,t.jsxs)(D.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(lQ.z,{value:u,label:o,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:h,disabled:l||0===b.length}),(0,t.jsx)(C.$,{variant:"primary",size:"sm",text:"Clear",onClick:y,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}}}]},l0={title:"RangeCalendar",stories:[{id:"range-calendar",name:"RangeCalendar",component:function(e){let{disabled:l,readOnly:a,showMinMax:o}=e,[n,s]=i.useState({start:(0,eM.Ec)((0,eM.Xj)()),end:(0,eM.Ec)((0,eM.Xj)()).add({days:7})}),r=i.useCallback(e=>{s(e)},[]),d=i.useCallback(()=>{s(null)},[]),u=i.useCallback(()=>{let e=(0,eM.Ec)((0,eM.Xj)());s({start:e,end:e.add({days:7})})},[]),c=i.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)(e4,{value:n,onChange:r,isDisabled:l,isReadOnly:a,minValue:o?(0,eT._U)("2024-01-01"):void 0,maxValue:o?(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 l1=a(593924),l2=a(844222),l3=a(692327);let l4=Object.entries(l1).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 l6=a(540637),l7=a(732771),l8=a(379649);let l5=[{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}],l9=[{label:"Aardvark",value:"aardvark",id:"aardvark",leading:lV.N,trailing:{type:"badge",badgeType:"new"},description:"This is an aardvark"},{label:"Cat",value:"cat",id:"cat",leading:lV.N,trailing:"20m",description:"This is a cat"},{label:"Dog",value:"dog",id:"dog",leading:lV.N},{label:"Kangaroo",value:"kangaroo",id:"kangaroo",leading:{type:"image",src:l8}},{label:"Panda",value:"panda",id:"panda",leading:{type:"avatar",src:l8}},{label:"Snake",value:"snake",id:"snake",leading:lV.N,disabled:!0}],ae={title:"Select",stories:[{id:"select",name:"Select",component:function(e){let{selectionMode:l,withLeadingAndTrailing:a,...o}=e,[n,s]=i.useState(void 0),[r,d]=i.useState([]),u=al(a,o.asyncOptions);return"single"===l?(0,t.jsx)(ll.l,{...o,selectionMode:l,options:u,onSelectionChange:s,value:n}):(0,t.jsx)(ll.l,{...o,selectionMode:l,options:u,onSelectionChange:d,value:r})},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},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"},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:o,...n}=e,[s,r]=i.useState(void 0),[d,u]=i.useState([]),c=al(a,o);return"single"===l?(0,t.jsx)(lT.Z,{...n,selectionMode:l,onSelectionChange:r,value:s,options:c}):(0,t.jsx)(lT.Z,{...n,selectionMode:l,onSelectionChange:u,value:d,options:c})},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},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:o,description:n,helperText:s,errorMessage:r,successMessage:d,wrapTags:u,withLeadingAndTrailing:c,placeholder:b,...p}=e,{required:m,disabled:x}=p,h=al(c,p.asyncOptions),[y,v]=i.useState(null);return(0,t.jsxs)(l7.iS,{selectionMode:l,onSelectionChange:v,options:h,value:y,...p,children:[(0,t.jsx)(l7.a3,{label:a,hideLabel:o,placeholder:b,required:m,disabled:x,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},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:o,withLeadingAndTrailing:n}=e,[s,r]=i.useState(null);return(0,t.jsx)(l6.q,{selectionMode:l,required:a,shouldFocusWrap:o,items:n?l9:l5,onSelectionChange:r,selectedItems:s})},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},required:{label:"Required",type:"boolean",defaultValue:!1},shouldFocusWrap:{label:"Should focus wrap",type:"boolean",defaultValue:!1}}}]};function al(e,l){let a=i.useRef(null);return i.useMemo(()=>{let t=e?l9:l5;return l?e=>new Promise(null!=a.current?e=>e(a.current):e=>setTimeout(()=>(a.current=t,e(t)),1e3)):t},[e,l])}let aa={title:"Switch",stories:[{id:"switch",name:"Switch",component:function(e){let{disabled:l,hasIcon:a,label:o,description:n,required:s,errorMessage:r}=e,[d,u]=i.useState(!1);return(0,t.jsx)(le.d,{label:o,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 at=a(528265),ai=a(11779);let ao={title:"TagGroup",stories:[{name:"TagGroup",id:"tag-group",component:function(e){let{selectionMode:l,removeable:a,layout:s}=e,r=(0,o.bG)([n.default],()=>n.default.getCurrentUser()),d=i.useMemo(()=>[{id:"strength",label:"Strength",icon:ai.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]=i.useState(d),b=i.useCallback(e=>{c(u.filter(l=>!e.has(l.id)))},[u]),p=i.useCallback(()=>{c(d)},[d]),m=(0,t.jsx)(at.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"}]}}}]},an=["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/semibold","experimental/heading-xs/bold","experimental/heading-sm/semibold","experimental/heading-sm/bold","experimental/heading-md/semibold","experimental/heading-md/bold","experimental/heading-lg/semibold","experimental/heading-lg/bold","experimental/heading-xl/semibold","experimental/heading-xl/bold","experimental/heading-xxl/semibold","experimental/heading-xxl/bold","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-sm/normal","experimental/body-sm/medium","experimental/body-md/normal","experimental/body-md/medium","experimental/body-lg/normal","experimental/body-lg/medium","experimental/meta/normal","experimental/meta/medium","display-sm","display-md","display-lg","experimental/display-xs","experimental/display-sm","experimental/display-md","experimental/display-lg","experimental/label-xs/medium","experimental/label-xs/semibold","experimental/label-sm/medium","experimental/label-sm/semibold","experimental/label-md/medium","experimental/label-md/semibold","experimental/label-lg/medium","experimental/label-lg/semibold","code","experimental/mono-md/normal","experimental/mono-md/bold","experimental/mono-sm/normal","experimental/mono-sm/bold"];var as=a(364522),ar=a(653197);let ad={name:"Text",id:"text",component:p.E,controls:{variant:{label:"Variant",type:"select",defaultValue:"text-sm/normal",options:Object.values(an).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 au=a(459192),ac=a(990078),ab=a(557464);let ap={title:"Tooltip",stories:[{name:"Tooltip",id:"tooltip",docs:"https://design.discord.tools/components/web/tooltip",component:function(e){let{text:l,position:a,align:o,caretAlign:n,customOffset:s,delay:r,spacing:d,ariaHidden:u,...c}=e,b=i.useMemo(()=>{if("center"!==n&&null!=n)return"custom"===n?{align:n,customOffset:s}:{align:n}},[n,s]);return(0,t.jsx)(ac.m,{text:l,position:a,align:o,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:o,assetSize:n,padding:s,position:r,align:d,caretAlign:u,customOffset:c,delay:b,spacing:p,forceOpen:m,...x}=e,h=i.useMemo(()=>{if("center"!==u&&null!=u)return"custom"===u?{align:u,customOffset:c}:{align:u}},[u,c]),y=i.useMemo(()=>o?{type:"image",src:ab.A,aspectRatio:"1/1"}:void 0,[o]);return(0,t.jsx)(au.u,{title:l,body:a,position:r,align:d,padding:s,delay:b,spacing:p,caretConfig:h,asset:y,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 am=a(508382),ax=a(481224);let ah={id:"mana",name:"Mana",groups:[{title:"Text",stories:[ad,{name:"Typography Scales",id:"text-scales",component:function(e){return(0,t.jsx)(as.Ar,{className:ar.H,children:Object.values(an).map(l=>(0,t.jsxs)(V.Z,{className:ar.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,eN,eO,ez,e$,e8,lJ,l0,aa,lR,ly,ae,lW,lK,ap,ao,ld,{title:"FloatingLayer",stories:[{name:"FloatingLayer",id:"popover-layer",component:function(e){let{placement:l,spacing:a,autoFlip:o,autoShift:n,strategy:s,portal:r,blockPointerEvents:d}=e,[u,c]=i.useState(!1);return(0,t.jsx)(am.Ow,{open:u,onOpenChange:c,placement:l,spacing:a,autoFlip:o,autoShift:n,strategy:s,portal:r,blockPointerEvents:d,renderLayer:()=>(0,t.jsx)("div",{className:ax.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]=i.useState(!0),a=i.useContext(l2.C),[o,n]=i.useState(0);return(0,t.jsxs)(l2.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:l4.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)})},o)]})}}]}]},ay={collections:[ah,eu]}}