import{f as v,a as t,t as r}from"./props-b4vEeO_8.js";import{B as z,C,F as d,I as b,G as E}from"./runtime-C3rQLW--.js";import{i as F}from"./lifecycle-F2p_Qkk3.js";import{c as G,d as I}from"./create-runtime-stories-7AWWVphH.js";import{B as i}from"./Block-D3Ui8rd-.js";import{A as h}from"./Article-DL33WKIV.js";const g={title:"Components/Page layout/Article",component:h},{Story:A}=I();var N=v('<div class="demo-container svelte-1ls25i7"><div class="background-label svelte-1ls25i7">Article well</div> <div class="padding-label svelte-1ls25i7"><span class="svelte-1ls25i7">⇤</span>15px padding</div></div>'),R=v('<div class="article-boundaries"><!> <!> <!> <!> <!> <!> <!></div>'),T=v('<div class="article-boundaries custom"><!> <!> <!> <!> <!> <!> <!></div>'),q=v('<h3 class="svelte-1ls25i7">Default column widths</h3> <!> <h3 class="svelte-1ls25i7">Custom column widths</h3> <!>',1),H=v("<!> <!>",1);function y(S,O){z(O,!1),F();var P=H(),x=C(P);A(x,{name:"Demo",children:(_,M)=>{h(_,{id:"article-story-basic",children:($,p)=>{var f=N();t($,f)},$$slots:{default:!0}})},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<Article id="article-story-basic">
  <div class="demo-container">
    <div class="background-label">Article well</div>
    <div class="padding-label"><span>⇤</span>15px padding</div>
  </div>
</Article>`}}});var j=d(x,2);A(j,{name:"Custom columns",exportName:"CustomColumns",children:(_,M)=>{var $=q(),p=d(C($),2);h(p,{id:"article-column-widths-demo",children:(k,W)=>{var l=R(),n=b(l);i(n,{id:"section-demo",width:"narrower",children:(e,s)=>{var o=r("narrower");t(e,o)},$$slots:{default:!0}});var a=d(n,2);i(a,{id:"section-demo",width:"narrow",children:(e,s)=>{var o=r("narrow");t(e,o)},$$slots:{default:!0}});var c=d(a,2);i(c,{id:"section-demo",children:(e,s)=>{var o=r("normal");t(e,o)},$$slots:{default:!0}});var m=d(c,2);i(m,{id:"section-demo",width:"wide",children:(e,s)=>{var o=r("wide");t(e,o)},$$slots:{default:!0}});var u=d(m,2);i(u,{id:"section-demo",width:"wider",children:(e,s)=>{var o=r("wider");t(e,o)},$$slots:{default:!0}});var w=d(u,2);i(w,{id:"section-demo",width:"widest",children:(e,s)=>{var o=r("widest");t(e,o)},$$slots:{default:!0}});var B=d(w,2);i(B,{id:"section-demo",width:"fluid",children:(e,s)=>{var o=r("fluid");t(e,o)},$$slots:{default:!0}}),t(k,l)},$$slots:{default:!0}});var f=d(p,4);h(f,{id:"article-column-widths-demo",columnWidths:{narrower:250,narrow:400,normal:500,wide:675,wider:1400},children:(k,W)=>{var l=T(),n=b(l);i(n,{id:"section-demo",width:"narrower",children:(e,s)=>{var o=r("narrower");t(e,o)},$$slots:{default:!0}});var a=d(n,2);i(a,{id:"section-demo",width:"narrow",children:(e,s)=>{var o=r("narrow");t(e,o)},$$slots:{default:!0}});var c=d(a,2);i(c,{id:"section-demo",children:(e,s)=>{var o=r("normal");t(e,o)},$$slots:{default:!0}});var m=d(c,2);i(m,{id:"section-demo",width:"wide",children:(e,s)=>{var o=r("wide");t(e,o)},$$slots:{default:!0}});var u=d(m,2);i(u,{id:"section-demo",width:"wider",children:(e,s)=>{var o=r("wider");t(e,o)},$$slots:{default:!0}});var w=d(u,2);i(w,{id:"section-demo",width:"widest",children:(e,s)=>{var o=r("widest");t(e,o)},$$slots:{default:!0}});var B=d(w,2);i(B,{id:"section-demo",width:"fluid",children:(e,s)=>{var o=r("fluid");t(e,o)},$$slots:{default:!0}}),t(k,l)},$$slots:{default:!0}}),t(_,$)},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<h3>Default column widths</h3>

<Article id="article-column-widths-demo">
  <div class="article-boundaries">
    <Block id="section-demo" width="narrower">narrower</Block>
    <Block id="section-demo" width="narrow">narrow</Block>
    <Block id="section-demo">normal</Block>
    <Block id="section-demo" width="wide">wide</Block>
    <Block id="section-demo" width="wider">wider</Block>
    <Block id="section-demo" width="widest">widest</Block>
    <Block id="section-demo" width="fluid">fluid</Block>
  </div>
</Article>
<h3>Custom column widths</h3>
<Article
  id="article-column-widths-demo"
  columnWidths={{
    narrower: 250,
    narrow: 400,
    normal: 500,
    wide: 675,
    wider: 1400,
  }}
>
  <div class="article-boundaries custom">
    <Block id="section-demo" width="narrower">narrower</Block>
    <Block id="section-demo" width="narrow">narrow</Block>
    <Block id="section-demo">normal</Block>
    <Block id="section-demo" width="wide">wide</Block>
    <Block id="section-demo" width="wider">wider</Block>
    <Block id="section-demo" width="widest">widest</Block>
    <Block id="section-demo" width="fluid">fluid</Block>
  </div>
</Article>`}}}),t(S,P),E()}y.__docgen={version:3,name:"Article.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const D=G(y,g),J=["Demo","CustomColumns"],K=D.Demo,L=D.CustomColumns,ee=Object.freeze(Object.defineProperty({__proto__:null,CustomColumns:L,Demo:K,__namedExportsOrder:J,default:g},Symbol.toStringTag,{value:"Module"}));export{ee as A,L as C,K as D};