import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{pt as r,w as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{l as o,o as s}from"./iframe-D-oZzXNK.js";import{r as c}from"./react-B8jdHdWa.js";import{t as l}from"./mdx-react-shim-8vvjMMnP.js";import{g as u,t as d}from"./dist-BUBfPDtK.js";var f,p,m=t((()=>{i(),e(n()),f=a(),p=()=>(0,f.jsx)(`table`,{style:{fontSize:14},children:(0,f.jsx)(`tbody`,{children:Object.entries(r).map(([e,t])=>(0,f.jsxs)(`tr`,{children:[(0,f.jsx)(`td`,{style:{padding:`0px 40px 10px 20px`},children:(0,f.jsx)(`code`,{children:e})}),(0,f.jsx)(`td`,{style:{padding:`0px 40px 10px 20px`},children:(0,f.jsxs)(`code`,{children:[t,`px`]})})]},e))})})}));function h(e){let t={code:`code`,h1:`h1`,h2:`h2`,p:`p`,pre:`pre`,...c(),...e.components};return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(s,{title:`Guides/Responsive Props`}),`
`,(0,_.jsx)(t.h1,{id:`responsive-props`,children:`Responsive Props`}),`
`,(0,_.jsx)(t.p,{children:`Some component props optionally accept responsive values for different screen sizes
based on the global breakpoints:`}),`
`,(0,_.jsx)(t.pre,{children:(0,_.jsx)(t.code,{className:`language-jsx`,children:`<Component prop={<value>} />
<Component prop={{ _: <value>, '<breakpoint>': <value>, ... }} />
`})}),`
`,(0,_.jsxs)(t.p,{children:[`Where `,(0,_.jsx)(t.code,{children:`_`}),` is the value for the smallest breakpoint, and `,(0,_.jsx)(t.code,{children:`<breakpoint>`}),` is one of
the following, predefined values:`]}),`
`,(0,_.jsx)(p,{}),`
`,(0,_.jsx)(t.h2,{id:`example`,children:`Example`}),`
`,`
`,(0,_.jsx)(u,{src:v,size:`24`}),`
`,(0,_.jsx)(u,{src:v,size:{_:`24`,"medium-l":`48`,"wide-s":`64`}}),`
`,(0,_.jsx)(t.pre,{children:(0,_.jsx)(t.code,{className:`language-jsx`,children:`<Avatar src={url} size="24" />
<Avatar src={url} size={{ _: '24', 'medium-l': '48', 'wide-s': '64' }} />
`})}),`
`,(0,_.jsxs)(t.p,{children:[`Try resizing your viewport using the dev tools to see the `,(0,_.jsx)(t.code,{children:`Avatar`}),` size update.`]})]})}function g(e={}){let{wrapper:t}={...c(),...e.components};return t?(0,_.jsx)(t,{...e,children:(0,_.jsx)(h,{...e})}):h(e)}var _,v;t((()=>{_=a(),l(),d(),o(),m(),v=`./assets/avatar-1.png`}))();export{g as default,v as url};