import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as o}from"./index-CO-0pc0F.js";import{M as d,C as s}from"./index-Z-6k0Xrj.js";import{P as r,D as a}from"./PaddingReset.stories-C_8B9mUz.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./PaddingReset-_TGvg1_B.js";import"./Block-D3Ui8rd-.js";function i(t){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...o(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(d,{of:r}),`
`,e.jsx(n.h1,{id:"paddingreset",children:"PaddingReset"}),`
`,e.jsxs(n.p,{children:["Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on adjacent text such as notes or captions. The ",e.jsx(n.code,{children:"PaddingReset"})," component resets our normal well padding inside a ",e.jsx(n.code,{children:"fluid"})," container."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
<\/script>

<Block width="fluid">
  <!-- Edge-to-edge image -->
  <img src="https:..." alt="Alt text" class="fmb-1" />

  <!-- Wrap text in \`PaddingReset\`to add padding back in -->
  <PaddingReset>
    <div class="body-note">
      A caption for the image that is padded when Block is fluid.
    </div>
  </PaddingReset>
</Block>
`})}),`
`,e.jsx(s,{of:a}),`
`,e.jsx(n.h2,{id:"conditional-padding",children:"Conditional padding"}),`
`,e.jsxs(n.p,{children:["You can add the padding conditionally by setting the ",e.jsx(n.code,{children:"containerIsFluid"})," prop to ",e.jsx(n.code,{children:"true"})," when the ",e.jsx(n.code,{children:"Block"})," width is ",e.jsx(n.code,{children:"fluid"}),", which is what many other components in this library do."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';

  let { src = 'https://...', width = 'fluid' } = $props();
<\/script>

<Block {width}>
  <!-- Edge-to-edge image -->
  <img src="https:..." alt="Alt text" class="fmb-1" />

  <!-- Set conditional padding with the \`containerIsFluid\` prop -->
  <PaddingReset containerIsFluid={width === 'fluid'}>
    <div class="body-note">
      A caption for the image that is padded when Block is fluid.
    </div>
  </PaddingReset>
</Block>
`})})]})}function M(t={}){const{wrapper:n}={...o(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{M as default};