import{S as F,i as ee,s as te,q as b,o as k,f as A,Q as ne,h as u,j as V,R as oe,n as C,k as y,l as $,c as m,m as c,t as d,a as v,d as h}from"./index-C9aKRT5A.js";import{g as se,a as ae}from"./spread-CgU5AtxT.js";import{p as re,M as ge,T as me,S as I,a as _,w as ce}from"./collect-stories-ceFdpR5E.js";import{G}from"./GraphicBlock-Dy6mUqc4.js";import"./Block-C7biTRWl.js";import"./PaddingReset-CiOBBFtT.js";import"./Markdown-BNYiGaXJ.js";const de=`The \`GraphicBlock\` component is a special derivative of the [\`Block\`](./?path=/docs/layout-block) component that also handles text elements around a graphic. Many other components use this one to wrap graphics with styled text. When you use it, you'll also wrap your chart elements or component with it like this: --- \`\`\`svelte