Module 645136

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