<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[55307,6285],{618002:function(n,e,t){t.d(e,{Z:function(){return Z}});var o,a,i,s,r,l,c,d=t(827378),u=t(893266),p=t(328512),g=t(388339),m=t(433392),f=t(949671),h=t(824246),b=(0,f.Z)((0,h.jsxs)("g",{fillRule:"nonzero",fill:"none",children:[(0,h.jsx)("path",{fill:"#FDB300",d:"M5.24 2.7L12 2l6.76.7L24 9.48 12 23 0 9.49z"}),(0,h.jsx)("path",{fill:"#EA6C00",d:"M4.85 9l7.13 14L0 9zM19.1 9l-7.12 14L23.95 9z"}),(0,h.jsx)("path",{fill:"#FDAD00",d:"M4.85 9H19.1l-7.12 14z"}),(0,h.jsxs)("g",{children:[(0,h.jsx)("path",{fill:"#FDD231",d:"M11.98 2l-6.75.65-.38 6.34zM11.98 2l6.75.65.37 6.34z"}),(0,h.jsx)("path",{fill:"#FDAD00",d:"M23.95 9l-5.22-6.35.37 6.34zM0 9l5.23-6.35-.38 6.34z"}),(0,h.jsx)("path",{fill:"#FEEEB7",d:"M11.98 2L4.85 9H19.1z"})]})]}),"Sketch"),x=(0,f.Z)((0,h.jsxs)("g",{fillRule:"nonzero",fill:"none",children:[(0,h.jsx)("path",{d:"M8 24a4 4 0 004-4v-4H8a4 4 0 000 8z",fill:"#0ACF83"}),(0,h.jsx)("path",{d:"M4 12a4 4 0 014-4h4v8H8a4 4 0 01-4-4z",fill:"#A259FF"}),(0,h.jsx)("path",{d:"M4 4a4 4 0 014-4h4v8H8a4 4 0 01-4-4z",fill:"#F24E1E"}),(0,h.jsx)("path",{d:"M12 0h4a4 4 0 010 8h-4V0z",fill:"#FF7262"}),(0,h.jsx)("path",{d:"M20 12a4 4 0 11-8 0 4 4 0 018 0z",fill:"#1ABCFE"})]}),"Figma"),y=(0,f.Z)((0,h.jsxs)("g",{fillRule:"nonzero",fill:"none",children:[(0,h.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,h.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"),v=(0,f.Z)((0,h.jsxs)("g",{fill:"currentColor",fillRule:"nonzero",children:[(0,h.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,h.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"),k=(0,f.Z)((0,h.jsxs)("g",{fillRule:"nonzero",fill:"none",children:[(0,h.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,h.jsx)("g",{fill:"currentColor",children:(0,h.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"),B=(0,f.Z)((0,h.jsxs)("g",{fill:"none",fillRule:"evenodd",children:[(0,h.jsx)("circle",{fill:"#737373",cx:"12",cy:"12",r:"12"}),(0,h.jsx)("path",{fill:"#BDBDBD",d:"M4 4h16v16H4z"}),(0,h.jsx)("path",{fill:"#FFF",d:"M12 20l8-16H4z"})]}),"MaterialDesign"),C=t(274087),w=(0,m.ZP)("ul")({margin:0,padding:0,listStyle:"none",display:"flex",flexWrap:"wrap",gap:8,"&amp; .MuiChip-root .MuiChip-iconSmall":{marginLeft:4}}),S={"material-ui":"@mui/material","joy-ui":"@mui/joy","base-ui":"@mui/base",system:"@mui/system"};function Z(n){var e,t,m=n.markdown.headers,f=n.design,Z=(0,C.useTranslate)(),D=null!==(e=null!==(t=m.packageName)&amp;&amp;void 0!==t?t:S[m.productId])&amp;&amp;void 0!==e?e:"@mui/material";return(0,h.jsxs)(w,{children:[m.githubLabel?(0,h.jsx)("li",{children:(0,h.jsx)(u.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(m.githubLabel)),icon:o||(o=(0,h.jsx)(g.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,h.jsx)("li",{children:(0,h.jsx)(p.Z,{title:Z("bundleSizeTooltip"),children:(0,h.jsx)(u.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:"https://bundlephobia.com/package/".concat(D,"@latest"),icon:a||(a=(0,h.jsx)(v,{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")})})}),m.waiAria?(0,h.jsx)("li",{children:(0,h.jsx)(u.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:m.waiAria,icon:i||(i=(0,h.jsx)(k,{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,m.materialDesign?(0,h.jsx)("li",{children:(0,h.jsx)(u.Z,{clickable:!0,role:void 0,component:"a",size:"small",variant:"outlined",rel:"nofollow",href:m.materialDesign,icon:s||(s=(0,h.jsx)(B,{})),"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!==f?(0,h.jsxs)(d.Fragment,{children:[r||(r=(0,h.jsx)("li",{children:(0,h.jsx)(u.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&amp;utm_medium=referral&amp;utm_campaign=component-link-header",icon:(0,h.jsx)(x,{}),"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"!==D?l||(l=(0,h.jsx)("li",{children:(0,h.jsx)(u.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&amp;utm_medium=referral&amp;utm_campaign=component-link-header",icon:(0,h.jsx)(y,{}),"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"!==D?c||(c=(0,h.jsx)("li",{children:(0,h.jsx)(u.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&amp;utm_medium=referral&amp;utm_campaign=component-link-header",icon:(0,h.jsx)(b,{}),"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]})}},355307:function(n,e,t){t.r(e),t.d(e,{demoComponents:function(){return nO},demos:function(){return nG},docs:function(){return nL},srcComponents:function(){return nW}});var o,a,i,s,r,l,c,d,u,p,g,m,f,h,b,x,y,v,k,B,C,w,S=t(827378),Z=t.t(S,2),D=t(148802),F=t(496931),P=t(880708),M=t(166138),z=t(394370),j=t(784472),A=t(39437),I=t(382665),E=t(871534),T=t(723615),R=t(40624),N=t(530951),$=t(123184),V=t(757302),H=t(198113),U=t(824246),_={100:"#DAECFF",500:"#007FFF",900:"#003A75"},L={50:"#F3F6F9",100:"#E5EAF2",200:"#DAE2ED",300:"#C7D0DD",400:"#B0B8C4",500:"#9DA8B7",600:"#6B7A90",700:"#434D5B",800:"#303740",900:"#1C2025"};function G(){return(0,U.jsx)(N.Z,{component:"span",sx:{width:40,height:40,borderRadius:"12px",background:function(n){return"dark"===n.palette.mode?L[700]:L[200]},display:"inline-block",verticalAlign:"middle"}})}var O=(0,$.default)(V.C)(function(n){var e=n.theme;return"\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  font-variant: tabular-nums;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n\n  &amp; .".concat(H.Q.badge," {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ").concat(_[500],";\n    box-shadow: 0px 2px 24px ").concat("dark"===e.palette.mode?_[900]:_[100],";\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n  ")});function W(){return(0,U.jsx)(N.Z,{component:"span",sx:{width:40,height:40,borderRadius:"12px",background:function(n){return"dark"===n.palette.mode?K[400]:K[300]},display:"inline-block",verticalAlign:"middle"}})}var q={500:"#007FFF"},K={50:"#F3F6F9",100:"#E5EAF2",200:"#DAE2ED",300:"#C7D0DD",400:"#B0B8C4",500:"#9DA8B7",600:"#6B7A90",700:"#434D5B",800:"#303740",900:"#1C2025"},Q=(0,$.default)(V.C)(function(n){var e=n.theme;return"\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  font-variant: tabular-nums;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n\n  &amp; .".concat(H.Q.badge," {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ").concat(q[500],";\n    box-shadow: 0px 4px 8px ").concat("dark"===e.palette.mode?K[900]:K[300],";\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n  ")}),J=t(25778),X=t(764560),Y=t(959968),nn=t(176835),ne=t(81384),nt=t(168808),no=t(746153),na={200:"#99CCF3",500:"#007FFF"},ni={50:"#F3F6F9",100:"#E5EAF2",200:"#DAE2ED",300:"#C7D0DD",400:"#B0B8C4",500:"#9DA8B7",600:"#6B7A90",700:"#434D5B",800:"#303740",900:"#1C2025"},ns=(0,$.default)(V.C)(function(n){var e=n.theme;return"\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-self: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  font-size: 14px;\n  line-height: 1;\n\n  &amp; .".concat(H.Q.badge," {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ").concat(na[500],";\n    box-shadow: 0px 4px 6x ").concat("dark"===e.palette.mode?ni[900]:ni[300],";\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n\n  &amp; .").concat(H.Q.invisible," {\n    opacity: 0;\n    pointer-events: none;\n  }\n  ")}),nr=(0,$.default)(Y.z)(function(n){var e=n.theme;return"\n  cursor: pointer;\n  padding: 4px 8px;\n  display: flex;\n  align-items: center;\n  border-radius: 8px;\n  transition: all 150ms ease;\n  background-color: transparent;\n  border: 1px solid ".concat("dark"===e.palette.mode?ni[800]:ni[200],";\n\n  &amp;:hover {\n    background: ").concat("dark"===e.palette.mode?ni[800]:ni[50],";\n  }\n\n  &amp;.").concat(nn.J.active," {\n    background: ").concat("dark"===e.palette.mode?ni[900]:ni[100],";\n  }\n\n  &amp;.").concat(nn.J.focusVisible," {\n    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 4px rgba(0, 127, 255, 0.5);\n    outline: none;\n  }\n  ")}),nl=(0,$.default)("span")(function(n){var e=n.theme;return"\n  position: relative;\n  display: inline-block;\n  width: 32px;\n  height: 20px;\n  cursor: pointer;\n\n\n  &amp; .".concat(ne.h.track," {\n    background: ").concat("dark"===e.palette.mode?ni[600]:ni[400],";\n    border-radius: 16px;\n    display: block;\n    height: 100%;\n    width: 100%;\n    position: absolute;\n  }\n\n  &amp; .").concat(ne.h.thumb," {\n    position: relative;\n    display: block;\n    width: 14px;\n    height: 14px;\n    top: 3px;\n    left: 3px;\n    border-radius: 16px;\n    background-color: #fff;\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 120ms;\n  }\n\n  &amp;.").concat(ne.h.focusVisible," .").concat(ne.h.track," {\n    box-shadow: 0 0 0 3px ").concat("dark"===e.palette.mode?ni[700]:na[200],";\n  }\n\n  &amp;.").concat(ne.h.checked," {\n    .").concat(ne.h.thumb," {\n      left: 15px;\n      top: 3px;\n      background-color: #fff;\n    }\n\n    .").concat(ne.h.track," {\n      background: ").concat(na[500],";\n    }\n  }\n\n  &amp; .").concat(ne.h.input," {\n    cursor: inherit;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    z-index: 1;\n    margin: 0;\n  }\n  ")}),nc=(0,$.default)("label")(function(n){var e=n.theme;return"\n  font-family: 'IBM Plex Sans', sans-serif;\n  font-size: 0.875rem;\n  color: ".concat("dark"===e.palette.mode?ni[300]:ni[900],";\n  ")}),nd=t(363555),nu={500:"#007FFF"},np={50:"#F3F6F9",100:"#E5EAF2",200:"#DAE2ED",300:"#C7D0DD",400:"#B0B8C4",500:"#9DA8B7",600:"#6B7A90",700:"#434D5B",800:"#303740",900:"#1C2025"},ng=(0,$.default)(V.C)(function(n){var e=n.theme;return"\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n\n  &amp; .".concat(H.Q.badge," {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ").concat(nu[500],";\n    box-shadow: 0px 4px 6x ").concat("dark"===e.palette.mode?np[900]:np[300],";\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n\n  &amp; .").concat(H.Q.invisible," {\n    display: none;\n  }\n  ")}),nm={500:"#007FFF"},nf={50:"#F3F6F9",100:"#E5EAF2",200:"#DAE2ED",300:"#C7D0DD",400:"#B0B8C4",500:"#9DA8B7",600:"#6B7A90",700:"#434D5B",800:"#303740",900:"#1C2025"},nh=(0,$.default)(V.C)(function(n){var e=n.theme;return"\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n\n  &amp; .".concat(H.Q.badge," {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ").concat(nm[500],";\n    box-shadow: 0px 4px 6x ").concat("dark"===e.palette.mode?nf[900]:nf[300],";\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n  ")}),nb={500:"#007FFF"},nx={50:"#F3F6F9",100:"#E5EAF2",200:"#DAE2ED",300:"#C7D0DD",400:"#B0B8C4",500:"#9DA8B7",600:"#6B7A90",700:"#434D5B",800:"#303740",900:"#1C2025"},ny=(0,$.default)(V.C)(function(n){var e=n.theme;return"\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n\n  &amp; .".concat(H.Q.badge," {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ").concat(nb[500],";\n    box-shadow: 0px 4px 6x ").concat("dark"===e.palette.mode?nx[900]:nx[300],";\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n  ")}),nv=t(295649),nk=t(486925),nB=function(n,e){return"function"==typeof n?n(e):n},nC=S.forwardRef(function(n,e){return(0,U.jsx)(V.C,(0,nv.Z)((0,nv.Z)({ref:e},n),{},{slotProps:(0,nv.Z)((0,nv.Z)({},n.slotProps),{},{root:function(e){var t,o=nB(null===(t=n.slotProps)||void 0===t?void 0:t.root,e);return(0,nv.Z)((0,nv.Z)({},o),{},{className:(0,R.default)("box-border m-0 p-0 text-xs list-none relative inline-block leading-none",null==o?void 0:o.className)})},badge:function(e){var t,o=nB(null===(t=n.slotProps)||void 0===t?void 0:t.badge,e);return(0,nv.Z)((0,nv.Z)({},o),{},{className:(0,R.default)("z-auto absolute top-0 right-0 min-w-badge min-h-badge font-sans p-0 text-white font-semibold font-xs font-sans rounded-xl bg-purple-500 leading-5.5 whitespace-nowrap text-center translate-x-1/2 -translate-y-1/2 drop-shadow-lg origin-right",null==o?void 0:o.className)})}})}))}),nw=function(n,e){return"function"==typeof n?n(e):n},nS=S.forwardRef(function(n,e){return(0,U.jsx)(V.C,(0,nv.Z)((0,nv.Z)({ref:e},n),{},{slotProps:(0,nv.Z)((0,nv.Z)({},n.slotProps),{},{root:function(e){var t,o=nw(null===(t=n.slotProps)||void 0===t?void 0:t.root,e);return(0,nv.Z)((0,nv.Z)({},o),{},{className:(0,R.default)("box-border m-0 p-0 text-xs font-sans list-none relative inline-block leading-none",null==o?void 0:o.className)})},badge:function(e){var t,o=nw(null===(t=n.slotProps)||void 0===t?void 0:t.badge,e);return(0,nv.Z)((0,nv.Z)({},o),{},{className:(0,R.default)("z-auto absolute top-0 right-0 min-w-badge min-h-badge font-sans p-0 text-white font-semibold font-xs rounded-xl bg-purple-500 leading-5.5 whitespace-nowrap text-center translate-x-1/2 -translate-y-1/2 drop-shadow-lg origin-right",null==o?void 0:o.className)})}})}))}),nZ=function(n,e){return"function"==typeof n?n(e):n},nD=S.forwardRef(function(n,e){return(0,U.jsx)(V.C,(0,nv.Z)((0,nv.Z)({ref:e},n),{},{slotProps:(0,nv.Z)((0,nv.Z)({},n.slotProps),{},{root:function(e){var t,o=nZ(null===(t=n.slotProps)||void 0===t?void 0:t.root,e);return(0,nv.Z)((0,nv.Z)({},o),{},{className:(0,R.default)("box-border m-0 p-0 text-xs list-none relative inline-block leading-none",null==o?void 0:o.className)})},badge:function(e){var t,o=nZ(null===(t=n.slotProps)||void 0===t?void 0:t.badge,e);return(0,nv.Z)((0,nv.Z)({},o),{},{className:(0,R.default)("z-auto absolute top-0 right-0 min-w-badge min-h-badge font-sans p-0 text-white font-semibold font-xs font-sans rounded-xl bg-purple-500 leading-5.5 whitespace-nowrap text-center translate-x-1/2 -translate-y-1/2 drop-shadow-lg origin-right",null==o?void 0:o.className)})}})}))}),nF=function(n,e){return"function"==typeof n?n(e):n},nP=S.forwardRef(function(n,e){return(0,U.jsx)(V.C,(0,nv.Z)((0,nv.Z)({ref:e},n),{},{slotProps:(0,nv.Z)((0,nv.Z)({},n.slotProps),{},{root:function(e){var t,o=nF(null===(t=n.slotProps)||void 0===t?void 0:t.root,e);return(0,nv.Z)((0,nv.Z)({},o),{},{className:(0,R.default)("box-border m-0 p-0 text-xs font-sans list-none relative inline-block leading-none",null==o?void 0:o.className)})},badge:function(e){var t,o=nF(null===(t=n.slotProps)||void 0===t?void 0:t.badge,e);return(0,nv.Z)((0,nv.Z)({},o),{},{className:(0,R.default)("z-auto absolute top-0 right-0 min-w-badge min-h-badge font-sans p-0 text-white font-semibold font-xs rounded-xl bg-purple-500 leading-5.5 whitespace-nowrap text-center translate-x-1/2 -translate-y-1/2 drop-shadow-lg origin-right",null==o?void 0:o.className)})}})}))}),nM={50:"#E9F8FC",100:"#BDEBF4",200:"#99D8E5",300:"#66BACC",400:"#1F94AD",500:"#0D5463",600:"#094855",700:"#063C47",800:"#043039",900:"#022127"},nz={50:"#F3F6F9",100:"#E5EAF2",200:"#DAE2ED",300:"#C7D0DD",400:"#B0B8C4",500:"#9DA8B7",600:"#6B7A90",700:"#434D5B",800:"#303740",900:"#1C2025"};function nj(){var n="dark"===(0,nk.Z)().palette.mode;return(0,U.jsx)("style",{children:"\n      .CustomBadgeIntroduction {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n        font-size: 14px;\n        font-variant: tabular-nums;\n        list-style: none;\n        font-family: 'IBM Plex Sans', sans-serif;\n        position: relative;\n        display: inline-block;\n        line-height: 1;\n      }\n\n      .CustomBadgeIntroduction--badge {\n        z-index: auto;\n        position: absolute;\n        top: 0;\n        right: 0;\n        min-width: 22px;\n        height: 22px;\n        padding: 0 6px;\n        color: #fff;\n        font-weight: 600;\n        font-size: 12px;\n        line-height: 22px;\n        white-space: nowrap;\n        text-align: center;\n        border-radius: 12px;\n        background: ".concat(nM[500],";\n        box-shadow: 0px 2px 24px ").concat(n?nz[900]:nz[300],";\n        transform: translate(50%, -50%);\n        transform-origin: 100% 0;\n      }\n\n      .CustomBadgeIntroduction--content {\n        width: 40px;\n        height: 40px;\n        border-radius: 12px;\n        background: ").concat(n?nz[700]:nz[200],";\n        display: inline-block;\n        vertical-align: middle;\n      }\n      ")})}var nA={50:"#E9F8FC",100:"#BDEBF4",200:"#99D8E5",300:"#66BACC",400:"#1F94AD",500:"#0D5463",600:"#094855",700:"#063C47",800:"#043039",900:"#022127"},nI={50:"#F3F6F9",100:"#E5EAF2",200:"#DAE2ED",300:"#C7D0DD",400:"#B0B8C4",500:"#9DA8B7",600:"#6B7A90",700:"#434D5B",800:"#303740",900:"#1C2025"};function nE(){var n="dark"===(0,nk.Z)().palette.mode;return(0,U.jsx)("style",{children:"\n      .CustomBadge {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n        font-size: 14px;\n        font-variant: tabular-nums;\n        list-style: none;\n        font-family: 'IBM Plex Sans', sans-serif;\n        position: relative;\n        display: inline-block;\n        line-height: 1;\n      }\n\n      .CustomBadge--badge {\n        z-index: auto;\n        position: absolute;\n        top: 0;\n        right: 0;\n        min-width: 22px;\n        height: 22px;\n        padding: 0 6px;\n        color: #fff;\n        font-weight: 600;\n        font-size: 12px;\n        line-height: 22px;\n        white-space: nowrap;\n        text-align: center;\n        border-radius: 12px;\n        background: ".concat(nA[500],";\n        box-shadow: 0px 4px 8px ").concat(n?nI[900]:nI[300],";\n        transform: translate(50%, -50%);\n        transform-origin: 100% 0;\n      }\n\n      .CustomBadge--content {\n        width: 40px;\n        height: 40px;\n        border-radius: 12px;\n        background: ").concat(n?nI[400]:nI[300],";\n        display: inline-block;\n        vertical-align: middle;\n      }\n      ")})}var nT={50:"#E9F8FC",100:"#BDEBF4",200:"#99D8E5",300:"#66BACC",400:"#1F94AD",500:"#0D5463",600:"#094855",700:"#063C47",800:"#043039",900:"#022127"},nR={50:"#F3F6F9",100:"#E5EAF2",200:"#DAE2ED",300:"#C7D0DD",400:"#B0B8C4",500:"#9DA8B7",600:"#6B7A90",700:"#434D5B",800:"#303740",900:"#1C2025"};function nN(){var n="dark"===(0,nk.Z)().palette.mode;return(0,U.jsx)("style",{children:"\n      .CustomBadgeIntroduction {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n        font-size: 14px;\n        font-variant: tabular-nums;\n        list-style: none;\n        font-family: 'IBM Plex Sans', sans-serif;\n        position: relative;\n        display: inline-block;\n        line-height: 1;\n      }\n\n      .CustomBadgeIntroduction--badge {\n        z-index: auto;\n        position: absolute;\n        top: 0;\n        right: 0;\n        min-width: 22px;\n        height: 22px;\n        padding: 0 6px;\n        color: #fff;\n        font-weight: 600;\n        font-size: 12px;\n        line-height: 22px;\n        white-space: nowrap;\n        text-align: center;\n        border-radius: 12px;\n        background: ".concat(nT[500],";\n        box-shadow: 0px 2px 24px ").concat(n?nR[900]:nR[300],";\n        transform: translate(50%, -50%);\n        transform-origin: 100% 0;\n      }\n\n      .CustomBadgeIntroduction--content {\n        width: 40px;\n        height: 40px;\n        border-radius: 12px;\n        background: ").concat(n?nR[700]:nR[200],";\n        display: inline-block;\n        vertical-align: middle;\n      }\n      ")})}var n$={50:"#E9F8FC",100:"#BDEBF4",200:"#99D8E5",300:"#66BACC",400:"#1F94AD",500:"#0D5463",600:"#094855",700:"#063C47",800:"#043039",900:"#022127"},nV={50:"#F3F6F9",100:"#E5EAF2",200:"#DAE2ED",300:"#C7D0DD",400:"#B0B8C4",500:"#9DA8B7",600:"#6B7A90",700:"#434D5B",800:"#303740",900:"#1C2025"};function nH(){var n="dark"===(0,nk.Z)().palette.mode;return(0,U.jsx)("style",{children:"\n      .CustomBadge {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n        font-size: 14px;\n        font-variant: tabular-nums;\n        list-style: none;\n        font-family: 'IBM Plex Sans', sans-serif;\n        position: relative;\n        display: inline-block;\n        line-height: 1;\n      }\n\n      .CustomBadge--badge {\n        z-index: auto;\n        position: absolute;\n        top: 0;\n        right: 0;\n        min-width: 22px;\n        height: 22px;\n        padding: 0 6px;\n        color: #fff;\n        font-weight: 600;\n        font-size: 12px;\n        line-height: 22px;\n        white-space: nowrap;\n        text-align: center;\n        border-radius: 12px;\n        background: ".concat(n$[500],";\n        box-shadow: 0px 4px 8px ").concat(n?nV[900]:nV[300],";\n        transform: translate(50%, -50%);\n        transform-origin: 100% 0;\n      }\n\n      .CustomBadge--content {\n        width: 40px;\n        height: 40px;\n        border-radius: 12px;\n        background: ").concat(n?nV[400]:nV[300],";\n        display: inline-block;\n        vertical-align: middle;\n      }\n      ")})}var nU=t(618002),n_=t(80803),nL={en:{description:"The Badge component generates a small label that is attached to its child element.",location:"/docs/data/base/components/badge/badge.md",rendered:['&lt;svg style="display: none;" xmlns="http://www.w3.org/2000/svg"&gt;\n      &lt;symbol id="error-icon" viewBox="0 0 20 20"&gt;\n      &lt;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"/&gt;\n      &lt;/symbol&gt;\n      &lt;/svg&gt;','&lt;svg style="display: none;" xmlns="http://www.w3.org/2000/svg"&gt;\n      &lt;symbol id="warning-icon" viewBox="0 0 20 20"&gt;\n      &lt;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"/&gt;\n      &lt;/symbol&gt;\n      &lt;/svg&gt;','&lt;svg style="display: none;" xmlns="http://www.w3.org/2000/svg"&gt;\n      &lt;symbol id="success-icon" viewBox="0 0 20 20"&gt;\n      &lt;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"/&gt;\n      &lt;/symbol&gt;\n      &lt;/svg&gt;','&lt;svg style="display: none;" xmlns="http://www.w3.org/2000/svg"&gt;\n      &lt;symbol id="info-icon" viewBox="0 0 20 20"&gt;\n      &lt;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"/&gt;\n      &lt;/symbol&gt;\n      &lt;/svg&gt;','\n      &lt;svg style="display: none;" xmlns="http://www.w3.org/2000/svg"&gt;\n      &lt;symbol id="copied-icon" viewBox="0 0 24 24"&gt;\n        &lt;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" /&gt;\n      &lt;/symbol&gt;\n      &lt;/svg&gt;','&lt;svg style="display: none;" xmlns="http://www.w3.org/2000/svg"&gt;\n      &lt;symbol id="copy-icon" viewBox="0 0 24 24"&gt;\n      &lt;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" /&gt;\n      +&lt;/symbol&gt;\n      &lt;/svg&gt;','&lt;svg style="display: none;" xmlns="http://www.w3.org/2000/svg"&gt;\n        &lt;symbol id="anchor-link-icon" viewBox="0 0 12 6"&gt;\n          &lt;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" /&gt;\n        &lt;/symbol&gt;\n    &lt;/svg&gt;','&lt;svg style="display: none;" xmlns="http://www.w3.org/2000/svg"&gt;\n      &lt;symbol id="comment-link-icon" viewBox="0 0 24 24"&gt;\n      &lt;path d="M5.025 14H6.95c.183 0 .35-.029.5-.087a1.24 1.24 0 0 0 .425-.288L13.65 7.9a.622.622 0 0 0 .2-.45.622.622 0 0 0-.2-.45l-2.3-2.3a.622.622 0 0 0-.45-.2.622.622 0 0 0-.45.2l-5.725 5.775a1.24 1.24 0 0 0-.287.425 1.37 1.37 0 0 0-.088.5v1.925c0 .184.067.342.2.475a.65.65 0 0 0 .475.2Zm5.325 0h5.725c.367 0 .68-.129.938-.387.258-.258.387-.57.387-.938 0-.366-.13-.679-.387-.937a1.277 1.277 0 0 0-.938-.388H13L10.35 14Zm-5.5 4.4-2.4 2.4c-.417.417-.896.509-1.437.275C.47 20.842.2 20.434.2 19.85V3.55c0-.733.258-1.358.775-1.875A2.554 2.554 0 0 1 2.85.9h16.3c.733 0 1.358.259 1.875.775.517.517.775 1.142.775 1.875v12.2c0 .734-.258 1.359-.775 1.875a2.554 2.554 0 0 1-1.875.775H4.85Z"/&gt;\n      &lt;/symbol&gt;\n      &lt;/svg&gt;','&lt;h1&gt;Badge&lt;/h1&gt;&lt;p class="description"&gt;The Badge component generates a small label that is attached to its child element.&lt;/p&gt;\n\n',{component:"modules/components/ComponentLinkHeader.js",design:!1},{component:"modules/components/ComponentPageTabs.js"},'&lt;h2 id="introduction"&gt;Introduction&lt;a aria-labelledby="introduction" class="anchor-link" href="#introduction" tabindex="-1"&gt;&lt;svg&gt;&lt;use xlink:href="#anchor-link-icon" /&gt;&lt;/svg&gt;&lt;/a&gt;&lt;button title="Post a comment" class="comment-link" data-feedback-hash="introduction"&gt;&lt;svg&gt;&lt;use xlink:href="#comment-link-icon" /&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/h2&gt;&lt;p&gt;A badge is a small descriptor for UI elements.\nIt typically sits on or near an element and indicates the status of that element by displaying a number, icon, or other short set of characters.&lt;/p&gt;\n&lt;p&gt;The Badge component creates a badge that is applied to its child element.&lt;/p&gt;\n',{demo:"UnstyledBadgeIntroduction",defaultCodeOpen:!1,bg:"gradient"},'&lt;h2 id="component"&gt;Component&lt;a aria-labelledby="component" class="anchor-link" href="#component" tabindex="-1"&gt;&lt;svg&gt;&lt;use xlink:href="#anchor-link-icon" /&gt;&lt;/svg&gt;&lt;/a&gt;&lt;button title="Post a comment" class="comment-link" data-feedback-hash="component"&gt;&lt;svg&gt;&lt;use xlink:href="#comment-link-icon" /&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/h2&gt;&lt;div class="MuiCode-root"&gt;&lt;pre&gt;&lt;code class="language-jsx"&gt;&lt;span class="token keyword"&gt;import&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt; Badge &lt;span class="token punctuation"&gt;}&lt;/span&gt; &lt;span class="token keyword"&gt;from&lt;/span&gt; &lt;span class="token string"&gt;\'@mui/base/Badge\'&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;\n&lt;/code&gt;&lt;/pre&gt;&lt;button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"&gt;&lt;svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon"&gt;&lt;use class="MuiCode-copy-icon" xlink:href="#copy-icon" /&gt;&lt;use class="MuiCode-copied-icon" xlink:href="#copied-icon" /&gt;&lt;/svg&gt;&lt;span class="MuiCode-copyKeypress"&gt;&lt;span&gt;(or&lt;/span&gt; $keyC&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;\n&lt;p&gt;The Badge wraps around the UI element that it&amp;#39;s attached to.&lt;/p&gt;\n&lt;h3 id="anatomy"&gt;Anatomy&lt;a aria-labelledby="anatomy" class="anchor-link" href="#anatomy" tabindex="-1"&gt;&lt;svg&gt;&lt;use xlink:href="#anchor-link-icon" /&gt;&lt;/svg&gt;&lt;/a&gt;&lt;button title="Post a comment" class="comment-link" data-feedback-hash="anatomy"&gt;&lt;svg&gt;&lt;use xlink:href="#comment-link-icon" /&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/h3&gt;&lt;p&gt;The Badge component is composed of a root &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt; that houses the element that the Badge is attached to, followed by a &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt; slot to represent the Badge itself:&lt;/p&gt;\n&lt;div class="MuiCode-root"&gt;&lt;pre&gt;&lt;code class="language-html"&gt;&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class="token attr-name"&gt;class&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;BaseBadge-root&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation"&gt;&gt;&lt;/span&gt;&lt;/span&gt;\n  &lt;span class="token comment"&gt;&amp;lt;!-- the element the badge is attached to is nested here --&gt;&lt;/span&gt;\n  &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class="token attr-name"&gt;class&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;BaseBadge-badge&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation"&gt;&gt;&lt;/span&gt;&lt;/span&gt;badge content&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class="token punctuation"&gt;&gt;&lt;/span&gt;&lt;/span&gt;\n&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class="token punctuation"&gt;&gt;&lt;/span&gt;&lt;/span&gt;\n&lt;/code&gt;&lt;/pre&gt;&lt;button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"&gt;&lt;svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon"&gt;&lt;use class="MuiCode-copy-icon" xlink:href="#copy-icon" /&gt;&lt;use class="MuiCode-copied-icon" xlink:href="#copied-icon" /&gt;&lt;/svg&gt;&lt;span class="MuiCode-copyKeypress"&gt;&lt;span&gt;(or&lt;/span&gt; $keyC&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;\n&lt;h3 id="custom-structure"&gt;Custom structure&lt;a aria-labelledby="custom-structure" class="anchor-link" href="#custom-structure" tabindex="-1"&gt;&lt;svg&gt;&lt;use xlink:href="#anchor-link-icon" /&gt;&lt;/svg&gt;&lt;/a&gt;&lt;button title="Post a comment" class="comment-link" data-feedback-hash="custom-structure"&gt;&lt;svg&gt;&lt;use xlink:href="#comment-link-icon" /&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/h3&gt;&lt;p&gt;Use the &lt;code&gt;slots&lt;/code&gt; prop to override the root or any other interior slot:&lt;/p&gt;\n&lt;div class="MuiCode-root"&gt;&lt;pre&gt;&lt;code class="language-jsx"&gt;&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;&lt;span class="token class-name"&gt;Badge&lt;/span&gt;&lt;/span&gt; &lt;span class="token attr-name"&gt;slots&lt;/span&gt;&lt;span class="token script language-javascript"&gt;&lt;span class="token script-punctuation punctuation"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt; &lt;span class="token literal-property property"&gt;root&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token string"&gt;\'div\'&lt;/span&gt;&lt;span class="token punctuation"&gt;,&lt;/span&gt; &lt;span class="token literal-property property"&gt;badge&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token string"&gt;\'div\'&lt;/span&gt; &lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;/span&gt; &lt;span class="token punctuation"&gt;/&gt;&lt;/span&gt;&lt;/span&gt;\n&lt;/code&gt;&lt;/pre&gt;&lt;button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"&gt;&lt;svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon"&gt;&lt;use class="MuiCode-copy-icon" xlink:href="#copy-icon" /&gt;&lt;use class="MuiCode-copied-icon" xlink:href="#copied-icon" /&gt;&lt;/svg&gt;&lt;span class="MuiCode-copyKeypress"&gt;&lt;span&gt;(or&lt;/span&gt; $keyC&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;\n&lt;aside class="MuiCallout-root MuiCallout-info"&gt;\n            &lt;svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon"&gt;\n&lt;use class="MuiCode-copied-icon" xlink:href="#info-icon" /&gt;\n&lt;/svg&gt;\n            &lt;div class="MuiCallout-content"&gt;\n            &lt;p&gt;The &lt;code&gt;slots&lt;/code&gt; prop is available on all non-utility Base components.\nSee &lt;a href="/base-ui/guides/overriding-component-structure/"&gt;Overriding component structure&lt;/a&gt; for full details.&lt;/p&gt;\n\n&lt;/div&gt;&lt;/aside&gt;&lt;p&gt;Use the &lt;code&gt;slotProps&lt;/code&gt; prop to pass custom props to internal slots.\nThe following code snippet applies a CSS class called &lt;code&gt;my-badge&lt;/code&gt; to the badge slot:&lt;/p&gt;\n&lt;div class="MuiCode-root"&gt;&lt;pre&gt;&lt;code class="language-jsx"&gt;&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;&lt;span class="token class-name"&gt;Badge&lt;/span&gt;&lt;/span&gt; &lt;span class="token attr-name"&gt;slotProps&lt;/span&gt;&lt;span class="token script language-javascript"&gt;&lt;span class="token script-punctuation punctuation"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt; &lt;span class="token literal-property property"&gt;badge&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt; &lt;span class="token literal-property property"&gt;className&lt;/span&gt;&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token string"&gt;\'my-badge\'&lt;/span&gt; &lt;span class="token punctuation"&gt;}&lt;/span&gt; &lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;/span&gt; &lt;span class="token punctuation"&gt;/&gt;&lt;/span&gt;&lt;/span&gt;\n&lt;/code&gt;&lt;/pre&gt;&lt;button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"&gt;&lt;svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon"&gt;&lt;use class="MuiCode-copy-icon" xlink:href="#copy-icon" /&gt;&lt;use class="MuiCode-copied-icon" xlink:href="#copied-icon" /&gt;&lt;/svg&gt;&lt;span class="MuiCode-copyKeypress"&gt;&lt;span&gt;(or&lt;/span&gt; $keyC&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;\n&lt;h3 id="usage-with-typescript"&gt;Usage with TypeScript&lt;a aria-labelledby="usage-with-typescript" class="anchor-link" href="#usage-with-typescript" tabindex="-1"&gt;&lt;svg&gt;&lt;use xlink:href="#anchor-link-icon" /&gt;&lt;/svg&gt;&lt;/a&gt;&lt;button title="Post a comment" class="comment-link" data-feedback-hash="usage-with-typescript"&gt;&lt;svg&gt;&lt;use xlink:href="#comment-link-icon" /&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/h3&gt;&lt;p&gt;In TypeScript, you can specify the custom component type used in the &lt;code&gt;slots.root&lt;/code&gt; as a generic parameter of the unstyled component.\nThis way, you can safely provide the custom root&amp;#39;s props directly on the component:&lt;/p&gt;\n&lt;div class="MuiCode-root"&gt;&lt;pre&gt;&lt;code class="language-tsx"&gt;&lt;span class="token operator"&gt;&amp;lt;&lt;/span&gt;Badge&lt;span class="token operator"&gt;&amp;lt;&lt;/span&gt;&lt;span class="token keyword"&gt;typeof&lt;/span&gt; CustomComponent&lt;span class="token operator"&gt;&gt;&lt;/span&gt; slots&lt;span class="token operator"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt; root&lt;span class="token operator"&gt;:&lt;/span&gt; CustomComponent &lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt; customProp &lt;span class="token operator"&gt;/&lt;/span&gt;&lt;span class="token operator"&gt;&gt;&lt;/span&gt;\n&lt;/code&gt;&lt;/pre&gt;&lt;button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"&gt;&lt;svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon"&gt;&lt;use class="MuiCode-copy-icon" xlink:href="#copy-icon" /&gt;&lt;use class="MuiCode-copied-icon" xlink:href="#copied-icon" /&gt;&lt;/svg&gt;&lt;span class="MuiCode-copyKeypress"&gt;&lt;span&gt;(or&lt;/span&gt; $keyC&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;\n&lt;p&gt;The same applies for props specific to custom primitive elements:&lt;/p&gt;\n&lt;div class="MuiCode-root"&gt;&lt;pre&gt;&lt;code class="language-tsx"&gt;&lt;span class="token operator"&gt;&amp;lt;&lt;/span&gt;Badge&lt;span class="token operator"&gt;&amp;lt;&lt;/span&gt;&lt;span class="token string"&gt;\'img\'&lt;/span&gt;&lt;span class="token operator"&gt;&gt;&lt;/span&gt; slots&lt;span class="token operator"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt;&lt;span class="token punctuation"&gt;{&lt;/span&gt; root&lt;span class="token operator"&gt;:&lt;/span&gt; &lt;span class="token string"&gt;\'img\'&lt;/span&gt; &lt;span class="token punctuation"&gt;}&lt;/span&gt;&lt;span class="token punctuation"&gt;}&lt;/span&gt; src&lt;span class="token operator"&gt;=&lt;/span&gt;&lt;span class="token string"&gt;"badge.png"&lt;/span&gt; &lt;span class="token operator"&gt;/&lt;/span&gt;&lt;span class="token operator"&gt;&gt;&lt;/span&gt;\n&lt;/code&gt;&lt;/pre&gt;&lt;button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"&gt;&lt;svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon"&gt;&lt;use class="MuiCode-copy-icon" xlink:href="#copy-icon" /&gt;&lt;use class="MuiCode-copied-icon" xlink:href="#copied-icon" /&gt;&lt;/svg&gt;&lt;span class="MuiCode-copyKeypress"&gt;&lt;span&gt;(or&lt;/span&gt; $keyC&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;\n&lt;h2 id="hook"&gt;Hook&lt;a aria-labelledby="hook" class="anchor-link" href="#hook" tabindex="-1"&gt;&lt;svg&gt;&lt;use xlink:href="#anchor-link-icon" /&gt;&lt;/svg&gt;&lt;/a&gt;&lt;button title="Post a comment" class="comment-link" data-feedback-hash="hook"&gt;&lt;svg&gt;&lt;use xlink:href="#comment-link-icon" /&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/h2&gt;&lt;div class="MuiCode-root"&gt;&lt;pre&gt;&lt;code class="language-jsx"&gt;&lt;span class="token keyword"&gt;import&lt;/span&gt; &lt;span class="token punctuation"&gt;{&lt;/span&gt; useBadge &lt;span class="token punctuation"&gt;}&lt;/span&gt; &lt;span class="token keyword"&gt;from&lt;/span&gt; &lt;span class="token string"&gt;\'@mui/base/useBadge\'&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;\n&lt;/code&gt;&lt;/pre&gt;&lt;button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"&gt;&lt;svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon"&gt;&lt;use class="MuiCode-copy-icon" xlink:href="#copy-icon" /&gt;&lt;use class="MuiCode-copied-icon" xlink:href="#copied-icon" /&gt;&lt;/svg&gt;&lt;span class="MuiCode-copyKeypress"&gt;&lt;span&gt;(or&lt;/span&gt; $keyC&lt;span&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;\n&lt;p&gt;The &lt;code&gt;useBadge&lt;/code&gt; hook lets you apply the functionality of a Badge to a fully custom component.\nIt returns props to be placed on the custom component, along with fields representing the component&amp;#39;s internal state.&lt;/p&gt;\n&lt;p&gt;Hooks &lt;em&gt;do not&lt;/em&gt; support &lt;a href="#custom-structure"&gt;slot props&lt;/a&gt;, but they do support &lt;a href="#customization"&gt;customization props&lt;/a&gt;.&lt;/p&gt;\n&lt;aside class="MuiCallout-root MuiCallout-info"&gt;\n            &lt;svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon"&gt;\n&lt;use class="MuiCode-copied-icon" xlink:href="#info-icon" /&gt;\n&lt;/svg&gt;\n            &lt;div class="MuiCallout-content"&gt;\n            &lt;p&gt;Hooks give you the most room for customization, but require more work to implement.\nWith hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.&lt;/p&gt;\n&lt;p&gt;You may not need to use hooks unless you find that you&amp;#39;re limited by the customization options of their component counterparts—for instance, if your component requires significantly different &lt;a href="#anatomy"&gt;structure&lt;/a&gt;.&lt;/p&gt;\n\n&lt;/div&gt;&lt;/aside&gt;&lt;h2 id="customization"&gt;Customization&lt;a aria-labelledby="customization" class="anchor-link" href="#customization" tabindex="-1"&gt;&lt;svg&gt;&lt;use xlink:href="#anchor-link-icon" /&gt;&lt;/svg&gt;&lt;/a&gt;&lt;button title="Post a comment" class="comment-link" data-feedback-hash="customization"&gt;&lt;svg&gt;&lt;use xlink:href="#comment-link-icon" /&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/h2&gt;&lt;aside class="MuiCallout-root MuiCallout-info"&gt;\n            &lt;svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon"&gt;\n&lt;use class="MuiCode-copied-icon" xlink:href="#info-icon" /&gt;\n&lt;/svg&gt;\n            &lt;div class="MuiCallout-content"&gt;\n            &lt;p&gt;The following features can be used with both components and hooks.\nFor the sake of simplicity, demos and code snippets primarily feature components.&lt;/p&gt;\n\n&lt;/div&gt;&lt;/aside&gt;&lt;h3 id="badge-content"&gt;Badge content&lt;a aria-labelledby="badge-content" class="anchor-link" href="#badge-content" tabindex="-1"&gt;&lt;svg&gt;&lt;use xlink:href="#anchor-link-icon" /&gt;&lt;/svg&gt;&lt;/a&gt;&lt;button title="Post a comment" class="comment-link" data-feedback-hash="badge-content"&gt;&lt;svg&gt;&lt;use xlink:href="#comment-link-icon" /&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/h3&gt;&lt;p&gt;The &lt;code&gt;badgeContent&lt;/code&gt; prop defines the content that&amp;#39;s displayed inside the Badge.\nWhen this content is a number, there are additional props you can use for further customization—see the &lt;a href="#numerical-badges"&gt;Numerical Badges section&lt;/a&gt; below.&lt;/p&gt;\n&lt;p&gt;The following demo shows how to create and style a typical numerical Badge that&amp;#39;s attached to a generic box element:&lt;/p&gt;\n',{demo:"UnstyledBadge",defaultCodeOpen:!1},'&lt;h3 id="badge-visibility"&gt;Badge visibility&lt;a aria-labelledby="badge-visibility" class="anchor-link" href="#badge-visibility" tabindex="-1"&gt;&lt;svg&gt;&lt;use xlink:href="#anchor-link-icon" /&gt;&lt;/svg&gt;&lt;/a&gt;&lt;button title="Post a comment" class="comment-link" data-feedback-hash="badge-visibility"&gt;&lt;svg&gt;&lt;use xlink:href="#comment-link-icon" /&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/h3&gt;&lt;p&gt;You can control the visibility of a Badge by using the &lt;code&gt;invisible&lt;/code&gt; prop.\nSetting a Badge to &lt;code&gt;invisible&lt;/code&gt; does not actually hide it—instead, this prop adds the &lt;code&gt;BaseBadge-invisible&lt;/code&gt; class to the Badge, which you can target with styles to hide however you prefer:&lt;/p&gt;\n',{demo:"BadgeVisibility.js"},'&lt;h3 id="numerical-badges"&gt;Numerical Badges&lt;a aria-labelledby="numerical-badges" class="anchor-link" href="#numerical-badges" tabindex="-1"&gt;&lt;svg&gt;&lt;use xlink:href="#anchor-link-icon" /&gt;&lt;/svg&gt;&lt;/a&gt;&lt;button title="Post a comment" class="comment-link" data-feedback-hash="numerical-badges"&gt;&lt;svg&gt;&lt;use xlink:href="#comment-link-icon" /&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/h3&gt;&lt;p&gt;The following props are useful when &lt;code&gt;badgeContent&lt;/code&gt; is a number.&lt;/p&gt;\n&lt;h4&gt;The showZero prop&lt;/h4&gt;&lt;p&gt;By default, Badges automatically hide when &lt;code&gt;badgeContent={0}&lt;/code&gt;.\nYou can override this behavior with the &lt;code&gt;showZero&lt;/code&gt; prop:&lt;/p&gt;\n',{demo:"ShowZeroBadge.js"},"&lt;h4&gt;The max prop&lt;/h4&gt;&lt;p&gt;You can use the &lt;code&gt;max&lt;/code&gt; prop to set a maximum value for &lt;code&gt;badgeContent&lt;/code&gt;.\nThe default is 99.&lt;/p&gt;\n",{demo:"BadgeMax.js"},'&lt;h2 id="accessibility"&gt;Accessibility&lt;a aria-labelledby="accessibility" class="anchor-link" href="#accessibility" tabindex="-1"&gt;&lt;svg&gt;&lt;use xlink:href="#anchor-link-icon" /&gt;&lt;/svg&gt;&lt;/a&gt;&lt;button title="Post a comment" class="comment-link" data-feedback-hash="accessibility"&gt;&lt;svg&gt;&lt;use xlink:href="#comment-link-icon" /&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/h2&gt;&lt;p&gt;Screen readers may not provide users with enough information about a Badge&amp;#39;s contents.\nTo make your badge accessible, you must provide a full description with &lt;code&gt;aria-label&lt;/code&gt;, as shown in the demo below:&lt;/p&gt;\n',{demo:"AccessibleBadges.js"},'&lt;h2 id="api"&gt;API&lt;a aria-labelledby="api" class="anchor-link" href="#api" tabindex="-1"&gt;&lt;svg&gt;&lt;use xlink:href="#anchor-link-icon" /&gt;&lt;/svg&gt;&lt;/a&gt;&lt;button title="Post a comment" class="comment-link" data-feedback-hash="api"&gt;&lt;svg&gt;&lt;use xlink:href="#comment-link-icon" /&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/h2&gt;&lt;p&gt;See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.&lt;/p&gt;\n&lt;ul&gt;\n&lt;li&gt;&lt;a href="/base-ui/react-badge/components-api/#badge"&gt;&lt;code&gt;&amp;lt;Badge /&amp;gt;&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href="/base-ui/api/use-badge/"&gt;&lt;code&gt;useBadge&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;\n&lt;/ul&gt;\n'],toc:[{text:"Introduction",level:2,hash:"introduction",children:[]},{text:"Component",level:2,hash:"component",children:[{text:"Anatomy",level:3,hash:"anatomy"},{text:"Custom structure",level:3,hash:"custom-structure"},{text:"Usage with TypeScript",level:3,hash:"usage-with-typescript"}]},{text:"Hook",level:2,hash:"hook",children:[]},{text:"Customization",level:2,hash:"customization",children:[{text:"Badge content",level:3,hash:"badge-content"},{text:"Badge visibility",level:3,hash:"badge-visibility"},{text:"Numerical Badges",level:3,hash:"numerical-badges"}]},{text:"Accessibility",level:2,hash:"accessibility",children:[]},{text:"API",level:2,hash:"api",children:[]}],title:"React Badge component and hook",headers:{productId:"base-ui",title:"React Badge component and hook",components:["Badge"],hooks:["useBadge"],githubLabel:"component: badge"}}},nG={UnstyledBadgeIntroduction:{module:"./UnstyledBadgeIntroduction/system/index.js",raw:"import * as React from 'react';\nimport { styled, Box } from '@mui/system';\nimport { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';\n\nconst blue = {\n  100: '#DAECFF',\n  500: '#007FFF',\n  900: '#003A75',\n};\n\nconst grey = {\n  50: '#F3F6F9',\n  100: '#E5EAF2',\n  200: '#DAE2ED',\n  300: '#C7D0DD',\n  400: '#B0B8C4',\n  500: '#9DA8B7',\n  600: '#6B7A90',\n  700: '#434D5B',\n  800: '#303740',\n  900: '#1C2025',\n};\n\nfunction BadgeContent() {\n  return (\n    &lt;Box\n      component=\"span\"\n      sx={{\n        width: 40,\n        height: 40,\n        borderRadius: '12px',\n        background: (theme) =&gt;\n          theme.palette.mode === 'dark' ? grey[700] : grey[200],\n        display: 'inline-block',\n        verticalAlign: 'middle',\n      }}\n    /&gt;\n  );\n}\n\nexport default function UnstyledBadgeIntroduction() {\n  return (\n    &lt;Badge badgeContent={5}&gt;\n      &lt;BadgeContent /&gt;\n    &lt;/Badge&gt;\n  );\n}\n\nconst Badge = styled(BaseBadge)(\n  ({ theme }) =&gt; `\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  font-variant: tabular-nums;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n\n  &amp; .${badgeClasses.badge} {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ${blue[500]};\n    box-shadow: 0px 2px 24px ${\n      theme.palette.mode === 'dark' ? blue[900] : blue[100]\n    };\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n  `,\n);\n",moduleTailwind:"./UnstyledBadgeIntroduction/tailwind/index.js",rawTailwind:"import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { Badge as BaseBadge } from '@mui/base/Badge';\nimport { useTheme } from '@mui/system';\n\nfunction useIsDarkMode() {\n  const theme = useTheme();\n  return theme.palette.mode === 'dark';\n}\n\nexport default function UnstyledBadgeIntroduction() {\n  // Replace this with your app logic for determining dark mode\n  const isDarkMode = useIsDarkMode();\n\n  return (\n    &lt;div className={isDarkMode ? 'dark' : ''}&gt;\n      &lt;Badge badgeContent={5}&gt;\n        &lt;span className=\"w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle\" /&gt;\n      &lt;/Badge&gt;\n    &lt;/div&gt;\n  );\n}\n\nconst resolveSlotProps = (fn, args) =&gt; (typeof fn === 'function' ? fn(args) : fn);\n\nconst Badge = React.forwardRef((props, ref) =&gt; {\n  return (\n    &lt;BaseBadge\n      ref={ref}\n      {...props}\n      slotProps={{\n        ...props.slotProps,\n        root: (ownerState) =&gt; {\n          const resolvedSlotProps = resolveSlotProps(\n            props.slotProps?.root,\n            ownerState,\n          );\n          return {\n            ...resolvedSlotProps,\n            className: clsx(\n              'box-border m-0 p-0 text-xs list-none relative inline-block leading-none',\n              resolvedSlotProps?.className,\n            ),\n          };\n        },\n        badge: (ownerState) =&gt; {\n          const resolvedSlotProps = resolveSlotProps(\n            props.slotProps?.badge,\n            ownerState,\n          );\n          return {\n            ...resolvedSlotProps,\n            className: clsx(\n              'z-auto absolute top-0 right-0 min-w-badge min-h-badge font-sans p-0 text-white font-semibold font-xs font-sans rounded-xl bg-purple-500 leading-5.5 whitespace-nowrap text-center translate-x-1/2 -translate-y-1/2 drop-shadow-lg origin-right',\n              resolvedSlotProps?.className,\n            ),\n          };\n        },\n      }}\n    /&gt;\n  );\n});\n\nBadge.propTypes = {\n  /**\n   * The props used for each slot inside the Badge.\n   * @default {}\n   */\n  slotProps: PropTypes.shape({\n    badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n  }),\n};\n",moduleTSTailwind:"./UnstyledBadgeIntroduction/tailwind/index.tsx",rawTailwindTS:"import * as React from 'react';\nimport clsx from 'clsx';\nimport { Badge as BaseBadge, BadgeProps } from '@mui/base/Badge';\nimport { useTheme } from '@mui/system';\n\nfunction useIsDarkMode() {\n  const theme = useTheme();\n  return theme.palette.mode === 'dark';\n}\n\nexport default function UnstyledBadgeIntroduction() {\n  // Replace this with your app logic for determining dark mode\n  const isDarkMode = useIsDarkMode();\n\n  return (\n    &lt;div className={isDarkMode ? 'dark' : ''}&gt;\n      &lt;Badge badgeContent={5}&gt;\n        &lt;span className=\"w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle\" /&gt;\n      &lt;/Badge&gt;\n    &lt;/div&gt;\n  );\n}\n\nconst resolveSlotProps = (fn: any, args: any) =&gt;\n  typeof fn === 'function' ? fn(args) : fn;\n\nconst Badge = React.forwardRef&lt;HTMLSpanElement, BadgeProps&gt;((props, ref) =&gt; {\n  return (\n    &lt;BaseBadge\n      ref={ref}\n      {...props}\n      slotProps={{\n        ...props.slotProps,\n        root: (ownerState) =&gt; {\n          const resolvedSlotProps = resolveSlotProps(\n            props.slotProps?.root,\n            ownerState,\n          );\n          return {\n            ...resolvedSlotProps,\n            className: clsx(\n              'box-border m-0 p-0 text-xs list-none relative inline-block leading-none',\n              resolvedSlotProps?.className,\n            ),\n          };\n        },\n        badge: (ownerState) =&gt; {\n          const resolvedSlotProps = resolveSlotProps(\n            props.slotProps?.badge,\n            ownerState,\n          );\n          return {\n            ...resolvedSlotProps,\n            className: clsx(\n              'z-auto absolute top-0 right-0 min-w-badge min-h-badge font-sans p-0 text-white font-semibold font-xs font-sans rounded-xl bg-purple-500 leading-5.5 whitespace-nowrap text-center translate-x-1/2 -translate-y-1/2 drop-shadow-lg origin-right',\n              resolvedSlotProps?.className,\n            ),\n          };\n        },\n      }}\n    /&gt;\n  );\n});\n",moduleCSS:"./UnstyledBadgeIntroduction/css/index.js",rawCSS:"import * as React from 'react';\nimport { Badge } from '@mui/base/Badge';\nimport { useTheme } from '@mui/system';\n\nexport default function UnstyledBadgeIntroduction() {\n  return (\n    &lt;React.Fragment&gt;\n      &lt;Badge\n        slotProps={{\n          root: { className: 'CustomBadgeIntroduction' },\n          badge: { className: 'CustomBadgeIntroduction--badge' },\n        }}\n        badgeContent={5}\n      &gt;\n        &lt;span className=\"CustomBadgeIntroduction--content\" /&gt;\n      &lt;/Badge&gt;\n      &lt;Styles /&gt;\n    &lt;/React.Fragment&gt;\n  );\n}\n\nconst cyan = {\n  50: '#E9F8FC',\n  100: '#BDEBF4',\n  200: '#99D8E5',\n  300: '#66BACC',\n  400: '#1F94AD',\n  500: '#0D5463',\n  600: '#094855',\n  700: '#063C47',\n  800: '#043039',\n  900: '#022127',\n};\n\nconst grey = {\n  50: '#F3F6F9',\n  100: '#E5EAF2',\n  200: '#DAE2ED',\n  300: '#C7D0DD',\n  400: '#B0B8C4',\n  500: '#9DA8B7',\n  600: '#6B7A90',\n  700: '#434D5B',\n  800: '#303740',\n  900: '#1C2025',\n};\n\nfunction useIsDarkMode() {\n  const theme = useTheme();\n  return theme.palette.mode === 'dark';\n}\n\nfunction Styles() {\n  // Replace this with your app logic for determining dark mode\n  const isDarkMode = useIsDarkMode();\n  return (\n    &lt;style&gt;\n      {`\n      .CustomBadgeIntroduction {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n        font-size: 14px;\n        font-variant: tabular-nums;\n        list-style: none;\n        font-family: 'IBM Plex Sans', sans-serif;\n        position: relative;\n        display: inline-block;\n        line-height: 1;\n      }\n\n      .CustomBadgeIntroduction--badge {\n        z-index: auto;\n        position: absolute;\n        top: 0;\n        right: 0;\n        min-width: 22px;\n        height: 22px;\n        padding: 0 6px;\n        color: #fff;\n        font-weight: 600;\n        font-size: 12px;\n        line-height: 22px;\n        white-space: nowrap;\n        text-align: center;\n        border-radius: 12px;\n        background: ${cyan[500]};\n        box-shadow: 0px 2px 24px ${isDarkMode ? grey[900] : grey[300]};\n        transform: translate(50%, -50%);\n        transform-origin: 100% 0;\n      }\n\n      .CustomBadgeIntroduction--content {\n        width: 40px;\n        height: 40px;\n        border-radius: 12px;\n        background: ${isDarkMode ? grey[700] : grey[200]};\n        display: inline-block;\n        vertical-align: middle;\n      }\n      `}\n    &lt;/style&gt;\n  );\n}\n",moduleTSCSS:"./UnstyledBadgeIntroduction/css/index.tsx",rawCSSTS:"import * as React from 'react';\nimport { Badge } from '@mui/base/Badge';\nimport { useTheme } from '@mui/system';\n\nexport default function UnstyledBadgeIntroduction() {\n  return (\n    &lt;React.Fragment&gt;\n      &lt;Badge\n        slotProps={{\n          root: { className: 'CustomBadgeIntroduction' },\n          badge: { className: 'CustomBadgeIntroduction--badge' },\n        }}\n        badgeContent={5}\n      &gt;\n        &lt;span className=\"CustomBadgeIntroduction--content\" /&gt;\n      &lt;/Badge&gt;\n      &lt;Styles /&gt;\n    &lt;/React.Fragment&gt;\n  );\n}\n\nconst cyan = {\n  50: '#E9F8FC',\n  100: '#BDEBF4',\n  200: '#99D8E5',\n  300: '#66BACC',\n  400: '#1F94AD',\n  500: '#0D5463',\n  600: '#094855',\n  700: '#063C47',\n  800: '#043039',\n  900: '#022127',\n};\n\nconst grey = {\n  50: '#F3F6F9',\n  100: '#E5EAF2',\n  200: '#DAE2ED',\n  300: '#C7D0DD',\n  400: '#B0B8C4',\n  500: '#9DA8B7',\n  600: '#6B7A90',\n  700: '#434D5B',\n  800: '#303740',\n  900: '#1C2025',\n};\n\nfunction useIsDarkMode() {\n  const theme = useTheme();\n  return theme.palette.mode === 'dark';\n}\n\nfunction Styles() {\n  // Replace this with your app logic for determining dark mode\n  const isDarkMode = useIsDarkMode();\n  return (\n    &lt;style&gt;\n      {`\n      .CustomBadgeIntroduction {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n        font-size: 14px;\n        font-variant: tabular-nums;\n        list-style: none;\n        font-family: 'IBM Plex Sans', sans-serif;\n        position: relative;\n        display: inline-block;\n        line-height: 1;\n      }\n\n      .CustomBadgeIntroduction--badge {\n        z-index: auto;\n        position: absolute;\n        top: 0;\n        right: 0;\n        min-width: 22px;\n        height: 22px;\n        padding: 0 6px;\n        color: #fff;\n        font-weight: 600;\n        font-size: 12px;\n        line-height: 22px;\n        white-space: nowrap;\n        text-align: center;\n        border-radius: 12px;\n        background: ${cyan[500]};\n        box-shadow: 0px 2px 24px ${isDarkMode ? grey[900] : grey[300]};\n        transform: translate(50%, -50%);\n        transform-origin: 100% 0;\n      }\n\n      .CustomBadgeIntroduction--content {\n        width: 40px;\n        height: 40px;\n        border-radius: 12px;\n        background: ${isDarkMode ? grey[700] : grey[200]};\n        display: inline-block;\n        vertical-align: middle;\n      }\n      `}\n    &lt;/style&gt;\n  );\n}\n",tailwindJsxPreview:'&lt;Badge badgeContent={5}&gt;\n  &lt;span className="w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle" /&gt;\n&lt;/Badge&gt;',cssJsxPreview:"&lt;React.Fragment&gt;\n  &lt;Badge\n    slotProps={{\n      root: { className: 'CustomBadgeIntroduction' },\n      badge: { className: 'CustomBadgeIntroduction--badge' },\n    }}\n    badgeContent={5}\n  &gt;\n    &lt;span className=\"CustomBadgeIntroduction--content\" /&gt;\n  &lt;/Badge&gt;\n  &lt;Styles /&gt;\n&lt;/React.Fragment&gt;",jsxPreview:"&lt;Badge badgeContent={5}&gt;\n  &lt;BadgeContent /&gt;\n&lt;/Badge&gt;",moduleTS:"./UnstyledBadgeIntroduction/system/index.js",rawTS:"import * as React from 'react';\nimport { styled, Box } from '@mui/system';\nimport { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';\n\nconst blue = {\n  100: '#DAECFF',\n  500: '#007FFF',\n  900: '#003A75',\n};\n\nconst grey = {\n  50: '#F3F6F9',\n  100: '#E5EAF2',\n  200: '#DAE2ED',\n  300: '#C7D0DD',\n  400: '#B0B8C4',\n  500: '#9DA8B7',\n  600: '#6B7A90',\n  700: '#434D5B',\n  800: '#303740',\n  900: '#1C2025',\n};\n\nfunction BadgeContent() {\n  return (\n    &lt;Box\n      component=\"span\"\n      sx={{\n        width: 40,\n        height: 40,\n        borderRadius: '12px',\n        background: (theme) =&gt;\n          theme.palette.mode === 'dark' ? grey[700] : grey[200],\n        display: 'inline-block',\n        verticalAlign: 'middle',\n      }}\n    /&gt;\n  );\n}\n\nexport default function UnstyledBadgeIntroduction() {\n  return (\n    &lt;Badge badgeContent={5}&gt;\n      &lt;BadgeContent /&gt;\n    &lt;/Badge&gt;\n  );\n}\n\nconst Badge = styled(BaseBadge)(\n  ({ theme }) =&gt; `\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  font-variant: tabular-nums;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n\n  &amp; .${badgeClasses.badge} {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ${blue[500]};\n    box-shadow: 0px 2px 24px ${\n      theme.palette.mode === 'dark' ? blue[900] : blue[100]\n    };\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n  `,\n);\n"},UnstyledBadge:{module:"./UnstyledBadge/system/index.js",raw:"import * as React from 'react';\nimport { styled, Box } from '@mui/system';\nimport { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';\n\nfunction BadgeContent() {\n  return (\n    &lt;Box\n      component=\"span\"\n      sx={{\n        width: 40,\n        height: 40,\n        borderRadius: '12px',\n        background: (theme) =&gt;\n          theme.palette.mode === 'dark' ? grey[400] : grey[300],\n        display: 'inline-block',\n        verticalAlign: 'middle',\n      }}\n    /&gt;\n  );\n}\n\nexport default function UnstyledBadge() {\n  return (\n    &lt;Badge badgeContent={5}&gt;\n      &lt;BadgeContent /&gt;\n    &lt;/Badge&gt;\n  );\n}\n\nconst blue = {\n  500: '#007FFF',\n};\n\nconst grey = {\n  50: '#F3F6F9',\n  100: '#E5EAF2',\n  200: '#DAE2ED',\n  300: '#C7D0DD',\n  400: '#B0B8C4',\n  500: '#9DA8B7',\n  600: '#6B7A90',\n  700: '#434D5B',\n  800: '#303740',\n  900: '#1C2025',\n};\n\nconst Badge = styled(BaseBadge)(\n  ({ theme }) =&gt; `\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  font-variant: tabular-nums;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n\n  &amp; .${badgeClasses.badge} {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ${blue[500]};\n    box-shadow: 0px 4px 8px ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n  `,\n);\n",moduleTailwind:"./UnstyledBadge/tailwind/index.js",rawTailwind:"import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { Badge as BaseBadge } from '@mui/base/Badge';\nimport { useTheme } from '@mui/system';\n\nfunction useIsDarkMode() {\n  const theme = useTheme();\n  return theme.palette.mode === 'dark';\n}\n\nexport default function UnstyledBadge() {\n  // Replace this with your app logic for determining dark mode\n  const isDarkMode = useIsDarkMode();\n\n  return (\n    &lt;div className={isDarkMode ? 'dark' : ''}&gt;\n      &lt;Badge badgeContent={5}&gt;\n        &lt;span className=\"w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle\" /&gt;\n      &lt;/Badge&gt;\n    &lt;/div&gt;\n  );\n}\n\nconst resolveSlotProps = (fn, args) =&gt; (typeof fn === 'function' ? fn(args) : fn);\n\nconst Badge = React.forwardRef((props, ref) =&gt; {\n  return (\n    &lt;BaseBadge\n      ref={ref}\n      {...props}\n      slotProps={{\n        ...props.slotProps,\n        root: (ownerState) =&gt; {\n          const resolvedSlotProps = resolveSlotProps(\n            props.slotProps?.root,\n            ownerState,\n          );\n          return {\n            ...resolvedSlotProps,\n            className: clsx(\n              'box-border m-0 p-0 text-xs font-sans list-none relative inline-block leading-none',\n              resolvedSlotProps?.className,\n            ),\n          };\n        },\n        badge: (ownerState) =&gt; {\n          const resolvedSlotProps = resolveSlotProps(\n            props.slotProps?.badge,\n            ownerState,\n          );\n          return {\n            ...resolvedSlotProps,\n            className: clsx(\n              'z-auto absolute top-0 right-0 min-w-badge min-h-badge font-sans p-0 text-white font-semibold font-xs rounded-xl bg-purple-500 leading-5.5 whitespace-nowrap text-center translate-x-1/2 -translate-y-1/2 drop-shadow-lg origin-right',\n              resolvedSlotProps?.className,\n            ),\n          };\n        },\n      }}\n    /&gt;\n  );\n});\n\nBadge.propTypes = {\n  /**\n   * The props used for each slot inside the Badge.\n   * @default {}\n   */\n  slotProps: PropTypes.shape({\n    badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n  }),\n};\n",moduleTSTailwind:"./UnstyledBadge/tailwind/index.tsx",rawTailwindTS:"import * as React from 'react';\nimport clsx from 'clsx';\nimport { Badge as BaseBadge, BadgeProps } from '@mui/base/Badge';\nimport { useTheme } from '@mui/system';\n\nfunction useIsDarkMode() {\n  const theme = useTheme();\n  return theme.palette.mode === 'dark';\n}\n\nexport default function UnstyledBadge() {\n  // Replace this with your app logic for determining dark mode\n  const isDarkMode = useIsDarkMode();\n\n  return (\n    &lt;div className={isDarkMode ? 'dark' : ''}&gt;\n      &lt;Badge badgeContent={5}&gt;\n        &lt;span className=\"w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle\" /&gt;\n      &lt;/Badge&gt;\n    &lt;/div&gt;\n  );\n}\n\nconst resolveSlotProps = (fn: any, args: any) =&gt;\n  typeof fn === 'function' ? fn(args) : fn;\n\nconst Badge = React.forwardRef&lt;HTMLSpanElement, BadgeProps&gt;((props, ref) =&gt; {\n  return (\n    &lt;BaseBadge\n      ref={ref}\n      {...props}\n      slotProps={{\n        ...props.slotProps,\n        root: (ownerState) =&gt; {\n          const resolvedSlotProps = resolveSlotProps(\n            props.slotProps?.root,\n            ownerState,\n          );\n          return {\n            ...resolvedSlotProps,\n            className: clsx(\n              'box-border m-0 p-0 text-xs font-sans list-none relative inline-block leading-none',\n              resolvedSlotProps?.className,\n            ),\n          };\n        },\n        badge: (ownerState) =&gt; {\n          const resolvedSlotProps = resolveSlotProps(\n            props.slotProps?.badge,\n            ownerState,\n          );\n          return {\n            ...resolvedSlotProps,\n            className: clsx(\n              'z-auto absolute top-0 right-0 min-w-badge min-h-badge font-sans p-0 text-white font-semibold font-xs rounded-xl bg-purple-500 leading-5.5 whitespace-nowrap text-center translate-x-1/2 -translate-y-1/2 drop-shadow-lg origin-right',\n              resolvedSlotProps?.className,\n            ),\n          };\n        },\n      }}\n    /&gt;\n  );\n});\n",moduleCSS:"./UnstyledBadge/css/index.js",rawCSS:"import * as React from 'react';\nimport { Badge } from '@mui/base/Badge';\nimport { useTheme } from '@mui/system';\n\nexport default function UnstyledBadge() {\n  return (\n    &lt;React.Fragment&gt;\n      &lt;Badge\n        slotProps={{\n          root: { className: 'CustomBadge' },\n          badge: { className: 'CustomBadge--badge' },\n        }}\n        badgeContent={5}\n      &gt;\n        &lt;span className=\"CustomBadge--content\" /&gt;\n      &lt;/Badge&gt;\n      &lt;Styles /&gt;\n    &lt;/React.Fragment&gt;\n  );\n}\n\nconst cyan = {\n  50: '#E9F8FC',\n  100: '#BDEBF4',\n  200: '#99D8E5',\n  300: '#66BACC',\n  400: '#1F94AD',\n  500: '#0D5463',\n  600: '#094855',\n  700: '#063C47',\n  800: '#043039',\n  900: '#022127',\n};\n\nconst grey = {\n  50: '#F3F6F9',\n  100: '#E5EAF2',\n  200: '#DAE2ED',\n  300: '#C7D0DD',\n  400: '#B0B8C4',\n  500: '#9DA8B7',\n  600: '#6B7A90',\n  700: '#434D5B',\n  800: '#303740',\n  900: '#1C2025',\n};\n\nfunction useIsDarkMode() {\n  const theme = useTheme();\n  return theme.palette.mode === 'dark';\n}\n\nfunction Styles() {\n  // Replace this with your app logic for determining dark mode\n  const isDarkMode = useIsDarkMode();\n  return (\n    &lt;style&gt;\n      {`\n      .CustomBadge {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n        font-size: 14px;\n        font-variant: tabular-nums;\n        list-style: none;\n        font-family: 'IBM Plex Sans', sans-serif;\n        position: relative;\n        display: inline-block;\n        line-height: 1;\n      }\n\n      .CustomBadge--badge {\n        z-index: auto;\n        position: absolute;\n        top: 0;\n        right: 0;\n        min-width: 22px;\n        height: 22px;\n        padding: 0 6px;\n        color: #fff;\n        font-weight: 600;\n        font-size: 12px;\n        line-height: 22px;\n        white-space: nowrap;\n        text-align: center;\n        border-radius: 12px;\n        background: ${cyan[500]};\n        box-shadow: 0px 4px 8px ${isDarkMode ? grey[900] : grey[300]};\n        transform: translate(50%, -50%);\n        transform-origin: 100% 0;\n      }\n\n      .CustomBadge--content {\n        width: 40px;\n        height: 40px;\n        border-radius: 12px;\n        background: ${isDarkMode ? grey[400] : grey[300]};\n        display: inline-block;\n        vertical-align: middle;\n      }\n      `}\n    &lt;/style&gt;\n  );\n}\n",moduleTSCSS:"./UnstyledBadge/css/index.tsx",rawCSSTS:"import * as React from 'react';\nimport { Badge } from '@mui/base/Badge';\nimport { useTheme } from '@mui/system';\n\nexport default function UnstyledBadge() {\n  return (\n    &lt;React.Fragment&gt;\n      &lt;Badge\n        slotProps={{\n          root: { className: 'CustomBadge' },\n          badge: { className: 'CustomBadge--badge' },\n        }}\n        badgeContent={5}\n      &gt;\n        &lt;span className=\"CustomBadge--content\" /&gt;\n      &lt;/Badge&gt;\n      &lt;Styles /&gt;\n    &lt;/React.Fragment&gt;\n  );\n}\n\nconst cyan = {\n  50: '#E9F8FC',\n  100: '#BDEBF4',\n  200: '#99D8E5',\n  300: '#66BACC',\n  400: '#1F94AD',\n  500: '#0D5463',\n  600: '#094855',\n  700: '#063C47',\n  800: '#043039',\n  900: '#022127',\n};\n\nconst grey = {\n  50: '#F3F6F9',\n  100: '#E5EAF2',\n  200: '#DAE2ED',\n  300: '#C7D0DD',\n  400: '#B0B8C4',\n  500: '#9DA8B7',\n  600: '#6B7A90',\n  700: '#434D5B',\n  800: '#303740',\n  900: '#1C2025',\n};\n\nfunction useIsDarkMode() {\n  const theme = useTheme();\n  return theme.palette.mode === 'dark';\n}\n\nfunction Styles() {\n  // Replace this with your app logic for determining dark mode\n  const isDarkMode = useIsDarkMode();\n  return (\n    &lt;style&gt;\n      {`\n      .CustomBadge {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n        font-size: 14px;\n        font-variant: tabular-nums;\n        list-style: none;\n        font-family: 'IBM Plex Sans', sans-serif;\n        position: relative;\n        display: inline-block;\n        line-height: 1;\n      }\n\n      .CustomBadge--badge {\n        z-index: auto;\n        position: absolute;\n        top: 0;\n        right: 0;\n        min-width: 22px;\n        height: 22px;\n        padding: 0 6px;\n        color: #fff;\n        font-weight: 600;\n        font-size: 12px;\n        line-height: 22px;\n        white-space: nowrap;\n        text-align: center;\n        border-radius: 12px;\n        background: ${cyan[500]};\n        box-shadow: 0px 4px 8px ${isDarkMode ? grey[900] : grey[300]};\n        transform: translate(50%, -50%);\n        transform-origin: 100% 0;\n      }\n\n      .CustomBadge--content {\n        width: 40px;\n        height: 40px;\n        border-radius: 12px;\n        background: ${isDarkMode ? grey[400] : grey[300]};\n        display: inline-block;\n        vertical-align: middle;\n      }\n      `}\n    &lt;/style&gt;\n  );\n}\n",tailwindJsxPreview:'&lt;Badge badgeContent={5}&gt;\n  &lt;span className="w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle" /&gt;\n&lt;/Badge&gt;',cssJsxPreview:"&lt;React.Fragment&gt;\n  &lt;Badge\n    slotProps={{\n      root: { className: 'CustomBadge' },\n      badge: { className: 'CustomBadge--badge' },\n    }}\n    badgeContent={5}\n  &gt;\n    &lt;span className=\"CustomBadge--content\" /&gt;\n  &lt;/Badge&gt;\n  &lt;Styles /&gt;\n&lt;/React.Fragment&gt;",jsxPreview:"&lt;Badge badgeContent={5}&gt;\n  &lt;BadgeContent /&gt;\n&lt;/Badge&gt;",moduleTS:"./UnstyledBadge/system/index.js",rawTS:"import * as React from 'react';\nimport { styled, Box } from '@mui/system';\nimport { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';\n\nfunction BadgeContent() {\n  return (\n    &lt;Box\n      component=\"span\"\n      sx={{\n        width: 40,\n        height: 40,\n        borderRadius: '12px',\n        background: (theme) =&gt;\n          theme.palette.mode === 'dark' ? grey[400] : grey[300],\n        display: 'inline-block',\n        verticalAlign: 'middle',\n      }}\n    /&gt;\n  );\n}\n\nexport default function UnstyledBadge() {\n  return (\n    &lt;Badge badgeContent={5}&gt;\n      &lt;BadgeContent /&gt;\n    &lt;/Badge&gt;\n  );\n}\n\nconst blue = {\n  500: '#007FFF',\n};\n\nconst grey = {\n  50: '#F3F6F9',\n  100: '#E5EAF2',\n  200: '#DAE2ED',\n  300: '#C7D0DD',\n  400: '#B0B8C4',\n  500: '#9DA8B7',\n  600: '#6B7A90',\n  700: '#434D5B',\n  800: '#303740',\n  900: '#1C2025',\n};\n\nconst Badge = styled(BaseBadge)(\n  ({ theme }) =&gt; `\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  font-variant: tabular-nums;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n\n  &amp; .${badgeClasses.badge} {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ${blue[500]};\n    box-shadow: 0px 4px 8px ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n  `,\n);\n"},"BadgeVisibility.js":{module:"./BadgeVisibility.js",raw:"import * as React from 'react';\nimport { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';\n// Auxiliary demo components\nimport { styled, Stack } from '@mui/system';\nimport { Button, buttonClasses } from '@mui/base/Button';\nimport { Switch, switchClasses } from '@mui/base/Switch';\nimport Divider from '@mui/material/Divider';\n// Icons\nimport AddIcon from '@mui/icons-material/Add';\nimport RemoveIcon from '@mui/icons-material/Remove';\nimport MailIcon from '@mui/icons-material/Mail';\n\nconst blue = {\n  200: '#99CCF3',\n  500: '#007FFF',\n};\n\nconst grey = {\n  50: '#F3F6F9',\n  100: '#E5EAF2',\n  200: '#DAE2ED',\n  300: '#C7D0DD',\n  400: '#B0B8C4',\n  500: '#9DA8B7',\n  600: '#6B7A90',\n  700: '#434D5B',\n  800: '#303740',\n  900: '#1C2025',\n};\n\nconst Badge = styled(BaseBadge)(\n  ({ theme }) =&gt; `\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-self: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  font-size: 14px;\n  line-height: 1;\n\n  &amp; .${badgeClasses.badge} {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ${blue[500]};\n    box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n\n  &amp; .${badgeClasses.invisible} {\n    opacity: 0;\n    pointer-events: none;\n  }\n  `,\n);\n\nconst StyledButton = styled(Button)(\n  ({ theme }) =&gt; `\n  cursor: pointer;\n  padding: 4px 8px;\n  display: flex;\n  align-items: center;\n  border-radius: 8px;\n  transition: all 150ms ease;\n  background-color: transparent;\n  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};\n\n  &amp;:hover {\n    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};\n  }\n\n  &amp;.${buttonClasses.active} {\n    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};\n  }\n\n  &amp;.${buttonClasses.focusVisible} {\n    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 4px rgba(0, 127, 255, 0.5);\n    outline: none;\n  }\n  `,\n);\n\nconst Root = styled('span')(\n  ({ theme }) =&gt; `\n  position: relative;\n  display: inline-block;\n  width: 32px;\n  height: 20px;\n  cursor: pointer;\n\n\n  &amp; .${switchClasses.track} {\n    background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]};\n    border-radius: 16px;\n    display: block;\n    height: 100%;\n    width: 100%;\n    position: absolute;\n  }\n\n  &amp; .${switchClasses.thumb} {\n    position: relative;\n    display: block;\n    width: 14px;\n    height: 14px;\n    top: 3px;\n    left: 3px;\n    border-radius: 16px;\n    background-color: #fff;\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 120ms;\n  }\n\n  &amp;.${switchClasses.focusVisible} .${switchClasses.track} {\n    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? grey[700] : blue[200]};\n  }\n\n  &amp;.${switchClasses.checked} {\n    .${switchClasses.thumb} {\n      left: 15px;\n      top: 3px;\n      background-color: #fff;\n    }\n\n    .${switchClasses.track} {\n      background: ${blue[500]};\n    }\n  }\n\n  &amp; .${switchClasses.input} {\n    cursor: inherit;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    z-index: 1;\n    margin: 0;\n  }\n  `,\n);\n\nconst StyledLabel = styled('label')(\n  ({ theme }) =&gt; `\n  font-family: 'IBM Plex Sans', sans-serif;\n  font-size: 0.875rem;\n  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};\n  `,\n);\n\nexport default function BadgeVisibility() {\n  const [count, setCount] = React.useState(1);\n  const [invisible, setInvisible] = React.useState(false);\n\n  const handleBadgeVisibility = () =&gt; {\n    setInvisible(!invisible);\n  };\n\n  return (\n    &lt;Stack direction=\"column\" justifyContent=\"center\" spacing={1} useFlexGap&gt;\n      &lt;Badge badgeContent={count} invisible={invisible}&gt;\n        &lt;MailIcon /&gt;\n      &lt;/Badge&gt;\n      &lt;Divider sx={{ my: 2 }} /&gt;\n      &lt;Stack\n        direction=\"row\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        gap={1}\n        useFlexGap\n      &gt;\n        &lt;StyledButton\n          aria-label=\"decrease\"\n          onClick={() =&gt; {\n            setCount(Math.max(count - 1, 0));\n          }}\n        &gt;\n          &lt;RemoveIcon fontSize=\"small\" color=\"primary\" /&gt;\n        &lt;/StyledButton&gt;\n        &lt;StyledButton\n          aria-label=\"increase\"\n          onClick={() =&gt; {\n            setCount(count + 1);\n          }}\n        &gt;\n          &lt;AddIcon fontSize=\"small\" color=\"primary\" /&gt;\n        &lt;/StyledButton&gt;\n        &lt;Divider orientation=\"vertical\" /&gt;\n        &lt;Stack direction=\"row\" spacing={1} useFlexGap&gt;\n          &lt;StyledLabel&gt;Show badge&lt;/StyledLabel&gt;\n          &lt;Switch\n            slots={{\n              root: Root,\n            }}\n            checked={!invisible}\n            onChange={handleBadgeVisibility}\n          /&gt;\n        &lt;/Stack&gt;\n      &lt;/Stack&gt;\n    &lt;/Stack&gt;\n  );\n}\n",moduleTS:"./BadgeVisibility.js",rawTS:"import * as React from 'react';\nimport { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';\n// Auxiliary demo components\nimport { styled, Stack } from '@mui/system';\nimport { Button, buttonClasses } from '@mui/base/Button';\nimport { Switch, switchClasses } from '@mui/base/Switch';\nimport Divider from '@mui/material/Divider';\n// Icons\nimport AddIcon from '@mui/icons-material/Add';\nimport RemoveIcon from '@mui/icons-material/Remove';\nimport MailIcon from '@mui/icons-material/Mail';\n\nconst blue = {\n  200: '#99CCF3',\n  500: '#007FFF',\n};\n\nconst grey = {\n  50: '#F3F6F9',\n  100: '#E5EAF2',\n  200: '#DAE2ED',\n  300: '#C7D0DD',\n  400: '#B0B8C4',\n  500: '#9DA8B7',\n  600: '#6B7A90',\n  700: '#434D5B',\n  800: '#303740',\n  900: '#1C2025',\n};\n\nconst Badge = styled(BaseBadge)(\n  ({ theme }) =&gt; `\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-self: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  font-size: 14px;\n  line-height: 1;\n\n  &amp; .${badgeClasses.badge} {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ${blue[500]};\n    box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n\n  &amp; .${badgeClasses.invisible} {\n    opacity: 0;\n    pointer-events: none;\n  }\n  `,\n);\n\nconst StyledButton = styled(Button)(\n  ({ theme }) =&gt; `\n  cursor: pointer;\n  padding: 4px 8px;\n  display: flex;\n  align-items: center;\n  border-radius: 8px;\n  transition: all 150ms ease;\n  background-color: transparent;\n  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};\n\n  &amp;:hover {\n    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};\n  }\n\n  &amp;.${buttonClasses.active} {\n    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};\n  }\n\n  &amp;.${buttonClasses.focusVisible} {\n    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 4px rgba(0, 127, 255, 0.5);\n    outline: none;\n  }\n  `,\n);\n\nconst Root = styled('span')(\n  ({ theme }) =&gt; `\n  position: relative;\n  display: inline-block;\n  width: 32px;\n  height: 20px;\n  cursor: pointer;\n\n\n  &amp; .${switchClasses.track} {\n    background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]};\n    border-radius: 16px;\n    display: block;\n    height: 100%;\n    width: 100%;\n    position: absolute;\n  }\n\n  &amp; .${switchClasses.thumb} {\n    position: relative;\n    display: block;\n    width: 14px;\n    height: 14px;\n    top: 3px;\n    left: 3px;\n    border-radius: 16px;\n    background-color: #fff;\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 120ms;\n  }\n\n  &amp;.${switchClasses.focusVisible} .${switchClasses.track} {\n    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? grey[700] : blue[200]};\n  }\n\n  &amp;.${switchClasses.checked} {\n    .${switchClasses.thumb} {\n      left: 15px;\n      top: 3px;\n      background-color: #fff;\n    }\n\n    .${switchClasses.track} {\n      background: ${blue[500]};\n    }\n  }\n\n  &amp; .${switchClasses.input} {\n    cursor: inherit;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    z-index: 1;\n    margin: 0;\n  }\n  `,\n);\n\nconst StyledLabel = styled('label')(\n  ({ theme }) =&gt; `\n  font-family: 'IBM Plex Sans', sans-serif;\n  font-size: 0.875rem;\n  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};\n  `,\n);\n\nexport default function BadgeVisibility() {\n  const [count, setCount] = React.useState(1);\n  const [invisible, setInvisible] = React.useState(false);\n\n  const handleBadgeVisibility = () =&gt; {\n    setInvisible(!invisible);\n  };\n\n  return (\n    &lt;Stack direction=\"column\" justifyContent=\"center\" spacing={1} useFlexGap&gt;\n      &lt;Badge badgeContent={count} invisible={invisible}&gt;\n        &lt;MailIcon /&gt;\n      &lt;/Badge&gt;\n      &lt;Divider sx={{ my: 2 }} /&gt;\n      &lt;Stack\n        direction=\"row\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        gap={1}\n        useFlexGap\n      &gt;\n        &lt;StyledButton\n          aria-label=\"decrease\"\n          onClick={() =&gt; {\n            setCount(Math.max(count - 1, 0));\n          }}\n        &gt;\n          &lt;RemoveIcon fontSize=\"small\" color=\"primary\" /&gt;\n        &lt;/StyledButton&gt;\n        &lt;StyledButton\n          aria-label=\"increase\"\n          onClick={() =&gt; {\n            setCount(count + 1);\n          }}\n        &gt;\n          &lt;AddIcon fontSize=\"small\" color=\"primary\" /&gt;\n        &lt;/StyledButton&gt;\n        &lt;Divider orientation=\"vertical\" /&gt;\n        &lt;Stack direction=\"row\" spacing={1} useFlexGap&gt;\n          &lt;StyledLabel&gt;Show badge&lt;/StyledLabel&gt;\n          &lt;Switch\n            slots={{\n              root: Root,\n            }}\n            checked={!invisible}\n            onChange={handleBadgeVisibility}\n          /&gt;\n        &lt;/Stack&gt;\n      &lt;/Stack&gt;\n    &lt;/Stack&gt;\n  );\n}\n"},"ShowZeroBadge.js":{module:"./ShowZeroBadge.js",raw:"import * as React from 'react';\nimport Stack from '@mui/material/Stack';\nimport { styled } from '@mui/system';\nimport { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';\nimport MailIcon from '@mui/icons-material/Mail';\n\nexport default function ShowZeroBadge() {\n  return (\n    &lt;Stack spacing={4} direction=\"row\"&gt;\n      &lt;Badge badgeContent={0}&gt;\n        &lt;MailIcon /&gt;\n      &lt;/Badge&gt;\n      &lt;Badge badgeContent={0} showZero&gt;\n        &lt;MailIcon /&gt;\n      &lt;/Badge&gt;\n    &lt;/Stack&gt;\n  );\n}\n\nconst blue = {\n  500: '#007FFF',\n};\n\nconst grey = {\n  50: '#F3F6F9',\n  100: '#E5EAF2',\n  200: '#DAE2ED',\n  300: '#C7D0DD',\n  400: '#B0B8C4',\n  500: '#9DA8B7',\n  600: '#6B7A90',\n  700: '#434D5B',\n  800: '#303740',\n  900: '#1C2025',\n};\n\nconst Badge = styled(BaseBadge)(\n  ({ theme }) =&gt; `\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n\n  &amp; .${badgeClasses.badge} {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ${blue[500]};\n    box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n\n  &amp; .${badgeClasses.invisible} {\n    display: none;\n  }\n  `,\n);\n",jsxPreview:"&lt;Badge badgeContent={0}&gt;\n  &lt;MailIcon /&gt;\n&lt;/Badge&gt;\n&lt;Badge badgeContent={0} showZero&gt;\n  &lt;MailIcon /&gt;\n&lt;/Badge&gt;",moduleTS:"./ShowZeroBadge.js",rawTS:"import * as React from 'react';\nimport Stack from '@mui/material/Stack';\nimport { styled } from '@mui/system';\nimport { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';\nimport MailIcon from '@mui/icons-material/Mail';\n\nexport default function ShowZeroBadge() {\n  return (\n    &lt;Stack spacing={4} direction=\"row\"&gt;\n      &lt;Badge badgeContent={0}&gt;\n        &lt;MailIcon /&gt;\n      &lt;/Badge&gt;\n      &lt;Badge badgeContent={0} showZero&gt;\n        &lt;MailIcon /&gt;\n      &lt;/Badge&gt;\n    &lt;/Stack&gt;\n  );\n}\n\nconst blue = {\n  500: '#007FFF',\n};\n\nconst grey = {\n  50: '#F3F6F9',\n  100: '#E5EAF2',\n  200: '#DAE2ED',\n  300: '#C7D0DD',\n  400: '#B0B8C4',\n  500: '#9DA8B7',\n  600: '#6B7A90',\n  700: '#434D5B',\n  800: '#303740',\n  900: '#1C2025',\n};\n\nconst Badge = styled(BaseBadge)(\n  ({ theme }) =&gt; `\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n\n  &amp; .${badgeClasses.badge} {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ${blue[500]};\n    box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n\n  &amp; .${badgeClasses.invisible} {\n    display: none;\n  }\n  `,\n);\n"},"BadgeMax.js":{module:"./BadgeMax.js",raw:"import * as React from 'react';\nimport Stack from '@mui/material/Stack';\nimport { styled } from '@mui/system';\nimport { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';\nimport MailIcon from '@mui/icons-material/Mail';\n\nexport default function BadgeMax() {\n  return (\n    &lt;Stack spacing={4} direction=\"row\"&gt;\n      &lt;Badge badgeContent={99}&gt;\n        &lt;MailIcon /&gt;\n      &lt;/Badge&gt;\n      &lt;Badge badgeContent={100}&gt;\n        &lt;MailIcon /&gt;\n      &lt;/Badge&gt;\n      &lt;Badge badgeContent={1000} max={999}&gt;\n        &lt;MailIcon /&gt;\n      &lt;/Badge&gt;\n    &lt;/Stack&gt;\n  );\n}\nconst blue = {\n  500: '#007FFF',\n};\n\nconst grey = {\n  50: '#F3F6F9',\n  100: '#E5EAF2',\n  200: '#DAE2ED',\n  300: '#C7D0DD',\n  400: '#B0B8C4',\n  500: '#9DA8B7',\n  600: '#6B7A90',\n  700: '#434D5B',\n  800: '#303740',\n  900: '#1C2025',\n};\n\nconst Badge = styled(BaseBadge)(\n  ({ theme }) =&gt; `\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n\n  &amp; .${badgeClasses.badge} {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ${blue[500]};\n    box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n  `,\n);\n",jsxPreview:"&lt;Badge badgeContent={99}&gt;\n  &lt;MailIcon /&gt;\n&lt;/Badge&gt;\n&lt;Badge badgeContent={100}&gt;\n  &lt;MailIcon /&gt;\n&lt;/Badge&gt;\n&lt;Badge badgeContent={1000} max={999}&gt;\n  &lt;MailIcon /&gt;\n&lt;/Badge&gt;",moduleTS:"./BadgeMax.js",rawTS:"import * as React from 'react';\nimport Stack from '@mui/material/Stack';\nimport { styled } from '@mui/system';\nimport { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';\nimport MailIcon from '@mui/icons-material/Mail';\n\nexport default function BadgeMax() {\n  return (\n    &lt;Stack spacing={4} direction=\"row\"&gt;\n      &lt;Badge badgeContent={99}&gt;\n        &lt;MailIcon /&gt;\n      &lt;/Badge&gt;\n      &lt;Badge badgeContent={100}&gt;\n        &lt;MailIcon /&gt;\n      &lt;/Badge&gt;\n      &lt;Badge badgeContent={1000} max={999}&gt;\n        &lt;MailIcon /&gt;\n      &lt;/Badge&gt;\n    &lt;/Stack&gt;\n  );\n}\nconst blue = {\n  500: '#007FFF',\n};\n\nconst grey = {\n  50: '#F3F6F9',\n  100: '#E5EAF2',\n  200: '#DAE2ED',\n  300: '#C7D0DD',\n  400: '#B0B8C4',\n  500: '#9DA8B7',\n  600: '#6B7A90',\n  700: '#434D5B',\n  800: '#303740',\n  900: '#1C2025',\n};\n\nconst Badge = styled(BaseBadge)(\n  ({ theme }) =&gt; `\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n\n  &amp; .${badgeClasses.badge} {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ${blue[500]};\n    box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n  `,\n);\n"},"AccessibleBadges.js":{module:"./AccessibleBadges.js",raw:"import * as React from 'react';\nimport { styled } from '@mui/system';\nimport { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';\nimport MailIcon from '@mui/icons-material/Mail';\n\nfunction notificationsLabel(count) {\n  if (count === 0) {\n    return 'no notifications';\n  }\n  if (count &gt; 99) {\n    return 'more than 99 notifications';\n  }\n  return `${count} notifications`;\n}\n\nexport default function AccessibleBadges() {\n  return (\n    &lt;div aria-label={notificationsLabel(100)}&gt;\n      &lt;Badge badgeContent={100}&gt;\n        &lt;MailIcon /&gt;\n      &lt;/Badge&gt;\n    &lt;/div&gt;\n  );\n}\nconst blue = {\n  500: '#007FFF',\n};\n\nconst grey = {\n  50: '#F3F6F9',\n  100: '#E5EAF2',\n  200: '#DAE2ED',\n  300: '#C7D0DD',\n  400: '#B0B8C4',\n  500: '#9DA8B7',\n  600: '#6B7A90',\n  700: '#434D5B',\n  800: '#303740',\n  900: '#1C2025',\n};\n\nconst Badge = styled(BaseBadge)(\n  ({ theme }) =&gt; `\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n\n  &amp; .${badgeClasses.badge} {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ${blue[500]};\n    box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n  `,\n);\n",jsxPreview:"&lt;Badge badgeContent={100}&gt;\n  &lt;MailIcon /&gt;\n&lt;/Badge&gt;",moduleTS:"./AccessibleBadges.js",rawTS:"import * as React from 'react';\nimport { styled } from '@mui/system';\nimport { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';\nimport MailIcon from '@mui/icons-material/Mail';\n\nfunction notificationsLabel(count: number) {\n  if (count === 0) {\n    return 'no notifications';\n  }\n  if (count &gt; 99) {\n    return 'more than 99 notifications';\n  }\n  return `${count} notifications`;\n}\n\nexport default function AccessibleBadges() {\n  return (\n    &lt;div aria-label={notificationsLabel(100)}&gt;\n      &lt;Badge badgeContent={100}&gt;\n        &lt;MailIcon /&gt;\n      &lt;/Badge&gt;\n    &lt;/div&gt;\n  );\n}\nconst blue = {\n  500: '#007FFF',\n};\n\nconst grey = {\n  50: '#F3F6F9',\n  100: '#E5EAF2',\n  200: '#DAE2ED',\n  300: '#C7D0DD',\n  400: '#B0B8C4',\n  500: '#9DA8B7',\n  600: '#6B7A90',\n  700: '#434D5B',\n  800: '#303740',\n  900: '#1C2025',\n};\n\nconst Badge = styled(BaseBadge)(\n  ({ theme }) =&gt; `\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  list-style: none;\n  font-family: 'IBM Plex Sans', sans-serif;\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n\n  &amp; .${badgeClasses.badge} {\n    z-index: auto;\n    position: absolute;\n    top: 0;\n    right: 0;\n    min-width: 22px;\n    height: 22px;\n    padding: 0 6px;\n    color: #fff;\n    font-weight: 600;\n    font-size: 12px;\n    line-height: 22px;\n    white-space: nowrap;\n    text-align: center;\n    border-radius: 12px;\n    background: ${blue[500]};\n    box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n  }\n  `,\n);\n"}};nG.scope={process:{},import:{react:Z,"@mui/system":D,"@mui/base/Badge":F,"@mui/base/Button":P,"@mui/base/Switch":M,"@mui/material/Divider":z,"@mui/icons-material/Add":j,"@mui/icons-material/Remove":A,"@mui/icons-material/Mail":I,"@mui/material/Stack":E,"prop-types":T,clsx:R}};var nO={"./UnstyledBadgeIntroduction/system/index.js":function(){return o||(o=(0,U.jsx)(O,{badgeContent:5,children:(0,U.jsx)(G,{})}))},"./UnstyledBadge/system/index.js":function(){return a||(a=(0,U.jsx)(Q,{badgeContent:5,children:(0,U.jsx)(W,{})}))},"./BadgeVisibility.js":function(){var n=S.useState(1),e=(0,J.Z)(n,2),t=e[0],o=e[1],a=S.useState(!1),d=(0,J.Z)(a,2),u=d[0],p=d[1];return(0,U.jsxs)(X.Z,{direction:"column",justifyContent:"center",spacing:1,useFlexGap:!0,children:[(0,U.jsx)(ns,{badgeContent:t,invisible:u,children:i||(i=(0,U.jsx)(I.default,{}))}),(0,U.jsx)(no.Z,{sx:{my:2}}),(0,U.jsxs)(X.Z,{direction:"row",justifyContent:"center",alignItems:"center",gap:1,useFlexGap:!0,children:[(0,U.jsx)(nr,{"aria-label":"decrease",onClick:function(){o(Math.max(t-1,0))},children:s||(s=(0,U.jsx)(A.default,{fontSize:"small",color:"primary"}))}),(0,U.jsx)(nr,{"aria-label":"increase",onClick:function(){o(t+1)},children:r||(r=(0,U.jsx)(j.default,{fontSize:"small",color:"primary"}))}),l||(l=(0,U.jsx)(no.Z,{orientation:"vertical"})),(0,U.jsxs)(X.Z,{direction:"row",spacing:1,useFlexGap:!0,children:[c||(c=(0,U.jsx)(nc,{children:"Show badge"})),(0,U.jsx)(nt.r,{slots:{root:nl},checked:!u,onChange:function(){p(!u)}})]})]})]})},"./ShowZeroBadge.js":function(){return d||(d=(0,U.jsxs)(nd.Z,{spacing:4,direction:"row",children:[(0,U.jsx)(ng,{badgeContent:0,children:(0,U.jsx)(I.default,{})}),(0,U.jsx)(ng,{badgeContent:0,showZero:!0,children:(0,U.jsx)(I.default,{})})]}))},"./BadgeMax.js":function(){return u||(u=(0,U.jsxs)(nd.Z,{spacing:4,direction:"row",children:[(0,U.jsx)(nh,{badgeContent:99,children:(0,U.jsx)(I.default,{})}),(0,U.jsx)(nh,{badgeContent:100,children:(0,U.jsx)(I.default,{})}),(0,U.jsx)(nh,{badgeContent:1e3,max:999,children:(0,U.jsx)(I.default,{})})]}))},"./AccessibleBadges.js":function(){return(0,U.jsx)("div",{"aria-label":"more than 99 notifications",children:p||(p=(0,U.jsx)(ny,{badgeContent:100,children:(0,U.jsx)(I.default,{})}))})},"./UnstyledBadgeIntroduction/tailwind/index.js":function(){var n="dark"===(0,nk.Z)().palette.mode;return(0,U.jsx)("div",{className:n?"dark":"",children:g||(g=(0,U.jsx)(nC,{badgeContent:5,children:(0,U.jsx)("span",{className:"w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle"})}))})},"./UnstyledBadge/tailwind/index.js":function(){var n="dark"===(0,nk.Z)().palette.mode;return(0,U.jsx)("div",{className:n?"dark":"",children:m||(m=(0,U.jsx)(nS,{badgeContent:5,children:(0,U.jsx)("span",{className:"w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle"})}))})},"./UnstyledBadgeIntroduction/tailwind/index.tsx":function(){var n="dark"===(0,nk.Z)().palette.mode;return(0,U.jsx)("div",{className:n?"dark":"",children:f||(f=(0,U.jsx)(nD,{badgeContent:5,children:(0,U.jsx)("span",{className:"w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle"})}))})},"./UnstyledBadge/tailwind/index.tsx":function(){var n="dark"===(0,nk.Z)().palette.mode;return(0,U.jsx)("div",{className:n?"dark":"",children:h||(h=(0,U.jsx)(nP,{badgeContent:5,children:(0,U.jsx)("span",{className:"w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle"})}))})},"./UnstyledBadgeIntroduction/css/index.js":function(){return(0,U.jsxs)(S.Fragment,{children:[(0,U.jsx)(V.C,{slotProps:{root:{className:"CustomBadgeIntroduction"},badge:{className:"CustomBadgeIntroduction--badge"}},badgeContent:5,children:b||(b=(0,U.jsx)("span",{className:"CustomBadgeIntroduction--content"}))}),x||(x=(0,U.jsx)(nj,{}))]})},"./UnstyledBadge/css/index.js":function(){return(0,U.jsxs)(S.Fragment,{children:[(0,U.jsx)(V.C,{slotProps:{root:{className:"CustomBadge"},badge:{className:"CustomBadge--badge"}},badgeContent:5,children:y||(y=(0,U.jsx)("span",{className:"CustomBadge--content"}))}),v||(v=(0,U.jsx)(nE,{}))]})},"./UnstyledBadgeIntroduction/css/index.tsx":function(){return(0,U.jsxs)(S.Fragment,{children:[(0,U.jsx)(V.C,{slotProps:{root:{className:"CustomBadgeIntroduction"},badge:{className:"CustomBadgeIntroduction--badge"}},badgeContent:5,children:k||(k=(0,U.jsx)("span",{className:"CustomBadgeIntroduction--content"}))}),B||(B=(0,U.jsx)(nN,{}))]})},"./UnstyledBadge/css/index.tsx":function(){return(0,U.jsxs)(S.Fragment,{children:[(0,U.jsx)(V.C,{slotProps:{root:{className:"CustomBadge"},badge:{className:"CustomBadge--badge"}},badgeContent:5,children:C||(C=(0,U.jsx)("span",{className:"CustomBadge--content"}))}),w||(w=(0,U.jsx)(nH,{}))]})}},nW={"modules/components/ComponentLinkHeader.js":nU.Z,"modules/components/ComponentPageTabs.js":n_.Z}},757302:function(n,e,t){t.d(e,{C:function(){return m}});var o=t(295649),a=t(481936),i=t(827378),s=t(348672),r=t(692763),l=t(198113),c=t(492629),d=t(53454),u=t(824246),p=["badgeContent","children","invisible","max","slotProps","slots","showZero"],g=function(n){var e=n.invisible;return(0,s.Z)({root:["root"],badge:["badge",e&amp;&amp;"invisible"]},(0,d.T)(l.I))},m=i.forwardRef(function(n,e){n.badgeContent;var t,i,s=n.children,l=(n.invisible,n.max),d=n.slotProps,m=void 0===d?{}:d,f=n.slots,h=void 0===f?{}:f,b=n.showZero,x=(0,a.Z)(n,p),y=(0,r.Q)((0,o.Z)((0,o.Z)({},n),{},{max:void 0===l?99:l})),v=y.badgeContent,k=y.max,B=y.displayValue,C=y.invisible,w=(0,o.Z)((0,o.Z)({},n),{},{badgeContent:v,invisible:C,max:k,showZero:void 0!==b&amp;&amp;b}),S=g(w),Z=null!==(t=h.root)&amp;&amp;void 0!==t?t:"span",D=(0,c.y)({elementType:Z,externalSlotProps:m.root,externalForwardedProps:x,additionalProps:{ref:e},ownerState:w,className:S.root}),F=null!==(i=h.badge)&amp;&amp;void 0!==i?i:"span",P=(0,c.y)({elementType:F,externalSlotProps:m.badge,ownerState:w,className:S.badge});return(0,u.jsxs)(Z,(0,o.Z)((0,o.Z)({},D),{},{children:[s,(0,u.jsx)(F,(0,o.Z)((0,o.Z)({},P),{},{children:B}))]}))})},198113:function(n,e,t){t.d(e,{I:function(){return i},Q:function(){return s}});var o=t(12357),a=t(233423);function i(n){return(0,a.Z)("MuiBadge",n)}var s=(0,o.Z)("MuiBadge",["root","badge","invisible"])},496931:function(n,e,t){t.r(e),t.d(e,{Badge:function(){return o.C},badgeClasses:function(){return a.Q},getBadgeUtilityClass:function(){return a.I}});var o=t(757302),a=t(198113)},959968:function(n,e,t){t.d(e,{z:function(){return m}});var o=t(295649),a=t(481936),i=t(827378),s=t(348672),r=t(176835),l=t(7581),c=t(492629),d=t(53454),u=t(824246),p=["action","children","disabled","focusableWhenDisabled","onFocusVisible","slotProps","slots"],g=function(n){var e=n.active,t=n.disabled,o=n.focusVisible;return(0,s.Z)({root:["root",t&amp;&amp;"disabled",o&amp;&amp;"focusVisible",e&amp;&amp;"active"]},(0,d.T)(r.F))},m=i.forwardRef(function(n,e){var t,s=n.action,r=n.children,d=(n.disabled,n.focusableWhenDisabled),m=void 0!==d&amp;&amp;d,f=(n.onFocusVisible,n.slotProps),h=n.slots,b=(0,a.Z)(n,p),x=i.useRef(),y=(0,l.U)((0,o.Z)((0,o.Z)({},n),{},{focusableWhenDisabled:m})),v=y.active,k=y.focusVisible,B=y.setFocusVisible,C=y.getRootProps;i.useImperativeHandle(s,function(){return{focusVisible:function(){B(!0),x.current.focus()}}},[B]);var w=(0,o.Z)((0,o.Z)({},n),{},{active:v,focusableWhenDisabled:m,focusVisible:k}),S=g(w),Z=b.href||b.to?"a":"button",D=null!==(t=(void 0===h?{}:h).root)&amp;&amp;void 0!==t?t:Z,F=(0,c.y)({elementType:D,getSlotProps:C,externalForwardedProps:b,externalSlotProps:(void 0===f?{}:f).root,additionalProps:{ref:e},ownerState:w,className:S.root});return(0,u.jsx)(D,(0,o.Z)((0,o.Z)({},F),{},{children:r}))})},176835:function(n,e,t){t.d(e,{F:function(){return a},J:function(){return i}});var o=t(233423);function a(n){return(0,o.Z)("MuiButton",n)}var i=(0,t(12357).Z)("MuiButton",["root","active","disabled","focusVisible"])},880708:function(n,e,t){t.r(e),t.d(e,{Button:function(){return o.z},buttonClasses:function(){return a.J},getButtonUtilityClass:function(){return a.F}});var o=t(959968),a=t(176835)},168808:function(n,e,t){t.d(e,{r:function(){return m}});var o=t(295649),a=t(481936),i=t(827378),s=t(348672),r=t(299715),l=t(492629),c=t(53454),d=t(81384),u=t(824246),p=["checked","defaultChecked","disabled","onBlur","onChange","onFocus","onFocusVisible","readOnly","required","slotProps","slots"],g=function(n){var e=n.checked,t=n.disabled,o=n.focusVisible,a=n.readOnly;return(0,s.Z)({root:["root",e&amp;&amp;"checked",t&amp;&amp;"disabled",o&amp;&amp;"focusVisible",a&amp;&amp;"readOnly"],thumb:["thumb"],input:["input"],track:["track"]},(0,c.T)(d.H))},m=i.forwardRef(function(n,e){n.checked,n.defaultChecked,n.disabled,n.onBlur,n.onChange,n.onFocus,n.onFocusVisible,n.readOnly,n.required;var t,i,s,c,d=n.slotProps,m=void 0===d?{}:d,f=n.slots,h=void 0===f?{}:f,b=(0,a.Z)(n,p),x=(0,r.h)(n),y=x.getInputProps,v=x.checked,k=x.disabled,B=x.focusVisible,C=x.readOnly,w=(0,o.Z)((0,o.Z)({},n),{},{checked:v,disabled:k,focusVisible:B,readOnly:C}),S=g(w),Z=null!==(t=h.root)&amp;&amp;void 0!==t?t:"span",D=(0,l.y)({elementType:Z,externalSlotProps:m.root,externalForwardedProps:b,additionalProps:{ref:e},ownerState:w,className:S.root}),F=null!==(i=h.thumb)&amp;&amp;void 0!==i?i:"span",P=(0,l.y)({elementType:F,externalSlotProps:m.thumb,ownerState:w,className:S.thumb}),M=null!==(s=h.input)&amp;&amp;void 0!==s?s:"input",z=(0,l.y)({elementType:M,getSlotProps:y,externalSlotProps:m.input,ownerState:w,className:S.input}),j=null===h.track?function(){return null}:null!==(c=h.track)&amp;&amp;void 0!==c?c:"span",A=(0,l.y)({elementType:j,externalSlotProps:m.track,ownerState:w,className:S.track});return(0,u.jsxs)(Z,(0,o.Z)((0,o.Z)({},D),{},{children:[(0,u.jsx)(j,(0,o.Z)({},A)),(0,u.jsx)(F,(0,o.Z)({},P)),(0,u.jsx)(M,(0,o.Z)({},z))]}))})},166138:function(n,e,t){t.r(e),t.d(e,{Switch:function(){return o.r},getSwitchUtilityClass:function(){return a.H},switchClasses:function(){return a.h}});var o=t(168808),a=t(81384)},81384:function(n,e,t){t.d(e,{H:function(){return a},h:function(){return i}});var o=t(233423);function a(n){return(0,o.Z)("MuiSwitch",n)}var i=(0,t(12357).Z)("MuiSwitch",["root","input","track","thumb","checked","disabled","focusVisible","readOnly"])},299715:function(n,e,t){t.d(e,{h:function(){return c}});var o=t(295649),a=t(25778),i=t(827378),s=t(775033),r=t(722860),l=t(678340);function c(n){var e=n.checked,t=n.defaultChecked,c=n.disabled,d=n.onBlur,u=n.onChange,p=n.onFocus,g=n.onFocusVisible,m=n.readOnly,f=n.required,h=(0,s.Z)({controlled:e,default:!!t,name:"Switch",state:"checked"}),b=(0,a.Z)(h,2),x=b[0],y=b[1],v=(0,r.Z)(),k=v.isFocusVisibleRef,B=v.onBlur,C=v.onFocus,w=v.ref,S=i.useState(!1),Z=(0,a.Z)(S,2),D=Z[0],F=Z[1];c&amp;&amp;D&amp;&amp;F(!1),i.useEffect(function(){k.current=D},[D,k]);var P=i.useRef(null),M=(0,l.Z)(w,P);return{checked:x,disabled:!!c,focusVisible:D,getInputProps:function(){var n=arguments.length&gt;0&amp;&amp;void 0!==arguments[0]?arguments[0]:{};return(0,o.Z)((0,o.Z)({checked:e,defaultChecked:t,disabled:c,readOnly:m,ref:M,required:f,type:"checkbox"},n),{},{onChange:function(e){var t;e.nativeEvent.defaultPrevented||(y(e.target.checked),null==u||u(e),null===(t=n.onChange)||void 0===t||t.call(n,e))},onFocus:function(e){var t;P.current||(P.current=e.currentTarget),C(e),!0===k.current&amp;&amp;(F(!0),null==g||g(e)),null==p||p(e),null===(t=n.onFocus)||void 0===t||t.call(n,e)},onBlur:function(e){var t;B(e),!1===k.current&amp;&amp;F(!1),null==d||d(e),null===(t=n.onBlur)||void 0===t||t.call(n,e)}})},inputRef:M,readOnly:!!m}}},394370:function(n,e,t){t.r(e),t.d(e,{default:function(){return o.Z},dividerClasses:function(){return a.Z},getDividerUtilityClass:function(){return a.V}});var o=t(746153),a=t(886280)},871534:function(n,e,t){t.r(e),t.d(e,{default:function(){return o.Z},stackClasses:function(){return a}});var o=t(363555),a=(0,t(12357).Z)("MuiStack",["root"])},523166:function(n,e,t){t.d(e,{Z:function(){return r}}),t(827378);var o,a=t(592322),i=t(743547),s=t(824246);function r(n){var e=n.injectFirst,t=n.children;return e&amp;&amp;o?(0,s.jsx)(a.C,{value:o,children:t}):t}"object"==typeof document&amp;&amp;(o=(0,i.default)({key:"css",prepend:!0}))},530951:function(n,e,t){var o=t(289767),a=t(774018),i=t(632335),s=(0,a.Z)({defaultClassName:i.Z.root,generateClassName:o.Z.generate});e.Z=s},632335:function(n,e,t){var o=(0,t(12357).Z)("MuiBox",["root"]);e.Z=o},533813:function(n,e,t){var o=(0,t(338880).Z)();e.Z=o},764560:function(n,e,t){var o=(0,t(416919).Z)();e.Z=o},277490:function(n,e,t){t.r(e),t.d(e,{createStack:function(){return a.Z},default:function(){return o.Z},getStackUtilityClass:function(){return s},stackClasses:function(){return r}});var o=t(764560),a=t(416919),i=t(233423);function s(n){return(0,i.Z)("MuiStack",n)}var r=(0,t(12357).Z)("MuiStack",["root"])},830298:function(n,e,t){var o=(0,t(806285).Z)();e.Z=o},806285:function(n,e,t){t.d(e,{Z:function(){return L}});var o=t(295649),a=t(25778),i=t(481936),s=t(823315),r=t(74968),l=t.n(r),c=t(827378),d=t(40624),u=t(348672),p=t(233423),g=t(228065),m=t(123184),f=t(689422),h=t(486925),b=t(361056),x=t(63304),y=t(957379),v=t(374360),k=t.n(v),B=t(374338),C=t.n(B),w=t(11775);function S(n){return n?"Level".concat(n):""}function Z(n){return n.unstable_level&gt;0&amp;&amp;n.container}function D(n){return function(e){return"var(--Grid-".concat(e,"Spacing").concat(S(n.unstable_level),")")}}function F(n){return function(e){return 0===n.unstable_level?"var(--Grid-".concat(e,"Spacing)"):"var(--Grid-".concat(e,"Spacing").concat(S(n.unstable_level-1),")")}}function P(n){return 0===n.unstable_level?"var(--Grid-columns)":"var(--Grid-columns".concat(S(n.unstable_level-1),")")}var M=function(n){var e=n.theme,t=n.ownerState,o=D(t),a={};return(0,w.t)(e.breakpoints,t.gridSize,function(n,e){var i={};!0===e&amp;&amp;(i={flexBasis:0,flexGrow:1,maxWidth:"100%"}),"auto"===e&amp;&amp;(i={flexBasis:"auto",flexGrow:0,flexShrink:0,maxWidth:"none",width:"auto"}),"number"==typeof e&amp;&amp;(i={flexGrow:0,flexBasis:"auto",width:"calc(100% * ".concat(e," / ").concat(P(t)).concat(Z(t)?" + ".concat(o("column")):"",")")}),n(a,i)}),a},z=function(n){var e=n.theme,t=n.ownerState,o={};return(0,w.t)(e.breakpoints,t.gridOffset,function(n,e){var a={};"auto"===e&amp;&amp;(a={marginLeft:"auto"}),"number"==typeof e&amp;&amp;(a={marginLeft:0===e?"0px":"calc(100% * ".concat(e," / ").concat(P(t),")")}),n(o,a)}),o},j=function(n){var e=n.theme,t=n.ownerState;if(!t.container)return{};var o=Z(t)?(0,y.Z)({},"--Grid-columns".concat(S(t.unstable_level)),P(t)):{"--Grid-columns":12};return(0,w.t)(e.breakpoints,t.columns,function(n,e){n(o,(0,y.Z)({},"--Grid-columns".concat(S(t.unstable_level)),e))}),o},A=function(n){var e=n.theme,t=n.ownerState;if(!t.container)return{};var o=F(t),a=Z(t)?(0,y.Z)({},"--Grid-rowSpacing".concat(S(t.unstable_level)),o("row")):{};return(0,w.t)(e.breakpoints,t.rowSpacing,function(n,o){var i;n(a,(0,y.Z)({},"--Grid-rowSpacing".concat(S(t.unstable_level)),"string"==typeof o?o:null===(i=e.spacing)||void 0===i?void 0:i.call(e,o)))}),a},I=function(n){var e=n.theme,t=n.ownerState;if(!t.container)return{};var o=F(t),a=Z(t)?(0,y.Z)({},"--Grid-columnSpacing".concat(S(t.unstable_level)),o("column")):{};return(0,w.t)(e.breakpoints,t.columnSpacing,function(n,o){var i;n(a,(0,y.Z)({},"--Grid-columnSpacing".concat(S(t.unstable_level)),"string"==typeof o?o:null===(i=e.spacing)||void 0===i?void 0:i.call(e,o)))}),a},E=function(n){var e=n.theme,t=n.ownerState;if(!t.container)return{};var o={};return(0,w.t)(e.breakpoints,t.direction,function(n,e){n(o,{flexDirection:e})}),o},T=function(n){var e=n.ownerState,t=D(e),a=F(e);return(0,o.Z)((0,o.Z)({minWidth:0,boxSizing:"border-box"},e.container&amp;&amp;(0,o.Z)((0,o.Z)({display:"flex",flexWrap:"wrap"},e.wrap&amp;&amp;"wrap"!==e.wrap&amp;&amp;{flexWrap:e.wrap}),{},{margin:"calc(".concat(t("row")," / -2) calc(").concat(t("column")," / -2)")},e.disableEqualOverflow&amp;&amp;{margin:"calc(".concat(t("row")," * -1) 0px 0px calc(").concat(t("column")," * -1)")})),(!e.container||Z(e))&amp;&amp;(0,o.Z)({padding:"calc(".concat(a("row")," / 2) calc(").concat(a("column")," / 2)")},(e.disableEqualOverflow||e.parentDisableEqualOverflow)&amp;&amp;{padding:"".concat(a("row")," 0px 0px ").concat(a("column"))}))},R=function(n){var e=[];return l()(n).forEach(function(n){var t=(0,a.Z)(n,2),o=t[0],i=t[1];!1!==i&amp;&amp;void 0!==i&amp;&amp;e.push("grid-".concat(o,"-").concat(String(i)))}),e},N=function(n){var e=arguments.length&gt;1&amp;&amp;void 0!==arguments[1]?arguments[1]:"xs";function t(n){return void 0!==n&amp;&amp;("string"==typeof n&amp;&amp;!k()(Number(n))||"number"==typeof n&amp;&amp;n&gt;0)}if(t(n))return["spacing-".concat(e,"-").concat(String(n))];if("object"==typeof n&amp;&amp;!C()(n)){var o=[];return l()(n).forEach(function(n){var e=(0,a.Z)(n,2),i=e[0],s=e[1];t(s)&amp;&amp;o.push("spacing-".concat(i,"-").concat(String(s)))}),o}return[]},$=t(824246),V=["className","children","columns","container","component","direction","wrap","spacing","rowSpacing","columnSpacing","disableEqualOverflow","unstable_level"],H=(0,x.Z)(),U=(0,m.default)("div",{name:"MuiGrid",slot:"Root",overridesResolver:function(n,e){return e.root}});function _(n){return(0,f.Z)({props:n,name:"MuiGrid",defaultTheme:H})}function L(){var n=arguments.length&gt;0&amp;&amp;void 0!==arguments[0]?arguments[0]:{},e=n.createStyledComponent,t=n.useThemeProps,r=void 0===t?_:t,m=n.componentName,f=void 0===m?"MuiGrid":m,x=c.createContext(void 0),y=function(n,e){var t=n.container,o=n.direction,i=n.spacing,r=n.wrap,c=n.gridSize,d={root:["root",t&amp;&amp;"container","wrap"!==r&amp;&amp;"wrap-xs-".concat(String(r))].concat((0,s.Z)(void 0===o?[]:"object"==typeof o?l()(o).map(function(n){var e=(0,a.Z)(n,2),t=e[0],o=e[1];return"direction-".concat(t,"-").concat(o)}):["direction-xs-".concat(String(o))]),(0,s.Z)(R(c)),(0,s.Z)(t?N(i,e.breakpoints.keys[0]):[]))};return(0,u.Z)(d,function(n){return(0,p.Z)(f,n)},{})},v=(void 0===e?U:e)(j,I,A,M,E,T,z),k=c.forwardRef(function(n,e){var t,s,u,p,m,f,k,B,C=(0,h.Z)(),w=r(n),S=(0,b.Z)(w),Z=c.useContext(x),D=S.className,F=S.children,P=S.columns,M=S.container,z=S.component,j=S.direction,A=S.wrap,I=S.spacing,E=void 0===I?0:I,T=S.rowSpacing,R=S.columnSpacing,N=S.disableEqualOverflow,H=S.unstable_level,U=void 0===H?0:H,_=(0,i.Z)(S,V),L=N;U&amp;&amp;void 0!==N&amp;&amp;(L=n.disableEqualOverflow);var G={},O={},W={};l()(_).forEach(function(n){var e=(0,a.Z)(n,2),t=e[0],o=e[1];void 0!==C.breakpoints.values[t]?G[t]=o:void 0!==C.breakpoints.values[t.replace("Offset","")]?O[t.replace("Offset","")]=o:W[t]=o});var q=null!==(t=n.columns)&amp;&amp;void 0!==t?t:U?void 0:void 0===P?12:P,K=null!==(s=n.spacing)&amp;&amp;void 0!==s?s:U?void 0:E,Q=null!==(u=null!==(p=n.rowSpacing)&amp;&amp;void 0!==p?p:n.spacing)&amp;&amp;void 0!==u?u:U?void 0:void 0===T?E:T,J=null!==(m=null!==(f=n.columnSpacing)&amp;&amp;void 0!==f?f:n.spacing)&amp;&amp;void 0!==m?m:U?void 0:void 0===R?E:R,X=(0,o.Z)((0,o.Z)({},S),{},{level:U,columns:q,container:void 0!==M&amp;&amp;M,direction:void 0===j?"row":j,wrap:void 0===A?"wrap":A,spacing:K,rowSpacing:Q,columnSpacing:J,gridSize:G,gridOffset:O,disableEqualOverflow:null!==(k=null!==(B=L)&amp;&amp;void 0!==B?B:Z)&amp;&amp;void 0!==k&amp;&amp;k,parentDisableEqualOverflow:Z}),Y=y(X,C),nn=(0,$.jsx)(v,(0,o.Z)((0,o.Z)({ref:e,as:void 0===z?"div":z,ownerState:X,className:(0,d.default)(Y.root,D)},W),{},{children:c.Children.map(F,function(n){if(c.isValidElement(n)&amp;&amp;(0,g.Z)(n,["Grid"])){var e;return c.cloneElement(n,{unstable_level:null!==(e=n.props.unstable_level)&amp;&amp;void 0!==e?e:U+1})}return n})}));return void 0!==L&amp;&amp;L!==(null!=Z&amp;&amp;Z)&amp;&amp;(nn=(0,$.jsx)(x.Provider,{value:L,children:nn})),nn});return k.muiName="Grid",k}},475410:function(n,e,t){t.r(e),t.d(e,{createGrid:function(){return a.Z},default:function(){return o.Z},getGridUtilityClass:function(){return l},gridClasses:function(){return d},unstable_traverseBreakpoints:function(){return u.t}});var o=t(830298),a=t(806285),i=t(823315),s=t(233423),r=t(12357);function l(n){return(0,s.Z)("MuiGrid",n)}var c=["auto",!0,1,2,3,4,5,6,7,8,9,10,11,12],d=(0,r.Z)("MuiGrid",["root","container","item"].concat((0,i.Z)([0,1,2,3,4,5,6,7,8,9,10].map(function(n){return"spacing-xs-".concat(n)})),(0,i.Z)(["column-reverse","column","row-reverse","row"].map(function(n){return"direction-xs-".concat(n)})),(0,i.Z)(["nowrap","wrap-reverse","wrap"].map(function(n){return"wrap-xs-".concat(n)})),(0,i.Z)(c.map(function(n){return"grid-xs-".concat(n)})),(0,i.Z)(c.map(function(n){return"grid-sm-".concat(n)})),(0,i.Z)(c.map(function(n){return"grid-md-".concat(n)})),(0,i.Z)(c.map(function(n){return"grid-lg-".concat(n)})),(0,i.Z)(c.map(function(n){return"grid-xl-".concat(n)})))),u=t(11775)},11775:function(n,e,t){t.d(e,{t:function(){return l}});var o=t(993080),a=t(374338),i=t.n(a),s=t(696138),r=t.n(s),l=function(n,e,t){var a,s,l=n.keys[0];i()(e)?e.forEach(function(e,a){t(function(e,t){a&lt;=n.keys.length-1&amp;&amp;(0===a?(0,o.Z)(e,t):e[n.up(n.keys[a])]=t)},e)}):e&amp;&amp;"object"==typeof e?(r()(e).length&gt;n.keys.length?n.keys:(a=n.keys,s=r()(e),a.filter(function(n){return s.includes(n)}))).forEach(function(a){if(-1!==n.keys.indexOf(a)){var i=e[a];void 0!==i&amp;&amp;t(function(e,t){l===a?(0,o.Z)(e,t):e[n.up(a)]=t},i)}}):("number"==typeof e||"string"==typeof e)&amp;&amp;t(function(n,e){(0,o.Z)(n,e)},e)}},148802:function(n,e,t){t.r(e),t.d(e,{Box:function(){return nd.Z},Container:function(){return nI.Z},GlobalStyles:function(){return s.Z},Stack:function(){return nV.Z},StyledEngineProvider:function(){return i.Z},ThemeProvider:function(){return nC.Z},Unstable_Grid:function(){return nN.Z},alignContent:function(){return C},alignItems:function(){return B},alignSelf:function(){return F},alpha:function(){return nB.Fq},backgroundColor:function(){return A.Cz},bgcolor:function(){return A.n9},border:function(){return r.Cg},borderBottom:function(){return r.h$},borderBottomColor:function(){return r.vS},borderColor:function(){return r.tv},borderLeft:function(){return r.sc},borderLeftColor:function(){return r.Vv},borderRadius:function(){return r.E0},borderRight:function(){return r.vQ},borderRightColor:function(){return r.XY},borderTop:function(){return r.j1},borderTopColor:function(){return r.SK},borderTransform:function(){return r.NL},borders:function(){return r.ZP},bottom:function(){return N},boxSizing:function(){return U.ix},breakpoints:function(){return l.ZP},color:function(){return A.$_},colorChannel:function(){return nB.n8},columnGap:function(){return j.e$},compose:function(){return c.Z},containerClasses:function(){return nR},createBox:function(){return nu.Z},createBreakpoints:function(){return nf.Z},createContainer:function(){return nA.Z},createGrid:function(){return n$.createGrid},createSpacing:function(){return nh.Z},createStack:function(){return nH.createStack},createStyled:function(){return np.ZP},createTheme:function(){return nm.Z},createUnarySpacing:function(){return _.hB},createUnaryUnit:function(){return _.eI},css:function(){return a.css},darken:function(){return nB._j},decomposeColor:function(){return nB.tB},display:function(){return b},emphasize:function(){return nB._4},experimental_sx:function(){return nU},flex:function(){return S},flexBasis:function(){return x},flexDirection:function(){return y},flexGrow:function(){return Z},flexShrink:function(){return D},flexWrap:function(){return v},flexbox:function(){return z},fontFamily:function(){return L},fontSize:function(){return G},fontStyle:function(){return O},fontWeight:function(){return W},gap:function(){return j.SG},getContainerUtilityClass:function(){return nT},getContrastRatio:function(){return nB.mi},getGridUtilityClass:function(){return n$.getGridUtilityClass},getLuminance:function(){return nB.H3},getPath:function(){return d.DW},getStackUtilityClass:function(){return nH.getStackUtilityClass},getStyleFromPropValue:function(){return _.zO},getStyleValue:function(){return d.Jq},getThemeProps:function(){return ny.Z},getValue:function(){return _.NA},grid:function(){return j.ZP},gridArea:function(){return j.fD},gridAutoColumns:function(){return j.aN},gridAutoFlow:function(){return j.B},gridAutoRows:function(){return j.FW},gridClasses:function(){return n$.gridClasses},gridColumn:function(){return j.t4},gridRow:function(){return j.oI},gridTemplateAreas:function(){return j.zI},gridTemplateColumns:function(){return j.K$},gridTemplateRows:function(){return j.RG},handleBreakpoints:function(){return l.k9},height:function(){return U.Cb},hexToRgb:function(){return nB.oo},hslToRgb:function(){return nB.ve},justifyContent:function(){return k},justifyItems:function(){return P},justifySelf:function(){return M},keyframes:function(){return a.keyframes},left:function(){return $},letterSpacing:function(){return q},lighten:function(){return nB.$n},lineHeight:function(){return Q},margin:function(){return _.e6},marginKeys:function(){return _.hU},maxHeight:function(){return U.kC},maxWidth:function(){return U.kk},mergeBreakpointsInOrder:function(){return l.dt},minHeight:function(){return U.jw},minWidth:function(){return U.ih},order:function(){return w},outline:function(){return r.Kl},outlineColor:function(){return r.dx},padding:function(){return _.o3},paddingKeys:function(){return _.Jj},palette:function(){return A.ZP},paletteTransform:function(){return A.Sh},position:function(){return I},positions:function(){return V},private_safeAlpha:function(){return nB.zp},private_safeColorChannel:function(){return nB.LR},private_safeDarken:function(){return nB.q8},private_safeEmphasize:function(){return nB.fk},private_safeLighten:function(){return nB.ux},recomposeColor:function(){return nB.wy},responsivePropType:function(){return nj},rgbToHex:function(){return nB.vq},right:function(){return R},rowGap:function(){return j.s2},shadows:function(){return H},shape:function(){return nb.Z},shouldForwardProp:function(){return np.x9},sizeHeight:function(){return U.Vs},sizeWidth:function(){return U.lO},sizing:function(){return U.ZP},sizingTransform:function(){return U.EB},spacing:function(){return _.ZP},stackClasses:function(){return nH.stackClasses},style:function(){return d.ZP},styled:function(){return ng.default},systemDefaultTheme:function(){return np.P_},textAlign:function(){return J},textTransform:function(){return K},top:function(){return T},typography:function(){return Y},typographyVariant:function(){return X},unstable_createCssVarsProvider:function(){return nw.Z},unstable_createCssVarsTheme:function(){return nz},unstable_createGetCssVar:function(){return nS.Z},unstable_createStyleFunctionSx:function(){return nn.n},unstable_cssVarsParser:function(){return nZ.ZP},unstable_defaultSxConfig:function(){return nt.Z},unstable_extendSxProp:function(){return ne.Z},unstable_getThemeValue:function(){return nc},unstable_prepareCssVars:function(){return nD.Z},unstable_resolveBreakpointValues:function(){return l.P$},unstable_styleFunctionSx:function(){return nn.Z},unstable_traverseBreakpoints:function(){return n$.unstable_traverseBreakpoints},useTheme:function(){return nv.Z},useThemeProps:function(){return nx.Z},useThemeWithoutDefault:function(){return nk.Z},width:function(){return U.bf},zIndex:function(){return E}});var o=t(704826),a=t(910043),i=t(523166),s=t(519404),r=t(848925),l=t(559658),c=t(698902),d=t(129143),u=(0,d.ZP)({prop:"displayPrint",cssProperty:!1,transform:function(n){return{"@media print":{display:n}}}}),p=(0,d.ZP)({prop:"display"}),g=(0,d.ZP)({prop:"overflow"}),m=(0,d.ZP)({prop:"textOverflow"}),f=(0,d.ZP)({prop:"visibility"}),h=(0,d.ZP)({prop:"whiteSpace"}),b=(0,c.Z)(u,p,g,m,f,h),x=(0,d.ZP)({prop:"flexBasis"}),y=(0,d.ZP)({prop:"flexDirection"}),v=(0,d.ZP)({prop:"flexWrap"}),k=(0,d.ZP)({prop:"justifyContent"}),B=(0,d.ZP)({prop:"alignItems"}),C=(0,d.ZP)({prop:"alignContent"}),w=(0,d.ZP)({prop:"order"}),S=(0,d.ZP)({prop:"flex"}),Z=(0,d.ZP)({prop:"flexGrow"}),D=(0,d.ZP)({prop:"flexShrink"}),F=(0,d.ZP)({prop:"alignSelf"}),P=(0,d.ZP)({prop:"justifyItems"}),M=(0,d.ZP)({prop:"justifySelf"}),z=(0,c.Z)(x,y,v,k,B,C,w,S,Z,D,F,P,M),j=t(307468),A=t(160176),I=(0,d.ZP)({prop:"position"}),E=(0,d.ZP)({prop:"zIndex",themeKey:"zIndex"}),T=(0,d.ZP)({prop:"top"}),R=(0,d.ZP)({prop:"right"}),N=(0,d.ZP)({prop:"bottom"}),$=(0,d.ZP)({prop:"left"}),V=(0,c.Z)(I,E,T,R,N,$),H=(0,d.ZP)({prop:"boxShadow",themeKey:"shadows"}),U=t(772352),_=t(17226),L=(0,d.ZP)({prop:"fontFamily",themeKey:"typography"}),G=(0,d.ZP)({prop:"fontSize",themeKey:"typography"}),O=(0,d.ZP)({prop:"fontStyle",themeKey:"typography"}),W=(0,d.ZP)({prop:"fontWeight",themeKey:"typography"}),q=(0,d.ZP)({prop:"letterSpacing"}),K=(0,d.ZP)({prop:"textTransform"}),Q=(0,d.ZP)({prop:"lineHeight"}),J=(0,d.ZP)({prop:"textAlign"}),X=(0,d.ZP)({prop:"typography",cssProperty:!1,themeKey:"typography"}),Y=(0,c.Z)(X,L,G,O,W,q,Q,J,K),nn=t(702992),ne=t(361056),nt=t(516144),no=t(957379),na=t(696138),ni=t.n(na),ns={borders:r.ZP.filterProps,display:b.filterProps,flexbox:z.filterProps,grid:j.ZP.filterProps,positions:V.filterProps,palette:A.ZP.filterProps,shadows:H.filterProps,sizing:U.ZP.filterProps,spacing:_.ZP.filterProps,typography:Y.filterProps},nr={borders:r.ZP,display:b,flexbox:z,grid:j.ZP,positions:V,palette:A.ZP,shadows:H,sizing:U.ZP,spacing:_.ZP,typography:Y},nl=ni()(ns).reduce(function(n,e){return ns[e].forEach(function(t){n[t]=nr[e]}),n},{}),nc=function(n,e,t){var o,a=(o={},(0,no.Z)(o,n,e),(0,no.Z)(o,"theme",t),o),i=nl[n];return i?i(a):(0,no.Z)({},n,e)},nd=t(530951),nu=t(774018),np=t(178849),ng=t(123184),nm=t(63304),nf=t(847411),nh=t(999938),nb=t(999060),nx=t(689422),ny=t(183619),nv=t(486925),nk=t(756015),nB=t(441473),nC=t(847043),nw=t(94907),nS=t(297063),nZ=t(377049),nD=t(129754),nF=t(295649),nP=t(481936),nM=["cssVarPrefix","shouldSkipGeneratingVar"],nz=function(n){var e=n.cssVarPrefix,t=n.shouldSkipGeneratingVar,o=(0,nP.Z)(n,nM);return(0,nF.Z)((0,nF.Z)({},n),(0,nD.Z)(o,{prefix:e,shouldSkipGeneratingVar:t}))},nj={},nA=t(338880),nI=t(533813),nE=t(233423);function nT(n){return(0,nE.Z)("MuiContainer",n)}var nR=(0,t(12357).Z)("MuiContainer",["root","disableGutters","fixed","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl"]),nN=t(830298),n$=t(475410),nV=t(764560),nH=t(277490);function nU(){throw Error((0,o.Z)(20))}},784472:function(n,e,t){var o=t(573203);Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var a=o(t(122268)),i=t(824246),s=(0,a.default)((0,i.jsx)("path",{d:"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"}),"Add");e.default=s},388339:function(n,e,t){var o=t(573203);Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var a=o(t(122268)),i=t(824246),s=(0,a.default)((0,i.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-2zM7 9h10c.55 0 1 .45 1 1s-.45 1-1 1H7c-.55 0-1-.45-1-1s.45-1 1-1zm6 5H7c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1s-.45 1-1 1zm4-6H7c-.55 0-1-.45-1-1s.45-1 1-1h10c.55 0 1 .45 1 1s-.45 1-1 1z"}),"ChatRounded");e.default=s},382665:function(n,e,t){var o=t(573203);Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var a=o(t(122268)),i=t(824246),s=(0,a.default)((0,i.jsx)("path",{d:"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"}),"Mail");e.default=s},39437:function(n,e,t){var o=t(573203);Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var a=o(t(122268)),i=t(824246),s=(0,a.default)((0,i.jsx)("path",{d:"M19 13H5v-2h14v2z"}),"Remove");e.default=s}}]);</pre></body></html>