carbon-components-svelte/assets/Grid.ea96b60d.js

let n=document.createElement("style");n.innerHTML="",document.head.appendChild(n);import{S as s,i as a,s as t,c as p,a as o,m as c,t as l,b as e,d as u,g as i,h as k,j as r,k as m,l as g,n as d,o as v,p as f,N as C,q as w,r as x,Y as h}from"./index.6b674a45.js";import"./Button.f0f995b5.js";import"./index.77bc22b8.js";import{C as $,P as y}from"./Preview.da06bf80.js";import"./ChevronDown16.5983f6dc.js";import"./Loading.1494bed2.js";import"./Column.6ef18044.js";import"./Content.7baad37e.js";import"./store.4e2c42a1.js";function b(n){let s,a,t,p,o,c,l,e,u,h,$,y,b,R,G,j,E,_,A,O,L,I,H,D,N,F,U,W,P,q,B,M,S,T;return{c(){s=i("div"),a=i("ul"),t=i("li"),p=i("a"),o=k("Usage"),c=r(),l=i("ul"),e=i("li"),u=i("a"),h=k("Default"),$=r(),y=i("li"),b=i("a"),R=k("Full width"),G=r(),j=i("li"),E=i("a"),_=k("Narrow"),A=r(),O=i("li"),L=i("a"),I=k("Condensed"),H=r(),D=i("li"),N=i("a"),F=k("Responsive"),U=r(),W=i("li"),P=i("a"),q=k("Offset columns"),B=r(),M=i("li"),S=i("a"),T=k("Aspect ratio columns"),this.h()},l(n){s=m(n,"DIV",{slot:!0});var i=g(s);a=m(i,"UL",{class:!0});var k=g(a);t=m(k,"LI",{class:!0});var r=g(t);p=m(r,"A",{class:!0,href:!0});var C=g(p);o=d(C,"Usage"),C.forEach(v),c=f(r),l=m(r,"UL",{class:!0});var w=g(l);e=m(w,"LI",{class:!0});var x=g(e);u=m(x,"A",{class:!0,href:!0});var V=g(u);h=d(V,"Default"),V.forEach(v),x.forEach(v),$=f(w),y=m(w,"LI",{class:!0});var Y=g(y);b=m(Y,"A",{class:!0,href:!0});var z=g(b);R=d(z,"Full width"),z.forEach(v),Y.forEach(v),G=f(w),j=m(w,"LI",{class:!0});var J=g(j);E=m(J,"A",{class:!0,href:!0});var K=g(E);_=d(K,"Narrow"),K.forEach(v),J.forEach(v),A=f(w),O=m(w,"LI",{class:!0});var Q=g(O);L=m(Q,"A",{class:!0,href:!0});var X=g(L);I=d(X,"Condensed"),X.forEach(v),Q.forEach(v),H=f(w),D=m(w,"LI",{class:!0});var Z=g(D);N=m(Z,"A",{class:!0,href:!0});var nn=g(N);F=d(nn,"Responsive"),nn.forEach(v),Z.forEach(v),U=f(w),W=m(w,"LI",{class:!0});var sn=g(W);P=m(sn,"A",{class:!0,href:!0});var an=g(P);q=d(an,"Offset columns"),an.forEach(v),sn.forEach(v),B=f(w),M=m(w,"LI",{class:!0});var tn=g(M);S=m(tn,"A",{class:!0,href:!0});var pn=g(S);T=d(pn,"Aspect ratio columns"),pn.forEach(v),tn.forEach(v),w.forEach(v),r.forEach(v),k.forEach(v),i.forEach(v),this.h()},h(){C(p,"class","bx--link"),C(p,"href","#usage"),C(u,"class","bx--link"),C(u,"href","#default"),C(e,"class","bx--list__item"),C(b,"class","bx--link"),C(b,"href","#full-width"),C(y,"class","bx--list__item"),C(E,"class","bx--link"),C(E,"href","#narrow"),C(j,"class","bx--list__item"),C(L,"class","bx--link"),C(L,"href","#condensed"),C(O,"class","bx--list__item"),C(N,"class","bx--link"),C(N,"href","#responsive"),C(D,"class","bx--list__item"),C(P,"class","bx--link"),C(P,"href","#offset-columns"),C(W,"class","bx--list__item"),C(S,"class","bx--link"),C(S,"href","#aspect-ratio-columns"),C(M,"class","bx--list__item"),C(l,"class","bx--list--unordered bx--list--nested"),C(t,"class","bx--list__item"),C(a,"class","bx--list--unordered"),C(s,"slot","aside")},m(n,i){w(n,s,i),x(s,a),x(a,t),x(t,p),x(p,o),x(t,c),x(t,l),x(l,e),x(e,u),x(u,h),x(l,$),x(l,y),x(y,b),x(b,R),x(l,G),x(l,j),x(j,E),x(E,_),x(l,A),x(l,O),x(O,L),x(L,I),x(l,H),x(l,D),x(D,N),x(N,F),x(l,U),x(l,W),x(W,P),x(P,q),x(l,B),x(l,M),x(M,S),x(S,T)},d(n){n&&v(s)}}}function R(n){let s,a,t,$,b,R,G,j,E,_,A,O,L,I,H,D,N,F,U,W,P,q,B,M,S,T,V,Y,z,J,K,Q,X,Z,nn,sn;return $=new y({props:{framed:!0,src:"/framed/Grid/Grid",codeRaw:'<script>\n  import { Grid, Row, Column } from "carbon-components-svelte";\n<\/script>\n\n<Grid>\n  <Row>\n    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>\n    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>\n    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>\n    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>\n  </Row>\n</Grid>\n',code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n  <span class="token keyword">import</span> <span class="token punctuation">{</span> Grid<span class="token punctuation">,</span> Row<span class="token punctuation">,</span> Column <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Grid</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Grid</span><span class="token punctuation">></span></span>\n'}}),E=new y({props:{framed:!0,src:"/framed/Grid/FullWidthGrid",codeRaw:'<script>\n  import { Grid, Row, Column } from "carbon-components-svelte";\n<\/script>\n\n<Grid fullWidth>\n  <Row>\n    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>\n    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>\n    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>\n    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>\n  </Row>\n</Grid>\n',code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n  <span class="token keyword">import</span> <span class="token punctuation">{</span> Grid<span class="token punctuation">,</span> Row<span class="token punctuation">,</span> Column <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Grid</span> <span class="token attr-name">fullWidth</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Grid</span><span class="token punctuation">></span></span>\n'}}),I=new y({props:{framed:!0,src:"/framed/Grid/NarrowGrid",codeRaw:'<script>\n  import { Grid, Row, Column } from "carbon-components-svelte";\n<\/script>\n\n<Grid narrow>\n  <Row>\n    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>\n    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>\n    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>\n    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>\n  </Row>\n</Grid>\n',code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n  <span class="token keyword">import</span> <span class="token punctuation">{</span> Grid<span class="token punctuation">,</span> Row<span class="token punctuation">,</span> Column <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Grid</span> <span class="token attr-name">narrow</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Grid</span><span class="token punctuation">></span></span>\n'}}),U=new y({props:{framed:!0,src:"/framed/Grid/CondensedGrid",codeRaw:'<script>\n  import { Grid, Row, Column } from "carbon-components-svelte";\n<\/script>\n\n<Grid condensed>\n  <Row>\n    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>\n    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>\n    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>\n    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>\n  </Row>\n</Grid>\n',code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n  <span class="token keyword">import</span> <span class="token punctuation">{</span> Grid<span class="token punctuation">,</span> Row<span class="token punctuation">,</span> Column <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Grid</span> <span class="token attr-name">condensed</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Grid</span><span class="token punctuation">></span></span>\n'}}),M=new y({props:{framed:!0,src:"/framed/Grid/ResponsiveGrid",codeRaw:'<script>\n  import { Grid, Row, Column } from "carbon-components-svelte";\n<\/script>\n\n<Grid>\n  <Row>\n    <Column\n      sm={1}\n      md={4}\n      lg={8}\n      style="outline: 1px solid var(--cds-interactive-04)"\n    >\n      sm: 1, md: 4, lg: 8\n    </Column>\n    <Column\n      sm={1}\n      md={2}\n      lg={2}\n      style="outline: 1px solid var(--cds-interactive-04)"\n    >\n      sm: 1, md: 2, lg: 2\n    </Column>\n    <Column\n      sm={1}\n      md={1}\n      lg={1}\n      style="outline: 1px solid var(--cds-interactive-04)"\n    >\n      sm: 1, md: 1, lg: 1\n    </Column>\n    <Column\n      sm={1}\n      md={1}\n      lg={1}\n      style="outline: 1px solid var(--cds-interactive-04)"\n    >\n      sm: 1, md: 1, lg: 1\n    </Column>\n  </Row>\n</Grid>\n',code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n  <span class="token keyword">import</span> <span class="token punctuation">{</span> Grid<span class="token punctuation">,</span> Row<span class="token punctuation">,</span> Column <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Grid</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>\n      <span class="token attr-name">sm=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">md=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">lg=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span>\n    <span class="token punctuation">></span></span>\n      sm: 1, md: 4, lg: 8\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>\n      <span class="token attr-name">sm=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">md=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">lg=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span>\n    <span class="token punctuation">></span></span>\n      sm: 1, md: 2, lg: 2\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>\n      <span class="token attr-name">sm=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">md=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">lg=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span>\n    <span class="token punctuation">></span></span>\n      sm: 1, md: 1, lg: 1\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>\n      <span class="token attr-name">sm=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">md=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">lg=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span>\n    <span class="token punctuation">></span></span>\n      sm: 1, md: 1, lg: 1\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Grid</span><span class="token punctuation">></span></span>\n'}}),z=new y({props:{framed:!0,src:"/framed/Grid/OffsetColumns",codeRaw:'<script>\n  import { Grid, Row, Column } from "carbon-components-svelte";\n<\/script>\n\n<Grid>\n  <Row>\n    <Column\n      sm={{ span: 1, offset: 3 }}\n      style="outline: 1px solid var(--cds-interactive-04)"\n    >\n      Offset 3\n    </Column>\n    <Column\n      sm={{ span: 2, offset: 2 }}\n      style="outline: 1px solid var(--cds-interactive-04)"\n    >\n      Offset 2\n    </Column>\n    <Column\n      sm={{ span: 3, offset: 1 }}\n      style="outline: 1px solid var(--cds-interactive-04)"\n    >\n      Offset 1\n    </Column>\n    <Column\n      sm={{ span: 4, offset: 0 }}\n      style="outline: 1px solid var(--cds-interactive-04)"\n    >\n      Offset 0\n    </Column>\n  </Row>\n</Grid>\n',code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n  <span class="token keyword">import</span> <span class="token punctuation">{</span> Grid<span class="token punctuation">,</span> Row<span class="token punctuation">,</span> Column <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Grid</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>\n      <span class="token attr-name">sm=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> offset<span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span>\n    <span class="token punctuation">></span></span>\n      Offset 3\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>\n      <span class="token attr-name">sm=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> offset<span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span>\n    <span class="token punctuation">></span></span>\n      Offset 2\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>\n      <span class="token attr-name">sm=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> offset<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span>\n    <span class="token punctuation">></span></span>\n      Offset 1\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>\n      <span class="token attr-name">sm=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> offset<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span>\n    <span class="token punctuation">></span></span>\n      Offset 0\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Grid</span><span class="token punctuation">></span></span>\n'}}),Z=new y({props:{framed:!0,src:"/framed/Grid/AspectRatioColumns",codeRaw:'<script>\n  import { Grid, Row, Column } from "carbon-components-svelte";\n<\/script>\n\n<Grid>\n  <Row>\n    <Column\n      aspectRatio="2x1"\n      style="outline: 1px solid var(--cds-interactive-04)"\n    >\n      2x1\n    </Column>\n    <Column\n      aspectRatio="2x1"\n      style="outline: 1px solid var(--cds-interactive-04)"\n    >\n      2x1\n    </Column>\n  </Row>\n</Grid>\n',code:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n  <span class="token keyword">import</span> <span class="token punctuation">{</span> Grid<span class="token punctuation">,</span> Row<span class="token punctuation">,</span> Column <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Grid</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>\n      <span class="token attr-name">aspectRatio</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2x1<span class="token punctuation">"</span></span>\n      <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span>\n    <span class="token punctuation">></span></span>\n      2x1\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>\n      <span class="token attr-name">aspectRatio</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2x1<span class="token punctuation">"</span></span>\n      <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outline: 1px solid var(--cds-interactive-04)<span class="token punctuation">"</span></span>\n    <span class="token punctuation">></span></span>\n      2x1\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Column</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Grid</span><span class="token punctuation">></span></span>\n'}}),{c(){s=i("h3"),a=k("Default"),t=r(),p($.$$.fragment),b=r(),R=i("h3"),G=k("Full width"),j=r(),p(E.$$.fragment),_=r(),A=i("h3"),O=k("Narrow"),L=r(),p(I.$$.fragment),H=r(),D=i("h3"),N=k("Condensed"),F=r(),p(U.$$.fragment),W=r(),P=i("h3"),q=k("Responsive"),B=r(),p(M.$$.fragment),S=r(),T=i("h3"),V=k("Offset columns"),Y=r(),p(z.$$.fragment),J=r(),K=i("h3"),Q=k("Aspect ratio columns"),X=r(),p(Z.$$.fragment),nn=r(),this.h()},l(n){s=m(n,"H3",{id:!0});var p=g(s);a=d(p,"Default"),p.forEach(v),t=f(n),o($.$$.fragment,n),b=f(n),R=m(n,"H3",{id:!0});var c=g(R);G=d(c,"Full width"),c.forEach(v),j=f(n),o(E.$$.fragment,n),_=f(n),A=m(n,"H3",{id:!0});var l=g(A);O=d(l,"Narrow"),l.forEach(v),L=f(n),o(I.$$.fragment,n),H=f(n),D=m(n,"H3",{id:!0});var e=g(D);N=d(e,"Condensed"),e.forEach(v),F=f(n),o(U.$$.fragment,n),W=f(n),P=m(n,"H3",{id:!0});var u=g(P);q=d(u,"Responsive"),u.forEach(v),B=f(n),o(M.$$.fragment,n),S=f(n),T=m(n,"H3",{id:!0});var i=g(T);V=d(i,"Offset columns"),i.forEach(v),Y=f(n),o(z.$$.fragment,n),J=f(n),K=m(n,"H3",{id:!0});var k=g(K);Q=d(k,"Aspect ratio columns"),k.forEach(v),X=f(n),o(Z.$$.fragment,n),nn=f(n),this.h()},h(){C(s,"id","default"),C(R,"id","full-width"),C(A,"id","narrow"),C(D,"id","condensed"),C(P,"id","responsive"),C(T,"id","offset-columns"),C(K,"id","aspect-ratio-columns")},m(n,p){w(n,s,p),x(s,a),w(n,t,p),c($,n,p),w(n,b,p),w(n,R,p),x(R,G),w(n,j,p),c(E,n,p),w(n,_,p),w(n,A,p),x(A,O),w(n,L,p),c(I,n,p),w(n,H,p),w(n,D,p),x(D,N),w(n,F,p),c(U,n,p),w(n,W,p),w(n,P,p),x(P,q),w(n,B,p),c(M,n,p),w(n,S,p),w(n,T,p),x(T,V),w(n,Y,p),c(z,n,p),w(n,J,p),w(n,K,p),x(K,Q),w(n,X,p),c(Z,n,p),w(n,nn,p),sn=!0},p:h,i(n){sn||(l($.$$.fragment,n),l(E.$$.fragment,n),l(I.$$.fragment,n),l(U.$$.fragment,n),l(M.$$.fragment,n),l(z.$$.fragment,n),l(Z.$$.fragment,n),sn=!0)},o(n){e($.$$.fragment,n),e(E.$$.fragment,n),e(I.$$.fragment,n),e(U.$$.fragment,n),e(M.$$.fragment,n),e(z.$$.fragment,n),e(Z.$$.fragment,n),sn=!1},d(n){n&&v(s),n&&v(t),u($,n),n&&v(b),n&&v(R),n&&v(j),u(E,n),n&&v(_),n&&v(A),n&&v(L),u(I,n),n&&v(H),n&&v(D),n&&v(F),u(U,n),n&&v(W),n&&v(P),n&&v(B),u(M,n),n&&v(S),n&&v(T),n&&v(Y),u(z,n),n&&v(J),n&&v(K),n&&v(X),u(Z,n),n&&v(nn)}}}function G(n){let s,a;return s=new $({props:{$$slots:{default:[R],aside:[b]},$$scope:{ctx:n}}}),{c(){p(s.$$.fragment)},l(n){o(s.$$.fragment,n)},m(n,t){c(s,n,t),a=!0},p(n,[a]){const t={};1&a&&(t.$$scope={dirty:a,ctx:n}),s.$set(t)},i(n){a||(l(s.$$.fragment,n),a=!0)},o(n){e(s.$$.fragment,n),a=!1},d(n){u(s,n)}}}export default class extends s{constructor(n){super(),a(this,n,null,G,t,{})}}