import{S as he,i as Ae,s as ue,w as r,D as g,x as s,R as be,a as q,z as a,T as we,E as V,d as Y,C as t,p as te,j as Z,m as H,k as se,l as ae,b as Q,t as L,n as D,Q as fe}from"./index-25af778d.js";import{p as xe,M as Te,T as $e,S as ne}from"./collect-stories-cce06d4a.js";import{G as ee}from"./GraphicBlock-f4f94c1a.js";import{a as F,w as Ce}from"./withParams-90715500.js";import"./Block-9c89ee1a.js";import"./PaddingReset-d848e1b7.js";import"./marked.esm-76161808.js";const Ge=`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: --- \`\`\`html