import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-D-oZzXNK.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-8vvjMMnP.js";function o(e){let t={code:`code`,h1:`h1`,h2:`h2`,p:`p`,pre:`pre`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Shorthand Props`}),`
`,(0,c.jsx)(t.h1,{id:`shorthand-props`,children:`Shorthand Props`}),`
`,(0,c.jsxs)(t.p,{children:[`Some components accept shorthand values for spacing properties like `,(0,c.jsx)(t.code,{children:`padding`}),` and `,(0,c.jsx)(t.code,{children:`margin`}),`. These props can be specified in several ways:`]}),`
`,(0,c.jsx)(t.h2,{id:`single-value`,children:`Single Value`}),`
`,(0,c.jsx)(t.p,{children:`When you provide a single value, it applies to all sides:`}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-jsx`,children:`<Box padding="8" /> // 8px padding on all sides
`})}),`
`,(0,c.jsx)(t.h2,{id:`two-values`,children:`Two Values`}),`
`,(0,c.jsx)(t.p,{children:`When you provide an array with two values, they are applied as [vertical, horizontal]:`}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-jsx`,children:`<Box padding={['8', '16']} />
// 8px padding top/bottom
// 16px padding left/right
`})}),`
`,(0,c.jsx)(t.h2,{id:`three-values`,children:`Three Values`}),`
`,(0,c.jsx)(t.p,{children:`With three values, they are applied as [top, horizontal, bottom]:`}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-jsx`,children:`<Box padding={['8', '16', '24']} />
// 8px padding top
// 16px padding left/right
// 24px padding bottom
`})}),`
`,(0,c.jsx)(t.h2,{id:`four-values`,children:`Four Values`}),`
`,(0,c.jsx)(t.p,{children:`With four values, they are applied as [top, right, bottom, left]:`}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-jsx`,children:`<Box padding={['8', '16', '24', '32']} />
// 8px padding top
// 16px padding right
// 24px padding bottom
// 32px padding left
`})}),`
`,(0,c.jsx)(t.h2,{id:`combining-with-responsive-props`,children:`Combining with Responsive Props`}),`
`,(0,c.jsx)(t.p,{children:`You can combine shorthand values with responsive props:`}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-jsx`,children:`<Box
    padding={{
        _: '8',
        'medium-l': ['16', '24'],
        'wide-s': ['16', '24', '32', '40'],
    }}
/>
`})}),`
`,(0,c.jsx)(t.p,{children:`This allows you to have different padding configurations at different breakpoints.`})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};