(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[83324,39519,54937],{333897:function(t,n,o){var e=o(915012),r=/^\s+/;t.exports=function(t){return t?t.slice(0,e(t)+1).replace(r,""):t}},915012:function(t){var n=/\s/;t.exports=function(t){for(var o=t.length;o--&&n.test(t.charAt(o)););return o}},889678:function(t,n,o){var e=o(706627),r=o(885365),a=o(67948),i=Math.max,u=Math.min;t.exports=function(t,n,o){var l,s,c,p,d,m,f=0,h=!1,B=!1,v=!0;if("function"!=typeof t)throw TypeError("Expected a function");function g(n){var o=l,e=s;return l=s=void 0,f=n,p=t.apply(e,o)}function b(t){var o=t-m,e=t-f;return void 0===m||o>=n||o<0||B&&e>=c}function x(){var t,o,e,a=r();if(b(a))return j(a);d=setTimeout(x,(t=a-m,o=a-f,e=n-t,B?u(e,c-o):e))}function j(t){return(d=void 0,v&&l)?g(t):(l=s=void 0,p)}function y(){var t,o=r(),e=b(o);if(l=arguments,s=this,m=o,e){if(void 0===d)return f=t=m,d=setTimeout(x,n),h?g(t):p;if(B)return clearTimeout(d),d=setTimeout(x,n),g(m)}return void 0===d&&(d=setTimeout(x,n)),p}return n=a(n)||0,e(o)&&(h=!!o.leading,c=(B="maxWait"in o)?i(a(o.maxWait)||0,n):c,v="trailing"in o?!!o.trailing:v),y.cancel=function(){void 0!==d&&clearTimeout(d),f=0,l=m=s=d=void 0},y.flush=function(){return void 0===d?p:j(r())},y}},706627:function(t){t.exports=function(t){var n=typeof t;return null!=t&&("object"==n||"function"==n)}},885365:function(t,n,o){var e=o(573401);t.exports=function(){return e.Date.now()}},123763:function(t,n,o){var e=o(889678),r=o(706627);t.exports=function(t,n,o){var a=!0,i=!0;if("function"!=typeof t)throw TypeError("Expected a function");return r(o)&&(a="leading"in o?!!o.leading:a,i="trailing"in o?!!o.trailing:i),e(t,n,{leading:a,maxWait:n,trailing:i})}},67948:function(t,n,o){var e=o(333897),r=o(706627),a=o(42848),i=0/0,u=/^[-+]0x[0-9a-f]+$/i,l=/^0b[01]+$/i,s=/^0o[0-7]+$/i,c=parseInt;t.exports=function(t){if("number"==typeof t)return t;if(a(t))return i;if(r(t)){var n="function"==typeof t.valueOf?t.valueOf():t;t=r(n)?n+"":n}if("string"!=typeof t)return 0===t?t:+t;t=e(t);var o=l.test(t);return o||s.test(t)?c(t.slice(2),o?2:8):u.test(t)?i:+t}},22178:function(t,n,o){"use strict";o.r(n),o.d(n,{boxClasses:function(){return r.Z},default:function(){return e.Z}});var e=o(855378),r=o(802314)},201249:function(t,n,o){"use strict";o.r(n),o.d(n,{buttonClasses:function(){return r.Z},default:function(){return e.Z},getButtonUtilityClass:function(){return r.F}});var e=o(56428),r=o(837437)},228388:function(t,n,o){"use strict";o.d(n,{z:function(){return C}});var e=o(81465),r=o(310306),a=o(990432),i=o(845454),u=o(470079),l=o(969577),s=o(159684),c=o(156548),p=o(971970),d=o(544740),m=o(231147),f=o(303683),h=o(504824),B=o(995451),v=o(618705),g=o(109313),b=o(837437),x=o(782947),j=o(735250),y=["buttonFlex","className","component","disabled","size","color","variant","children","orientation","slots","slotProps","spacing"],k=function(t){var n=t.size,o=t.variant,e=t.color,r={root:["root",t.orientation,o&&"variant".concat((0,p.Z)(o)),e&&"color".concat((0,p.Z)(e)),n&&"size".concat((0,p.Z)(n))]};return(0,s.Z)(r,B.l,{})},C=(0,h.Z)("div")(function(t){var n,o,e,r,u,l=t.theme,s=t.ownerState,p=(0,f.V)({theme:l,ownerState:s},["borderRadius"]).borderRadius,d="vertical"===s.orientation?"var(--ButtonGroup-radius) var(--ButtonGroup-radius) var(--unstable_childRadius) var(--unstable_childRadius)":"var(--ButtonGroup-radius) var(--unstable_childRadius) var(--unstable_childRadius) var(--ButtonGroup-radius)",m="vertical"===s.orientation?"var(--unstable_childRadius) var(--unstable_childRadius) var(--ButtonGroup-radius) var(--ButtonGroup-radius)":"var(--unstable_childRadius) var(--ButtonGroup-radius) var(--ButtonGroup-radius) var(--unstable_childRadius)",h="vertical"===s.orientation?"calc(var(--ButtonGroup-separatorSize) * -1) 0 0 0":"0 0 0 calc(var(--ButtonGroup-separatorSize) * -1)",B={};(0,c.t)(l.breakpoints,s.spacing,function(t,n){if(null!==n){var o;t(B,{"--ButtonGroup-connected":n.toString().match(/^0(?!\.)/)?"1":"0",gap:"string"==typeof n?n:null===(o=l.spacing)||void 0===o?void 0:o.call(l,n)})}});var v=null===(n=l.variants.outlined)||void 0===n?void 0:n[s.color],g=null===(o=l.variants.outlinedDisabled)||void 0===o?void 0:o[s.color],j=null===(e=l.variants.outlinedHover)||void 0===e?void 0:e[s.color];return[(0,i.Z)((0,i.Z)({"--ButtonGroup-separatorSize":"outlined"===s.variant?"1px":"calc(var(--ButtonGroup-connected) * 1px)","--ButtonGroup-separatorColor":null==v?void 0:v.borderColor,"--ButtonGroup-radius":l.vars.radius.sm,"--Divider-inset":"0.5rem","--unstable_childRadius":"calc((1 - var(--ButtonGroup-connected)) * var(--ButtonGroup-radius) - var(--variant-borderWidth, 0px))"},B),{},(r={display:"flex",borderRadius:"var(--ButtonGroup-radius)",flexDirection:"vertical"===s.orientation?"column":"row"},(0,a.Z)(r,"& > [data-first-child]",(0,i.Z)((0,i.Z)({"--Button-radius":d,"--IconButton-radius":d},"horizontal"===s.orientation&&{borderRight:"var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)"}),"vertical"===s.orientation&&{borderBottom:"var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)"})),(0,a.Z)(r,"& > :not([data-first-child]):not([data-last-child]):not(:only-child)",(0,i.Z)((0,i.Z)({"--Button-radius":"var(--unstable_childRadius)","--IconButton-radius":"var(--unstable_childRadius)",borderRadius:"var(--unstable_childRadius)"},"horizontal"===s.orientation&&{borderLeft:"var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)",borderRight:"var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)"}),"vertical"===s.orientation&&{borderTop:"var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)",borderBottom:"var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)"})),(0,a.Z)(r,"& > [data-last-child]",(0,i.Z)((0,i.Z)({"--Button-radius":m,"--IconButton-radius":m},"horizontal"===s.orientation&&{borderLeft:"var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)"}),"vertical"===s.orientation&&{borderTop:"var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)"})),(0,a.Z)(r,"& > :only-child",{"--Button-radius":"var(--ButtonGroup-radius)","--IconButton-radius":"var(--ButtonGroup-radius)"}),(0,a.Z)(r,"& > :not([data-first-child]):not(:only-child)",{"--Button-margin":h,"--IconButton-margin":h}),(0,a.Z)(r,"& .".concat(b.Z.root,", & .").concat(x.Z.root),(0,i.Z)((0,i.Z)({"&:not(:disabled)":{zIndex:1},"&:disabled":{"--ButtonGroup-separatorColor":null==g?void 0:g.borderColor}},"outlined"===s.variant&&{"&:hover":{"--ButtonGroup-separatorColor":null==j?void 0:j.borderColor}}),{},(0,a.Z)({},"&:hover, ".concat(l.focus.selector),{zIndex:2}))),r),s.buttonFlex&&(u={},(0,a.Z)(u,"& > *:not(.".concat(x.Z.root,")"),{flex:s.buttonFlex}),(0,a.Z)(u,"& > :not(button) > .".concat(b.Z.root),{width:"100%"}),u)),void 0!==p&&{"--ButtonGroup-radius":p}]}),G=(0,h.Z)(C,{name:"JoyButtonGroup",slot:"Root",overridesResolver:function(t,n){return n.root}})({}),Z=u.forwardRef(function(t,n){var o=(0,m.Z)({props:t,name:"JoyButtonGroup"}),a=o.buttonFlex,s=o.className,c=o.component,p=void 0===c?"div":c,f=o.disabled,h=void 0!==f&&f,B=o.size,b=void 0===B?"md":B,x=o.color,C=void 0===x?"neutral":x,Z=o.variant,S=void 0===Z?"outlined":Z,w=o.children,T=o.orientation,z=void 0===T?"horizontal":T,I=o.slots,O=o.slotProps,R=o.spacing,M=(0,r.Z)(o,y),P=(0,i.Z)((0,i.Z)({},o),{},{buttonFlex:a,color:C,component:p,orientation:z,spacing:void 0===R?0:R,size:b,variant:S}),D=k(P),F=(0,i.Z)((0,i.Z)({},M),{},{component:p,slots:void 0===I?{}:I,slotProps:void 0===O?{}:O}),H=(0,g.Z)("root",{ref:n,className:(0,l.default)(D.root,s),elementType:G,externalForwardedProps:F,additionalProps:{role:"group"},ownerState:P}),L=(0,e.Z)(H,2),V=L[0],_=L[1],A=u.useMemo(function(){return{variant:S,color:C,size:b,disabled:h}},[S,C,b,h]);return(0,j.jsx)(V,(0,i.Z)((0,i.Z)({},_),{},{children:(0,j.jsx)(v.Z.Provider,{value:A,children:u.Children.map(w,function(t,n){if(!u.isValidElement(t))return t;var o={};return(0,d.Z)(t,["Divider"])&&(o.inset="inset"in t.props?t.props.inset:"context",o.orientation="orientation"in t.props?t.props.orientation:"vertical"===z?"horizontal":"vertical",o.role="presentation",o.component="span"),u.Children.count(w)>1&&(0===n&&(o["data-first-child"]=""),n===u.Children.count(w)-1&&(o["data-last-child"]="")),u.cloneElement(t,o)})})}))});n.Z=Z},995451:function(t,n,o){"use strict";o.d(n,{l:function(){return r}});var e=o(92394);function r(t){return(0,e.d6)("MuiButtonGroup",t)}var a=(0,e.sI)("MuiButtonGroup",["root","colorPrimary","colorNeutral","colorDanger","colorSuccess","colorWarning","colorContext","variantPlain","variantOutlined","variantSoft","variantSolid","sizeSm","sizeMd","sizeLg","horizontal","vertical"]);n.Z=a},259996:function(t,n,o){"use strict";o.r(n),o.d(n,{buttonGroupClasses:function(){return r.Z},default:function(){return e.Z},getButtonGroupUtilityClass:function(){return r.l}});var e=o(228388),r=o(995451)},449542:function(t,n,o){"use strict";o.d(n,{E:function(){return x}});var e=o(81465),r=o(310306),a=o(845454),i=o(470079),u=o(969577),l=o(159684),s=o(971970),c=o(544740),p=o(231147),d=o(257205),m=o(504824),f=o(516124),h=o(303683),B=o(109313),v=o(735250),g=["className","color","component","invertedColors","size","variant","children","orientation","slots","slotProps"],b=function(t){var n=t.size,o=t.variant,e=t.color,r={root:["root",t.orientation,o&&"variant".concat((0,s.Z)(o)),e&&"color".concat((0,s.Z)(e)),n&&"size".concat((0,s.Z)(n))]};return(0,l.Z)(r,f.y,{})},x=(0,m.Z)("div")(function(t){var n,o=t.theme,e=t.ownerState,r=(0,h.V)({theme:o,ownerState:e},["p","padding","borderRadius"]),i=r.p,u=r.padding,l=r.borderRadius;return[(0,a.Z)((0,a.Z)((0,a.Z)((0,a.Z)((0,a.Z)((0,a.Z)((0,a.Z)({"--Icon-color":"neutral"!==e.color||"solid"===e.variant?"currentColor":o.vars.palette.text.icon,"--Card-childRadius":"max((var(--Card-radius) - var(--variant-borderWidth, 0px)) - var(--Card-padding), min(var(--Card-padding) / 2, (var(--Card-radius) - var(--variant-borderWidth, 0px)) / 2))","--AspectRatio-radius":"var(--Card-childRadius)","--unstable_actionMargin":"calc(-1 * var(--variant-borderWidth, 0px))","--unstable_actionRadius":"var(--Card-radius)","--CardCover-radius":"calc(var(--Card-radius) - var(--variant-borderWidth, 0px))","--CardOverflow-offset":"calc(-1 * var(--Card-padding))","--CardOverflow-radius":"calc(var(--Card-radius) - var(--variant-borderWidth, 0px))","--Divider-inset":"calc(-1 * var(--Card-padding))"},"sm"===e.size&&{"--Card-radius":o.vars.radius.sm,"--Card-padding":"0.625rem",gap:"0.5rem"}),"md"===e.size&&{"--Card-radius":o.vars.radius.md,"--Card-padding":"1rem",gap:"0.75rem 1rem"}),"lg"===e.size&&{"--Card-radius":o.vars.radius.lg,"--Card-padding":"1.5rem",gap:"1rem 1.5rem"}),{},{padding:"var(--Card-padding)",borderRadius:"var(--Card-radius)",backgroundColor:o.vars.palette.background.surface,position:"relative",display:"flex",flexDirection:"horizontal"===e.orientation?"row":"column"},o.typography["body-".concat(e.size)]),"solid"===e.variant&&e.color&&e.invertedColors&&(0,d.Qr)(e.color)(o)),"soft"===e.variant&&e.color&&e.invertedColors&&(0,d.Ev)(e.color)(o)),null===(n=o.variants[e.variant])||void 0===n?void 0:n[e.color]),void 0!==i&&{"--Card-padding":i},void 0!==u&&{"--Card-padding":u},void 0!==l&&{"--Card-radius":l}]}),j=(0,m.Z)(x,{name:"JoyCard",slot:"Root",overridesResolver:function(t,n){return n.root}})({}),y=i.forwardRef(function(t,n){var o=(0,p.Z)({props:t,name:"JoyCard"}),l=o.className,s=o.color,d=o.component,m=void 0===d?"div":d,f=o.invertedColors,h=o.size,x=o.variant,y=o.children,k=o.orientation,C=void 0===k?"vertical":k,G=o.slots,Z=o.slotProps,S=(0,r.Z)(o,g),w=(0,a.Z)((0,a.Z)({},o),{},{color:void 0===s?"neutral":s,component:m,orientation:C,size:void 0===h?"md":h,variant:void 0===x?"outlined":x,invertedColors:void 0!==f&&f}),T=b(w),z=(0,a.Z)((0,a.Z)({},S),{},{component:m,slots:void 0===G?{}:G,slotProps:void 0===Z?{}:Z}),I=(0,B.Z)("root",{ref:n,className:(0,u.default)(T.root,l),elementType:j,externalForwardedProps:z,ownerState:w}),O=(0,e.Z)(I,2),R=O[0],M=O[1];return(0,v.jsx)(R,(0,a.Z)((0,a.Z)({},M),{},{children:i.Children.map(y,function(t,n){if(!i.isValidElement(t))return t;var o={};return(0,c.Z)(t,["Divider"])&&(o.inset="inset"in t.props?t.props.inset:"context",o.orientation="orientation"in t.props?t.props.orientation:"vertical"===C?"horizontal":"vertical"),0===n&&(o["data-first-child"]=""),n===i.Children.count(y)-1&&(o["data-last-child"]=""),i.cloneElement(t,o)})}))});n.Z=y},516124:function(t,n,o){"use strict";o.d(n,{y:function(){return r}});var e=o(92394);function r(t){return(0,e.d6)("MuiCard",t)}var a=(0,e.sI)("MuiCard",["root","colorPrimary","colorNeutral","colorDanger","colorSuccess","colorWarning","colorContext","variantPlain","variantOutlined","variantSoft","variantSolid","sizeSm","sizeMd","sizeLg","horizontal","vertical"]);n.Z=a},625622:function(t,n,o){"use strict";o.r(n),o.d(n,{cardClasses:function(){return r.Z},default:function(){return e.Z},getCardUtilityClass:function(){return r.y}});var e=o(449542),r=o(516124)},370420:function(t,n,o){"use strict";o.d(n,{h:function(){return v}});var e=o(81465),r=o(845454),a=o(310306),i=o(990432),u=o(470079),l=o(969577),s=o(159684),c=o(231147),p=o(504824),d=o(180357),m=o(829798),f=o(109313),h=o(735250),B=["className","component","children","orientation","slots","slotProps"],v=(0,p.Z)("div")(function(t){var n=t.ownerState;return(0,i.Z)({display:"flex",flexDirection:"horizontal"===n.orientation?"row":"column",flex:9999,zIndex:1,columnGap:"var(--Card-padding)",rowGap:"max(2px, calc(0.1875 * var(--Card-padding)))",padding:"var(--unstable_padding)"},".".concat(m.Z.root," > &"),{"--unstable_padding":"calc(var(--Card-padding) * 0.75) 0px"})}),g=(0,p.Z)(v,{name:"JoyCardContent",slot:"Root",overridesResolver:function(t,n){return n.root}})({}),b=u.forwardRef(function(t,n){var o=(0,c.Z)({props:t,name:"JoyCardContent"}),i=o.className,u=o.component,p=void 0===u?"div":u,m=o.children,v=o.orientation,b=o.slots,x=o.slotProps,j=(0,a.Z)(o,B),y=(0,r.Z)((0,r.Z)({},j),{},{component:p,slots:void 0===b?{}:b,slotProps:void 0===x?{}:x}),k=(0,r.Z)((0,r.Z)({},o),{},{component:p,orientation:void 0===v?"vertical":v}),C=(0,s.Z)({root:["root"]},d.N,{}),G=(0,f.Z)("root",{ref:n,className:(0,l.default)(C.root,i),elementType:g,externalForwardedProps:y,ownerState:k}),Z=(0,e.Z)(G,2),S=Z[0],w=Z[1];return(0,h.jsx)(S,(0,r.Z)((0,r.Z)({},w),{},{children:m}))});n.Z=b},180357:function(t,n,o){"use strict";o.d(n,{N:function(){return r}});var e=o(92394);function r(t){return(0,e.d6)("MuiCardContent",t)}var a=(0,e.sI)("MuiCardContent",["root"]);n.Z=a},796799:function(t,n,o){"use strict";o.r(n),o.d(n,{cardContentClasses:function(){return r.Z},default:function(){return e.Z},getCardContentUtilityClass:function(){return r.N}});var e=o(370420),r=o(180357)},829798:function(t,n,o){"use strict";o.d(n,{$:function(){return r}});var e=o(92394);function r(t){return(0,e.d6)("MuiCardOverflow",t)}var a=(0,e.sI)("MuiCardOverflow",["root","colorPrimary","colorNeutral","colorDanger","colorSuccess","colorWarning","colorContext","variantPlain","variantOutlined","variantSoft","variantSolid"]);n.Z=a},838916:function(t,n,o){"use strict";o.r(n),o.d(n,{default:function(){return e.Z},dividerClasses:function(){return r.Z},getDividerUtilityClass:function(){return r.V}});var e=o(109084),r=o(159793)},977346:function(t,n,o){"use strict";o.r(n),o.d(n,{default:function(){return e.ZP},getIconButtonUtilityClass:function(){return r.r},iconButtonClasses:function(){return r.Z}});var e=o(813198),r=o(782947)},516848:function(t,n,o){"use strict";o.r(n),o.d(n,{default:function(){return e.Z},getMenuUtilityClass:function(){return r.Q},menuClasses:function(){return r.Z}});var e=o(349719),r=o(518582)},566810:function(t,n,o){"use strict";o.r(n),o.d(n,{default:function(){return e.Z},getMenuItemUtilityClass:function(){return r.K},menuItemClasses:function(){return r.Z}});var e=o(948547),r=o(924385)},935246:function(t,n,o){"use strict";o.r(n),o.d(n,{default:function(){return e.Z},getSliderUtilityClass:function(){return r.k},sliderClasses:function(){return r.Z}});var e=o(43469),r=o(181717)},856623:function(t,n,o){"use strict";var e=o(648569),r=o(504824),a=o(231147),i=(0,e.Z)({createStyledComponent:(0,r.Z)("div",{name:"JoyStack",slot:"Root",overridesResolver:function(t,n){return n.root}}),useThemeProps:function(t){return(0,a.Z)({props:t,name:"JoyStack"})}});n.Z=i},948072:function(t,n,o){"use strict";o.r(n),o.d(n,{default:function(){return e.Z},getStackUtilityClass:function(){return a},stackClasses:function(){return i}});var e=o(856623),r=o(92394);function a(t){return(0,r.d6)("MuiStack",t)}var i=(0,r.sI)("MuiStack",["root"])},354937:function(t,n,o){"use strict";var e=o(914397),r=o(81465),a=o(310306),i=o(845454),u=o(470079),l=o(969577),s=o(971970),c=o(371072),p=o(81036),d=o(835650),m=o(871101),f=o(796623),h=o(642212),B=o(159684),v=o(88507),g=o(504824),b=o(231147),x=o(109313),j=o(935025),y=o(735250),k=["children","className","component","arrow","describeChild","disableFocusListener","disableHoverListener","disableInteractive","disableTouchListener","enterDelay","enterNextDelay","enterTouchDelay","followCursor","id","leaveDelay","leaveTouchDelay","onClose","onOpen","open","disablePortal","direction","keepMounted","modifiers","placement","title","color","variant","size","slots","slotProps"],C=function(t){var n=t.arrow,o=t.variant,e=t.color,r=t.size,a=t.placement,i={root:["root",n&&"tooltipArrow",t.touch&&"touch",r&&"size".concat((0,s.Z)(r)),e&&"color".concat((0,s.Z)(e)),o&&"variant".concat((0,s.Z)(o)),"tooltipPlacement".concat((0,s.Z)(a.split("-")[0]))],arrow:["arrow"]};return(0,B.Z)(i,j.Q,{})},G=(0,g.Z)("div",{name:"JoyTooltip",slot:"Root",overridesResolver:function(t,n){return n.root}})(function(t){var n,o,e,r=t.ownerState,a=t.theme,u=null===(n=a.variants[r.variant])||void 0===n?void 0:n[r.color];return(0,i.Z)((0,i.Z)((0,i.Z)((0,i.Z)((0,i.Z)((0,i.Z)((0,i.Z)((0,i.Z)({},"sm"===r.size&&{"--Icon-fontSize":a.vars.fontSize.md,"--Tooltip-arrowSize":"8px",padding:a.spacing(.25,.625)}),"md"===r.size&&{"--Icon-fontSize":a.vars.fontSize.lg,"--Tooltip-arrowSize":"10px",padding:a.spacing(.5,.75)}),"lg"===r.size&&{"--Icon-fontSize":a.vars.fontSize.xl,"--Tooltip-arrowSize":"12px",padding:a.spacing(.75,1)}),{},{zIndex:a.vars.zIndex.tooltip,borderRadius:a.vars.radius.sm,boxShadow:a.shadow.sm,wordWrap:"break-word",position:"relative"},r.disableInteractive&&{pointerEvents:"none"}),a.typography["body-".concat({sm:"xs",md:"sm",lg:"md"}[r.size])]),u),!u.backgroundColor&&{backgroundColor:a.vars.palette.background.surface}),{},{"&::before":{content:'""',display:"block",position:"absolute",width:null!==(o=r.placement)&&void 0!==o&&o.match(/(top|bottom)/)?"100%":"calc(10px + var(--variant-borderWidth, 0px))",height:null!==(e=r.placement)&&void 0!==e&&e.match(/(top|bottom)/)?"calc(10px + var(--variant-borderWidth, 0px))":"100%"},'&[data-popper-placement*="bottom"]::before':{top:0,left:0,transform:"translateY(-100%)"},'&[data-popper-placement*="left"]::before':{top:0,right:0,transform:"translateX(100%)"},'&[data-popper-placement*="right"]::before':{top:0,left:0,transform:"translateX(-100%)"},'&[data-popper-placement*="top"]::before':{bottom:0,left:0,transform:"translateY(100%)"}})}),Z=(0,g.Z)("span",{name:"JoyTooltip",slot:"Arrow",overridesResolver:function(t,n){return n.arrow}})(function(t){var n,o,e,r=t.theme,a=t.ownerState,i=null===(n=r.variants[a.variant])||void 0===n?void 0:n[a.color];return{"--unstable_Tooltip-arrowRotation":0,width:"var(--Tooltip-arrowSize)",height:"var(--Tooltip-arrowSize)",boxSizing:"border-box","&::before":{content:'""',display:"block",position:"absolute",width:0,height:0,border:"calc(var(--Tooltip-arrowSize) / 2) solid",borderLeftColor:"transparent",borderBottomColor:"transparent",borderTopColor:null!==(o=null==i?void 0:i.backgroundColor)&&void 0!==o?o:r.vars.palette.background.surface,borderRightColor:null!==(e=null==i?void 0:i.backgroundColor)&&void 0!==e?e:r.vars.palette.background.surface,borderRadius:"0px 2px 0px 0px",boxShadow:"var(--variant-borderWidth, 0px) calc(-1 * var(--variant-borderWidth, 0px)) 0px 0px ".concat(i.borderColor),transformOrigin:"center center",transform:"rotate(calc(-45deg + 90deg * var(--unstable_Tooltip-arrowRotation)))"},'[data-popper-placement*="bottom"] &':{top:"calc(0.5px + var(--Tooltip-arrowSize) * -1 / 2)"},'[data-popper-placement*="top"] &':{"--unstable_Tooltip-arrowRotation":2,bottom:"calc(0.5px + var(--Tooltip-arrowSize) * -1 / 2)"},'[data-popper-placement*="left"] &':{"--unstable_Tooltip-arrowRotation":1,right:"calc(0.5px + var(--Tooltip-arrowSize) * -1 / 2)"},'[data-popper-placement*="right"] &':{"--unstable_Tooltip-arrowRotation":3,left:"calc(0.5px + var(--Tooltip-arrowSize) * -1 / 2)"}}}),S=!1,w=new c.V,T={x:0,y:0};function z(t,n){return function(o){n&&n(o),t(o)}}function I(t,n){return function(o){for(var e=arguments.length,r=Array(e>1?e-1:0),a=1;a<e;a++)r[a-1]=arguments[a];n&&n.apply(void 0,[o].concat(r)),t.apply(void 0,[o].concat(r))}}var O=u.forwardRef(function(t,n){var o,s=(0,b.Z)({props:t,name:"JoyTooltip"}),B=s.children,g=s.className,j=s.component,O=s.arrow,R=void 0!==O&&O,M=s.describeChild,P=s.disableFocusListener,D=s.disableHoverListener,F=void 0!==D&&D,H=s.disableInteractive,L=s.disableTouchListener,V=s.enterDelay,_=void 0===V?100:V,A=s.enterNextDelay,E=void 0===A?0:A,N=s.enterTouchDelay,W=void 0===N?700:N,U=s.followCursor,q=void 0!==U&&U,J=s.id,$=s.leaveDelay,X=void 0===$?0:$,Y=s.leaveTouchDelay,K=void 0===Y?1500:Y,Q=s.onClose,tt=s.onOpen,tn=s.open,to=s.disablePortal,te=s.direction,tr=s.keepMounted,ta=s.modifiers,ti=s.placement,tu=void 0===ti?"bottom":ti,tl=s.title,ts=s.color,tc=s.variant,tp=s.size,td=s.slots,tm=s.slotProps,tf=(0,a.Z)(s,k),th=u.useState(),tB=(0,r.Z)(th,2),tv=tB[0],tg=tB[1],tb=u.useState(null),tx=(0,r.Z)(tb,2),tj=tx[0],ty=tx[1],tk=u.useRef(!1),tC=void 0!==H&&H||q,tG=(0,c.Z)(),tZ=(0,c.Z)(),tS=(0,c.Z)(),tw=(0,c.Z)(),tT=(0,p.Z)({controlled:tn,default:!1,name:"Tooltip",state:"open"}),tz=(0,r.Z)(tT,2),tI=tz[0],tO=tz[1],tR=tI,tM=(0,d.Z)(J),tP=u.useRef(),tD=(0,m.Z)(function(){void 0!==tP.current&&(document.body.style.WebkitUserSelect=tP.current,tP.current=void 0),tw.clear()});u.useEffect(function(){return tD},[tD]);var tF=function(t){w.clear(),S=!0,tO(!0),tt&&!tR&&tt(t)},tH=(0,m.Z)(function(t){w.start(800+X,function(){S=!1}),tO(!1),Q&&tR&&Q(t),tG.start(150,function(){tk.current=!1})}),tL=function(t){tk.current&&"touchstart"!==t.type||(tv&&tv.removeAttribute("title"),tZ.clear(),tS.clear(),_||S&&E?tZ.start(S?E:_,function(){tF(t)}):tF(t))},tV=function(t){tZ.clear(),tS.start(X,function(){tH(t)})},t_=(0,f.Z)(),tA=t_.isFocusVisibleRef,tE=t_.onBlur,tN=t_.onFocus,tW=t_.ref,tU=u.useState(!1),tq=(0,r.Z)(tU,2)[1],tJ=function(t){tE(t),!1===tA.current&&(tq(!1),tV(t))},t$=function(t){tv||tg(t.currentTarget),tN(t),!0===tA.current&&(tq(!0),tL(t))},tX=function(t){tk.current=!0;var n=B.props;n.onTouchStart&&n.onTouchStart(t)};u.useEffect(function(){if(tR)return document.addEventListener("keydown",t),function(){document.removeEventListener("keydown",t)};function t(t){("Escape"===t.key||"Esc"===t.key)&&tH(t)}},[tH,tR]);var tY=(0,h.Z)(tg,n),tK=(0,h.Z)(tW,tY),tQ=(0,h.Z)(B.ref,tK);"number"==typeof tl||tl||(tR=!1);var t0=u.useRef(null),t1={},t2="string"==typeof tl;void 0!==M&&M?(t1.title=tR||!t2||F?null:tl,t1["aria-describedby"]=tR?tM:null):(t1["aria-label"]=t2?tl:null,t1["aria-labelledby"]=tR&&!t2?tM:null);var t4=(0,i.Z)((0,i.Z)((0,i.Z)((0,i.Z)({},t1),tf),{},{component:j},B.props),{},{className:(0,l.default)(g,B.props.className),onTouchStart:tX,ref:tQ},q?{onMouseMove:function(t){var n=B.props;n.onMouseMove&&n.onMouseMove(t),T={x:t.clientX,y:t.clientY},t0.current&&t0.current.update()}}:{}),t5={};void 0!==L&&L||(t4.onTouchStart=function(t){tX(t),tS.clear(),tG.clear(),tD(),tP.current=document.body.style.WebkitUserSelect,document.body.style.WebkitUserSelect="none",tw.start(W,function(){document.body.style.WebkitUserSelect=tP.current,tL(t)})},t4.onTouchEnd=function(t){B.props.onTouchEnd&&B.props.onTouchEnd(t),tD(),tS.start(K,function(){tH(t)})}),F||(t4.onMouseOver=z(tL,t4.onMouseOver),t4.onMouseLeave=z(tV,t4.onMouseLeave),tC||(t5.onMouseOver=tL,t5.onMouseLeave=tV)),void 0!==P&&P||(t4.onFocus=I(t$,t4.onFocus),t4.onBlur=I(tJ,t4.onBlur),tC||(t5.onFocus=t$,t5.onBlur=tJ));var t3=(0,i.Z)((0,i.Z)({},s),{},{arrow:R,disableInteractive:tC,placement:tu,touch:tk.current,color:void 0===ts?"neutral":ts,variant:void 0===tc?"solid":tc,size:void 0===tp?"md":tp}),t7=C(t3),t9=(0,i.Z)((0,i.Z)({},tf),{},{component:j,slots:void 0===td?{}:td,slotProps:void 0===tm?{}:tm}),t6=u.useMemo(function(){return[{name:"arrow",enabled:!!tj,options:{element:tj,padding:6}},{name:"offset",options:{offset:[0,10]}}].concat((0,e.Z)(ta||[]))},[tj,ta]),t8=(0,x.Z)("root",{additionalProps:(0,i.Z)({id:tM,popperRef:t0,placement:tu,anchorEl:q?{getBoundingClientRect:function(){return{top:T.y,left:T.x,right:T.x,bottom:T.y,width:0,height:0}}}:tv,open:!!tv&&tR,disablePortal:to,keepMounted:tr,direction:te,modifiers:t6},t5),ref:null,className:t7.root,elementType:G,externalForwardedProps:t9,ownerState:t3}),nt=(0,r.Z)(t8,2),nn=nt[0],no=nt[1],ne=(0,x.Z)("arrow",{ref:ty,className:t7.arrow,elementType:Z,externalForwardedProps:t9,ownerState:t3}),nr=(0,r.Z)(ne,2),na=nr[0],ni=nr[1];return(0,y.jsxs)(u.Fragment,{children:[u.isValidElement(B)&&u.cloneElement(B,t4),(0,y.jsxs)(nn,(0,i.Z)((0,i.Z)((0,i.Z)({},no),!(null!==(o=s.slots)&&void 0!==o&&o.root)&&{as:v.r,slots:{root:j||"div"}}),{},{children:[tl,R?(0,y.jsx)(na,(0,i.Z)({},ni)):null]}))]})});n.Z=O},469944:function(t,n,o){"use strict";o.r(n),o.d(n,{default:function(){return e.Z},getTooltipUtilityClass:function(){return r.Q},tooltipClasses:function(){return r.Z}});var e=o(354937),r=o(935025)},935025:function(t,n,o){"use strict";o.d(n,{Q:function(){return r}});var e=o(92394);function r(t){return(0,e.d6)("MuiTooltip",t)}var a=(0,e.sI)("MuiTooltip",["root","tooltipArrow","arrow","touch","placementLeft","placementRight","placementTop","placementBottom","colorPrimary","colorDanger","colorNeutral","colorSuccess","colorWarning","colorContext","sizeSm","sizeMd","sizeLg","variantPlain","variantOutlined","variantSoft","variantSolid"]);n.Z=a},922293:function(t,n,o){"use strict";o.r(n),o.d(n,{default:function(){return e.ZP},getTypographyUtilityClass:function(){return r.f},typographyClasses:function(){return r.Z}});var e=o(204034),r=o(171797)},156548:function(t,n,o){"use strict";o.d(n,{t:function(){return l}});var e=o(890748),r=o(118452),a=o.n(r),i=o(515833),u=o.n(i),l=function(t,n,o){var r,i,l=t.keys[0];a()(n)?n.forEach(function(n,r){o(function(n,o){r<=t.keys.length-1&&(0===r?(0,e.Z)(n,o):n[t.up(t.keys[r])]=o)},n)}):n&&"object"==typeof n?(u()(n).length>t.keys.length?t.keys:(r=t.keys,i=u()(n),r.filter(function(t){return i.includes(t)}))).forEach(function(r){if(-1!==t.keys.indexOf(r)){var a=n[r];void 0!==a&&o(function(n,o){l===r?(0,e.Z)(n,o):n[t.up(r)]=o},a)}}):("number"==typeof n||"string"==typeof n)&&o(function(t,n){(0,e.Z)(t,n)},n)}},846939:function(t,n,o){"use strict";o.r(n),o.d(n,{default:function(){return tT}});var e,r,a,i,u,l,s,c,p,d,m,f,h,B,v,g,b,x,j,y,k,C,G,Z,S,w,T,z,I,O,R,M,P,D,F={};o.r(F),o.d(F,{demoComponents:function(){return tS},demos:function(){return tZ},docs:function(){return tG},srcComponents:function(){return tw}});var H=o(845454),L=o(470079),V=o.t(L,2),_=o(630760),A=o(818492),E=o(201249),N=o(259996),W=o(977346),U=o(867385),q=o(948072),J=o(625622),$=o(796799),X=o(922293),Y=o(516848),K=o(566810),Q=o(265437),tt=o(22178),tn=o(935246),to=o(469944),te=o(480611),tr=o(838916),ta=o(228388),ti=o(56428),tu=o(813198),tl=o(72076),ts=o(388561),tc=o(735250),tp=o(856623),td=o(81465),tm=[(0,tc.jsx)(ti.Z,{children:"One"},"one"),(0,tc.jsx)(ti.Z,{disabled:!0,children:"Two"},"two"),(0,tc.jsx)(ti.Z,{children:"Three"},"three")],tf=o(449542),th=o(370420),tB=o(204034),tv=o(349719),tg=o(948547),tb=["Create a merge commit","Squash and merge","Rebase and merge"],tx=o(855378),tj=o(43469),ty=o(354937),tk=o(109084),tC=o(789852),tG={en:{description:"The Button Group combines a set of related buttons.",location:"/docs/data/joy/components/button-group/button-group.md",rendered:['<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n <symbol id="error-icon" viewBox="0 0 20 20">\n <path fill-rule="evenodd" d="M2 7.4v5.2a2 2 0 0 0 .586 1.414l3.4 3.4A2 2 0 0 0 7.4 18h5.2a2 2 0 0 0 1.414-.586l3.4-3.4A2 2 0 0 0 18 12.6V7.4a2 2 0 0 0-.586-1.414l-3.4-3.4A2 2 0 0 0 12.6 2H7.4a2 2 0 0 0-1.414.586l-3.4 3.4A2 2 0 0 0 2 7.4Zm11.03-.43a.75.75 0 0 1 0 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 1.06-1.06L10 8.94l1.97-1.97a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"/>\n </symbol>\n </svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n <symbol id="warning-icon" viewBox="0 0 20 20">\n <path d="M2.33 17a.735.735 0 0 1-.665-.375.631.631 0 0 1-.094-.375.898.898 0 0 1 .115-.396L9.353 3.062a.621.621 0 0 1 .281-.27.85.85 0 0 1 .729 0 .622.622 0 0 1 .281.27l7.667 12.792c.07.125.108.257.114.396a.63.63 0 0 1-.093.375.842.842 0 0 1-.271.27.728.728 0 0 1-.394.105H2.33Zm7.664-2.5c.211 0 .39-.072.536-.214a.714.714 0 0 0 .218-.532.736.736 0 0 0-.214-.535.714.714 0 0 0-.531-.22.736.736 0 0 0-.536.215.714.714 0 0 0-.219.531c0 .212.072.39.215.536.143.146.32.219.531.219Zm0-2.5c.211 0 .39-.072.536-.216a.72.72 0 0 0 .218-.534v-2.5a.728.728 0 0 0-.214-.534.72.72 0 0 0-.531-.216.734.734 0 0 0-.536.216.72.72 0 0 0-.219.534v2.5c0 .212.072.39.215.534a.72.72 0 0 0 .531.216Z"/>\n </symbol>\n </svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n <symbol id="success-icon" viewBox="0 0 20 20">\n <path d="m8.938 10.875-1.25-1.23a.718.718 0 0 0-.521-.228.718.718 0 0 0-.521.229.73.73 0 0 0 0 1.062l1.77 1.771c.153.153.327.23.521.23a.718.718 0 0 0 .521-.23l3.896-3.896a.73.73 0 0 0 0-1.062.718.718 0 0 0-.52-.23.718.718 0 0 0-.521.23l-3.376 3.354ZM10 18a7.796 7.796 0 0 1-3.104-.625 8.065 8.065 0 0 1-2.552-1.719 8.064 8.064 0 0 1-1.719-2.552A7.797 7.797 0 0 1 2 10c0-1.111.208-2.15.625-3.115a8.064 8.064 0 0 1 4.27-4.26A7.797 7.797 0 0 1 10 2c1.111 0 2.15.208 3.115.625a8.096 8.096 0 0 1 4.26 4.26C17.792 7.851 18 8.89 18 10a7.797 7.797 0 0 1-.625 3.104 8.066 8.066 0 0 1-4.26 4.271A7.774 7.774 0 0 1 10 18Z"/>\n </symbol>\n </svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n <symbol id="info-icon" viewBox="0 0 20 20">\n <path d="M9.996 14c.21 0 .39-.072.535-.216a.72.72 0 0 0 .219-.534v-3.5a.728.728 0 0 0-.214-.534.72.72 0 0 0-.532-.216.734.734 0 0 0-.535.216.72.72 0 0 0-.219.534v3.5c0 .213.071.39.214.534a.72.72 0 0 0 .532.216Zm0-6.5c.21 0 .39-.071.535-.214a.714.714 0 0 0 .219-.532.736.736 0 0 0-.214-.535.714.714 0 0 0-.532-.219.736.736 0 0 0-.535.214.714.714 0 0 0-.219.532c0 .21.071.39.214.535.143.146.32.219.532.219Zm.01 10.5a7.81 7.81 0 0 1-3.11-.625 8.065 8.065 0 0 1-2.552-1.719 8.066 8.066 0 0 1-1.719-2.551A7.818 7.818 0 0 1 2 9.99c0-1.104.208-2.14.625-3.105a8.066 8.066 0 0 1 4.27-4.26A7.818 7.818 0 0 1 10.009 2a7.75 7.75 0 0 1 3.106.625 8.083 8.083 0 0 1 4.26 4.265A7.77 7.77 0 0 1 18 9.994a7.81 7.81 0 0 1-.625 3.11 8.066 8.066 0 0 1-1.719 2.552 8.083 8.083 0 0 1-2.546 1.719 7.77 7.77 0 0 1-3.104.625Z"/>\n </symbol>\n </svg>','\n <svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n <symbol id="copied-icon" viewBox="0 0 24 24">\n <path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.24 11.28L9.69 11.2c-.38-.39-.38-1.01 0-1.4.39-.39 1.02-.39 1.41 0l1.36 1.37 4.42-4.46c.39-.39 1.02-.39 1.41 0 .38.39.38 1.01 0 1.4l-5.13 5.17c-.37.4-1.01.4-1.4 0zM3 6c-.55 0-1 .45-1 1v13c0 1.1.9 2 2 2h13c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1V7c0-.55-.45-1-1-1z" />\n </symbol>\n </svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n <symbol id="copy-icon" viewBox="0 0 24 24">\n <path d="M15 20H5V7c0-.55-.45-1-1-1s-1 .45-1 1v13c0 1.1.9 2 2 2h10c.55 0 1-.45 1-1s-.45-1-1-1zm5-4V4c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h9c1.1 0 2-.9 2-2zm-2 0H9V4h9v12z" />\n +</symbol>\n </svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n <symbol id="anchor-link-icon" viewBox="0 0 12 6">\n <path d="M8.9176 0.083252H7.1676C6.84677 0.083252 6.58427 0.345752 6.58427 0.666585C6.58427 0.987419 6.84677 1.24992 7.1676 1.24992H8.9176C9.8801 1.24992 10.6676 2.03742 10.6676 2.99992C10.6676 3.96242 9.8801 4.74992 8.9176 4.74992H7.1676C6.84677 4.74992 6.58427 5.01242 6.58427 5.33325C6.58427 5.65409 6.84677 5.91659 7.1676 5.91659H8.9176C10.5276 5.91659 11.8343 4.60992 11.8343 2.99992C11.8343 1.38992 10.5276 0.083252 8.9176 0.083252ZM3.6676 2.99992C3.6676 3.32075 3.9301 3.58325 4.25094 3.58325H7.75094C8.07177 3.58325 8.33427 3.32075 8.33427 2.99992C8.33427 2.67909 8.07177 2.41659 7.75094 2.41659H4.25094C3.9301 2.41659 3.6676 2.67909 3.6676 2.99992ZM4.83427 4.74992H3.08427C2.12177 4.74992 1.33427 3.96242 1.33427 2.99992C1.33427 2.03742 2.12177 1.24992 3.08427 1.24992H4.83427C5.1551 1.24992 5.4176 0.987419 5.4176 0.666585C5.4176 0.345752 5.1551 0.083252 4.83427 0.083252H3.08427C1.47427 0.083252 0.167603 1.38992 0.167603 2.99992C0.167603 4.60992 1.47427 5.91659 3.08427 5.91659H4.83427C5.1551 5.91659 5.4176 5.65409 5.4176 5.33325C5.4176 5.01242 5.1551 4.74992 4.83427 4.74992Z" />\n </symbol>\n </svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n <symbol id="comment-link-icon" viewBox="0 0 24 24">\n <path d="M22.8481 4C22.8481 2.9 21.9481 2 20.8481 2H4.84814C3.74814 2 2.84814 2.9 2.84814 4V16C2.84814 17.1 3.74814 18 4.84814 18H18.8481L22.8481 22V4ZM16.8481 11H13.8481V14C13.8481 14.55 13.3981 15 12.8481 15C12.2981 15 11.8481 14.55 11.8481 14V11H8.84814C8.29814 11 7.84814 10.55 7.84814 10C7.84814 9.45 8.29814 9 8.84814 9H11.8481V6C11.8481 5.45 12.2981 5 12.8481 5C13.3981 5 13.8481 5.45 13.8481 6V9H16.8481C17.3981 9 17.8481 9.45 17.8481 10C17.8481 10.55 17.3981 11 16.8481 11Z" />\n </symbol>\n </svg>','<h1>Button Group</h1><p class="description">The Button Group combines a set of related buttons.</p>\n\n',{component:"modules/components/ComponentLinkHeader.js"},'<h2 id="introduction"><a href="#introduction" class="title-link-to-anchor">Introduction<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="introduction"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>The Button Group component combines a set of buttons that have similar or related functionality.</p>\n',{demo:"ButtonGroupUsage.js",hideToolbar:!0,bg:"gradient"},'<h2 id="basics"><a href="#basics" class="title-link-to-anchor">Basics<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="basics"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>The Button Group component can wrap <a href="/joy-ui/react-button/"><code>Button</code></a> and <a href="/joy-ui/react-button/#icon-button"><code>IconButton</code></a>.</p>\n',{demo:"BasicButtonGroup.js"},'<h2 id="customization"><a href="#customization" class="title-link-to-anchor">Customization<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="customization"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><h3 id="variants"><a href="#variants" class="title-link-to-anchor">Variants<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="variants"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>The Button Group component supports Joy\xa0UI's four <a href="/joy-ui/main-features/global-variants/">global variants</a>: <code>outlined</code> (default), <code>solid</code>, <code>soft</code>, and <code>plain</code>.</p>\n<p>The <code>variant</code> prop is passed to the buttons, not the Button Group itself.</p>\n',{demo:"VariantButtonGroup.js"},'<aside class="MuiCallout-root MuiCallout-info">\n <svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon">\n<use class="MuiCode-copied-icon" xlink:href="#info-icon" />\n</svg>\n <div class="MuiCallout-content">\n <p>To learn how to add your own variants, check out <a href="/joy-ui/customization/themed-components/#extend-variants">Themed components—Extend variants</a>.\nNote that you lose the global variants when you add custom variants.</p>\n\n</div></aside><h3 id="sizes"><a href="#sizes" class="title-link-to-anchor">Sizes<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="sizes"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>The Button Group component comes in three sizes: <code>sm</code>, <code>md</code> (default), and <code>lg</code>.</p>\n',{demo:"GroupSizesColors.js"},'<aside class="MuiCallout-root MuiCallout-info">\n <svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon">\n<use class="MuiCode-copied-icon" xlink:href="#info-icon" />\n</svg>\n <div class="MuiCallout-content">\n <p>To learn how to add custom sizes to the component, check out <a href="/joy-ui/customization/themed-components/#extend-sizes">Themed components—Extend sizes</a>.</p>\n\n</div></aside><h3 id="colors"><a href="#colors" class="title-link-to-anchor">Colors<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="colors"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>Every palette included in the theme is available via the <code>color</code> prop.\nPlay around combining different colors with different variants.</p>\n',{demo:"ButtonGroupColors.js"},'<h3 id="disabled"><a href="#disabled" class="title-link-to-anchor">Disabled<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="disabled"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>Use the <code>disabled</code> prop to disable all the buttons.\nNote that if you explicitly specify the <code>disabled</code> prop on the buttons directly, it will override what is used in the Button Group.</p>\n',{demo:"DisabledButtonGroup.js"},'<h3 id="spacing"><a href="#spacing" class="title-link-to-anchor">Spacing<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="spacing"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>Use <code>spacing</code> prop to control the gap between buttons. If the <code>spacing</code> is set to <code>0</code> (by default), the radius of the buttons will be adjusted to form a continuous surface.</p>\n',{demo:"SpacingButtonGroup.js"},'<aside class="MuiCallout-root MuiCallout-success">\n <svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon">\n<use class="MuiCode-copied-icon" xlink:href="#success-icon" />\n</svg>\n <div class="MuiCallout-content">\n <p>The type of value can be:</p>\n<ul>\n<li><code>string</code>: any valid CSS length unit, for example <code>px</code>, <code>rem</code>, <code>em</code>, etc.</li>\n<li><code>number</code>: will be calculated by <code>theme.spacing</code> function.</li>\n<li><code>array</code>: the responsive values based on the breakpoints defined in the theme.</li>\n<li><code>object</code>: the key must be one of the breakpoints defined in the theme (the defaults are <code>"xs" | "sm" | "md" | "lg" | "xl")</code>, and the value is the spacing of type <code>string</code> or <code>number</code>.</li>\n</ul>\n<div class="MuiCode-root"><pre><code class="language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ButtonGroup</span></span> <span class="token attr-name">spacing</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">xs</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">sm</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">md</span><span class="token operator">:</span> <span class="token string">\'2rem\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token operator">...</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">ButtonGroup</span></span><span class="token punctuation">></span></span>\n</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"><svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon"><use class="MuiCode-copy-icon" xlink:href="#copy-icon" /><use class="MuiCode-copied-icon" xlink:href="#copied-icon" /></svg><span class="MuiCode-copyKeypress"><span>(or</span> $keyC<span>)</span></span></button></div>\n\n</div></aside><h3 id="vertical-group"><a href="#vertical-group" class="title-link-to-anchor">Vertical group<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="vertical-group"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>The Button Group component can be displayed vertically using the <code>orientation="vertical"</code> prop.\nNote that this prop has no effect on <code>IconButton</code> component.</p>\n',{demo:"GroupOrientation.js"},'<h3 id="stretching-button"><a href="#stretching-button" class="title-link-to-anchor">Stretching button<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="stretching-button"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>Use the <code>buttonFlex</code> prop to make the buttons fill the available space of the Button Group component.</p>\n',{demo:"FlexButtonGroup.js"},'<h4>Minimum width</h4><p>For a large container, control the default width of the buttons by providing a valid <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex">CSS <code>flex</code></a> value to the <code>buttonFlex</code> prop.</p>\n',{demo:"MinWidthButtonGroup.js"},'<h3 id="split-button"><a href="#split-button" class="title-link-to-anchor">Split button<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="split-button"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>The Button Group component can also be used to create a split button.\nThe dropdown can change the button action (as in this example) or be used to immediately trigger a related action.</p>\n',{demo:"SplitButton.js"},'<h3 id="separator-color"><a href="#separator-color" class="title-link-to-anchor">Separator color<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="separator-color"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>When the Button Group's variant is <b>not</b> <code>outlined</code>, separators are created between buttons.\nTo control the color of the separator, override the CSS variable <code>--ButtonGroup-separatorColor</code> via the <code>sx</code> prop.</p>\n',{demo:"SeparatorButtonGroup.js"},'<h2 id="using-it-with-a-tooltip"><a href="#using-it-with-a-tooltip" class="title-link-to-anchor">Using it with a Tooltip<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="using-it-with-a-tooltip"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>The Button Group component supports arbitrary children that wrap the buttons by preserving the same appearance.</p>\n',{demo:"TooltipButtonGroup.js"},'<h2 id="common-examples"><a href="#common-examples" class="title-link-to-anchor">Common examples<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="common-examples"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><h3 id="pill-button-group"><a href="#pill-button-group" class="title-link-to-anchor">Pill button group<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="pill-button-group"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>Use the CSS variable <code>--ButtonGroup-radius</code> to control the radius of the start and end buttons.</p>\n',{demo:"RadiusButtonGroup.js"},'<h3 id="custom-separator"><a href="#custom-separator" class="title-link-to-anchor">Custom separator<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="custom-separator"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>This example uses the <code>Divider</code> component to create a custom separator between the buttons.\nThe CSS variable <code>--ButtonGroup-separatorColor</code> is then set with an arbitrary value to remove the default separator.</p>\n',{demo:"CustomSeparatorButtonGroup.js"},'<h2 id="api"><a href="#api" class="title-link-to-anchor">API<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="api"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.</p>\n<ul>\n<li><a href="/joy-ui/api/button/"><code><Button /></code></a></li>\n<li><a href="/joy-ui/api/button-group/"><code><ButtonGroup /></code></a></li>\n<li><a href="/joy-ui/api/icon-button/"><code><IconButton /></code></a></li>\n</ul>\n'],toc:[{text:"Introduction",level:2,hash:"introduction",children:[]},{text:"Basics",level:2,hash:"basics",children:[]},{text:"Customization",level:2,hash:"customization",children:[{text:"Variants",level:3,hash:"variants"},{text:"Sizes",level:3,hash:"sizes"},{text:"Colors",level:3,hash:"colors"},{text:"Disabled",level:3,hash:"disabled"},{text:"Spacing",level:3,hash:"spacing"},{text:"Vertical group",level:3,hash:"vertical-group"},{text:"Stretching button",level:3,hash:"stretching-button"},{text:"Split button",level:3,hash:"split-button"},{text:"Separator color",level:3,hash:"separator-color"}]},{text:"Using it with a Tooltip",level:2,hash:"using-it-with-a-tooltip",children:[]},{text:"Common examples",level:2,hash:"common-examples",children:[{text:"Pill button group",level:3,hash:"pill-button-group"},{text:"Custom separator",level:3,hash:"custom-separator"}]},{text:"API",level:2,hash:"api",children:[]}],title:"React Button Group component",headers:{productId:"joy-ui",title:"React Button Group component",components:["Button","ButtonGroup","IconButton"],githubLabel:"component: ButtonGroup",hooks:[]}}},tZ={"ButtonGroupUsage.js":{module:"./ButtonGroupUsage.js",raw:"import * as React from 'react';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport Button from '@mui/joy/Button';\nimport IconButton from '@mui/joy/IconButton';\nimport FavoriteBorder from '@mui/icons-material/FavoriteBorder';\nimport JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';\n\nexport default function ButtonGroupUsage() {\n return (\n <JoyUsageDemo\n componentName=\"ButtonGroup\"\n data={[\n {\n propName: 'variant',\n knob: 'radio',\n defaultValue: 'outlined',\n options: ['plain', 'outlined', 'soft', 'solid'],\n },\n {\n propName: 'color',\n knob: 'color',\n defaultValue: 'neutral',\n },\n {\n propName: 'disabled',\n knob: 'switch',\n },\n {\n propName: 'size',\n knob: 'radio',\n options: ['sm', 'md', 'lg'],\n defaultValue: 'md',\n },\n {\n propName: 'orientation',\n knob: 'radio',\n defaultValue: 'horizontal',\n options: ['horizontal', 'vertical'],\n },\n {\n propName: 'spacing',\n knob: 'number',\n defaultValue: 0,\n },\n {\n propName: 'children',\n defaultValue: `<Button />\n ...\n <IconButton />`,\n },\n ]}\n renderDemo={(props) => (\n <ButtonGroup {...props}>\n <Button>Vote</Button>\n <Button>Comment</Button>\n <IconButton>\n <FavoriteBorder />\n </IconButton>\n </ButtonGroup>\n )}\n />\n );\n}\n"},"BasicButtonGroup.js":{module:"./BasicButtonGroup.js",raw:"import * as React from 'react';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport IconButton from '@mui/joy/IconButton';\nimport Settings from '@mui/icons-material/Settings';\n\nexport default function BasicButtonGroup() {\n return (\n <ButtonGroup aria-label=\"outlined primary button group\">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n <IconButton>\n <Settings />\n </IconButton>\n </ButtonGroup>\n );\n}\n",jsxPreview:'<ButtonGroup aria-label="outlined primary button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n <IconButton>\n <Settings />\n </IconButton>\n</ButtonGroup>',moduleTS:"./BasicButtonGroup.js",rawTS:"import * as React from 'react';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport IconButton from '@mui/joy/IconButton';\nimport Settings from '@mui/icons-material/Settings';\n\nexport default function BasicButtonGroup() {\n return (\n <ButtonGroup aria-label=\"outlined primary button group\">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n <IconButton>\n <Settings />\n </IconButton>\n </ButtonGroup>\n );\n}\n"},"VariantButtonGroup.js":{module:"./VariantButtonGroup.js",raw:'import * as React from \'react\';\nimport Button from \'@mui/joy/Button\';\nimport ButtonGroup from \'@mui/joy/ButtonGroup\';\nimport Stack from \'@mui/joy/Stack\';\n\nexport default function VariantButtonGroup() {\n return (\n <Stack spacing={2}>\n <ButtonGroup aria-label="outlined button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n <ButtonGroup variant="plain" aria-label="plain button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n <ButtonGroup variant="soft" aria-label="soft button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n <ButtonGroup variant="solid" aria-label="solid button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n </Stack>\n );\n}\n',moduleTS:"./VariantButtonGroup.js",rawTS:'import * as React from \'react\';\nimport Button from \'@mui/joy/Button\';\nimport ButtonGroup from \'@mui/joy/ButtonGroup\';\nimport Stack from \'@mui/joy/Stack\';\n\nexport default function VariantButtonGroup() {\n return (\n <Stack spacing={2}>\n <ButtonGroup aria-label="outlined button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n <ButtonGroup variant="plain" aria-label="plain button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n <ButtonGroup variant="soft" aria-label="soft button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n <ButtonGroup variant="solid" aria-label="solid button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n </Stack>\n );\n}\n'},"GroupSizesColors.js":{module:"./GroupSizesColors.js",raw:'import * as React from \'react\';\nimport Button from \'@mui/joy/Button\';\nimport ButtonGroup from \'@mui/joy/ButtonGroup\';\nimport Stack from \'@mui/joy/Stack\';\n\nexport default function GroupSizesColors() {\n return (\n <Stack spacing={2} alignItems="center">\n <ButtonGroup size="sm" aria-label="outlined button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n <ButtonGroup aria-label="plain button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n <ButtonGroup size="lg" aria-label="soft button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n </Stack>\n );\n}\n',jsxPreview:'<ButtonGroup size="sm" aria-label="outlined button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n</ButtonGroup>\n<ButtonGroup aria-label="plain button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n</ButtonGroup>\n<ButtonGroup size="lg" aria-label="soft button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n</ButtonGroup>',moduleTS:"./GroupSizesColors.js",rawTS:'import * as React from \'react\';\nimport Button from \'@mui/joy/Button\';\nimport ButtonGroup from \'@mui/joy/ButtonGroup\';\nimport Stack from \'@mui/joy/Stack\';\n\nexport default function GroupSizesColors() {\n return (\n <Stack spacing={2} alignItems="center">\n <ButtonGroup size="sm" aria-label="outlined button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n <ButtonGroup aria-label="plain button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n <ButtonGroup size="lg" aria-label="soft button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n </ButtonGroup>\n </Stack>\n );\n}\n'},"ButtonGroupColors.js":{module:"./ButtonGroupColors.js",raw:"import * as React from 'react';\n\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport Stack from '@mui/joy/Stack';\n\nexport default function ButtonGroupColors() {\n const [variant, setVariant] = React.useState('outlined');\n const createOnClick = (value) => () => {\n setVariant(value);\n };\n return (\n <Stack spacing={1} alignItems=\"center\">\n <ButtonGroup variant={variant} size=\"sm\" aria-label=\"neutral button group\">\n <Button onClick={createOnClick('outlined')}>Outlined</Button>\n <Button onClick={createOnClick('plain')}>Plain</Button>\n <Button onClick={createOnClick('soft')}>Soft</Button>\n <Button onClick={createOnClick('solid')}>Solid</Button>\n </ButtonGroup>\n <ButtonGroup\n variant={variant}\n size=\"sm\"\n color=\"primary\"\n aria-label=\"primary button group\"\n >\n <Button onClick={createOnClick('outlined')}>Outlined</Button>\n <Button onClick={createOnClick('plain')}>Plain</Button>\n <Button onClick={createOnClick('soft')}>Soft</Button>\n <Button onClick={createOnClick('solid')}>Solid</Button>\n </ButtonGroup>\n <ButtonGroup\n variant={variant}\n size=\"sm\"\n color=\"danger\"\n aria-label=\"danger button group\"\n >\n <Button onClick={createOnClick('outlined')}>Outlined</Button>\n <Button onClick={createOnClick('plain')}>Plain</Button>\n <Button onClick={createOnClick('soft')}>Soft</Button>\n <Button onClick={createOnClick('solid')}>Solid</Button>\n </ButtonGroup>\n <ButtonGroup\n variant={variant}\n size=\"sm\"\n color=\"success\"\n aria-label=\"success button group\"\n >\n <Button onClick={createOnClick('outlined')}>Outlined</Button>\n <Button onClick={createOnClick('plain')}>Plain</Button>\n <Button onClick={createOnClick('soft')}>Soft</Button>\n <Button onClick={createOnClick('solid')}>Solid</Button>\n </ButtonGroup>\n <ButtonGroup\n variant={variant}\n size=\"sm\"\n color=\"warning\"\n aria-label=\"warning button group\"\n >\n <Button onClick={createOnClick('outlined')}>Outlined</Button>\n <Button onClick={createOnClick('plain')}>Plain</Button>\n <Button onClick={createOnClick('soft')}>Soft</Button>\n <Button onClick={createOnClick('solid')}>Solid</Button>\n </ButtonGroup>\n </Stack>\n );\n}\n",moduleTS:"./ButtonGroupColors.js",rawTS:"import * as React from 'react';\nimport { VariantProp } from '@mui/joy/styles';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport Stack from '@mui/joy/Stack';\n\nexport default function ButtonGroupColors() {\n const [variant, setVariant] = React.useState<VariantProp>('outlined');\n const createOnClick = (value: VariantProp) => () => {\n setVariant(value);\n };\n return (\n <Stack spacing={1} alignItems=\"center\">\n <ButtonGroup variant={variant} size=\"sm\" aria-label=\"neutral button group\">\n <Button onClick={createOnClick('outlined')}>Outlined</Button>\n <Button onClick={createOnClick('plain')}>Plain</Button>\n <Button onClick={createOnClick('soft')}>Soft</Button>\n <Button onClick={createOnClick('solid')}>Solid</Button>\n </ButtonGroup>\n <ButtonGroup\n variant={variant}\n size=\"sm\"\n color=\"primary\"\n aria-label=\"primary button group\"\n >\n <Button onClick={createOnClick('outlined')}>Outlined</Button>\n <Button onClick={createOnClick('plain')}>Plain</Button>\n <Button onClick={createOnClick('soft')}>Soft</Button>\n <Button onClick={createOnClick('solid')}>Solid</Button>\n </ButtonGroup>\n <ButtonGroup\n variant={variant}\n size=\"sm\"\n color=\"danger\"\n aria-label=\"danger button group\"\n >\n <Button onClick={createOnClick('outlined')}>Outlined</Button>\n <Button onClick={createOnClick('plain')}>Plain</Button>\n <Button onClick={createOnClick('soft')}>Soft</Button>\n <Button onClick={createOnClick('solid')}>Solid</Button>\n </ButtonGroup>\n <ButtonGroup\n variant={variant}\n size=\"sm\"\n color=\"success\"\n aria-label=\"success button group\"\n >\n <Button onClick={createOnClick('outlined')}>Outlined</Button>\n <Button onClick={createOnClick('plain')}>Plain</Button>\n <Button onClick={createOnClick('soft')}>Soft</Button>\n <Button onClick={createOnClick('solid')}>Solid</Button>\n </ButtonGroup>\n <ButtonGroup\n variant={variant}\n size=\"sm\"\n color=\"warning\"\n aria-label=\"warning button group\"\n >\n <Button onClick={createOnClick('outlined')}>Outlined</Button>\n <Button onClick={createOnClick('plain')}>Plain</Button>\n <Button onClick={createOnClick('soft')}>Soft</Button>\n <Button onClick={createOnClick('solid')}>Solid</Button>\n </ButtonGroup>\n </Stack>\n );\n}\n"},"DisabledButtonGroup.js":{module:"./DisabledButtonGroup.js",raw:"import * as React from 'react';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport IconButton from '@mui/joy/IconButton';\nimport Settings from '@mui/icons-material/Settings';\n\nexport default function DisabledButtonGroup() {\n return (\n <ButtonGroup disabled aria-label=\"disabled button group\">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n <IconButton disabled={false}>\n <Settings />\n </IconButton>\n </ButtonGroup>\n );\n}\n",jsxPreview:'<ButtonGroup disabled aria-label="disabled button group">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n <IconButton disabled={false}>\n <Settings />\n </IconButton>\n</ButtonGroup>',moduleTS:"./DisabledButtonGroup.js",rawTS:"import * as React from 'react';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport IconButton from '@mui/joy/IconButton';\nimport Settings from '@mui/icons-material/Settings';\n\nexport default function DisabledButtonGroup() {\n return (\n <ButtonGroup disabled aria-label=\"disabled button group\">\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n <IconButton disabled={false}>\n <Settings />\n </IconButton>\n </ButtonGroup>\n );\n}\n"},"SpacingButtonGroup.js":{module:"./SpacingButtonGroup.js",raw:"import * as React from 'react';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport IconButton from '@mui/joy/IconButton';\nimport Settings from '@mui/icons-material/Settings';\n\nexport default function SpacingButtonGroup() {\n return (\n <ButtonGroup spacing=\"0.5rem\" aria-label=\"spacing button group\">\n <Button>One</Button>\n <Button disabled>Two</Button>\n <Button>Three</Button>\n <IconButton>\n <Settings />\n </IconButton>\n </ButtonGroup>\n );\n}\n",jsxPreview:'<ButtonGroup spacing="0.5rem" aria-label="spacing button group">\n <Button>One</Button>\n <Button disabled>Two</Button>\n <Button>Three</Button>\n <IconButton>\n <Settings />\n </IconButton>\n</ButtonGroup>',moduleTS:"./SpacingButtonGroup.js",rawTS:"import * as React from 'react';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport IconButton from '@mui/joy/IconButton';\nimport Settings from '@mui/icons-material/Settings';\n\nexport default function SpacingButtonGroup() {\n return (\n <ButtonGroup spacing=\"0.5rem\" aria-label=\"spacing button group\">\n <Button>One</Button>\n <Button disabled>Two</Button>\n <Button>Three</Button>\n <IconButton>\n <Settings />\n </IconButton>\n </ButtonGroup>\n );\n}\n"},"FlexButtonGroup.js":{module:"./FlexButtonGroup.js",raw:"import * as React from 'react';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport IconButton from '@mui/joy/IconButton';\nimport Settings from '@mui/icons-material/Settings';\n\nexport default function FlexButtonGroup() {\n return (\n <ButtonGroup\n buttonFlex={1}\n aria-label=\"flex button group\"\n sx={{\n p: 2,\n width: 500,\n maxWidth: '100%',\n overflow: 'auto',\n resize: 'horizontal',\n }}\n >\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n <IconButton>\n <Settings />\n </IconButton>\n </ButtonGroup>\n );\n}\n",moduleTS:"./FlexButtonGroup.js",rawTS:"import * as React from 'react';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport IconButton from '@mui/joy/IconButton';\nimport Settings from '@mui/icons-material/Settings';\n\nexport default function FlexButtonGroup() {\n return (\n <ButtonGroup\n buttonFlex={1}\n aria-label=\"flex button group\"\n sx={{\n p: 2,\n width: 500,\n maxWidth: '100%',\n overflow: 'auto',\n resize: 'horizontal',\n }}\n >\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n <IconButton>\n <Settings />\n </IconButton>\n </ButtonGroup>\n );\n}\n"},"GroupOrientation.js":{module:"./GroupOrientation.js",raw:'import * as React from \'react\';\nimport Button from \'@mui/joy/Button\';\nimport ButtonGroup from \'@mui/joy/ButtonGroup\';\nimport Stack from \'@mui/joy/Stack\';\n\nconst buttons = [\n <Button key="one">One</Button>,\n <Button key="two" disabled>\n Two\n </Button>,\n <Button key="three">Three</Button>,\n];\n\nexport default function GroupOrientation() {\n return (\n <Stack spacing={2} direction="row">\n <ButtonGroup\n orientation="vertical"\n aria-label="vertical outlined button group"\n >\n {buttons}\n </ButtonGroup>\n <ButtonGroup\n orientation="vertical"\n aria-label="vertical plain button group"\n variant="plain"\n >\n {buttons}\n </ButtonGroup>\n <ButtonGroup\n orientation="vertical"\n aria-label="vertical soft button group"\n variant="soft"\n >\n {buttons}\n </ButtonGroup>\n <ButtonGroup\n orientation="vertical"\n aria-label="vertical solid button group"\n variant="solid"\n >\n {buttons}\n </ButtonGroup>\n </Stack>\n );\n}\n',moduleTS:"./GroupOrientation.js",rawTS:'import * as React from \'react\';\nimport Button from \'@mui/joy/Button\';\nimport ButtonGroup from \'@mui/joy/ButtonGroup\';\nimport Stack from \'@mui/joy/Stack\';\n\nconst buttons = [\n <Button key="one">One</Button>,\n <Button key="two" disabled>\n Two\n </Button>,\n <Button key="three">Three</Button>,\n];\n\nexport default function GroupOrientation() {\n return (\n <Stack spacing={2} direction="row">\n <ButtonGroup\n orientation="vertical"\n aria-label="vertical outlined button group"\n >\n {buttons}\n </ButtonGroup>\n <ButtonGroup\n orientation="vertical"\n aria-label="vertical plain button group"\n variant="plain"\n >\n {buttons}\n </ButtonGroup>\n <ButtonGroup\n orientation="vertical"\n aria-label="vertical soft button group"\n variant="soft"\n >\n {buttons}\n </ButtonGroup>\n <ButtonGroup\n orientation="vertical"\n aria-label="vertical solid button group"\n variant="solid"\n >\n {buttons}\n </ButtonGroup>\n </Stack>\n );\n}\n'},"MinWidthButtonGroup.js":{module:"./MinWidthButtonGroup.js",raw:"import * as React from 'react';\nimport Card from '@mui/joy/Card';\nimport CardContent from '@mui/joy/CardContent';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport Typography from '@mui/joy/Typography';\n\nexport default function MinWidthButtonGroup() {\n return (\n <Card\n variant=\"outlined\"\n sx={{\n width: '100%',\n overflow: 'auto',\n resize: 'horizontal',\n }}\n >\n <CardContent sx={{ textAlign: 'center', alignItems: 'center' }}>\n <Typography fontSize=\"lg\" fontWeight=\"lg\">\n Title\n </Typography>\n <Typography mb={3} maxWidth=\"32ch\">\n Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n </Typography>\n <ButtonGroup\n variant=\"soft\"\n aria-label=\"outlined primary button group\"\n buttonFlex=\"0 1 200px\"\n sx={{ width: '100%', justifyContent: 'center' }}\n >\n <Button>Buy</Button>\n <Button>Learn</Button>\n </ButtonGroup>\n </CardContent>\n </Card>\n );\n}\n",moduleTS:"./MinWidthButtonGroup.js",rawTS:"import * as React from 'react';\nimport Card from '@mui/joy/Card';\nimport CardContent from '@mui/joy/CardContent';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport Typography from '@mui/joy/Typography';\n\nexport default function MinWidthButtonGroup() {\n return (\n <Card\n variant=\"outlined\"\n sx={{\n width: '100%',\n overflow: 'auto',\n resize: 'horizontal',\n }}\n >\n <CardContent sx={{ textAlign: 'center', alignItems: 'center' }}>\n <Typography fontSize=\"lg\" fontWeight=\"lg\">\n Title\n </Typography>\n <Typography mb={3} maxWidth=\"32ch\">\n Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n </Typography>\n <ButtonGroup\n variant=\"soft\"\n aria-label=\"outlined primary button group\"\n buttonFlex=\"0 1 200px\"\n sx={{ width: '100%', justifyContent: 'center' }}\n >\n <Button>Buy</Button>\n <Button>Learn</Button>\n </ButtonGroup>\n </CardContent>\n </Card>\n );\n}\n"},"SplitButton.js":{module:"./SplitButton.js",raw:"import * as React from 'react';\nimport Button from '@mui/joy/Button';\nimport IconButton from '@mui/joy/IconButton';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport Menu from '@mui/joy/Menu';\nimport MenuItem from '@mui/joy/MenuItem';\nimport ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';\n\nconst options = ['Create a merge commit', 'Squash and merge', 'Rebase and merge'];\n\nexport default function SplitButton() {\n const [open, setOpen] = React.useState(false);\n const actionRef = React.useRef(null);\n const anchorRef = React.useRef(null);\n const [selectedIndex, setSelectedIndex] = React.useState(1);\n\n const handleClick = () => {\n console.info(`You clicked ${options[selectedIndex]}`);\n };\n\n const handleMenuItemClick = (event, index) => {\n setSelectedIndex(index);\n setOpen(false);\n };\n\n return (\n <React.Fragment>\n <ButtonGroup\n ref={anchorRef}\n variant=\"solid\"\n color=\"success\"\n aria-label=\"split button\"\n >\n <Button onClick={handleClick}>{options[selectedIndex]}</Button>\n <IconButton\n aria-controls={open ? 'split-button-menu' : undefined}\n aria-expanded={open ? 'true' : undefined}\n aria-label=\"select merge strategy\"\n aria-haspopup=\"menu\"\n onMouseDown={() => {\n actionRef.current = () => setOpen(!open);\n }}\n onKeyDown={() => {\n actionRef.current = () => setOpen(!open);\n }}\n onClick={() => {\n actionRef.current?.();\n }}\n >\n <ArrowDropDownIcon />\n </IconButton>\n </ButtonGroup>\n <Menu open={open} onClose={() => setOpen(false)} anchorEl={anchorRef.current}>\n {options.map((option, index) => (\n <MenuItem\n key={option}\n disabled={index === 2}\n selected={index === selectedIndex}\n onClick={(event) => handleMenuItemClick(event, index)}\n >\n {option}\n </MenuItem>\n ))}\n </Menu>\n </React.Fragment>\n );\n}\n",moduleTS:"./SplitButton.js",rawTS:"import * as React from 'react';\nimport Button from '@mui/joy/Button';\nimport IconButton from '@mui/joy/IconButton';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport Menu from '@mui/joy/Menu';\nimport MenuItem from '@mui/joy/MenuItem';\nimport ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';\n\nconst options = ['Create a merge commit', 'Squash and merge', 'Rebase and merge'];\n\nexport default function SplitButton() {\n const [open, setOpen] = React.useState(false);\n const actionRef = React.useRef<() => void | null>(null);\n const anchorRef = React.useRef<HTMLDivElement>(null);\n const [selectedIndex, setSelectedIndex] = React.useState(1);\n\n const handleClick = () => {\n console.info(`You clicked ${options[selectedIndex]}`);\n };\n\n const handleMenuItemClick = (\n event: React.MouseEvent<HTMLElement, MouseEvent>,\n index: number,\n ) => {\n setSelectedIndex(index);\n setOpen(false);\n };\n\n return (\n <React.Fragment>\n <ButtonGroup\n ref={anchorRef}\n variant=\"solid\"\n color=\"success\"\n aria-label=\"split button\"\n >\n <Button onClick={handleClick}>{options[selectedIndex]}</Button>\n <IconButton\n aria-controls={open ? 'split-button-menu' : undefined}\n aria-expanded={open ? 'true' : undefined}\n aria-label=\"select merge strategy\"\n aria-haspopup=\"menu\"\n onMouseDown={() => {\n // @ts-ignore\n actionRef.current = () => setOpen(!open);\n }}\n onKeyDown={() => {\n // @ts-ignore\n actionRef.current = () => setOpen(!open);\n }}\n onClick={() => {\n actionRef.current?.();\n }}\n >\n <ArrowDropDownIcon />\n </IconButton>\n </ButtonGroup>\n <Menu open={open} onClose={() => setOpen(false)} anchorEl={anchorRef.current}>\n {options.map((option, index) => (\n <MenuItem\n key={option}\n disabled={index === 2}\n selected={index === selectedIndex}\n onClick={(event) => handleMenuItemClick(event, index)}\n >\n {option}\n </MenuItem>\n ))}\n </Menu>\n </React.Fragment>\n );\n}\n"},"SeparatorButtonGroup.js":{module:"./SeparatorButtonGroup.js",raw:"import * as React from 'react';\nimport Box from '@mui/joy/Box';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport IconButton from '@mui/joy/IconButton';\nimport Slider from '@mui/joy/Slider';\nimport Settings from '@mui/icons-material/Settings';\n\nexport default function SeparatorButtonGroup() {\n const [hue, setHue] = React.useState(0);\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n <Slider\n value={hue}\n min={0}\n max={360}\n valueLabelDisplay=\"on\"\n valueLabelFormat={(value) => `hsl(${value} 100% 50%)`}\n onChange={(event, newValue) => setHue(newValue)}\n />\n <ButtonGroup\n variant=\"plain\"\n aria-label=\"button group\"\n sx={{ '--ButtonGroup-separatorColor': `hsl(${hue} 100% 50%) !important` }}\n >\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n <IconButton>\n <Settings />\n </IconButton>\n </ButtonGroup>\n </Box>\n );\n}\n",moduleTS:"./SeparatorButtonGroup.js",rawTS:"import * as React from 'react';\nimport Box from '@mui/joy/Box';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport IconButton from '@mui/joy/IconButton';\nimport Slider from '@mui/joy/Slider';\nimport Settings from '@mui/icons-material/Settings';\n\nexport default function SeparatorButtonGroup() {\n const [hue, setHue] = React.useState(0);\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n <Slider\n value={hue}\n min={0}\n max={360}\n valueLabelDisplay=\"on\"\n valueLabelFormat={(value) => `hsl(${value} 100% 50%)`}\n onChange={(event, newValue) => setHue(newValue as number)}\n />\n <ButtonGroup\n variant=\"plain\"\n aria-label=\"button group\"\n sx={{ '--ButtonGroup-separatorColor': `hsl(${hue} 100% 50%) !important` }}\n >\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n <IconButton>\n <Settings />\n </IconButton>\n </ButtonGroup>\n </Box>\n );\n}\n"},"TooltipButtonGroup.js":{module:"./TooltipButtonGroup.js",raw:"import * as React from 'react';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport IconButton from '@mui/joy/IconButton';\nimport Tooltip from '@mui/joy/Tooltip';\nimport Settings from '@mui/icons-material/Settings';\nimport Person from '@mui/icons-material/Person';\n\nexport default function TooltipButtonGroup() {\n return (\n <ButtonGroup variant=\"soft\" aria-label=\"tooltip button group\">\n <Tooltip arrow title=\"Go to profile\">\n <Button startDecorator={<Person />}>Hover me</Button>\n </Tooltip>\n <Tooltip arrow title=\"Open settings\">\n <span>\n <IconButton disabled>\n <Settings />\n </IconButton>\n </span>\n </Tooltip>\n <Tooltip arrow title=\"Go to profile\">\n <Button endDecorator={<Person />}>Hover me</Button>\n </Tooltip>\n </ButtonGroup>\n );\n}\n",jsxPreview:'<ButtonGroup variant="soft" aria-label="tooltip button group">\n <Tooltip arrow title="Go to profile">\n <Button startDecorator={<Person />}>Hover me</Button>\n </Tooltip>\n <Tooltip arrow title="Open settings">\n <span>\n <IconButton disabled>\n <Settings />\n </IconButton>\n </span>\n </Tooltip>\n <Tooltip arrow title="Go to profile">\n <Button endDecorator={<Person />}>Hover me</Button>\n </Tooltip>\n</ButtonGroup>',moduleTS:"./TooltipButtonGroup.js",rawTS:"import * as React from 'react';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport IconButton from '@mui/joy/IconButton';\nimport Tooltip from '@mui/joy/Tooltip';\nimport Settings from '@mui/icons-material/Settings';\nimport Person from '@mui/icons-material/Person';\n\nexport default function TooltipButtonGroup() {\n return (\n <ButtonGroup variant=\"soft\" aria-label=\"tooltip button group\">\n <Tooltip arrow title=\"Go to profile\">\n <Button startDecorator={<Person />}>Hover me</Button>\n </Tooltip>\n <Tooltip arrow title=\"Open settings\">\n <span>\n <IconButton disabled>\n <Settings />\n </IconButton>\n </span>\n </Tooltip>\n <Tooltip arrow title=\"Go to profile\">\n <Button endDecorator={<Person />}>Hover me</Button>\n </Tooltip>\n </ButtonGroup>\n );\n}\n"},"RadiusButtonGroup.js":{module:"./RadiusButtonGroup.js",raw:"import * as React from 'react';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport IconButton from '@mui/joy/IconButton';\nimport Settings from '@mui/icons-material/Settings';\n\nexport default function RadiusButtonGroup() {\n return (\n <ButtonGroup\n aria-label=\"radius button group\"\n sx={{ '--ButtonGroup-radius': '40px' }}\n >\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n <IconButton>\n <Settings />\n </IconButton>\n </ButtonGroup>\n );\n}\n",jsxPreview:"<ButtonGroup\n aria-label=\"radius button group\"\n sx={{ '--ButtonGroup-radius': '40px' }}\n>\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n <IconButton>\n <Settings />\n </IconButton>\n</ButtonGroup>",moduleTS:"./RadiusButtonGroup.js",rawTS:"import * as React from 'react';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport IconButton from '@mui/joy/IconButton';\nimport Settings from '@mui/icons-material/Settings';\n\nexport default function RadiusButtonGroup() {\n return (\n <ButtonGroup\n aria-label=\"radius button group\"\n sx={{ '--ButtonGroup-radius': '40px' }}\n >\n <Button>One</Button>\n <Button>Two</Button>\n <Button>Three</Button>\n <IconButton>\n <Settings />\n </IconButton>\n </ButtonGroup>\n );\n}\n"},"CustomSeparatorButtonGroup.js":{module:"./CustomSeparatorButtonGroup.js",raw:"import * as React from 'react';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport Divider from '@mui/joy/Divider';\nimport IconButton from '@mui/joy/IconButton';\nimport Settings from '@mui/icons-material/Settings';\n\nexport default function CustomSeparatorButtonGroup() {\n return (\n <ButtonGroup\n variant=\"solid\"\n color=\"success\"\n aria-label=\"button group\"\n sx={{\n '--ButtonGroup-separatorColor': 'none !important',\n '& > span': {\n zIndex: 3,\n background:\n 'linear-gradient(to top, transparent, rgba(255 255 255 / 0.6), transparent)',\n },\n }}\n >\n <Button>One</Button>\n <Divider />\n <Button>Two</Button>\n <Divider />\n <Button>Three</Button>\n <Divider />\n <IconButton>\n <Settings />\n </IconButton>\n </ButtonGroup>\n );\n}\n",moduleTS:"./CustomSeparatorButtonGroup.js",rawTS:"import * as React from 'react';\nimport Button from '@mui/joy/Button';\nimport ButtonGroup from '@mui/joy/ButtonGroup';\nimport Divider from '@mui/joy/Divider';\nimport IconButton from '@mui/joy/IconButton';\nimport Settings from '@mui/icons-material/Settings';\n\nexport default function CustomSeparatorButtonGroup() {\n return (\n <ButtonGroup\n variant=\"solid\"\n color=\"success\"\n aria-label=\"button group\"\n sx={{\n '--ButtonGroup-separatorColor': 'none !important',\n '& > span': {\n zIndex: 3,\n background:\n 'linear-gradient(to top, transparent, rgba(255 255 255 / 0.6), transparent)',\n },\n }}\n >\n <Button>One</Button>\n <Divider />\n <Button>Two</Button>\n <Divider />\n <Button>Three</Button>\n <Divider />\n <IconButton>\n <Settings />\n </IconButton>\n </ButtonGroup>\n );\n}\n"}};tZ.scope={process:{},import:{react:V,"@mui/joy/Button":E,"@mui/joy/ButtonGroup":N,"@mui/joy/IconButton":W,"@mui/icons-material/Settings":U,"@mui/joy/Stack":q,"@mui/joy/Card":J,"@mui/joy/CardContent":$,"@mui/joy/Typography":X,"@mui/joy/Menu":Y,"@mui/joy/MenuItem":K,"@mui/icons-material/ArrowDropDown":Q,"@mui/joy/Box":tt,"@mui/joy/Slider":tn,"@mui/joy/Tooltip":to,"@mui/icons-material/Person":te,"@mui/joy/Divider":tr}};var tS={"./ButtonGroupUsage.js":function(){return(0,tc.jsx)(ts.Z,{componentName:"ButtonGroup",data:[{propName:"variant",knob:"radio",defaultValue:"outlined",options:["plain","outlined","soft","solid"]},{propName:"color",knob:"color",defaultValue:"neutral"},{propName:"disabled",knob:"switch"},{propName:"size",knob:"radio",options:["sm","md","lg"],defaultValue:"md"},{propName:"orientation",knob:"radio",defaultValue:"horizontal",options:["horizontal","vertical"]},{propName:"spacing",knob:"number",defaultValue:0},{propName:"children",defaultValue:"<Button />\n ...\n <IconButton />"}],renderDemo:function(t){return(0,tc.jsxs)(ta.Z,(0,H.Z)((0,H.Z)({},t),{},{children:[e||(e=(0,tc.jsx)(ti.Z,{children:"Vote"})),r||(r=(0,tc.jsx)(ti.Z,{children:"Comment"})),a||(a=(0,tc.jsx)(tu.ZP,{children:(0,tc.jsx)(tl.default,{})}))]}))}})},"./BasicButtonGroup.js":function(){return i||(i=(0,tc.jsxs)(ta.Z,{"aria-label":"outlined primary button group",children:[(0,tc.jsx)(ti.Z,{children:"One"}),(0,tc.jsx)(ti.Z,{children:"Two"}),(0,tc.jsx)(ti.Z,{children:"Three"}),(0,tc.jsx)(tu.ZP,{children:(0,tc.jsx)(U.default,{})})]}))},"./VariantButtonGroup.js":function(){return u||(u=(0,tc.jsxs)(tp.Z,{spacing:2,children:[(0,tc.jsxs)(ta.Z,{"aria-label":"outlined button group",children:[(0,tc.jsx)(ti.Z,{children:"One"}),(0,tc.jsx)(ti.Z,{children:"Two"}),(0,tc.jsx)(ti.Z,{children:"Three"})]}),(0,tc.jsxs)(ta.Z,{variant:"plain","aria-label":"plain button group",children:[(0,tc.jsx)(ti.Z,{children:"One"}),(0,tc.jsx)(ti.Z,{children:"Two"}),(0,tc.jsx)(ti.Z,{children:"Three"})]}),(0,tc.jsxs)(ta.Z,{variant:"soft","aria-label":"soft button group",children:[(0,tc.jsx)(ti.Z,{children:"One"}),(0,tc.jsx)(ti.Z,{children:"Two"}),(0,tc.jsx)(ti.Z,{children:"Three"})]}),(0,tc.jsxs)(ta.Z,{variant:"solid","aria-label":"solid button group",children:[(0,tc.jsx)(ti.Z,{children:"One"}),(0,tc.jsx)(ti.Z,{children:"Two"}),(0,tc.jsx)(ti.Z,{children:"Three"})]})]}))},"./GroupSizesColors.js":function(){return l||(l=(0,tc.jsxs)(tp.Z,{spacing:2,alignItems:"center",children:[(0,tc.jsxs)(ta.Z,{size:"sm","aria-label":"outlined button group",children:[(0,tc.jsx)(ti.Z,{children:"One"}),(0,tc.jsx)(ti.Z,{children:"Two"}),(0,tc.jsx)(ti.Z,{children:"Three"})]}),(0,tc.jsxs)(ta.Z,{"aria-label":"plain button group",children:[(0,tc.jsx)(ti.Z,{children:"One"}),(0,tc.jsx)(ti.Z,{children:"Two"}),(0,tc.jsx)(ti.Z,{children:"Three"})]}),(0,tc.jsxs)(ta.Z,{size:"lg","aria-label":"soft button group",children:[(0,tc.jsx)(ti.Z,{children:"One"}),(0,tc.jsx)(ti.Z,{children:"Two"}),(0,tc.jsx)(ti.Z,{children:"Three"})]})]}))},"./ButtonGroupColors.js":function(){var t=L.useState("outlined"),n=(0,td.Z)(t,2),o=n[0],e=n[1],r=function(t){return function(){e(t)}};return(0,tc.jsxs)(tp.Z,{spacing:1,alignItems:"center",children:[(0,tc.jsxs)(ta.Z,{variant:o,size:"sm","aria-label":"neutral button group",children:[(0,tc.jsx)(ti.Z,{onClick:r("outlined"),children:"Outlined"}),(0,tc.jsx)(ti.Z,{onClick:r("plain"),children:"Plain"}),(0,tc.jsx)(ti.Z,{onClick:r("soft"),children:"Soft"}),(0,tc.jsx)(ti.Z,{onClick:r("solid"),children:"Solid"})]}),(0,tc.jsxs)(ta.Z,{variant:o,size:"sm",color:"primary","aria-label":"primary button group",children:[(0,tc.jsx)(ti.Z,{onClick:r("outlined"),children:"Outlined"}),(0,tc.jsx)(ti.Z,{onClick:r("plain"),children:"Plain"}),(0,tc.jsx)(ti.Z,{onClick:r("soft"),children:"Soft"}),(0,tc.jsx)(ti.Z,{onClick:r("solid"),children:"Solid"})]}),(0,tc.jsxs)(ta.Z,{variant:o,size:"sm",color:"danger","aria-label":"danger button group",children:[(0,tc.jsx)(ti.Z,{onClick:r("outlined"),children:"Outlined"}),(0,tc.jsx)(ti.Z,{onClick:r("plain"),children:"Plain"}),(0,tc.jsx)(ti.Z,{onClick:r("soft"),children:"Soft"}),(0,tc.jsx)(ti.Z,{onClick:r("solid"),children:"Solid"})]}),(0,tc.jsxs)(ta.Z,{variant:o,size:"sm",color:"success","aria-label":"success button group",children:[(0,tc.jsx)(ti.Z,{onClick:r("outlined"),children:"Outlined"}),(0,tc.jsx)(ti.Z,{onClick:r("plain"),children:"Plain"}),(0,tc.jsx)(ti.Z,{onClick:r("soft"),children:"Soft"}),(0,tc.jsx)(ti.Z,{onClick:r("solid"),children:"Solid"})]}),(0,tc.jsxs)(ta.Z,{variant:o,size:"sm",color:"warning","aria-label":"warning button group",children:[(0,tc.jsx)(ti.Z,{onClick:r("outlined"),children:"Outlined"}),(0,tc.jsx)(ti.Z,{onClick:r("plain"),children:"Plain"}),(0,tc.jsx)(ti.Z,{onClick:r("soft"),children:"Soft"}),(0,tc.jsx)(ti.Z,{onClick:r("solid"),children:"Solid"})]})]})},"./DisabledButtonGroup.js":function(){return s||(s=(0,tc.jsxs)(ta.Z,{disabled:!0,"aria-label":"disabled button group",children:[(0,tc.jsx)(ti.Z,{children:"One"}),(0,tc.jsx)(ti.Z,{children:"Two"}),(0,tc.jsx)(ti.Z,{children:"Three"}),(0,tc.jsx)(tu.ZP,{disabled:!1,children:(0,tc.jsx)(U.default,{})})]}))},"./SpacingButtonGroup.js":function(){return c||(c=(0,tc.jsxs)(ta.Z,{spacing:"0.5rem","aria-label":"spacing button group",children:[(0,tc.jsx)(ti.Z,{children:"One"}),(0,tc.jsx)(ti.Z,{disabled:!0,children:"Two"}),(0,tc.jsx)(ti.Z,{children:"Three"}),(0,tc.jsx)(tu.ZP,{children:(0,tc.jsx)(U.default,{})})]}))},"./FlexButtonGroup.js":function(){return(0,tc.jsxs)(ta.Z,{buttonFlex:1,"aria-label":"flex button group",sx:{p:2,width:500,maxWidth:"100%",overflow:"auto",resize:"horizontal"},children:[p||(p=(0,tc.jsx)(ti.Z,{children:"One"})),d||(d=(0,tc.jsx)(ti.Z,{children:"Two"})),m||(m=(0,tc.jsx)(ti.Z,{children:"Three"})),f||(f=(0,tc.jsx)(tu.ZP,{children:(0,tc.jsx)(U.default,{})}))]})},"./GroupOrientation.js":function(){return h||(h=(0,tc.jsxs)(tp.Z,{spacing:2,direction:"row",children:[(0,tc.jsx)(ta.Z,{orientation:"vertical","aria-label":"vertical outlined button group",children:tm}),(0,tc.jsx)(ta.Z,{orientation:"vertical","aria-label":"vertical plain button group",variant:"plain",children:tm}),(0,tc.jsx)(ta.Z,{orientation:"vertical","aria-label":"vertical soft button group",variant:"soft",children:tm}),(0,tc.jsx)(ta.Z,{orientation:"vertical","aria-label":"vertical solid button group",variant:"solid",children:tm})]}))},"./MinWidthButtonGroup.js":function(){return(0,tc.jsx)(tf.Z,{variant:"outlined",sx:{width:"100%",overflow:"auto",resize:"horizontal"},children:(0,tc.jsxs)(th.Z,{sx:{textAlign:"center",alignItems:"center"},children:[B||(B=(0,tc.jsx)(tB.ZP,{fontSize:"lg",fontWeight:"lg",children:"Title"})),v||(v=(0,tc.jsx)(tB.ZP,{mb:3,maxWidth:"32ch",children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry."})),(0,tc.jsxs)(ta.Z,{variant:"soft","aria-label":"outlined primary button group",buttonFlex:"0 1 200px",sx:{width:"100%",justifyContent:"center"},children:[g||(g=(0,tc.jsx)(ti.Z,{children:"Buy"})),b||(b=(0,tc.jsx)(ti.Z,{children:"Learn"}))]})]})})},"./SplitButton.js":function(){var t=L.useState(!1),n=(0,td.Z)(t,2),o=n[0],e=n[1],r=L.useRef(null),a=L.useRef(null),i=L.useState(1),u=(0,td.Z)(i,2),l=u[0],s=u[1],c=function(t,n){s(n),e(!1)};return(0,tc.jsxs)(L.Fragment,{children:[(0,tc.jsxs)(ta.Z,{ref:a,variant:"solid",color:"success","aria-label":"split button",children:[(0,tc.jsx)(ti.Z,{onClick:function(){console.info("You clicked ".concat(tb[l]))},children:tb[l]}),(0,tc.jsx)(tu.ZP,{"aria-controls":o?"split-button-menu":void 0,"aria-expanded":o?"true":void 0,"aria-label":"select merge strategy","aria-haspopup":"menu",onMouseDown:function(){r.current=function(){return e(!o)}},onKeyDown:function(){r.current=function(){return e(!o)}},onClick:function(){var t;null===(t=r.current)||void 0===t||t.call(r)},children:x||(x=(0,tc.jsx)(Q.default,{}))})]}),(0,tc.jsx)(tv.Z,{open:o,onClose:function(){return e(!1)},anchorEl:a.current,children:tb.map(function(t,n){return(0,tc.jsx)(tg.Z,{disabled:2===n,selected:n===l,onClick:function(t){return c(t,n)},children:t},t)})})]})},"./SeparatorButtonGroup.js":function(){var t=L.useState(0),n=(0,td.Z)(t,2),o=n[0],e=n[1];return(0,tc.jsxs)(tx.Z,{sx:{display:"flex",flexDirection:"column",gap:2},children:[(0,tc.jsx)(tj.Z,{value:o,min:0,max:360,valueLabelDisplay:"on",valueLabelFormat:function(t){return"hsl(".concat(t," 100% 50%)")},onChange:function(t,n){return e(n)}}),(0,tc.jsxs)(ta.Z,{variant:"plain","aria-label":"button group",sx:{"--ButtonGroup-separatorColor":"hsl(".concat(o," 100% 50%) !important")},children:[j||(j=(0,tc.jsx)(ti.Z,{children:"One"})),y||(y=(0,tc.jsx)(ti.Z,{children:"Two"})),k||(k=(0,tc.jsx)(ti.Z,{children:"Three"})),C||(C=(0,tc.jsx)(tu.ZP,{children:(0,tc.jsx)(U.default,{})}))]})]})},"./TooltipButtonGroup.js":function(){return G||(G=(0,tc.jsxs)(ta.Z,{variant:"soft","aria-label":"tooltip button group",children:[(0,tc.jsx)(ty.Z,{arrow:!0,title:"Go to profile",children:(0,tc.jsx)(ti.Z,{startDecorator:(0,tc.jsx)(te.default,{}),children:"Hover me"})}),(0,tc.jsx)(ty.Z,{arrow:!0,title:"Open settings",children:(0,tc.jsx)("span",{children:(0,tc.jsx)(tu.ZP,{disabled:!0,children:(0,tc.jsx)(U.default,{})})})}),(0,tc.jsx)(ty.Z,{arrow:!0,title:"Go to profile",children:(0,tc.jsx)(ti.Z,{endDecorator:(0,tc.jsx)(te.default,{}),children:"Hover me"})})]}))},"./RadiusButtonGroup.js":function(){return(0,tc.jsxs)(ta.Z,{"aria-label":"radius button group",sx:{"--ButtonGroup-radius":"40px"},children:[Z||(Z=(0,tc.jsx)(ti.Z,{children:"One"})),S||(S=(0,tc.jsx)(ti.Z,{children:"Two"})),w||(w=(0,tc.jsx)(ti.Z,{children:"Three"})),T||(T=(0,tc.jsx)(tu.ZP,{children:(0,tc.jsx)(U.default,{})}))]})},"./CustomSeparatorButtonGroup.js":function(){return(0,tc.jsxs)(ta.Z,{variant:"solid",color:"success","aria-label":"button group",sx:{"--ButtonGroup-separatorColor":"none !important","& > span":{zIndex:3,background:"linear-gradient(to top, transparent, rgba(255 255 255 / 0.6), transparent)"}},children:[z||(z=(0,tc.jsx)(ti.Z,{children:"One"})),I||(I=(0,tc.jsx)(tk.Z,{})),O||(O=(0,tc.jsx)(ti.Z,{children:"Two"})),R||(R=(0,tc.jsx)(tk.Z,{})),M||(M=(0,tc.jsx)(ti.Z,{children:"Three"})),P||(P=(0,tc.jsx)(tk.Z,{})),D||(D=(0,tc.jsx)(tu.ZP,{children:(0,tc.jsx)(U.default,{})}))]})}},tw={"modules/components/ComponentLinkHeader.js":tC.Z};function tT(){return(0,tc.jsx)(_.Z,(0,H.Z)({},F))}tT.getLayout=function(t){return(0,tc.jsx)(A.ZP,{children:t})}},789852:function(t,n,o){"use strict";o.d(n,{Z:function(){return Z}});var e,r,a,i,u,l,s,c=o(470079),p=o(721659),d=o(595297),m=o(388339),f=o(358846),h=o(741092),B=o(735250),v=(0,h.Z)((0,B.jsxs)("g",{fillRule:"nonzero",fill:"none",children:[(0,B.jsx)("path",{fill:"#FDB300",d:"M5.24 2.7L12 2l6.76.7L24 9.48 12 23 0 9.49z"}),(0,B.jsx)("path",{fill:"#EA6C00",d:"M4.85 9l7.13 14L0 9zM19.1 9l-7.12 14L23.95 9z"}),(0,B.jsx)("path",{fill:"#FDAD00",d:"M4.85 9H19.1l-7.12 14z"}),(0,B.jsxs)("g",{children:[(0,B.jsx)("path",{fill:"#FDD231",d:"M11.98 2l-6.75.65-.38 6.34zM11.98 2l6.75.65.37 6.34z"}),(0,B.jsx)("path",{fill:"#FDAD00",d:"M23.95 9l-5.22-6.35.37 6.34zM0 9l5.23-6.35-.38 6.34z"}),(0,B.jsx)("path",{fill:"#FEEEB7",d:"M11.98 2L4.85 9H19.1z"})]})]}),"Sketch"),g=(0,h.Z)((0,B.jsxs)("g",{fillRule:"nonzero",fill:"none",children:[(0,B.jsx)("path",{d:"M8 24a4 4 0 004-4v-4H8a4 4 0 000 8z",fill:"#0ACF83"}),(0,B.jsx)("path",{d:"M4 12a4 4 0 014-4h4v8H8a4 4 0 01-4-4z",fill:"#A259FF"}),(0,B.jsx)("path",{d:"M4 4a4 4 0 014-4h4v8H8a4 4 0 01-4-4z",fill:"#F24E1E"}),(0,B.jsx)("path",{d:"M12 0h4a4 4 0 010 8h-4V0z",fill:"#FF7262"}),(0,B.jsx)("path",{d:"M20 12a4 4 0 11-8 0 4 4 0 018 0z",fill:"#1ABCFE"})]}),"Figma"),b=(0,h.Z)((0,B.jsxs)("g",{fillRule:"nonzero",fill:"none",children:[(0,B.jsx)("path",{d:"M5.54 2h12.92C20.42 2 22 3.6 22 5.58v12.55a3.56 3.56 0 01-3.54 3.58H5.54A3.56 3.56 0 012 18.13V5.58A3.56 3.56 0 015.54 2z",fill:"#470137"}),(0,B.jsx)("path",{d:"M12.52 7.28L10 11.45l2.68 4.41c.01.04.02.07.01.1 0 .04-.04.01-.09.02H10.7c-.13 0-.22 0-.28-.1l-.54-1.04c-.17-.35-.36-.7-.57-1.06l-.6-1.1h-.02c-.17.36-.36.73-.56 1.09l-.57 1.07-.57 1.06c-.04.09-.1.1-.2.1H4.94c-.03 0-.06.01-.06-.03 0-.03 0-.07.02-.1l2.6-4.28-2.53-4.31c-.03-.04-.04-.07-.02-.09.02-.02.05-.03.09-.03h1.9a.5.5 0 01.11.01c.04.02.06.05.09.08.16.36.34.72.53 1.09l.6 1.06c.2.36.39.71.57 1.07h.01c.18-.37.36-.73.55-1.08.18-.36.37-.71.57-1.06l.56-1.06c0-.04.02-.07.05-.09.03-.01.06-.02.1-.01h1.77c.04-.01.09.01.1.06 0 0-.01.04-.03.05zM16.39 16.16c-.62 0-1.24-.12-1.8-.38a2.92 2.92 0 01-1.27-1.15 3.65 3.65 0 01-.46-1.91 3.46 3.46 0 011.8-3.08 4.27 4.27 0 012.29-.48c.07 0 .16 0 .26.02V6.52c0-.06.02-.1.08-.1H19c.04 0 .08.03.08.07v8.01l.02.51.03.49c0 .06-.02.11-.08.13a6.37 6.37 0 01-2.65.53zm.82-1.69v-3.7a2.11 2.11 0 00-1.45.16c-.29.15-.53.36-.71.63-.19.27-.28.63-.28 1.06 0 .3.04.6.14.87a1.44 1.44 0 00.95.93c.23.08.46.11.7.11a4.49 4.49 0 00.65-.06z",fill:"#FF61F6"})]}),"AdobeXD"),x=(0,h.Z)((0,B.jsxs)("g",{fill:"currentColor",fillRule:"nonzero",children:[(0,B.jsx)("path",{d:"M5.84 3c-.52 0-1 .25-1.3.67l-1.4 2.05c-.06.09-.1.19-.14.28h8V3H5.84zM20.86 5.72l-1.4-2.05c-.3-.42-.81-.67-1.33-.67H13v3h8c-.05-.1-.08-.2-.14-.28z",fillOpacity:".79"}),(0,B.jsx)("path",{d:"M20.98 7H3.02L3 7.11V19.4c0 .89.71 1.61 1.58 1.61h14.84A1.6 1.6 0 0021 19.4V7.1L20.98 7zm-6.87 5.36H9.89a1.6 1.6 0 01-1.58-1.61c0-.89.7-1.6 1.58-1.6h4.22c.87 0 1.58.71 1.58 1.6 0 .89-.7 1.6-1.58 1.6z",fillOpacity:".87"})]}),"BundleSize"),j=(0,h.Z)((0,B.jsxs)("g",{fillRule:"nonzero",fill:"none",children:[(0,B.jsx)("path",{d:"M6.92 6.1l2.33 7.99 2.32-8h6.3v.8l-2.37 4.14c.83.27 1.46.76 1.89 1.47.43.71.64 1.55.64 2.51 0 1.2-.31 2.2-.94 3a2.93 2.93 0 01-2.42 1.22 2.9 2.9 0 01-1.96-.72 4.25 4.25 0 01-1.23-1.96l1.31-.55c.2.5.45.9.76 1.18.32.28.69.43 1.12.43.44 0 .82-.26 1.13-.76.31-.51.47-1.12.47-1.84 0-.79-.17-1.4-.5-1.83-.38-.5-.99-.76-1.81-.76h-.64v-.78l2.24-3.92h-2.7l-.16.26-3.3 11.25h-.15l-2.4-8.14-2.41 8.14h-.16L.43 6.1H2.1l2.33 7.99L6 8.71 5.24 6.1h1.68z",fill:"#005A9C"}),(0,B.jsx)("g",{fill:"currentColor",children:(0,B.jsx)("path",{d:"M23.52 6.25l.28 1.62-.98 1.8s-.38-.76-1.01-1.19c-.53-.35-.87-.43-1.41-.33-.7.14-1.48.93-1.82 1.9-.41 1.18-.42 1.74-.43 2.26a4.9 4.9 0 00.11 1.33s-.6-1.06-.59-2.61c0-1.1.19-2.11.72-3.1.47-.87 1.17-1.4 1.8-1.45.63-.07 1.14.23 1.53.55.42.33.83 1.07.83 1.07l.97-1.85zM23.64 15.4s-.43.75-.7 1.04c-.27.28-.76.79-1.36 1.04-.6.25-.91.3-1.5.25a3.03 3.03 0 01-1.34-.52 5.08 5.08 0 01-1.67-2.04s.24.75.39 1.07c.09.18.36.74.74 1.23a3.5 3.5 0 002.1 1.42c1.04.18 1.76-.27 1.94-.38a5.32 5.32 0 001.4-1.43c.1-.14.25-.43.25-.43l-.25-1.25z"})})]}),"W3C"),y=(0,h.Z)((0,B.jsxs)("g",{fill:"none",fillRule:"evenodd",children:[(0,B.jsx)("circle",{fill:"#737373",cx:"12",cy:"12",r:"12"}),(0,B.jsx)("path",{fill:"#BDBDBD",d:"M4 4h16v16H4z"}),(0,B.jsx)("path",{fill:"#FFF",d:"M12 20l8-16H4z"})]}),"MaterialDesign"),k=o(114978),C=(0,f.ZP)("ul")({margin:0,padding:0,listStyle:"none",display:"flex",flexWrap:"wrap",gap:8,"& .MuiChip-root":{height:26,padding:"0 8px",gap:6,"& .MuiChip-label":{padding:0},"& .MuiChip-iconSmall":{margin:0,fontSize:14}}}),G={"material-ui":"@mui/material","joy-ui":"@mui/joy","base-ui":"@mui/base",system:"@mui/system"};function Z(t){var n,o,f=t.markdown.headers,h=t.design,Z=(0,k.qM)(),S=null!==(n=null!==(o=f.packageName)&&void 0!==o?o:G[f.productId])&&void 0!==n?n:"@mui/material";return(0,B.jsxs)(C,{children:[f.githubLabel?(0,B.jsx)("li",{children:(0,B.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:"".concat("https://github.com/mui/material-ui","/labels/").concat(encodeURIComponent(f.githubLabel)),icon:e||(e=(0,B.jsx)(m.default,{color:"primary"})),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":Z("githubLabel"),"data-ga-event-split":"0.1",label:Z("githubLabel")})}):null,(0,B.jsx)("li",{children:(0,B.jsx)(d.Z,{title:Z("bundleSizeTooltip"),describeChild:!0,children:(0,B.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:"https://bundlephobia.com/package/".concat(S,"@latest"),icon:r||(r=(0,B.jsx)(x,{color:"primary"})),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":Z("bundleSize"),"data-ga-event-split":"0.1",label:Z("bundleSize")})})}),f.waiAria?(0,B.jsx)("li",{children:(0,B.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:f.waiAria,icon:a||(a=(0,B.jsx)(j,{color:"primary"})),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":"WAI-ARIA","data-ga-event-split":"0.1",label:"WAI-ARIA"})}):null,f.materialDesign?(0,B.jsx)("li",{children:(0,B.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:f.materialDesign,icon:i||(i=(0,B.jsx)(y,{})),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":"Material Design","data-ga-event-split":"0.1",label:"Material Design"})}):null,!1!==h?(0,B.jsxs)(c.Fragment,{children:[u||(u=(0,B.jsx)("li",{children:(0,B.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:"https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=component-link-header",icon:(0,B.jsx)(g,{}),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":"Figma","data-ga-event-split":"0.1",label:"Figma"})})),"@mui/joy"!==S?l||(l=(0,B.jsx)("li",{children:(0,B.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:"https://mui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=component-link-header",icon:(0,B.jsx)(b,{}),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":"Adobe XD","data-ga-event-split":"0.1",label:"Adobe"})})):null,"@mui/joy"!==S?s||(s=(0,B.jsx)("li",{children:(0,B.jsx)(p.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:"https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=component-link-header",icon:(0,B.jsx)(v,{}),"data-ga-event-category":"ComponentLinkHeader","data-ga-event-action":"click","data-ga-event-label":"Sketch","data-ga-event-split":"0.1",label:"Sketch"})})):null]}):null]})}},614880:function(t,n,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/joy-ui/react-button-group",function(){return o(846939)}])},884835:function(t,n,o){"use strict";var e=o(311596);function r(){}function a(){}a.resetWarningCache=r,t.exports=function(){function t(t,n,o,r,a,i){if(i!==e){var u=Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function n(){return t}t.isRequired=t;var o={array:t,bigint:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:n,element:t,elementType:t,instanceOf:n,node:t,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n,checkPropTypes:a,resetWarningCache:r};return o.PropTypes=o,o}},639519:function(t,n,o){t.exports=o(884835)()},311596:function(t){"use strict";t.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},265437:function(t,n,o){"use strict";var e=o(997761);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=e(o(122268)),a=o(735250);n.default=(0,r.default)((0,a.jsx)("path",{d:"m7 10 5 5 5-5z"}),"ArrowDropDown")},388339:function(t,n,o){"use strict";var e=o(997761);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=e(o(122268)),a=o(735250);n.default=(0,r.default)((0,a.jsx)("path",{d:"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2M7 9h10c.55 0 1 .45 1 1s-.45 1-1 1H7c-.55 0-1-.45-1-1s.45-1 1-1m6 5H7c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1s-.45 1-1 1m4-6H7c-.55 0-1-.45-1-1s.45-1 1-1h10c.55 0 1 .45 1 1s-.45 1-1 1"}),"ChatRounded")},72076:function(t,n,o){"use strict";var e=o(997761);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=e(o(122268)),a=o(735250);n.default=(0,r.default)((0,a.jsx)("path",{d:"M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3m-4.4 15.55-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05"}),"FavoriteBorder")},480611:function(t,n,o){"use strict";var e=o(997761);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=e(o(122268)),a=o(735250);n.default=(0,r.default)((0,a.jsx)("path",{d:"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"}),"Person")},867385:function(t,n,o){"use strict";var e=o(997761);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=e(o(122268)),a=o(735250);n.default=(0,r.default)((0,a.jsx)("path",{d:"M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6"}),"Settings")}},function(t){t.O(0,[49774,59574,73454,97146,26357,85925,17376,8137,15686,41547,55992,47012,77764,78360,63901,79929,35986,94658,18492,24423,29001,17134,90449,91543,46376,55692,56726,44099,30760,61723,54069,78640,74981,88561,43005,43469,92888,40179],function(){return t(t.s=614880)}),_N_E=t.O()}]);