@quietmind/mdx-docs 0.1.18 → 0.1.20

package/README.md

@@ -1,5 +1,9 @@
 # @quietmind/mdx-docs
 
+<a href="https://www.producthunt.com/posts/mdx-docs">
+  <img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1095911&theme=dark" height="32" />
+</a>
+
 > ⚡ A lightweight React framework for building MDX documentation sites.
 
 MDX Docs turns MDX files into routed documentation pages with a built-in layout, sidebar, and navigation.
@@ -70,6 +74,14 @@ export const site = {
 };
 ```
 
+## Writing MDX
+
+MDX files are JSX, not HTML. A few things to keep in mind:
+
+- **Inline styles must be objects**, not strings — `style={{ marginRight: '0.5rem' }}` not `style="margin-right: 0.5rem"`. A CSS string will cause a runtime error due to Emotion's JSX transform.
+- Use `className` instead of `class`.
+- Self-close void elements: `<img />`, `<br />`, `<hr />`.
+
 ## Favicon
 
 Place your favicon in the `public/` directory and add a `<link>` tag to `index.html`:

package/dist/assets/Avatar-BJ0S7JKg.js

@@ -0,0 +1 @@
+import{j as u,r as y}from"./react-vendor-BVjvCnQb.js";import{c as M}from"./prism-DjoQ0BfU.js";import{c as N,g as T,a as z,u as U,b as v,e as E,s as b,m as q}from"./index-C5FzG5L5.js";const L=N(u.jsx("path",{d:"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"}));function B(o){return T("MuiAvatar",o)}z("MuiAvatar",["root","colorDefault","circular","rounded","square","img","fallback"]);const H=o=>{const{classes:t,variant:a,colorDefault:r}=o;return E({root:["root",a,r&&"colorDefault"],img:["img"],fallback:["fallback"]},B,t)},G=b("div",{name:"MuiAvatar",slot:"Root",overridesResolver:(o,t)=>{const{ownerState:a}=o;return[t.root,t[a.variant],a.colorDefault&&t.colorDefault]}})(q(({theme:o})=>({position:"relative",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,width:40,height:40,fontFamily:o.typography.fontFamily,fontSize:o.typography.pxToRem(20),lineHeight:1,borderRadius:"50%",overflow:"hidden",userSelect:"none",variants:[{props:{variant:"rounded"},style:{borderRadius:(o.vars||o).shape.borderRadius}},{props:{variant:"square"},style:{borderRadius:0}},{props:{colorDefault:!0},style:{color:(o.vars||o).palette.background.default,...o.vars?{backgroundColor:o.vars.palette.Avatar.defaultBg}:{backgroundColor:o.palette.grey[400],...o.applyStyles("dark",{backgroundColor:o.palette.grey[600]})}}}]}))),J=b("img",{name:"MuiAvatar",slot:"Img"})({width:"100%",height:"100%",textAlign:"center",objectFit:"cover",color:"transparent",textIndent:1e4}),K=b(L,{name:"MuiAvatar",slot:"Fallback"})({width:"75%",height:"75%"});function O({crossOrigin:o,referrerPolicy:t,src:a,srcSet:r}){const[n,s]=y.useState(!1);return y.useEffect(()=>{if(!a&&!r)return;s(!1);let c=!0;const e=new Image;return e.onload=()=>{c&&s("loaded")},e.onerror=()=>{c&&s("error")},e.crossOrigin=o,e.referrerPolicy=t,e.src=a,r&&(e.srcset=r),()=>{c=!1}},[o,t,a,r]),n}const X=y.forwardRef(function(t,a){const r=U({props:t,name:"MuiAvatar"}),{alt:n,children:s,className:c,component:e="div",slots:p={},slotProps:i={},imgProps:x,sizes:A,src:f,srcSet:g,variant:P="circular",...S}=r;let d=null;const l={...r,component:e,variant:P},w=O({...x,...typeof i.img=="function"?i.img(l):i.img,src:f,srcSet:g}),h=f||g,k=h&&w!=="error";l.colorDefault=!k,delete l.ownerState;const m=H(l),[F,R]=v("root",{ref:a,className:M(m.root,c),elementType:G,externalForwardedProps:{slots:p,slotProps:i,component:e,...S},ownerState:l}),[C,I]=v("img",{className:m.img,elementType:J,externalForwardedProps:{slots:p,slotProps:{img:{...x,...i.img}}},additionalProps:{alt:n,src:f,srcSet:g,sizes:A},ownerState:l}),[j,D]=v("fallback",{className:m.fallback,elementType:K,externalForwardedProps:{slots:p,slotProps:i},shouldForwardComponentProp:!0,ownerState:l});return k?d=u.jsx(C,{...I}):s||s===0?d=s:h&&n?d=n[0]:d=u.jsx(j,{...D}),u.jsx(F,{...R,children:d})});export{X as A};

package/dist/assets/Button-BXcSdEL6.js

@@ -0,0 +1 @@
+import{r as v,j as s}from"./react-vendor-BVjvCnQb.js";import{c as W}from"./prism-DjoQ0BfU.js";import{g as G,a as D,r as H,u as A,h as q,d as i,e as J,s as x,i as K,j as Q,m as X,C as Y,f as Z}from"./index-C5FzG5L5.js";function _(o){return G("MuiButton",o)}const d=D("MuiButton",["root","text","textInherit","textPrimary","textSecondary","textSuccess","textError","textInfo","textWarning","outlined","outlinedInherit","outlinedPrimary","outlinedSecondary","outlinedSuccess","outlinedError","outlinedInfo","outlinedWarning","contained","containedInherit","containedPrimary","containedSecondary","containedSuccess","containedError","containedInfo","containedWarning","disableElevation","focusVisible","disabled","colorInherit","colorPrimary","colorSecondary","colorSuccess","colorError","colorInfo","colorWarning","textSizeSmall","textSizeMedium","textSizeLarge","outlinedSizeSmall","outlinedSizeMedium","outlinedSizeLarge","containedSizeSmall","containedSizeMedium","containedSizeLarge","sizeMedium","sizeSmall","sizeLarge","fullWidth","startIcon","endIcon","icon","iconSizeSmall","iconSizeMedium","iconSizeLarge","loading","loadingWrapper","loadingIconPlaceholder","loadingIndicator","loadingPositionCenter","loadingPositionStart","loadingPositionEnd"]),oo=v.createContext({}),ao=v.createContext(void 0),to=o=>{const{color:a,disableElevation:t,fullWidth:n,size:c,variant:p,loading:u,loadingPosition:S,classes:y}=o,b={root:["root",u&&"loading",p,`${p}${i(a)}`,`size${i(c)}`,`${p}Size${i(c)}`,`color${i(a)}`,t&&"disableElevation",n&&"fullWidth",u&&`loadingPosition${i(S)}`],startIcon:["icon","startIcon",`iconSize${i(c)}`],endIcon:["icon","endIcon",`iconSize${i(c)}`],loadingIndicator:["loadingIndicator"],loadingWrapper:["loadingWrapper"]},f=J(b,_,y);return{...y,...f}},m=[{props:{size:"small"},style:{"& > *:nth-of-type(1)":{fontSize:18}}},{props:{size:"medium"},style:{"& > *:nth-of-type(1)":{fontSize:20}}},{props:{size:"large"},style:{"& > *:nth-of-type(1)":{fontSize:22}}}],no=x(K,{shouldForwardProp:o=>Q(o)||o==="classes",name:"MuiButton",slot:"Root",overridesResolver:(o,a)=>{const{ownerState:t}=o;return[a.root,a[t.variant],a[`${t.variant}${i(t.color)}`],a[`size${i(t.size)}`],a[`${t.variant}Size${i(t.size)}`],t.color==="inherit"&&a.colorInherit,t.disableElevation&&a.disableElevation,t.fullWidth&&a.fullWidth,t.loading&&a.loading]}})(X(({theme:o})=>{const a=o.palette.mode==="light"?o.palette.grey[300]:o.palette.grey[800],t=o.palette.mode==="light"?o.palette.grey.A100:o.palette.grey[700];return{...o.typography.button,minWidth:64,padding:"6px 16px",border:0,borderRadius:(o.vars||o).shape.borderRadius,transition:o.transitions.create(["background-color","box-shadow","border-color","color"],{duration:o.transitions.duration.short}),"&:hover":{textDecoration:"none"},[`&.${d.disabled}`]:{color:(o.vars||o).palette.action.disabled},variants:[{props:{variant:"contained"},style:{color:"var(--variant-containedColor)",backgroundColor:"var(--variant-containedBg)",boxShadow:(o.vars||o).shadows[2],"&:hover":{boxShadow:(o.vars||o).shadows[4],"@media (hover: none)":{boxShadow:(o.vars||o).shadows[2]}},"&:active":{boxShadow:(o.vars||o).shadows[8]},[`&.${d.focusVisible}`]:{boxShadow:(o.vars||o).shadows[6]},[`&.${d.disabled}`]:{color:(o.vars||o).palette.action.disabled,boxShadow:(o.vars||o).shadows[0],backgroundColor:(o.vars||o).palette.action.disabledBackground}}},{props:{variant:"outlined"},style:{padding:"5px 15px",border:"1px solid currentColor",borderColor:"var(--variant-outlinedBorder, currentColor)",backgroundColor:"var(--variant-outlinedBg)",color:"var(--variant-outlinedColor)",[`&.${d.disabled}`]:{border:`1px solid ${(o.vars||o).palette.action.disabledBackground}`}}},{props:{variant:"text"},style:{padding:"6px 8px",color:"var(--variant-textColor)",backgroundColor:"var(--variant-textBg)"}},...Object.entries(o.palette).filter(Z()).map(([n])=>({props:{color:n},style:{"--variant-textColor":(o.vars||o).palette[n].main,"--variant-outlinedColor":(o.vars||o).palette[n].main,"--variant-outlinedBorder":o.alpha((o.vars||o).palette[n].main,.5),"--variant-containedColor":(o.vars||o).palette[n].contrastText,"--variant-containedBg":(o.vars||o).palette[n].main,"@media (hover: hover)":{"&:hover":{"--variant-containedBg":(o.vars||o).palette[n].dark,"--variant-textBg":o.alpha((o.vars||o).palette[n].main,(o.vars||o).palette.action.hoverOpacity),"--variant-outlinedBorder":(o.vars||o).palette[n].main,"--variant-outlinedBg":o.alpha((o.vars||o).palette[n].main,(o.vars||o).palette.action.hoverOpacity)}}}})),{props:{color:"inherit"},style:{color:"inherit",borderColor:"currentColor","--variant-containedBg":o.vars?o.vars.palette.Button.inheritContainedBg:a,"@media (hover: hover)":{"&:hover":{"--variant-containedBg":o.vars?o.vars.palette.Button.inheritContainedHoverBg:t,"--variant-textBg":o.alpha((o.vars||o).palette.text.primary,(o.vars||o).palette.action.hoverOpacity),"--variant-outlinedBg":o.alpha((o.vars||o).palette.text.primary,(o.vars||o).palette.action.hoverOpacity)}}}},{props:{size:"small",variant:"text"},style:{padding:"4px 5px",fontSize:o.typography.pxToRem(13)}},{props:{size:"large",variant:"text"},style:{padding:"8px 11px",fontSize:o.typography.pxToRem(15)}},{props:{size:"small",variant:"outlined"},style:{padding:"3px 9px",fontSize:o.typography.pxToRem(13)}},{props:{size:"large",variant:"outlined"},style:{padding:"7px 21px",fontSize:o.typography.pxToRem(15)}},{props:{size:"small",variant:"contained"},style:{padding:"4px 10px",fontSize:o.typography.pxToRem(13)}},{props:{size:"large",variant:"contained"},style:{padding:"8px 22px",fontSize:o.typography.pxToRem(15)}},{props:{disableElevation:!0},style:{boxShadow:"none","&:hover":{boxShadow:"none"},[`&.${d.focusVisible}`]:{boxShadow:"none"},"&:active":{boxShadow:"none"},[`&.${d.disabled}`]:{boxShadow:"none"}}},{props:{fullWidth:!0},style:{width:"100%"}},{props:{loadingPosition:"center"},style:{transition:o.transitions.create(["background-color","box-shadow","border-color"],{duration:o.transitions.duration.short}),[`&.${d.loading}`]:{color:"transparent"}}}]}})),io=x("span",{name:"MuiButton",slot:"StartIcon",overridesResolver:(o,a)=>{const{ownerState:t}=o;return[a.startIcon,t.loading&&a.startIconLoadingStart,a[`iconSize${i(t.size)}`]]}})(({theme:o})=>({display:"inherit",marginRight:8,marginLeft:-4,variants:[{props:{size:"small"},style:{marginLeft:-2}},{props:{loadingPosition:"start",loading:!0},style:{transition:o.transitions.create(["opacity"],{duration:o.transitions.duration.short}),opacity:0}},{props:{loadingPosition:"start",loading:!0,fullWidth:!0},style:{marginRight:-8}},...m]})),ro=x("span",{name:"MuiButton",slot:"EndIcon",overridesResolver:(o,a)=>{const{ownerState:t}=o;return[a.endIcon,t.loading&&a.endIconLoadingEnd,a[`iconSize${i(t.size)}`]]}})(({theme:o})=>({display:"inherit",marginRight:-4,marginLeft:8,variants:[{props:{size:"small"},style:{marginRight:-2}},{props:{loadingPosition:"end",loading:!0},style:{transition:o.transitions.create(["opacity"],{duration:o.transitions.duration.short}),opacity:0}},{props:{loadingPosition:"end",loading:!0,fullWidth:!0},style:{marginLeft:-8}},...m]})),so=x("span",{name:"MuiButton",slot:"LoadingIndicator"})(({theme:o})=>({display:"none",position:"absolute",visibility:"visible",variants:[{props:{loading:!0},style:{display:"flex"}},{props:{loadingPosition:"start"},style:{left:14}},{props:{loadingPosition:"start",size:"small"},style:{left:10}},{props:{variant:"text",loadingPosition:"start"},style:{left:6}},{props:{loadingPosition:"center"},style:{left:"50%",transform:"translate(-50%)",color:(o.vars||o).palette.action.disabled}},{props:{loadingPosition:"end"},style:{right:14}},{props:{loadingPosition:"end",size:"small"},style:{right:10}},{props:{variant:"text",loadingPosition:"end"},style:{right:6}},{props:{loadingPosition:"start",fullWidth:!0},style:{position:"relative",left:-10}},{props:{loadingPosition:"end",fullWidth:!0},style:{position:"relative",right:-10}}]})),E=x("span",{name:"MuiButton",slot:"LoadingIconPlaceholder"})({display:"inline-block",width:"1em",height:"1em"}),po=v.forwardRef(function(a,t){const n=v.useContext(oo),c=v.useContext(ao),p=H(n,a),u=A({props:p,name:"MuiButton"}),{children:S,color:y="primary",component:b="button",className:f,disabled:z=!1,disableElevation:L=!1,disableFocusRipple:I=!1,endIcon:B,focusVisibleClassName:M,fullWidth:N=!1,id:C,loading:e=null,loadingIndicator:j,loadingPosition:g="center",size:k="medium",startIcon:P,type:h,variant:T="text",...V}=u,w=q(C),$=j??s.jsx(Y,{"aria-labelledby":w,color:"inherit",size:16}),l={...u,color:y,component:b,disabled:z,disableElevation:L,disableFocusRipple:I,fullWidth:N,loading:e,loadingIndicator:$,loadingPosition:g,size:k,type:h,variant:T},r=to(l),O=(P||e&&g==="start")&&s.jsx(io,{className:r.startIcon,ownerState:l,children:P||s.jsx(E,{className:r.loadingIconPlaceholder,ownerState:l})}),F=(B||e&&g==="end")&&s.jsx(ro,{className:r.endIcon,ownerState:l,children:B||s.jsx(E,{className:r.loadingIconPlaceholder,ownerState:l})}),U=c||"",R=typeof e=="boolean"?s.jsx("span",{className:r.loadingWrapper,style:{display:"contents"},children:e&&s.jsx(so,{className:r.loadingIndicator,ownerState:l,children:$})}):null;return s.jsxs(no,{ownerState:l,className:W(n.className,r.root,f,U),component:b,disabled:z||e,focusRipple:!I,focusVisibleClassName:W(r.focusVisible,M),ref:t,type:h,id:e?w:C,...V,classes:r,children:[O,g!=="end"&&R,S,g==="end"&&R,F]})});export{po as B};

package/dist/assets/Favorite-DeeoxvxH.js

@@ -0,0 +1 @@
+import{j as o}from"./react-vendor-BVjvCnQb.js";import{c as t}from"./index-C5FzG5L5.js";const s=t(o.jsx("path",{d:"m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"}));export{s as F};

package/dist/assets/advanced-D_Pa36Nk.js

@@ -0,0 +1,38 @@
+import{n as t,o as n,p as r,F as c}from"./react-vendor-BVjvCnQb.js";function d(o){const e={blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...t(),...o.components};return r(c,{children:[n(e.h1,{children:"Advanced"}),`
+`,r(e.p,{children:["By default, ",n(e.code,{children:"createApp()"})," renders a full docs site with a top bar and side navigation. For cases where you want to bring your own shell — or embed the content area inside an existing layout — you can use ",n(e.code,{children:"DocsProvider"})," and ",n(e.code,{children:"MDXContent"})," directly."]}),`
+`,n(e.h2,{children:"DocsProvider"}),`
+`,r(e.p,{children:[n(e.code,{children:"DocsProvider"})," is the React context provider that makes your pages and site config available to all mdx-docs components. It must wrap anything that uses ",n(e.code,{children:"MDXContent"}),"."]}),`
+`,n(e.pre,{children:n(e.code,{className:"language-jsx",children:`import { DocsProvider } from '@quietmind/mdx-docs'
+`})}),`
+`,r(e.table,{children:[n(e.thead,{children:r(e.tr,{children:[n(e.th,{children:"Prop"}),n(e.th,{children:"Type"}),n(e.th,{children:"Required"}),n(e.th,{children:"Description"})]})}),r(e.tbody,{children:[r(e.tr,{children:[n(e.td,{children:n(e.code,{children:"pages"})}),n(e.td,{children:n(e.code,{children:"Page[]"})}),n(e.td,{children:"Yes"}),r(e.td,{children:["Array of page objects (same shape as ",n(e.code,{children:"createApp"}),")"]})]}),r(e.tr,{children:[n(e.td,{children:n(e.code,{children:"site"})}),n(e.td,{children:n(e.code,{children:"object"})}),n(e.td,{children:"Yes"}),r(e.td,{children:["Site config with ",n(e.code,{children:"name"})," and ",n(e.code,{children:"description"})]})]}),r(e.tr,{children:[n(e.td,{children:n(e.code,{children:"hideHomeFromNav"})}),n(e.td,{children:n(e.code,{children:"boolean"})}),n(e.td,{children:"No"}),r(e.td,{children:["Hide the home route from navigation (default: ",n(e.code,{children:"false"}),")"]})]})]})]}),`
+`,n(e.h2,{children:"MDXContent"}),`
+`,r(e.p,{children:[n(e.code,{children:"MDXContent"})," renders the routed MDX content area. It reads ",n(e.code,{children:"pages"})," from the nearest ",n(e.code,{children:"DocsProvider"})," and sets up React Router ",n(e.code,{children:"<Routes>"})," for each page. It must be rendered inside both a ",n(e.code,{children:"DocsProvider"})," and a React Router context."]}),`
+`,n(e.pre,{children:n(e.code,{className:"language-jsx",children:`import { MDXContent } from '@quietmind/mdx-docs'
+`})}),`
+`,r(e.p,{children:[n(e.code,{children:"MDXContent"})," takes no props."]}),`
+`,n(e.h2,{children:"Custom layout example"}),`
+`,n(e.p,{children:"Use these two components together to render just the content area inside your own layout:"}),`
+`,n(e.pre,{children:n(e.code,{className:"language-jsx",children:`import { BrowserRouter } from 'react-router-dom'
+import { DocsProvider, MDXContent } from '@quietmind/mdx-docs'
+import '@quietmind/mdx-docs/index.css'
+
+import pages from './config/pages'
+import site from './config/site'
+
+export default function App() {
+  return (
+    <DocsProvider pages={pages} site={site}>
+      <BrowserRouter>
+        <MyTopBar />
+        <MySideNav />
+        <main>
+          <MDXContent />
+        </main>
+      </BrowserRouter>
+    </DocsProvider>
+  )
+}
+`})}),`
+`,r(e.blockquote,{children:[`
+`,r(e.p,{children:[n(e.code,{children:"MDXContent"})," does not include any MUI ",n(e.code,{children:"ThemeProvider"}),". If you are using MUI components in your own layout or MDX pages, wrap the tree in a ",n(e.code,{children:"ThemeProvider"})," before rendering ",n(e.code,{children:"MDXContent"}),"."]}),`
+`]})]})}function a(o={}){const{wrapper:e}={...t(),...o.components};return e?n(e,{...o,children:n(d,{...o})}):d(o)}export{a as default};

package/dist/assets/alert-a7rj56bx.js

@@ -0,0 +1,191 @@
+import{j as l,r as C,n as B,o as e,p as i,F as ie}from"./react-vendor-BVjvCnQb.js";import{g as R,a as U,c as p,u as W,b as h,I as $,d as b,e as L,s as f,P as se,m as E,f as T,T as le,B as g}from"./index-C5FzG5L5.js";import{c as O}from"./prism-DjoQ0BfU.js";import"./router-d4Dt6g8h.js";function ae(r){return R("MuiAlert",r)}const N=U("MuiAlert",["root","action","icon","message","filled","colorSuccess","colorInfo","colorWarning","colorError","filledSuccess","filledInfo","filledWarning","filledError","outlined","outlinedSuccess","outlinedInfo","outlinedWarning","outlinedError","standard","standardSuccess","standardInfo","standardWarning","standardError"]),oe=p(l.jsx("path",{d:"M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"})),ce=p(l.jsx("path",{d:"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"})),de=p(l.jsx("path",{d:"M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"})),he=p(l.jsx("path",{d:"M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z"})),pe=p(l.jsx("path",{d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"})),ue=r=>{const{variant:n,color:a,severity:t,classes:o}=r,u={root:["root",`color${b(a||t)}`,`${n}${b(a||t)}`,`${n}`],icon:["icon"],message:["message"],action:["action"]};return L(u,ae,o)},ge=f(se,{name:"MuiAlert",slot:"Root",overridesResolver:(r,n)=>{const{ownerState:a}=r;return[n.root,n[a.variant],n[`${a.variant}${b(a.color||a.severity)}`]]}})(E(({theme:r})=>{const n=r.palette.mode==="light"?r.darken:r.lighten,a=r.palette.mode==="light"?r.lighten:r.darken;return{...r.typography.body2,backgroundColor:"transparent",display:"flex",padding:"6px 16px",variants:[...Object.entries(r.palette).filter(T(["light"])).map(([t])=>({props:{colorSeverity:t,variant:"standard"},style:{color:r.vars?r.vars.palette.Alert[`${t}Color`]:n(r.palette[t].light,.6),backgroundColor:r.vars?r.vars.palette.Alert[`${t}StandardBg`]:a(r.palette[t].light,.9),[`& .${N.icon}`]:r.vars?{color:r.vars.palette.Alert[`${t}IconColor`]}:{color:r.palette[t].main}}})),...Object.entries(r.palette).filter(T(["light"])).map(([t])=>({props:{colorSeverity:t,variant:"outlined"},style:{color:r.vars?r.vars.palette.Alert[`${t}Color`]:n(r.palette[t].light,.6),border:`1px solid ${(r.vars||r).palette[t].light}`,[`& .${N.icon}`]:r.vars?{color:r.vars.palette.Alert[`${t}IconColor`]}:{color:r.palette[t].main}}})),...Object.entries(r.palette).filter(T(["dark"])).map(([t])=>({props:{colorSeverity:t,variant:"filled"},style:{fontWeight:r.typography.fontWeightMedium,...r.vars?{color:r.vars.palette.Alert[`${t}FilledColor`],backgroundColor:r.vars.palette.Alert[`${t}FilledBg`]}:{backgroundColor:r.palette.mode==="dark"?r.palette[t].dark:r.palette[t].main,color:r.palette.getContrastText(r.palette[t].main)}}}))]}})),fe=f("div",{name:"MuiAlert",slot:"Icon"})({marginRight:12,padding:"7px 0",display:"flex",fontSize:22,opacity:.9}),me=f("div",{name:"MuiAlert",slot:"Message"})({padding:"8px 0",minWidth:0,overflow:"auto"}),ve=f("div",{name:"MuiAlert",slot:"Action"})({display:"flex",alignItems:"flex-start",padding:"4px 0 0 16px",marginLeft:"auto",marginRight:-8}),P={success:l.jsx(oe,{fontSize:"inherit"}),warning:l.jsx(ce,{fontSize:"inherit"}),error:l.jsx(de,{fontSize:"inherit"}),info:l.jsx(he,{fontSize:"inherit"})},s=C.forwardRef(function(n,a){const t=W({props:n,name:"MuiAlert"}),{action:o,children:u,className:m,closeText:v="Close",color:w,components:k={},componentsProps:D={},icon:S,iconMapping:F=P,onClose:M,role:V="alert",severity:A="success",slotProps:H={},slots:X={},variant:q="standard",...K}=t,c={...t,color:w,severity:A,variant:q,colorSeverity:w||A},y=ue(c),d={slots:{closeButton:k.CloseButton,closeIcon:k.CloseIcon,...X},slotProps:{...D,...H}},[Y,Z]=h("root",{ref:a,shouldForwardComponentProp:!0,className:O(y.root,m),elementType:ge,externalForwardedProps:{...d,...K},ownerState:c,additionalProps:{role:V,elevation:0}}),[_,G]=h("icon",{className:y.icon,elementType:fe,externalForwardedProps:d,ownerState:c}),[J,Q]=h("message",{className:y.message,elementType:me,externalForwardedProps:d,ownerState:c}),[j,I]=h("action",{className:y.action,elementType:ve,externalForwardedProps:d,ownerState:c}),[ee,ne]=h("closeButton",{elementType:$,externalForwardedProps:d,ownerState:c}),[re,te]=h("closeIcon",{elementType:pe,externalForwardedProps:d,ownerState:c});return l.jsxs(Y,{...Z,children:[S!==!1?l.jsx(_,{...G,children:S||F[A]||P[A]}):null,l.jsx(J,{...Q,children:u}),o!=null?l.jsx(j,{...I,children:o}):null,o==null&&M?l.jsx(j,{...I,children:l.jsx(ee,{size:"small","aria-label":v,title:v,color:"inherit",onClick:M,...ne,children:l.jsx(re,{fontSize:"small",...te})})}):null]})});function Ae(r){return R("MuiAlertTitle",r)}U("MuiAlertTitle",["root"]);const ye=r=>{const{classes:n}=r;return L({root:["root"]},Ae,n)},xe=f(le,{name:"MuiAlertTitle",slot:"Root"})(E(({theme:r})=>({fontWeight:r.typography.fontWeightMedium,marginTop:-2}))),x=C.forwardRef(function(n,a){const t=W({props:n,name:"MuiAlertTitle"}),{className:o,...u}=t,m=t,v=ye(m);return l.jsx(xe,{gutterBottom:!0,component:"div",ownerState:m,ref:a,className:O(v.root,o),...u})}),Te=p(l.jsx("path",{d:"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"})),be=({severity:r,children:n})=>{const[a,t]=C.useState(!0);return a?e(s,{severity:r,action:e($,{"aria-label":"close",color:"inherit",size:"small",onClick:()=>t(!1),children:e(Te,{fontSize:"inherit"})}),children:n}):null};function z(r){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...B(),...r.components};return i(ie,{children:[e(n.h1,{children:"Alert"}),`
+`,i(n.p,{children:["The ",e(n.code,{children:"Alert"})," component displays important messages to users, such as success confirmations, error notifications, warnings, or informational messages. Material UI's Alert component provides a consistent, accessible, and customizable way to communicate feedback to users."]}),`
+`,e(n.p,{children:"Alerts are used to provide contextual feedback about user actions, system status, or important information that requires user attention."}),`
+`,e(n.h2,{children:"Variants"}),`
+`,e(n.p,{children:"Material UI Alerts come in three variants to suit different design needs:"}),`
+`,e(n.h3,{children:"Standard"}),`
+`,e(n.p,{children:"The default variant with a colored background:"}),`
+`,e(s,{severity:"info",children:e("span",{children:"This is an info alert — check it out!"})}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Alert severity="info">
+  <span>This is an info alert — check it out!</span>
+</Alert>
+`})}),`
+`,e(n.h3,{children:"Filled"}),`
+`,e(n.p,{children:"A variant with a solid colored background:"}),`
+`,e(s,{severity:"success",variant:"filled",children:e("span",{children:"This is a filled success alert — check it out!"})}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Alert severity="success" variant="filled">
+  <span>This is a filled success alert — check it out!</span>
+</Alert>
+`})}),`
+`,e(n.h3,{children:"Outlined"}),`
+`,e(n.p,{children:"A variant with an outlined border:"}),`
+`,e(s,{severity:"warning",variant:"outlined",children:e("span",{children:"This is an outlined warning alert — check it out!"})}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Alert severity="warning" variant="outlined">
+  <span>This is an outlined warning alert — check it out!</span>
+</Alert>
+`})}),`
+`,e(n.h2,{children:"Severity Levels"}),`
+`,e(n.p,{children:"Alerts support different severity levels to convey different types of messages:"}),`
+`,e(n.h3,{children:"Success"}),`
+`,e(n.p,{children:"Used to indicate successful operations or positive feedback:"}),`
+`,i(g,{sx:{display:"flex",flexDirection:"column",gap:2},children:[e(s,{severity:"success",children:e("span",{children:"This is a success alert — check it out!"})}),e(s,{severity:"success",variant:"filled",children:e("span",{children:"This is a filled success alert — check it out!"})}),e(s,{severity:"success",variant:"outlined",children:e("span",{children:"This is an outlined success alert — check it out!"})})]}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Alert severity="success">
+  <span>This is a success alert — check it out!</span>
+</Alert>
+`})}),`
+`,e(n.h3,{children:"Error"}),`
+`,e(n.p,{children:"Used to indicate errors or problems that need attention:"}),`
+`,i(g,{sx:{display:"flex",flexDirection:"column",gap:2},children:[e(s,{severity:"error",children:e("span",{children:"This is an error alert — check it out!"})}),e(s,{severity:"error",variant:"filled",children:e("span",{children:"This is a filled error alert — check it out!"})}),e(s,{severity:"error",variant:"outlined",children:e("span",{children:"This is an outlined error alert — check it out!"})})]}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Alert severity="error">
+  <span>This is an error alert — check it out!</span>
+</Alert>
+`})}),`
+`,e(n.h3,{children:"Warning"}),`
+`,e(n.p,{children:"Used to indicate warnings or cautionary information:"}),`
+`,i(g,{sx:{display:"flex",flexDirection:"column",gap:2},children:[e(s,{severity:"warning",children:e("span",{children:"This is a warning alert — check it out!"})}),e(s,{severity:"warning",variant:"filled",children:e("span",{children:"This is a filled warning alert — check it out!"})}),e(s,{severity:"warning",variant:"outlined",children:e("span",{children:"This is an outlined warning alert — check it out!"})})]}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Alert severity="warning">
+  <span>This is a warning alert — check it out!</span>
+</Alert>
+`})}),`
+`,e(n.h3,{children:"Info"}),`
+`,e(n.p,{children:"Used to provide informational messages:"}),`
+`,i(g,{sx:{display:"flex",flexDirection:"column",gap:2},children:[e(s,{severity:"info",children:e("span",{children:"This is an info alert — check it out!"})}),e(s,{severity:"info",variant:"filled",children:e("span",{children:"This is a filled info alert — check it out!"})}),e(s,{severity:"info",variant:"outlined",children:e("span",{children:"This is an outlined info alert — check it out!"})})]}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Alert severity="info">
+  <span>This is an info alert — check it out!</span>
+</Alert>
+`})}),`
+`,e(n.h2,{children:"With Title"}),`
+`,e(n.p,{children:"Alerts can include a title for better organization:"}),`
+`,i(g,{sx:{display:"flex",flexDirection:"column",gap:2},children:[i(s,{severity:"error",children:[e(x,{children:"Error"}),e("span",{children:"This is an error alert with a title — check it out!"})]}),i(s,{severity:"warning",children:[e(x,{children:"Warning"}),e("span",{children:"This is a warning alert with a title — check it out!"})]}),i(s,{severity:"info",children:[e(x,{children:"Info"}),e("span",{children:"This is an info alert with a title — check it out!"})]}),i(s,{severity:"success",children:[e(x,{children:"Success"}),e("span",{children:"This is a success alert with a title — check it out!"})]})]}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Alert severity="error">
+  <AlertTitle>Error</AlertTitle>
+  <span>This is an error alert with a title — check it out!</span>
+</Alert>
+`})}),`
+`,e(n.h2,{children:"Icons"}),`
+`,e(n.h3,{children:"With Icons (Default)"}),`
+`,e(n.p,{children:"By default, alerts display an icon based on their severity:"}),`
+`,e(s,{severity:"success",children:e("span",{children:"This alert has an icon by default"})}),`
+`,e(n.h3,{children:"Without Icons"}),`
+`,e(n.p,{children:"You can hide the icon if needed:"}),`
+`,e(s,{severity:"info",icon:!1,children:e("span",{children:"This alert has no icon"})}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Alert severity="info" icon={false}>
+  <span>This alert has no icon</span>
+</Alert>
+`})}),`
+`,e(n.h2,{children:"Dismissible Alerts"}),`
+`,e(n.p,{children:"Alerts can be made dismissible with a close button:"}),`
+`,e(be,{severity:"info",children:e("span",{children:"This is a dismissible alert — click the X to close it!"})}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`const [open, setOpen] = useState(true);
+
+if (!open) return null;
+
+<Alert
+  severity="info"
+  action={
+    <IconButton
+      aria-label="close"
+      color="inherit"
+      size="small"
+      onClick={() => setOpen(false)}
+    >
+      <Close fontSize="inherit" />
+    </IconButton>
+  }
+>
+  <span>This is a dismissible alert — click the X to close it!</span>
+</Alert>;
+`})}),`
+`,e(n.h2,{children:"Common Props"}),`
+`,e(n.p,{children:"The Alert component accepts various props to customize its appearance and behavior:"}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Alert
+  severity="info" // 'error' | 'info' | 'success' | 'warning'
+  variant="standard" // 'standard' | 'filled' | 'outlined'
+  icon={true} // boolean | ReactNode
+  onClose={handleClose} // function (makes alert dismissible)
+  color="info" // 'error' | 'info' | 'success' | 'warning'
+  action={<Button>Action</Button>} // ReactNode - custom action button
+  sx={{}} // object - custom styles
+>
+  <span>Alert content</span>
+</Alert>
+`})}),`
+`,e(n.h2,{children:"Accessibility"}),`
+`,e(n.p,{children:"Material UI Alerts are built with accessibility in mind:"}),`
+`,i(n.ul,{children:[`
+`,i(n.li,{children:[e(n.strong,{children:"ARIA roles"}),": Proper ARIA roles and attributes for screen readers"]}),`
+`,i(n.li,{children:[e(n.strong,{children:"Color contrast"}),": Meets WCAG guidelines for color contrast ratios"]}),`
+`,i(n.li,{children:[e(n.strong,{children:"Icon indicators"}),": Visual and semantic indicators for different severity levels"]}),`
+`,i(n.li,{children:[e(n.strong,{children:"Keyboard navigation"}),": Full keyboard support for dismissible alerts"]}),`
+`,i(n.li,{children:[e(n.strong,{children:"Focus management"}),": Proper focus handling when alerts appear or disappear"]}),`
+`,i(n.li,{children:[e(n.strong,{children:"Screen reader announcements"}),": Alerts are properly announced to screen readers"]}),`
+`]}),`
+`,e(n.h2,{children:"Best Practices"}),`
+`,i(n.ol,{children:[`
+`,i(n.li,{children:[e(n.strong,{children:"Use appropriate severity levels"})," - Choose the right severity (error, warning, info, success) to match the message importance"]}),`
+`,i(n.li,{children:[e(n.strong,{children:"Keep messages concise"})," - Alert messages should be brief and actionable"]}),`
+`,i(n.li,{children:[e(n.strong,{children:"Use titles for complex messages"})," - Add AlertTitle for longer or more structured messages"]}),`
+`,i(n.li,{children:[e(n.strong,{children:"Make critical alerts dismissible"})," - Allow users to dismiss non-critical alerts"]}),`
+`,i(n.li,{children:[e(n.strong,{children:"Don't overuse alerts"})," - Reserve alerts for important information that requires attention"]}),`
+`,i(n.li,{children:[e(n.strong,{children:"Provide actionable content"})," - Include clear next steps when appropriate"]}),`
+`,i(n.li,{children:[e(n.strong,{children:"Consider placement"})," - Position alerts where users will notice them without being intrusive"]}),`
+`,i(n.li,{children:[e(n.strong,{children:"Use consistent styling"})," - Maintain consistent alert styling throughout your application"]}),`
+`]}),`
+`,e(n.h2,{children:"Examples"}),`
+`,e(n.h3,{children:"Form Validation Error"}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Alert severity="error">
+  <AlertTitle>Validation Error</AlertTitle>
+  <span>Please correct the following errors:</span>
+  <ul>
+    <li>Email is required</li>
+    <li>Password must be at least 8 characters</li>
+  </ul>
+</Alert>
+`})}),`
+`,e(n.h3,{children:"Success Confirmation"}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Alert severity="success" variant="filled">
+  <span>Your changes have been saved successfully!</span>
+</Alert>
+`})}),`
+`,e(n.h3,{children:"Warning Message"}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Alert severity="warning" variant="outlined">
+  <AlertTitle>Warning</AlertTitle>
+  <span>This action cannot be undone. Are you sure you want to continue?</span>
+</Alert>
+`})}),`
+`,e(n.h3,{children:"Info with Action"}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Alert
+  severity="info"
+  action={
+    <Button color="inherit" size="small">
+      Learn More
+    </Button>
+  }
+>
+  <span>New features are available. Click to learn more!</span>
+</Alert>
+`})}),`
+`,e(n.h3,{children:"Auto-dismissing Alert"}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`const [open, setOpen] = useState(true);
+
+useEffect(() => {
+  if (open) {
+    const timer = setTimeout(() => {
+      setOpen(false);
+    }, 5000);
+    return () => clearTimeout(timer);
+  }
+}, [open]);
+
+{
+  open && (
+    <Alert severity="success" onClose={() => setOpen(false)}>
+      <span>Operation completed successfully!</span>
+    </Alert>
+  );
+}
+`})}),`
+`,e(n.h2,{children:"Documentation"}),`
+`,i(n.ul,{children:[`
+`,e(n.li,{children:e(n.a,{href:"https://mui.com/material-ui/react-alert/",children:"Material UI - Alert"})}),`
+`]})]})}function Me(r={}){const{wrapper:n}={...B(),...r.components};return n?e(n,{...r,children:e(z,{...r})}):z(r)}export{be as DismissibleAlert,Me as default};

package/dist/assets/button-D0caik7C.js

@@ -0,0 +1,97 @@
+import{n as a,o as e,p as t,F as c}from"./react-vendor-BVjvCnQb.js";import{B as i}from"./Button-BXcSdEL6.js";import"./prism-DjoQ0BfU.js";import"./index-C5FzG5L5.js";import"./router-d4Dt6g8h.js";function o(r){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...a(),...r.components};return t(c,{children:[e(n.h1,{children:"Button"}),`
+`,t(n.p,{children:["The ",e(n.code,{children:"Button"})," component is a fundamental UI element that allows users to trigger actions and events. Material UI's Button component provides a consistent, accessible, and customizable button implementation."]}),`
+`,e(n.p,{children:"Buttons can be used to trigger actions, submit forms, or navigate to different pages."}),`
+`,e(n.h2,{children:"Variants"}),`
+`,e(n.p,{children:"Material UI buttons come in several variants to suit different use cases:"}),`
+`,e(n.h3,{children:"Contained Button"}),`
+`,e(n.p,{children:"The most prominent button style, used for primary actions:"}),`
+`,e(i,{variant:"contained",color:"primary",children:"Primary Action"}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Button variant="contained" color="primary">
+  Primary Action
+</Button>
+`})}),`
+`,e(n.h3,{children:"Outlined Button"}),`
+`,e(n.p,{children:"Used for secondary actions or when you want a less prominent button:"}),`
+`,e(i,{variant:"outlined",color:"secondary",children:"Secondary Action"}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Button variant="outlined" color="secondary">
+  Secondary Action
+</Button>
+`})}),`
+`,e(n.h3,{children:"Text Button"}),`
+`,e(n.p,{children:"The most subtle button style, often used for tertiary actions:"}),`
+`,e(i,{variant:"text",color:"inherit",children:"Text Button"}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Button variant="text" color="inherit">
+  Text Button
+</Button>
+`})}),`
+`,e(n.h2,{children:"Colors"}),`
+`,e(n.p,{children:"Buttons support different color schemes:"}),`
+`,e(i,{variant:"contained",color:"primary",sx:{mr:.5,mb:1},children:"Primary"}),`
+`,e(i,{variant:"contained",color:"secondary",sx:{mr:.5,mb:1},children:"Secondary"}),`
+`,e(i,{variant:"contained",color:"success",sx:{mr:.5,mb:1},children:"Success"}),`
+`,e(i,{variant:"contained",color:"error",sx:{mb:1},children:"Error"}),`
+`,e(n.h2,{children:"Sizes"}),`
+`,e(n.p,{children:"Buttons come in three sizes to accommodate different design needs:"}),`
+`,e(i,{size:"small",variant:"contained",sx:{mr:.5,mb:1},children:"Small"}),`
+`,e(i,{size:"medium",variant:"contained",sx:{mr:.5,mb:1},children:"Medium"}),`
+`,e(i,{size:"large",variant:"contained",sx:{mb:1},children:"Large"}),`
+`,e(n.h2,{children:"Common Props"}),`
+`,e(n.p,{children:"The Button component accepts various props to customize its appearance and behavior:"}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Button
+  variant="contained" // 'text' | 'outlined' | 'contained'
+  color="primary" // 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'
+  size="medium" // 'small' | 'medium' | 'large'
+  disabled={false} // boolean
+  fullWidth={false} // boolean
+  startIcon={<Icon />} // ReactNode
+  endIcon={<Icon />} // ReactNode
+  onClick={handleClick} // function
+>
+  Button Text
+</Button>
+`})}),`
+`,e(n.h2,{children:"Accessibility"}),`
+`,e(n.p,{children:"Material UI buttons are built with accessibility in mind:"}),`
+`,t(n.ul,{children:[`
+`,t(n.li,{children:[e(n.strong,{children:"Keyboard navigation"}),": Buttons can be focused and activated using the keyboard"]}),`
+`,t(n.li,{children:[e(n.strong,{children:"Screen readers"}),": Proper ARIA labels and roles are automatically applied"]}),`
+`,t(n.li,{children:[e(n.strong,{children:"Color contrast"}),": Meets WCAG guidelines for color contrast ratios"]}),`
+`,t(n.li,{children:[e(n.strong,{children:"Focus indicators"}),": Clear visual focus indicators for keyboard users"]}),`
+`]}),`
+`,e(n.h2,{children:"Best Practices"}),`
+`,t(n.ol,{children:[`
+`,t(n.li,{children:[e(n.strong,{children:"Use clear, action-oriented text"})," that describes what the button does"]}),`
+`,t(n.li,{children:[e(n.strong,{children:"Choose appropriate variants"})," - contained for primary actions, outlined for secondary"]}),`
+`,t(n.li,{children:[e(n.strong,{children:"Maintain consistent sizing"})," within your interface"]}),`
+`,t(n.li,{children:[e(n.strong,{children:"Provide loading states"})," for buttons that trigger async operations"]}),`
+`,t(n.li,{children:[e(n.strong,{children:"Use appropriate colors"})," to convey meaning (success, error, etc.)"]}),`
+`]}),`
+`,e(n.h2,{children:"Examples"}),`
+`,e(n.h3,{children:"Button with Icons"}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`import { Button } from '@mui/material';
+import { Send, Download } from '@mui/icons-material';
+
+<Button variant="contained" startIcon={<Send />}>
+  Send Message
+</Button>
+
+<Button variant="outlined" endIcon={<Download />}>
+  Download File
+</Button>
+`})}),`
+`,e(n.h3,{children:"Disabled State"}),`
+`,t(n.p,{children:["Use the ",e(n.code,{children:"disabled"})," attribute to specify that a button should be disabled."]}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Button variant="contained" disabled>
+  Disabled Button
+</Button>
+`})}),`
+`,e(n.h3,{children:"Full Width Button"}),`
+`,t(n.p,{children:["Use the ",e(n.code,{children:"fullWidth"})," attribute to specify that a button should be full width."]}),`
+`,e(n.pre,{children:e(n.code,{className:"language-jsx",children:`<Button variant="contained" fullWidth>
+  Full Width Button
+</Button>
+`})}),`
+`,e(n.h2,{children:"Documentation"}),`
+`,t(n.ul,{children:[`
+`,e(n.li,{children:e(n.a,{href:"https://mui.com/material-ui/react-button/",children:"Material UI - Button"})}),`
+`]})]})}function m(r={}){const{wrapper:n}={...a(),...r.components};return n?e(n,{...r,children:e(o,{...r})}):o(r)}export{m as default};