Module 359300

97,282 characters · in 47e446c012a61905.js
Dependencies
Required by (0)none
Lazily required by (0)none
Requires (131)
11779 17928 22231 27192 27232 43105 64700 81466 97808 102079 106236 109802 111159 116833 123292 150934 159402 167417 173936 175841 176781 189213 192308 194261 195529 224640 235986 240921 241326 243721 244367 260598 270003 276293 287809 292666 307301 312640 314116 320448 321073 331322 338854 347704 353795 359778 364522 366605 375708 379649 395515 404778 406810 408278 417098 430993 444550 452027 459192 460890 477782 481224 489215 493108 503698 508274 508382 508770 509434 512950 521489 521767 528265 540637 557464 561392 577684 582306 593924 624479 625903 627330 627968 650682 653197 661531 666944 668953 683071 691885 692327 693321 716263 732771 742158 743513 759146 760345 761508 770378 772707 773812 778712 783878 785007 798618 817724 818348 821609 822986 825484 825860 834730 843282 844222 862301 881636 885574 892547 911608 916845 921853 922016 928231 933832 935063 939546 972213 980707 987062 990078
Lazily requires (2)
158954 604902
Source Raw
function(e,l,a){a.r(l),a.d(l,{manaCollection:()=>ay,playgroundConfig:()=>av});var t=a(627968),o=a(64700),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(27192),b=a(331322),p=a(834730),m=a(821609);let x={id:"void-checkbox",name:"Checkbox",component:function(e){let{disabled:l,readOnly:a,displayOnly:i,type:n,size:s,align:r,shape:d,label:u}=e,[x,h]=o.useState(!1),y=o.useCallback((e,l)=>{h(l)},[]),v=o.useCallback(()=>{h(!0)},[]),g=o.useCallback(()=>{h(!1)},[]),f=o.useCallback(()=>{h(e=>!e)},[]);return(0,t.jsxs)(b.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(c.Kj,{"data-migration-pending":!0,value:x,onChange:y,disabled:l,readOnly:a,displayOnly:i,type:n,size:s,align:r,shape:d,children:(0,t.jsx)(p.E,{variant:"text-md/normal",children:u})}),(0,t.jsxs)(p.E,{variant:"text-sm/normal",children:["Current state: ",x?"Checked":"Unchecked"]}),(0,t.jsxs)(b.B,{direction:"horizontal",gap:"sm",children:[(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"Check",onClick:v,disabled:l||a}),(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"Uncheck",onClick:g,disabled:l||a}),(0,t.jsx)(m.$,{variant:"primary",size:"sm",text:"Toggle",onClick:f,disabled:l||a})]})]})},controls:{label:{type:"text",label:"Label",defaultValue:"Accept terms and conditions"},disabled:{type:"boolean",label:"Disabled",defaultValue:!1},readOnly:{type:"boolean",label:"Read Only",defaultValue:!1},displayOnly:{type:"boolean",label:"Display Only",defaultValue:!1},type:{type:"select",label:"Type",defaultValue:c.Or.DEFAULT,options:[{label:"Default",value:c.Or.DEFAULT},{label:"Inverted",value:c.Or.INVERTED},{label:"Ghost",value:c.Or.GHOST},{label:"Row",value:c.Or.ROW}]},size:{type:"number",label:"Size",defaultValue:24},align:{type:"select",label:"Alignment",defaultValue:c.zI.CENTER,options:[{label:"Center",value:c.zI.CENTER},{label:"Top",value:c.zI.TOP}]},shape:{type:"select",label:"Shape",defaultValue:c.DO.BOX,options:[{label:"Box",value:c.DO.BOX},{label:"Small Box",value:c.DO.SMALL_BOX},{label:"Round",value:c.DO.ROUND}]}}};var h=a(503698),y=a.n(h),v=a(489215);let g={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 f(e){let{text:l,variant:a="grayLight"}=e,o=g[a];return(0,t.jsx)(p.E,{variant:"eyebrow",className:y()(v.chip,v[o]),children:l})}var V=a(759146);let j=["blurple","purple","green","orange","yellow","pink","red","gray"],C=["Light","Medium","Dark"],S={title:"Chip",stories:[{name:"Chip",id:"chip",component:f,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:V.lx,children:C.map(e=>(0,t.jsxs)("div",{className:V.uW,children:[(0,t.jsx)("h3",{className:V.Gf,children:e}),(0,t.jsx)("div",{className:V.f2,children:j.map(l=>{let a=`${l}${e}`;return(0,t.jsx)(f,{text:l,variant:a},a)})})]},e))})}}]};var k=a(359778),w=a(235986),T=a(244367),M=a(742158),D=a(743513);k.Z.Types;function E(e){let l,a,{type:o=k.Z.Types.DANGER,imageData:i,button:n,className:s,iconClassName:r,title:d,body:u,style:c,align:b=w.A.Align.START}=e,p=w.A.Direction.HORIZONTAL;if(null!=i){let{position:e,...a}=i;l=(0,t.jsx)(w.A.Child,{grow:0,shrink:0,children:(0,t.jsx)("img",{alt:"",className:y()(D.Kk,r),...a})}),"right"===e&&(p=w.A.Direction.HORIZONTAL_REVERSE)}else null!=n&&(a=n);let m=!0;return o===k.Z.Types.PRIMARY&&(m=!1),(0,t.jsx)(k.Z,{className:y()(D.RJ,s),type:o,style:c,children:(0,t.jsxs)(w.A,{direction:p,align:b,children:[l,(0,t.jsxs)(w.A.Child,{children:[null!=d&&""!==d?(0,t.jsx)(M.z,{"data-migration-pending":!0,className:y()(D.$G,{[D.vV]:m}),children:d}):null,(0,t.jsx)(T.a,{"data-migration-pending":!0,className:y()(D.Vz,{[D.vV]:m}),children:u}),a]})]})})}E.Types=k.Z.Types;let N={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)(m.$,{text:"Action"}):void 0;return(0,t.jsx)(E,{"data-migration-pending":!0,type:l,title:a,body:o,button:n})},controls:{type:{type:"select",label:"Type",defaultValue:k.Z.Types.DANGER,options:[{label:"Primary",value:k.Z.Types.PRIMARY},{label:"Danger",value:k.Z.Types.DANGER},{label:"Warning",value:k.Z.Types.WARNING},{label:"Success",value:k.Z.Types.SUCCESS},{label:"Brand",value:k.Z.Types.BRAND},{label:"Custom",value:k.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)(M.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 L=a(452027),A=a(512950),I=a(980707),O=a(477782),R=a(22231),P=a(366605),B=a(624479),z=a(625903),F=a(509434),$=a(241326),G=a(922016),_=a(159402);let q={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:x,showLoading:h,showTrailingIndicator:y,dangerItemColor:v}=e,[g,f]=o.useState(!0),[V,j]=o.useState(!1),[C,S]=o.useState("text"),[k,w]=o.useState("cozy"),[T,M]=o.useState(!0),D=o.useRef(null);return(0,t.jsxs)("div",{className:_.k,children:[!T&&(0,t.jsx)(m.$,{text:"Open Menu",onClick:()=>M(!0)}),(0,t.jsx)(G.Y,{renderPopout:e=>{let{closePopout:o}=e;return(0,t.jsxs)(I.W,{"data-menu-migrated":!0,navId:"menu-story","aria-label":"Story Menu",variant:l,hideScroller:a,onClose:o,onSelect:()=>{},children:[(0,t.jsx)(O.Dr,{id:"edit",label:"Edit Message",icon:u?R.R:void 0,leadingAccessory:u?{type:"icon",icon:R.R}:void 0,shortcut:c?"\u2318E":void 0,action:()=>{}}),(0,t.jsx)(O.Dr,{id:"pin",label:"Pin Message",icon:u?P.t:void 0,leadingAccessory:u?{type:"icon",icon:P.t}:void 0,subtext:b?"Pin this message to the channel":void 0,badge:"beta",loading:h,action:()=>{}}),(0,t.jsx)(O.Dr,{id:"copy",label:"Copy Message Link",icon:u?B.T:void 0,leadingAccessory:u?{type:"icon",icon:B.T}:void 0,badge:"new",action:()=>{}}),p&&(0,t.jsx)(O.Dr,{id:"disabled",label:"Disabled Item",icon:u?z.Z:void 0,leadingAccessory:u?{type:"icon",icon:z.Z}:void 0,disabled:!0,action:()=>{}}),x&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(O.bX,{}),(0,t.jsx)(O.Dr,{id:"brand-item",label:"Brand Item",color:"brand",trailingIndicator:y?{type:"icon",icon:F.I}:void 0,action:()=>{}}),(0,t.jsx)(O.Dr,{id:"premium-item",label:"Premium Item",color:"premium",icon:u?z.Z:void 0,leadingAccessory:u?{type:"icon",icon:z.Z}:void 0,action:()=>{}}),(0,t.jsx)(O.Dr,{id:"success-item",label:"Success Item",color:"success",icon:u?z.Z:void 0,leadingAccessory:u?{type:"icon",icon:z.Z}:void 0,action:()=>{}})]}),d&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(O.bX,{}),(0,t.jsxs)(O.Dr,{id:"submenu",label:"More Options",icon:u?z.Z:void 0,children:[(0,t.jsx)(O.Dr,{id:"submenu-1",label:"Submenu Item 1",action:()=>{}}),(0,t.jsx)(O.Dr,{id:"submenu-2",label:"Submenu Item 2",action:()=>{}}),(0,t.jsx)(O.Dr,{id:"submenu-3",label:"Submenu Item 3",action:()=>{}})]})]}),n&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(O.bX,{}),(0,t.jsx)(O.sL,{id:"notifications",label:"Enable Notifications Enable Notifications Enable Notifications",checked:g,action:()=>f(!g)}),(0,t.jsx)(O.sL,{id:"mute",label:"Mute Channel",checked:V,action:()=>j(!V)})]}),r&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(O.bX,{}),(0,t.jsx)(O.fP,{id:"switch-notifications",label:"Push Notifications",checked:g,action:()=>f(!g)})]}),s&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(O.bX,{}),(0,t.jsxs)(O.rX,{label:"Channel Type",children:[(0,t.jsx)(O.iD,{id:"radio-text",group:"channel-type",label:"Text Channel Text Channel Text Channel Text Channel Text Channel Text Channel ",checked:"text"===C,action:()=>S("text")}),(0,t.jsx)(O.iD,{id:"radio-voice",group:"channel-type",label:"Voice Channel",checked:"voice"===C,action:()=>S("voice")})]}),(0,t.jsx)(O.bX,{}),(0,t.jsxs)(O.rX,{label:"View Mode",children:[(0,t.jsx)(O.iD,{id:"radio-cozy",group:"view-mode",label:"Cozy",checked:"cozy"===k,action:()=>w("cozy")}),(0,t.jsx)(O.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)(O.bX,{}),(0,t.jsxs)(O.rX,{label:"Grouped Items",children:[(0,t.jsx)(O.Dr,{id:"group-1",label:"Group Item 1",action:()=>{}}),(0,t.jsx)(O.Dr,{id:"group-2",label:"Group Item 2",action:()=>{}}),(0,t.jsx)(O.Dr,{id:"group-3",label:"Group Item 3",action:()=>{}})]})]}),(0,t.jsx)(O.bX,{}),(0,t.jsx)(O.Dr,{id:"delete",label:"Delete Message",color:v,icon:u?$.u:void 0,action:()=>{}})]})},position:"bottom",align:"center",shouldShow:!0,targetElementRef:D,onRequestClose:()=>M(!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 H=a(417098);let X={title:"Notice",stories:[{id:"notice",name:"Notice",component:function(e){let{color:l,message:a}=e,o={BRAND:H.Hv.BRAND,INFO:H.Hv.INFO,WARNING:H.Hv.WARNING,DANGER:H.Hv.DANGER,DEFAULT:H.Hv.DEFAULT,NEUTRAL:H.Hv.NEUTRAL};return(0,t.jsx)(H.$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 U=a(933832),W=a(176781),Z=a(173936),Y=a(972213),K=a(785007);let Q={title:"VoidRadioGroup",stories:[{id:"voidradiogroup",name:"VoidRadioGroup",component:function(e){let{optionCount:l,size:a,disabled:i,orientation:n,radioPosition:s,withTransparentBackground:r,label:d,description:u,withDescriptions:c,withIcons:b}=e,[p,m]=o.useState("option1"),x=[U.A,W.x,Z.q,z.Z,Y.d],h=Array.from({length:l},(e,l)=>({value:`option${l+1}`,name:`Option ${l+1}`,description:c?`This is a description for option ${l+1}`:void 0,icon:b?x[l%x.length]:void 0}));return(0,t.jsx)(K.$d,{"data-migration-pending":!0,value:p,onChange:e=>{let{value:l}=e;return m(l)},options:h,size:a,disabled:i,orientation:n,radioPosition:s,withTransparentBackground:r,label:d,description:u})},controls:{optionCount:{type:"select",label:"Number of Options",defaultValue:3,options:[{label:"2 Options",value:2},{label:"3 Options",value:3},{label:"4 Options",value:4},{label:"5 Options",value:5},{label:"6 Options",value:6}]},withDescriptions:{type:"boolean",label:"Show Descriptions",defaultValue:!0},withIcons:{type:"boolean",label:"Show Icons",defaultValue:!0},size:{type:"select",label:"Size",defaultValue:"medium",options:[{label:"Small",value:"small"},{label:"Medium",value:"medium"},{label:"Large",value:"large"}]},disabled:{type:"boolean",label:"Disabled",defaultValue:!1},orientation:{type:"select",label:"Orientation",defaultValue:"vertical",options:[{label:"Horizontal",value:"horizontal"},{label:"Vertical",value:"vertical"}]},radioPosition:{type:"select",label:"Radio Position",defaultValue:"left",options:[{label:"Left",value:"left"},{label:"Right",value:"right"}]},withTransparentBackground:{type:"boolean",label:"With Transparent Background",defaultValue:!1},label:{type:"text",label:"Label",defaultValue:"Radio Group"},description:{type:"text",label:"Description",defaultValue:"This is a description for the radio group"}}}]};var J=a(106236);let ee={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)(J.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 el=a(395515);let ea={title:"VoidSwitch",stories:[{id:"switch",name:"Switch",component:function(e){let[l,a]=o.useState(!1);return(0,t.jsx)(el.T,{"data-migration-pending":!0,...e,onChange:a,checked:l})},controls:{disabled:{type:"boolean",label:"Disabled",defaultValue:!1},label:{type:"text",label:"Label",defaultValue:"Switch Label"},description:{type:"text",label:"Description",defaultValue:"This is the description for the switch"},required:{type:"boolean",label:"Required",defaultValue:!1}}}]};var et=a(761508);let eo={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)(et.V,{type:a,look:l,selectedItem:n,onItemSelect:s,children:r.map(e=>(0,t.jsx)(et.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 ei=a(444550),en=a(843282);let es=[{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"}],er={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)(en.Te,{variant:b,label:l,description:a,value:p,onChange:m,options:es,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"}]}}},ed={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,p]=o.useState("blue"),[m,x]=o.useState(["blue"]);return(0,t.jsxs)(b.B,{gap:24,children:[(0,t.jsx)(ei.p,{...u,value:c,onChange:p,options:es,placeholder:l,isDisabled:a,isProcessing:i,clearable:n,clearQueryOnSelect:r,filter:d}),(0,t.jsx)(ei.p,{...u,multi:!0,value:m,onChange:x,options:es,placeholder:l,isDisabled:a,isProcessing:i,clearable:n,closeOnSelect:s,clearQueryOnSelect:r,filter:d})]})},controls:{...er.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 eu=a(582306),ec=a(292666),eb=a(666944);let ep=[{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"}],em={id:"void",name:"Void",groups:[{title:"HelpMessage",stories:[{name:"HelpMessage",id:"help-message",component:function(e){let{text:l}=e;return(0,t.jsx)(b.B,{gap:16,children:Object.values(A.Y).map(e=>(0,t.jsx)(L.D,{label:e,children:(0,t.jsx)(A.p,{messageType:e,children:l},e)},e))})},controls:{text:{label:"Text",type:"text",defaultValue:"This is a help message"}}}]},{title:"Select",stories:[er,ed]},{title:"Checkbox",stories:[x]},ea,Q,ee,eo,{title:"Avatar",stories:[u]},S,X,{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)(b.B,{gap:8,children:[(0,t.jsx)(en.Te,{value:i,onChange:n,options:ep,placeholder:a,isDisabled:l}),(0,t.jsx)(ec.k,{placeholder:a,disabled:l}),(0,t.jsx)(ei.p,{value:i,onChange:n,options:ep,placeholder:a,isDisabled:l}),(0,t.jsx)(eu.J,{onSelect:r,value:s,disabled:l}),(0,t.jsx)(eb.c,{onChange:u,value:d,disabled:l})]})},controls:{disabled:{type:"boolean",label:"Disabled",defaultValue:!1},placeholder:{type:"text",label:"Placeholder",defaultValue:"Placeholder"}}}]},N,q]};var ex=a(27232),eh=a(825860),ey=a(175841),ev=a(406810),eg=a(508770);let ef={none:void 0,StarIcon:ex.G,FireIcon:eh.Y,SparklesIcon:ey.B,ClockIcon: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"}]},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"}]}}}]};var ej=a(408278),eC=a(123292),eS=a(825484),ek=a(111159);let ew={title:"Buttons",stories:[{name:"Button",id:"button",component:m.$,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)(ej.K,{...e,icon:ek.p,"aria-label":"Clyde"})},controls:{variant:{label:"Variant",type:"select",defaultValue:"primary",options:[{label:"Primary",value:"primary"},{label:"Secondary",value:"secondary"},{label:"Critical Primary",value:"critical-primary"},{label:"Critical Secondary",value:"critical-secondary"},{label:"Active",value:"active"},{label:"Overlay Primary",value:"overlay-primary"},{label:"Overlay Secondary",value:"overlay-secondary"},{label:"Icon Only",value:"icon-only"}]},size:{label:"Size",type:"select",defaultValue:"md",options:[{label:"Small",value:"sm"},{label:"Medium",value:"md"}]},disabled:{label:"Disabled",type:"boolean",defaultValue:!1},loading:{label:"Loading",type:"boolean",defaultValue:!1}}},{name:"TextButton",id:"text-button",docs:"https://design.discord.tools/components/web/buttons/text-button",component:eC.Q,controls:{text:{label:"Text",type:"text",defaultValue:"Link Button"},variant:{label:"Variant",type:"select",defaultValue:"primary",options:[{label:"Primary",value:"primary"},{label:"Secondary",value:"secondary"},{label:"Always White",value:"always-white"},{label:"Critical",value:"critical"}]},disabled:{label:"Disabled",type:"boolean",defaultValue:!1}}},{name:"ButtonGroup",id:"button-group",docs:"https://design.discord.tools/components/web/buttons/button-group",component:function(e){return(0,t.jsxs)(eS.e,{...e,children:[(0,t.jsx)(m.$,{variant:"secondary",text:"Cancel"}),(0,t.jsx)(m.$,{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 eT=a(939546),eM=a(928231),eD=a(822986),eE=a(577684),eN=a(493108),eL=a(921853),eA=a(320448),eI=a(460890),eO=a(195529);function eR(e){let{offset:l,monthLabel:a,isRangeSelection:o=!1}=e;return(0,t.jsxs)("div",{className:eO.F4,children:[null!=a&&(0,t.jsx)(p.E,{variant:"text-md/semibold",color:"text-strong",children:a}),(0,t.jsxs)(eE.r8,{offset:l,className:eO.ZP,weekdayStyle:"short",children:[(0,t.jsx)(eE.co,{children:e=>(0,t.jsx)(eE.W$,{className:eO.e4,children:(0,t.jsx)(p.E,{variant:"text-sm/normal",color:"text-muted",children:e})})}),(0,t.jsx)(eE.Xq,{children:e=>(0,t.jsx)(eE.Zr,{date:e,className:y()(eO.Hn,o&&eO.KK),children:e=>{let{formattedDate:l}=e;return(0,t.jsx)("span",{className:eO.AY,children:(0,t.jsx)(p.E,{variant:"text-md/normal",color:"currentColor",children:l})})}})})]})]})}function eP(e){let{value:l,onChange:a,minValue:i,maxValue:n,disabled:s=!1,readOnly:r=!1,className:d,"aria-label":u}=e,{i18n:c}=(0,eI.G9)(),[b,m]=o.useState(l);return o.useEffect(()=>{m(l)},[l]),(0,t.jsx)(eE.Vv,{value:l,focusedValue:b,onFocusChange:m,onChange:a,minValue:i,maxValue:n,isDisabled:s,isReadOnly:r,"aria-label":u,"data-mana-component":"calendar",className:y()(eO.BJ,d),children:e=>(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)("header",{className:eO.I4,children:[(0,t.jsx)(ej.K,{variant:"icon-only",size:"sm",icon:eL.n,"aria-label":c.CALENDAR_PREVIOUS_MONTH_LABEL,onClick:()=>e.state.focusPreviousPage(),slot:"previous"}),(0,t.jsx)("div",{className:eO.Wb,children:(0,t.jsx)(p.E,{variant:"text-md/semibold",color:"text-strong",children:(0,t.jsx)(eN.D,{})})}),(0,t.jsx)(ej.K,{variant:"icon-only",size:"sm",icon:eA._,onClick:()=>e.state.focusNextPage(),"aria-label":c.CALENDAR_NEXT_MONTH_LABEL,slot:"next"})]}),(0,t.jsx)("div",{className:eO.US,children:(0,t.jsx)(eR,{})})]})})}var eB=a(683071);let ez=(0,a(240921).Ay)({kind:"user",name:"2025-10-mana-date-inputs",defaultConfig:{enabled:!1},variations:{1:{enabled:!0}}});function eF(e){return ez.useConfig({location:e}).enabled}let e$={title:"Calendar",stories:[{id:"calendar",name:"Calendar",component:function(e){let{disabled:l,readOnly:a,showMinMax:i}=e,[n,s]=o.useState((0,eT.Ec)((0,eT.Xj)())),r=o.useCallback(e=>{s(e)},[]),d=o.useCallback(()=>{s(null)},[]),u=o.useCallback(()=>{s((0,eT.Ec)((0,eT.Xj)()))},[]),c=o.useCallback(()=>{s((0,eM._U)("2024-12-25"))},[]);return eF("CalendarStory")?(0,t.jsxs)(b.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(eP,{value:n,onChange:r,disabled:l,readOnly:a,minValue:i?(0,eM._U)("2024-01-01"):void 0,maxValue:i?(0,eM._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,eT.Xj)()),"MMMM d, yyyy"):"None"]}),(0,t.jsxs)(b.B,{direction:"horizontal",gap:"sm",children:[(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"Clear",onClick:d,disabled:l||a}),(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"Set Today",onClick:u,disabled:l||a}),(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"Set Dec 25",onClick:c,disabled:l||a})]})]}):(0,t.jsxs)(eB.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 eG=a(885574),e_=a(150934);let eq={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)},[]),x=o.useCallback(()=>{d(e=>!e)},[]);return(0,t.jsxs)(b.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(e_.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?eG.m:void 0}),(0,t.jsxs)(p.E,{variant:"text-sm/normal",children:["Current state: ",r?"Checked":"Unchecked"]}),(0,t.jsxs)(b.B,{direction:"horizontal",gap:"sm",children:[(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"Check",onClick:u,disabled:i}),(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"Uncheck",onClick:c,disabled:i}),(0,t.jsx)(m.$,{variant:"primary",size:"sm",text:"Toggle",onClick:x,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 eH=a(167417);let eX={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"]),x=o.useMemo(()=>[{label:null!=n?`${n} 1`:"Option 1",value:"option1",description:null==s||""===s?void 0:s,leadingIcon:r?eG.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?eG.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?eG.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?eG.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?eG.m:void 0,disabled:!d&&void 0}].slice(0,Math.max(1,Math.min(5,a))),[a,n,s,r,d]),h=o.useCallback(e=>{c(e)},[]),y=o.useCallback(()=>{c(x.map(e=>e.value))},[x]),v=o.useCallback(()=>{c([])},[]),g=o.useCallback(()=>{x.length>0&&c([x[0].value])},[x]);return(0,t.jsxs)(b.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(eH.$,{selectedValues:u,label:i,onChange:h,options:x,disabled:l}),(0,t.jsxs)(p.E,{variant:"text-sm/normal",children:["Current selection: ",u.length>0?u.join(", "):"None"]}),(0,t.jsxs)(b.B,{direction:"horizontal",gap:"sm",children:[(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"Select All",onClick:y,disabled:l||0===x.length}),(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"Select First",onClick:g,disabled:l||0===x.length}),(0,t.jsx)(m.$,{variant:"primary",size:"sm",text:"Clear All",onClick:v,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 eU=a(693321),eW=a(770378),eZ=a(521767),eY=a(817724),eK=a(650682),eQ=a(987062),eJ=a(561392),e0=a(716263),e1=a(81466),e2=a(862301),e3=a(760345);function e4(e){let{value:l,onChange:a,minValue:o,maxValue:i,placeholderValue:n,...s}=e,{i18n:r}=(0,eI.G9)(),{fieldProps:d}=(0,L.n)(s),{disabled:u,errorMessage:c,required:b=!1}=d,p={hasError:null!=c&&""!==c},{refs:m,floatingStyles:x,isOpen:h,setIsOpen:v,context:g,getFloatingProps:f,getReferenceProps:V}=(0,eJ.u)({matchReferenceWidth:!1,placement:"bottom-start"}),{isMounted:j,styles:C}=(0,e0.DL)(g,{common:e=>{let{side:l}=e;return{transformOrigin:`${"top"===l?"bottom":"top"} center`}},initial:{opacity:.5,transform:"scaleY(0.96)"},duration:100}),S=e=>{a?.(e),v(!1)};return(0,t.jsx)(L.D,{...d,children:e=>(0,t.jsx)(e2.F,{className:e3.LF,validation:p,ref:m.setReference,...V(),children:(0,t.jsxs)(eW.lr,{id:e.controlId,"aria-labelledby":e.labelId,"aria-describedby":e.describedById,"aria-invalid":null!=e.errorMessageId,"aria-errormessage":e.errorMessageId,value:l,onChange:S,isDisabled:u,isRequired:b,minValue:o,maxValue:i,placeholderValue:n,granularity:"day","data-mana-component":"date-picker",className:e3.Nz,children:[(0,t.jsxs)(eZ.Y,{className:e3.wO,children:[(0,t.jsx)(eY.J3,{children:e=>(0,t.jsx)(eY.Eu,{segment:e,className:y()(e3.mX,e.isPlaceholder&&e3.qf)})}),(0,t.jsx)(eK.$,{className:e3.B7,onClick:()=>v(!h),"aria-label":r.DATE_INPUT_OPEN_CALENDAR_LABEL,children:(0,t.jsx)(e1.C,{size:"sm",color:"currentColor"})})]}),h&&j&&(0,t.jsx)("div",{...f(),ref:m.setFloating,style:x,className:e3.oO,children:(0,t.jsx)(eU.n1,{contain:!0,restoreFocus:!0,children:(0,t.jsx)(eQ.lG,{"aria-label":r.DATE_INPUT_OPEN_CALENDAR_LABEL,style:C,className:e3.r3,children:(0,t.jsx)(eP,{value:l,onChange:S,minValue:o,maxValue:i,disabled:u})})})})]})})})}let e6={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,eT.Ec)((0,eT.Xj)())),c=o.useCallback(e=>{u(e)},[]),p=o.useCallback(()=>{u(null)},[]),x=o.useCallback(()=>{u((0,eT.Ec)((0,eT.Xj)()))},[]),h=o.useCallback(()=>{u((0,eM._U)("2024-12-25"))},[]);return eF("CalendarStory")?(0,t.jsxs)(b.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(e4,{label:l,description:""!==a?a:void 0,value:d,onChange:c,disabled:n,required:s,minValue:r?(0,eM._U)("2024-01-01"):void 0,maxValue:r?(0,eM._U)("2024-12-31"):void 0,errorMessage:""!==i?i:void 0,helperText:null!=d?(0,eD.default)(d.toDate((0,eT.Xj)()),"MMMM d, yyyy"):""}),(0,t.jsxs)(b.B,{direction:"horizontal",gap:"sm",children:[(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"Clear",onClick:p,disabled:n}),(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"Set Today",onClick:x,disabled:n}),(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"Set Dec 25",onClick:h,disabled:n})]})]}):(0,t.jsxs)(eB.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 e7=a(668953),e5=a(881636);function e8(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:b,locale:m}=(0,eI.G9)(),x=l?.start??null,[h,v]=o.useState(x);return o.useEffect(()=>{v(x)},[x]),(0,t.jsx)(eE._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:y()(eO.BJ,d>1&&eO.Q7,u),children:e=>(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)("header",{className:eO.I4,children:[(0,t.jsx)(ej.K,{variant:"icon-only",size:"sm",icon:e7.f,"aria-label":b.CALENDAR_PREVIOUS_MONTH_LABEL,onClick:()=>e.state.focusPreviousPage(),slot:"previous"}),(0,t.jsx)("div",{className:eO.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(m,{month:"long",year:"numeric"});return(0,t.jsx)(p.E,{variant:"text-md/medium",color:"text-strong",children:o},a)})}),(0,t.jsx)(ej.K,{variant:"icon-only",size:"sm",icon:e5.u,onClick:()=>e.state.focusNextPage(),"aria-label":b.CALENDAR_NEXT_MONTH_LABEL,slot:"next"})]}),(0,t.jsx)("div",{className:eO.US,children:Array.from({length:d},(e,l)=>(0,t.jsx)(eR,{offset:{months:l},isRangeSelection:!0},l))})]})})}function e9(e){let{value:l,onChange:a,minValue:o,maxValue:i,placeholderValue:n,startName:s,endName:r,fullWidth:d=!1,...u}=e,{i18n:c}=(0,eI.G9)(),{fieldProps:b}=(0,L.n)(u),{disabled:p,errorMessage:m,required:x=!1}=b,h={hasError:null!=m&&""!==m},{refs:v,floatingStyles:g,isOpen:f,setIsOpen:V,context:j,getFloatingProps:C,getReferenceProps:S}=(0,eJ.u)({matchReferenceWidth:!1,placement:"bottom-start"}),{isMounted:k,styles:w}=(0,e0.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&&V(!1)};return(0,t.jsx)(L.D,{...b,children:e=>(0,t.jsx)(e2.F,{className:d?e3.e2:e3.qX,validation:h,ref:v.setReference,...S(),children:(0,t.jsxs)(eW.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:p,isRequired:x,minValue:o,maxValue:i,placeholderValue:n,granularity:"day",startName:s,endName:r,"data-mana-component":"date-range-picker",className:e3.Nz,children:[(0,t.jsxs)(eZ.Y,{className:e3.wO,children:[(0,t.jsx)(eY.J3,{slot:"start",children:e=>(0,t.jsx)(eY.Eu,{segment:e,className:y()(e3.mX,e.isPlaceholder&&e3.qf)})}),(0,t.jsx)("span",{className:e3.me,"aria-hidden":"true",children:"\u2192"}),(0,t.jsx)(eY.J3,{slot:"end",children:e=>(0,t.jsx)(eY.Eu,{segment:e,className:y()(e3.mX,e.isPlaceholder&&e3.qf)})}),(0,t.jsx)(eK.$,{className:e3.B7,onClick:()=>V(!f),"aria-label":c.DATE_INPUT_OPEN_CALENDAR_LABEL,children:(0,t.jsx)(e1.C,{size:"sm",color:"currentColor"})})]}),f&&k&&(0,t.jsx)("div",{...C(),ref:v.setFloating,style:g,className:e3.oO,children:(0,t.jsx)(eU.n1,{contain:!0,restoreFocus:!0,children:(0,t.jsx)(eQ.lG,{"aria-label":c.DATE_INPUT_OPEN_CALENDAR_LABEL,style:w,className:e3.r3,children:(0,t.jsx)(e8,{value:l,onChange:T,minValue:o,maxValue:i,isDisabled:p,visibleMonths:2})})})})]})})})}let le={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,eT.Ec)((0,eT.Xj)()),end:(0,eT.Ec)((0,eT.Xj)()).add({days:7})}),c=o.useCallback(e=>{u(e)},[]),p=o.useCallback(()=>{u(null)},[]),x=o.useCallback(()=>{let e=(0,eT.Ec)((0,eT.Xj)());u({start:e,end:e.add({days:7})})},[]),h=(0,eT.Ec)((0,eT.Xj)()),y=r?h.subtract({weeks:1}):void 0,v=r?h.add({weeks:2}):void 0;return eF("DateRangePickerStory")?(0,t.jsxs)(b.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(e9,{label:l,description:""!==i?i:void 0,value:d,onChange:c,disabled:n,required:s,errorMessage:""!==a?a:void 0,minValue:y,maxValue:v,helperText:(()=>{if(null==d)return"";let e=(0,eD.default)(d.start.toDate((0,eT.Xj)()),"MMMM d, yyyy"),l=(0,eD.default)(d.end.toDate((0,eT.Xj)()),"MMMM d, yyyy");return`${e} \u{2013} ${l}`})()}),(0,t.jsxs)(b.B,{direction:"horizontal",gap:"sm",children:[(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"Clear",onClick:p,disabled:n}),(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"This Week",onClick:x,disabled:n})]})]}):(0,t.jsxs)(eB.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 ll=a(270003),la=a(194261),lt=a(243721),lo=a(691885),li=a(109802),ln=a(508274),ls=a(121830);let lr=[{label:"Aardvark",value:"aardvark",id:"aardvark"},{label:"Cat",value:"cat",id:"cat"},{label:"Dog",value:"dog",id:"dog"}],ld=[1752220,3066993,3447003,0x9b59b6,0xe91e63,0xf1c40f,0xe67e22,0xe74c3c];function lu(e){let{title:l,children:a,auxiliaryContentPosition:o}=e;return(0,t.jsx)(L.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 lc(e){let{auxiliaryContentPosition:l}=e;return(0,t.jsxs)(b.B,{direction:"vertical",gap:24,children:[(0,t.jsx)(lu,{title:"Button",auxiliaryContentPosition:l,children:(0,t.jsx)("div",{children:(0,t.jsx)(m.$,{text:"Remove",variant:"critical-primary",disabled:!0})})}),(0,t.jsx)(lu,{title:"TextButton",auxiliaryContentPosition:l,children:(0,t.jsx)("div",{children:(0,t.jsx)(eC.Q,{text:"View details",variant:"primary",disabled:!0})})}),(0,t.jsx)(lu,{title:"Switch",auxiliaryContentPosition:l,children:(0,t.jsx)(lt.d,{label:"Allow direct messages",disabled:!0,checked:!1,onChange:()=>{}})}),(0,t.jsx)(lu,{title:"Checkbox",auxiliaryContentPosition:l,children:(0,t.jsx)(e_.S,{label:"Accept terms",disabled:!0,checked:!1,onChange:()=>{},value:"accept-terms"})}),(0,t.jsx)(lu,{title:"InputField",auxiliaryContentPosition:l,children:(0,t.jsx)(e2.F,{disabled:!0,children:(0,t.jsx)(p.E,{variant:"text-md/normal",color:"text-subtle",children:"Inner InputField content"})})}),(0,t.jsx)(lu,{title:"Select",auxiliaryContentPosition:l,children:(0,t.jsx)(lo.l,{label:"Animal",hideLabel:!0,options:lr,selectionMode:"single",onSelectionChange:()=>{},disabled:!0})}),(0,t.jsx)(lu,{title:"CopyInput",auxiliaryContentPosition:l,children:(0,t.jsx)(li.e,{value:"https://discord.gg/disabled-example",supportsCopy:!0,onCopy:()=>{},disabled:!0})}),(0,t.jsx)(lu,{title:"ColorPicker",auxiliaryContentPosition:l,children:(0,t.jsx)(ln.sk,{defaultColor:ld[0],customColor:null,colors:ld,value:ld[0],disabled:!0,onChange:()=>{},renderDefaultButton:e=>(0,t.jsx)(ln.fy,{...e}),renderCustomButton:e=>(0,t.jsx)(ln.nJ,{...e})})}),(0,t.jsx)(lu,{title:"TextInput",auxiliaryContentPosition:l,children:(0,t.jsx)(ec.k,{label:"Username",hideLabel:!0,value:"disabled-user",onChange:()=>{},disabled:!0})})]})}let lb={title:"Forms",stories:[{name:"FieldSet",id:"fieldset",component:function(e){let{label:l}=e;return(0,t.jsx)("div",{children:(0,t.jsxs)(ll.n,{label:""===l?void 0:l,children:[(0,t.jsx)(ec.k,{label:"First Name"}),(0,t.jsx)(ec.k,{label:"Last Name"}),(0,t.jsx)(ec.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)(L.D,{...a,description:""===l?void 0:l,icon:a.showIcon?la.X:void 0,children:(0,t.jsx)("div",{className:ls.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:lc,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)(lc,{auxiliaryContentPosition:"under-label"})}}]};var lp=a(404778),lm=a(935063),lx=a(661531),lh=a(307301),ly=a(892547),lv=a(260598);let lg=[{id:"strength",label:"Strength",icon:lm.X},{id:"wisdom",label:"Wisdom",icon:{type:"role",color:lx.A.unsafe_rawColors.BRAND_500.css}},{id:"charisma",label:"Charisma"},{id:"intelligence",label:"Intelligence"},{id:"dexterity",label:"Dexterity"},{id:"constitution",label:"Constitution"}],lf={title:"Input Components",stories:[{name:"TextInput",component:function(e){let{leading:l,trailing:a,...i}=e,[n,s]=o.useState(""),[d,u]=o.useState(lg),c=o.useCallback(e=>{u(d.filter(l=>!e.has(l.id)))},[d]);return(0,t.jsxs)(b.B,{gap:16,children:[(0,t.jsx)(ec.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:lm.X,onClick:r.tE,"aria-label":"At"};case"text":return"https://discord.gg/";default:return}}(l),trailing:"icon"===a?{icon:lh.j,onClick:r.tE,"aria-label":"At"}:void 0,maxLength:500}),"tags"===l?(0,t.jsx)(m.$,{text:"Reset Tags",size:"sm",variant:"secondary",onClick:()=>u(lg)}):null]})},id:"text-input",controls:{type:{label:"Input Type",type:"select",defaultValue:"text",options:[{label:"Text",value:"text"},{label:"Password",value:"password"},{label:"Email",value:"email"},{label:"Number",value:"number"}]},label:{label:"Label",type:"text",defaultValue:"Example Label"},hideLabel:{label:"Hide Label",type:"boolean",defaultValue:!1},description:{label:"Description",type:"text",defaultValue:"This is an example description"},required:{label:"Required",type:"boolean",defaultValue:!1},placeholder:{label:"Placeholder",type:"text",defaultValue:"Enter some text..."},error:{label:"Error Message",type:"text",defaultValue:void 0},helperText:{label:"Helper Text",type:"text",defaultValue:void 0},minLength:{label:"Min Length",type:"number",defaultValue:0},showCharacterCount:{label:"Show Character Count",type:"boolean",defaultValue:!1},clearable:{label:"Clearable",type:"boolean",defaultValue:!1},disabled:{label:"Disabled",type:"boolean",defaultValue:!1},readOnly:{label:"Read Only",type:"boolean",defaultValue:!1},leading:{label:"Leading",type:"select",defaultValue:"none",options:[{label:"None",value:"none"},{label:"Tags",value:"tags"},{label:"Icon",value:"icon"},{label:"Text",value:"text"}]},trailing:{label:"Trailing",type:"select",defaultValue:"none",options:[{label:"None",value:"none"},{label:"Icon",value:"icon"}]}}},{name:"SearchBar",component:function(e){let[l,a]=o.useState("");return(0,t.jsx)(ly.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)(lv.f,{...e,value:l,onChange:a})},controls:{label:{label:"Label",type:"text",defaultValue:"Example Label"},hideLabel:{label:"Hide Label",type:"boolean",defaultValue:!1},required:{label:"Required",type:"boolean",defaultValue:!1},description:{label:"Description",type:"text",defaultValue:"This is an example description"},helperText:{label:"Helper Text",type:"text",defaultValue:void 0},placeholder:{label:"Placeholder",type:"text",defaultValue:"Enter your message..."},error:{label:"Error Message",type:"text",defaultValue:void 0},rows:{label:"Rows",type:"number",defaultValue:3},autosize:{label:"Autosize",type:"boolean",defaultValue:!1},maxLength:{label:"Max Length",type:"number",defaultValue:1e3},showCharacterCount:{label:"Show Character Count",type:"boolean",defaultValue:!1},disabled:{label:"Disabled",type:"boolean",defaultValue:!1}}},{name:"Input Collection",id:"input-collection",component:function(e){let{label:l,hideLabel:a,description:o,required:i,error:n,disabled:s,placeholder:d,value:u="",readOnly:c,helperText:p,successMessage:m,showCharacterCount:x}=e,h={label:l,hideLabel:a,description:o,required:i,value:u,error:n,disabled:s,placeholder:d,readOnly:c,helperText:p,showCharacterCount:x,successMessage:m};return(0,t.jsxs)(b.B,{gap:24,children:[(0,t.jsxs)(ll.n,{label:"Text Input",children:[(0,t.jsx)(ec.k,{...h}),(0,t.jsx)(ec.k,{...h,clearable:!0}),(0,t.jsx)(ec.k,{...h,leading:{icon:lm.X,onClick:r.tE,"aria-label":"At"}}),(0,t.jsx)(ec.k,{...h,leading:lm.X}),(0,t.jsx)(ec.k,{...h,leading:"https://discord.gg/"}),(0,t.jsx)(ec.k,{...h,trailing:{icon:lm.X,onClick:r.tE,"aria-label":"At"}}),(0,t.jsx)(ec.k,{...h,trailing:lm.X}),(0,t.jsx)(ec.k,{...h,leading:{type:"tags",label:"Tags",items:lg.slice(0,3)}})]}),(0,t.jsx)(lp.c,{}),(0,t.jsxs)(ll.n,{label:"Search Bar",children:[(0,t.jsx)(ly.I,{query:u,onChange:r.tE,disabled:s,placeholder:d}),(0,t.jsx)(ly.I,{query:u,onChange:r.tE,size:"sm",disabled:s,placeholder:d})]}),(0,t.jsx)(lp.c,{}),(0,t.jsx)(ll.n,{label:"Text Area",children:(0,t.jsx)(lv.f,{...h})})]})},controls:{value:{label:"Value",type:"text",defaultValue:""},placeholder:{label:"Placeholder",type:"text",defaultValue:"Enter some text..."},label:{label:"Label",type:"text",defaultValue:"Example Label"},hideLabel:{label:"Hide Label",type:"boolean",defaultValue:!1},description:{label:"Description",type:"text",defaultValue:"This is an example description"},required:{label:"Required",type:"boolean",defaultValue:!1},error:{label:"Error Message",type:"text",defaultValue:void 0},successMessage:{label:"Success Message",type:"text",defaultValue:void 0},helperText:{label:"Helper Text",type:"text",defaultValue:void 0},showCharacterCount:{label:"Show Character Count",type:"boolean",defaultValue:!1},disabled:{label:"Disabled",type:"boolean",defaultValue:!1},readOnly:{label:"Read Only",type:"boolean",defaultValue:!1}}}]};a(321073);var lV=a(102079),lj=a(224640),lC=a(430993),lS=a(276293),lk=a(189213),lw=a(772707),lT=a(347704),lM=a(116833),lD=a(521489),lE=a(192308),lN=a(783878),lL=a(314116);let lA="/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 lO(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)(eH.$,{label:"Safety checklist",options:s,selectedValues:i,onChange:n})}function lR(e){let{setIsPasscodeValid:l}=e,[a,i]=o.useState("");return(0,t.jsx)(ec.k,{placeholder:"Enter your passcode...",value:a,onChange:e=>{i(e),l(e.length>0)}})}function lP(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,h]=o.useState(!1),[y,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]),j=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]),C=[{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}:y?{message:"Great job, helmets are important for protecting your brain!",type:"warning"}:void 0},body:(0,t.jsx)(lO,{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:h}),nextButtonProps:{text:"Verify passcode"},nextEnabled:x}],S=C.slice(1).map(e=>e.stepKey);return(0,t.jsx)(lT.t,{steps:C,currentStepKey:c,numberedSteps:S,onStepChange:b,onComplete:j,...u})}let lB={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:lS.N}:i.subtitle;return(0,t.jsxs)(b.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)(m.$,{variant:"primary",text:"Open Modal",onClick:()=>(0,lE.openModal)(e=>(0,t.jsx)(lk.Modal,{...e,...i,title:i.title,subtitle:n,input:a?(0,t.jsx)(ly.I,{placeholder:"Search...",onChange:()=>{},query:""}):void 0,preview:l?(0,t.jsxs)(b.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)(b.B,{gap:16,children:[(0,t.jsx)(lN.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)(ec.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)(b.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)(m.$,{variant:"primary",text:"Open Confirm Modal",onClick:()=>(0,lL.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:lS.N}:n.subtitle,r=o.useMemo(()=>0===l?{type:"image",src:lA}:1===l?{type:"lottie",lottie:()=>a.e("95947").then(a.t.bind(a,604902,19)),aspectRatio:"6/4"}:2===l?{type:"rive",rive:lV.Q}:3===l?{type:"video",src:"https://cdn.discordapp.com/assets/content/06fafa729efafb6235e0ee9df9482566fa9e74b96a792a9265dca70113c71ab7.webm",fallbackImageSrc:lA,loop:!0,loopAt:2.5}:4===l?{type:"dynamic",component:lM.DynamicGraphicComponent.DEMO,aspectRatio:"6/4",props:{text:"Dynamic Content"}}:void 0,[l]);return(0,t.jsxs)(b.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)(m.$,{variant:"primary",text:"Open ExpressiveModal",onClick:()=>(0,lE.openModal)(e=>(0,t.jsx)(lw.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)(b.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)(b.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)(m.$,{variant:"primary",text:"Open Dynamic Graphic Modal",onClick:()=>(0,lE.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)(b.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)(b.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)(m.$,{variant:"primary",text:"Open Layer Modal",onClick:()=>(0,lE.openModal)(e=>(0,t.jsx)(lD.N,{...e,...l,children:(0,t.jsx)(b.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)(b.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)(m.$,{variant:"primary",text:"Open MultiStepModal",onClick:()=>(0,lE.openModal)(e=>(0,t.jsx)(lP,{...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)(b.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)(m.$,{variant:"primary",text:"Open BaseModal",onClick:()=>(0,lE.openModal)(e=>(0,t.jsx)(lj.d,{...e,...o,"aria-label":"Base Modal Example",children:(0,t.jsx)(lC.c,{children:(0,t.jsxs)(b.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 lz=a(43105),lF=a(338854),l$=a(353795),lG=a(312640),l_=a(798618),lq=a(916845),lH=a(627330),lX=a(375708),lU=a(824078);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,[b,x]=o.useState(0);o.useEffect(()=>{d&&x(0)},[d]),o.useEffect(()=>{n?.(b)},[b,n]);let h=l[b],v=b+1===l.length,g=o.useCallback(()=>{h?.onCta?.(),v?s?.():x(e=>e+1)},[h,v,s]),f=o.useCallback(()=>{s?.()},[s]),V=o.useCallback(()=>{s?.()},[s]);if(!d||null==h)return null;let j={text:h.action?.text??(v?lX.intl.string(lX.t.i4jeWR):lX.intl.string(lX.t.PDTjLN)),variant:h.action?.variant??"primary",onClick:g,...h.action},C={targetElementRef:c.targetElementRef,hasVideo:c.hasVideo,scrollBehavior:c.scrollBehavior,position:u,shouldShow:d,onRequestClose:f,gradientColor:h.gradientColor,caretConfig:a,..."edge"===c.alignmentStrategy?{alignmentStrategy:"edge",align:c.align}:{alignmentStrategy:"trigger-center"}};return(0,t.jsx)(lG.x,{...C,children:(0,t.jsxs)("div",{ref:r,children:[(0,t.jsx)(lq.q,{onClick:V,variant:null!=h.gradientColor?"color-mix":void 0}),null!=h.graphic&&(0,t.jsx)("div",{className:y()(lU.graphic,{[lU[`graphic--${i}`]]:null!=i}),children:(0,t.jsx)(l$.v,{...h.graphic,aspectRatio:h.graphic.aspectRatio??("sm"===i?"2/1":"16/9")})}),(0,t.jsx)(lH.D,{title:h.title,body:h.body,badge:h.badge,textLink:h.textLink}),(0,t.jsx)("div",{className:lU.actionBar,children:(0,t.jsxs)("div",{className:lU.multistepActionLayout,children:[(0,t.jsx)(p.E,{variant:"text-xs/normal",className:lU.multistepIndicator,children:lX.intl.formatToPlainString(lX.t.rO31eY,{count:b+1,totalSteps:l.length})}),(0,t.jsx)(m.$,{size:"sm",...j})]})}),(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),x=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:x,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)(m.$,{variant:"primary",text:"Toggle Popover",buttonRef:x,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,...a}=e,[i,n]=o.useState(!1),s=o.useRef(null);return(0,t.jsxs)("div",{children:[(0,t.jsx)(lF.H,{...a,targetElementRef:s,shouldShow:i,onRequestClose:()=>n(!1),title:"Video Popover Demo",body:"Click the video to view it in the media viewer!",assetUrl:"https://cdn.discordapp.com/assets/server-subscription-tier-template/upsell.mov",badge:"new",action:l?{text:"Learn More",onClick:()=>n(!1)}:void 0},a.position),(0,t.jsx)(m.$,{variant:"primary",text:"Show Video Popover",buttonRef:s,onClick:()=>n(!i)})]})},controls:{showActions:{label:"Show Actions",type:"boolean",defaultValue:!0}}},{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)(m.$,{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(773812);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"),x=o.useMemo(()=>[{name:null!=n?`${n} 1`:"Option 1",value:"option1",desc:null==s||""===s?void 0:s,leadingIcon:r?eG.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?eG.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?eG.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?eG.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?eG.m:void 0,disabled:!d&&void 0}].slice(0,Math.max(1,Math.min(5,a))),[a,n,s,r,d]),h=o.useCallback(e=>{c(e)},[]),y=o.useCallback(()=>{x.length>0&&c(x[0].value)},[x]),v=o.useCallback(()=>{x.length>0&&c(x[x.length-1].value)},[x]),g=o.useCallback(()=>{c(void 0)},[]);return(0,t.jsxs)(b.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(lJ.z,{value:u,label:i,onChange:h,options:x,disabled:l}),(0,t.jsxs)(p.E,{variant:"text-sm/normal",children:["Current selection: ","string"==typeof u&&""!==u?u:"None"]}),(0,t.jsxs)(b.B,{direction:"horizontal",gap:"sm",children:[(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"Select First",onClick:y,disabled:l||0===x.length}),(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"Select Last",onClick:v,disabled:l||0===x.length}),(0,t.jsx)(m.$,{variant:"primary",size:"sm",text:"Clear",onClick:g,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,eT.Ec)((0,eT.Xj)()),end:(0,eT.Ec)((0,eT.Xj)()).add({days:7})}),r=o.useCallback(e=>{s(e)},[]),d=o.useCallback(()=>{s(null)},[]),u=o.useCallback(()=>{let e=(0,eT.Ec)((0,eT.Xj)());s({start:e,end:e.add({days:7})})},[]),c=o.useCallback(()=>{s({start:(0,eM._U)("2024-12-01"),end:(0,eM._U)("2024-12-31")})},[]);if(!eF("RangeCalendarStory"))return(0,t.jsxs)(eB.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."]});let x=e=>null==e?"None":(0,eD.default)(e.toDate((0,eT.Xj)()),"MMMM d, yyyy");return(0,t.jsxs)(b.B,{direction:"vertical",gap:"md",children:[(0,t.jsx)(e8,{value:n,onChange:r,isDisabled:l,isReadOnly:a,minValue:i?(0,eM._U)("2024-01-01"):void 0,maxValue:i?(0,eM._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?`${x(n.start)} \u{2013} ${x(n.end)}`:"None"]}),(0,t.jsxs)(b.B,{direction:"horizontal",gap:"sm",children:[(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"Clear",onClick:d,disabled:l||a}),(0,t.jsx)(m.$,{variant:"secondary",size:"sm",text:"This Week",onClick:u,disabled:l||a}),(0,t.jsx)(m.$,{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),l3=a(844222),l4=a(692327);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 l7=a(540637),l5=a(732771),l8=a(379649);let l9=[{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}],ae=[{label:"Aardvark",value:"aardvark",id:"aardvark",leading:lS.N,trailing:{type:"badge",badgeType:"new"},description:"This is an aardvark"},{label:"Cat",value:"cat",id:"cat",leading:lS.N,trailing:"20m",description:"This is a cat"},{label:"Dog",value:"dog",id:"dog",leading:lS.N},{label:"Kangaroo",value:"kangaroo",id:"kangaroo",leading:{type:"image",src:l8}},{label:"Panda",value:"panda",id:"panda",leading:{type:"avatar",src:l8}},{label:"Snake",value:"snake",id:"snake",leading:lS.N,disabled:!0}],al={title:"Select",stories:[{id:"select",name:"Select",component:function(e){let{selectionMode:l,withLeadingAndTrailing:a,...i}=e,[n,s]=o.useState(void 0),[r,d]=o.useState([]),u=aa(a,i.asyncOptions);return"single"===l?(0,t.jsx)(lo.l,{...i,selectionMode:l,options:u,onSelectionChange:s,value:n}):(0,t.jsx)(lo.l,{...i,selectionMode:l,options:u,onSelectionChange:d,value:r})},controls:{selectionMode:{label:"SelectionType",type:"select",options:[{label:"Single",value:"single"},{label:"Multiple",value:"multiple"}],defaultValue:"single"},withLeadingAndTrailing:{label:"Show leading and trailing content",type:"boolean",defaultValue:!1},asyncOptions:{label:"Async loaded options",type:"boolean",defaultValue:!1},required:{label:"Required",type:"boolean",defaultValue:!1},disabled:{type:"boolean",label:"Disabled",defaultValue:!1},readOnly:{type:"boolean",label:"Read Only",defaultValue:!1},clearable:{type:"boolean",label:"Clearable",defaultValue:!1},fullWidth:{type:"boolean",label:"Full width",defaultValue:!1},closeOnSelect:{type:"boolean",label:"Close on select",defaultValue:!1},shouldFocusWrap:{type:"boolean",label:"Should listbox focus wrap",defaultValue:!1},wrapTags:{type:"boolean",label:"Wrap tags",defaultValue:!1},maxOptionsVisible:{type:"number",label:"Max options visible",defaultValue:5},label:{type:"text",label:"Label",defaultValue:"Sort by"},hideLabel:{type:"boolean",label:"Hide Label",defaultValue:!1},placeholder:{type:"text",label:"Placeholder",defaultValue:void 0},description:{type:"text",label:"Description",defaultValue:"This is an example description"},errorMessage:{type:"text",label:"Error Message",defaultValue:""},successMessage:{type:"text",label:"Success Message",defaultValue:""},layout:{type:"select",label:"Layout",defaultValue:"vertical",options:[{label:"Vertical",value:"vertical"},{label:"Horizontal",value:"horizontal"},{label:"Horizontal (Responsive)",value:"horizontal-responsive"}]}}},{id:"searchable-select",name:"SearchableSelect",component:function(e){let{selectionMode:l,withLeadingAndTrailing:a,asyncOptions:i,...n}=e,[s,r]=o.useState(void 0),[d,u]=o.useState([]),c=aa(a,i);return"single"===l?(0,t.jsx)(lN.Z,{...n,selectionMode:l,onSelectionChange:r,value:s,options:c}):(0,t.jsx)(lN.Z,{...n,selectionMode:l,onSelectionChange:u,value:d,options:c})},controls:{selectionMode:{label:"Selection Mode",type:"select",options:[{label:"Single",value:"single"},{label:"Multiple",value:"multiple"}],defaultValue:"single"},withLeadingAndTrailing:{label:"Show leading and trailing content",type:"boolean",defaultValue:!1},asyncOptions:{label:"Async loaded options",type:"boolean",defaultValue:!1},required:{label:"Required",type:"boolean",defaultValue:!1},disabled:{type:"boolean",label:"Disabled",defaultValue:!1},clearable:{type:"boolean",label:"Clearable",defaultValue:!1},closeOnSelect:{type:"boolean",label:"Close on select",defaultValue:!1},shouldFocusWrap:{type:"boolean",label:"Should listbox focus wrap",defaultValue:!1},wrapTags:{type:"boolean",label:"Wrap tags",defaultValue:!1},maxOptionsVisible:{type:"number",label:"Max options visible",defaultValue:5},label:{type:"text",label:"Label",defaultValue:"Sort by"},hideLabel:{type:"boolean",label:"Hide Label",defaultValue:!1},placeholder:{type:"text",label:"Placeholder",defaultValue:void 0},description:{type:"text",label:"Description",defaultValue:"This is an example description"},helperText:{type:"text",label:"Helper Text",defaultValue:"This is an example of helper text, which can be used to provide additional information about the field."},errorMessage:{type:"text",label:"Error Message",defaultValue:""},successMessage:{type:"text",label:"Success Message",defaultValue:""}}},{id:"combobox",name:"ComboBox",component:function(e){let{selectionMode:l,label:a,hideLabel:i,description:n,helperText:s,errorMessage:r,successMessage:d,wrapTags:u,withLeadingAndTrailing:c,placeholder:b,...p}=e,{required:m,disabled:x}=p,h=aa(c,p.asyncOptions),[y,v]=o.useState(null);return(0,t.jsxs)(l5.iS,{selectionMode:l,onSelectionChange:v,options:h,value:y,...p,children:[(0,t.jsx)(l5.a3,{label:a,hideLabel:i,placeholder:b,required:m,disabled:x,description:n,helperText:s,errorMessage:r,successMessage:d,wrapTags:u}),(0,t.jsx)(l5.X2,{})]})},controls:{selectionMode:{label:"Selection Mode",type:"select",options:[{label:"Single",value:"single"},{label:"Multiple",value:"multiple"}],defaultValue:"single"},withLeadingAndTrailing:{label:"Show leading and trailing content",type:"boolean",defaultValue:!1},asyncOptions:{label:"Async loaded options",type:"boolean",defaultValue:!1},required:{label:"Required",type:"boolean",defaultValue:!1},disabled:{type:"boolean",label:"Disabled",defaultValue:!1},clearable:{type:"boolean",label:"Clearable",defaultValue:!1},closeOnSelect:{type:"boolean",label:"Close on select",defaultValue:!1},shouldFocusWrap:{type:"boolean",label:"Should listbox focus wrap",defaultValue:!1},wrapTags:{type:"boolean",label:"Wrap tags",defaultValue:!1},label:{type:"text",label:"Label",defaultValue:"Sort by"},hideLabel:{type:"boolean",label:"Hide Label",defaultValue:!1},placeholder:{type:"text",label:"Placeholder",defaultValue:void 0},description:{type:"text",label:"Description",defaultValue:"This is an example description"},helperText:{type:"text",label:"Helper Text",defaultValue:"This is an example of helper text, which can be used to provide additional information about the field."},errorMessage:{type:"text",label:"Error Message",defaultValue:""},successMessage:{type:"text",label:"Success Message",defaultValue:""}}},{id:"listbox",name:"ListBox",component:function(e){let{selectionMode:l,required:a,shouldFocusWrap:i,withLeadingAndTrailing:n}=e,[s,r]=o.useState(null);return(0,t.jsx)(l7.q,{selectionMode:l,required:a,shouldFocusWrap:i,items:n?ae:l9,onSelectionChange:r,selectedItems:s})},controls:{selectionMode:{label:"Selection Mode",type:"select",options:[{label:"Single",value:"single"},{label:"Multiple",value:"multiple"}],defaultValue:"single"},withLeadingAndTrailing:{label:"Show leading and trailing content",type:"boolean",defaultValue:!1},required:{label:"Required",type:"boolean",defaultValue:!1},shouldFocusWrap:{label:"Should focus wrap",type:"boolean",defaultValue:!1}}}]};function aa(e,l){let a=o.useRef(null);return o.useMemo(()=>{let t=e?ae:l9;return l?e=>new Promise(null!=a.current?e=>e(a.current):e=>setTimeout(()=>(a.current=t,e(t)),1e3)):t},[e,l])}let at={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)(lt.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 ao=a(528265),ai=a(11779);let an={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:ai.r},{id:"dexterity",label:"Dexterity",icon:{type:"role",color:"#ff44aa"}},{id:"wisdom",label:"Wisdom",icon:{type:"avatar",src:r?.getAvatarURL(void 0,16)??""}},{id:"charisma",label:"Charisma"}],[r]),[u,c]=o.useState(d),p=o.useCallback(e=>{c(u.filter(l=>!e.has(l.id)))},[u]),x=o.useCallback(()=>{c(d)},[d]),h=(0,t.jsx)(ao.C,{label:"Categories",selectionMode:l,layout:s,items:u,onRemove:a?p:void 0}),y=a&&(0,t.jsx)(m.$,{disabled:u.length===d.length,text:"Reset",onClick:x});return"inline"===s?(0,t.jsxs)(b.B,{gap:24,children:[(0,t.jsx)("div",{style:{display:"flex",gap:4},children:h}),y]}):(0,t.jsxs)(b.B,{gap:24,children:[h,y]})},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"}]}}}]},as=["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","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","display-sm","display-md","display-lg","code"];var ar=a(364522),ad=a(653197);let au={name:"Text",id:"text",component:p.E,controls:{variant:{label:"Variant",type:"select",defaultValue:"text-sm/normal",options:Object.values(as).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 ac=a(459192),ab=a(990078),ap=a(557464);let am={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)(ab.m,{text:l,position:a,align:i,delay:r,spacing:d,caretConfig:b,ariaHidden:u,...c,children:(0,t.jsx)(m.$,{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:x,...h}=e,y=o.useMemo(()=>{if("center"!==u&&null!=u)return"custom"===u?{align:u,customOffset:c}:{align:u}},[u,c]),v=o.useMemo(()=>i?{type:"image",src:ap.A,aspectRatio:"1/1"}:void 0,[i]);return(0,t.jsx)(ac.u,{title:l,body:a,position:r,align:d,padding:s,delay:b,spacing:p,caretConfig:y,asset:v,assetSize:n,forceOpen:x,...h,children:(0,t.jsx)(m.$,{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 ax=a(508382),ah=a(481224);let ay={id:"mana",name:"Mana",groups:[{title:"Text",stories:[au,{name:"Typography Scales",id:"text-scales",component:function(e){return(0,t.jsx)(ar.Ar,{className:ad.H,children:Object.values(as).map(l=>(0,t.jsxs)(k.Z,{className:ad.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,e$,eq,eX,e6,le,l0,l1,at,lB,lf,al,lY,lQ,am,an,lb,{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)(ax.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:ah.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)(m.$,{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(l3.C),[i,n]=o.useState(0);return(0,t.jsxs)(l3.C.Provider,{value:{...a,reducedMotion:{...a.reducedMotion,enabled:e}},children:[(0,t.jsx)("div",{className:l4.QT,children:(0,t.jsxs)(b.B,{gap:8,children:[(0,t.jsx)(lt.d,{onChange:()=>l(e=>!e),label:"Force reduced motion",checked:e}),(0,t.jsx)(m.$,{onClick:()=>n(e=>e+1),text:"Reset animations"})]})}),(0,t.jsx)("div",{className:l4.Vg,children:l6.map(e=>{let{name:l,Component:a}=e;return(0,t.jsxs)("div",{className:l4.Hn,children:[(0,t.jsx)("div",{className:l4.k$,children:(0,t.jsx)(a,{style:{width:"100%",height:"100%"}})}),(0,t.jsx)(p.E,{variant:"text-xs/normal",color:"text-subtle",className:l4.Pf,children:l})]},l)})},i)]})}}]}]},av={collections:[ay,em]}}