1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[891],{2573:function(n,s,e){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/grid",function(){return e(4936)}])},4936:function(n,s,e){"use strict";e.r(s),e.d(s,{default:function(){return h},getLink:function(){return p},stylesLink:function(){return x}});var a=e(7458),t=e(2640),l=e(3630),c=e(5085);let i=(0,c.zo)("div",{backgroundColor:"$primary",width:"100%",height:100,display:"flex",alignItems:"center",justifyContent:"center",color:"$white-fixed"}),r=()=>(0,a.jsx)(c.S_,{children:(0,a.jsxs)(l.r,{type:"container",cols:{default:12},children:[(0,a.jsx)(l.r,{type:"item",cols:{default:12,xl:6},children:(0,a.jsx)(i,{children:"1"})}),(0,a.jsx)(l.r,{type:"item",cols:{default:12,md:6,xl:3},children:(0,a.jsx)(i,{children:"2"})}),(0,a.jsx)(l.r,{type:"item",cols:{default:12,md:6,xl:3},children:(0,a.jsx)(i,{children:"3"})}),(0,a.jsx)(l.r,{type:"item",cols:{default:12,xl:6},start:{default:1,xl:7},children:(0,a.jsx)(i,{children:"4"})})]})});var o=e(9869),d=e(6792);let{getLink:p}=o.docsUIRoutes,x=p("styles");function m(n){let s={a:"a",code:"code",div:"div",h1:"h1",h2:"h2",h3:"h3",h4:"h4",hr:"hr",p:"p",pre:"pre",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,t.a)(),...n.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(d.PB,{title:"Grid"}),"\n",(0,a.jsx)(s.h1,{children:"@pikas-ui/grid"}),"\n",(0,a.jsx)(s.p,{children:"This package contains a grid component that can be used to create a grid layout."}),"\n",(0,a.jsx)("a",{href:"https://github.com/Achaak/pikas/blob/main/packages/ui/grid/CHANGELOG.md",children:(0,a.jsx)(s.p,{children:"Change Log"})}),"\n",(0,a.jsx)(s.h2,{children:"Requirements"}),"\n",(0,a.jsxs)(s.p,{children:["To use this package, you must install the ",(0,a.jsx)("a",{href:x,children:"@pikas-ui/styles"})," package."]}),"\n",(0,a.jsx)(s.h2,{children:"Installation"}),"\n",(0,a.jsx)(s.p,{children:"You can install this package using npm, yarn, or pnpm."}),"\n",(0,a.jsx)(s.div,{className:"remark-highlight",children:(0,a.jsx)(s.pre,{className:"language-unknown",children:(0,a.jsx)(s.code,{className:"language-unknown",children:"npm install @pikas-ui/grid"})})}),"\n",(0,a.jsx)(s.div,{className:"remark-highlight",children:(0,a.jsx)(s.pre,{className:"language-unknown",children:(0,a.jsx)(s.code,{className:"language-unknown",children:"yarn add @pikas-ui/grid"})})}),"\n",(0,a.jsx)(s.div,{className:"remark-highlight",children:(0,a.jsx)(s.pre,{className:"language-unknown",children:(0,a.jsx)(s.code,{className:"language-unknown",children:"pnpm add @pikas-ui/grid"})})}),"\n",(0,a.jsx)(s.hr,{}),"\n",(0,a.jsx)(s.h2,{children:"Usage"}),"\n",(0,a.jsx)(s.h3,{children:"Grid"}),"\n",(0,a.jsx)(s.p,{children:"This component is used to create a grid layout. It can be used as a container or an item."}),"\n",(0,a.jsx)(r,{}),"\n",(0,a.jsx)(s.div,{className:"remark-highlight",children:(0,a.jsx)(s.pre,{className:"language-tsx",children:(0,a.jsxs)(s.code,{className:"language-tsx",children:[(0,a.jsx)(s.span,{className:"token keyword",children:"import"})," ",(0,a.jsxs)(s.span,{className:"token imports",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(s.span,{className:"token maybe-class-name",children:"Grid"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(s.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(s.span,{className:"token string",children:"'@pikas-ui/grid'"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n",(0,a.jsx)(s.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(s.span,{className:"token maybe-class-name",children:"Example"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token maybe-class-name",children:"React"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token method-variable function-variable method function property-access",children:(0,a.jsx)(s.span,{className:"token maybe-class-name",children:"FC"})})," ",(0,a.jsx)(s.span,{className:"token operator",children:"="})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(s.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),"\n ",(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Grid"})]})," ",(0,a.jsx)(s.span,{className:"token attr-name",children:"type"}),(0,a.jsxs)(s.span,{className:"token attr-value",children:[(0,a.jsx)(s.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:'"'}),"container",(0,a.jsx)(s.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(s.span,{className:"token attr-name",children:"cols"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(s.span,{className:"token keyword",children:"default"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token number",children:"12"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text"}),"\n",(0,a.jsx)(s.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Grid"})]})," ",(0,a.jsx)(s.span,{className:"token attr-name",children:"type"}),(0,a.jsxs)(s.span,{className:"token attr-value",children:[(0,a.jsx)(s.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:'"'}),"item",(0,a.jsx)(s.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(s.span,{className:"token attr-name",children:"cols"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(s.span,{className:"token keyword",children:"default"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token number",children:"12"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," xl",(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token number",children:"6"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text"}),"\n",(0,a.jsx)(s.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Block"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text",children:"1"}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"</"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Block"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text"}),"\n",(0,a.jsx)(s.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"</"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Grid"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text"}),"\n",(0,a.jsx)(s.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Grid"})]})," ",(0,a.jsx)(s.span,{className:"token attr-name",children:"type"}),(0,a.jsxs)(s.span,{className:"token attr-value",children:[(0,a.jsx)(s.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:'"'}),"item",(0,a.jsx)(s.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(s.span,{className:"token attr-name",children:"cols"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(s.span,{className:"token keyword",children:"default"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token number",children:"12"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," md",(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token number",children:"6"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," xl",(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token number",children:"3"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text"}),"\n",(0,a.jsx)(s.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Block"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text",children:"2"}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"</"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Block"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text"}),"\n",(0,a.jsx)(s.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"</"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Grid"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text"}),"\n",(0,a.jsx)(s.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Grid"})]})," ",(0,a.jsx)(s.span,{className:"token attr-name",children:"type"}),(0,a.jsxs)(s.span,{className:"token attr-value",children:[(0,a.jsx)(s.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:'"'}),"item",(0,a.jsx)(s.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(s.span,{className:"token attr-name",children:"cols"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(s.span,{className:"token keyword",children:"default"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token number",children:"12"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," md",(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token number",children:"6"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," xl",(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token number",children:"3"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text"}),"\n",(0,a.jsx)(s.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Block"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text",children:"3"}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"</"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Block"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text"}),"\n",(0,a.jsx)(s.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"</"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Grid"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text"}),"\n",(0,a.jsx)(s.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Grid"})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"type"}),(0,a.jsxs)(s.span,{className:"token attr-value",children:[(0,a.jsx)(s.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:'"'}),"item",(0,a.jsx)(s.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",children:"cols"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(s.span,{className:"token keyword",children:"default"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token number",children:"12"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," xl",(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token number",children:"6"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(s.span,{className:"token attr-name",chi
1ldren:"start"}),(0,a.jsxs)(s.span,{className:"token script language-javascript",children:[(0,a.jsx)(s.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(s.span,{className:"token keyword",children:"default"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token number",children:"1"}),(0,a.jsx)(s.span,{className:"token punctuation",children:","})," xl",(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token number",children:"7"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text"}),"\n",(0,a.jsx)(s.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Block"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text",children:"4"}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"</"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Block"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text"}),"\n",(0,a.jsx)(s.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"</"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Grid"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(s.span,{className:"token plain-text"}),"\n",(0,a.jsx)(s.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"</"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Grid"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsx)(s.span,{className:"token punctuation",children:")"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n"]})})}),"\n",(0,a.jsx)(s.h4,{children:"Container"}),"\n",(0,a.jsx)(s.div,{className:"remark-highlight",children:(0,a.jsx)(s.pre,{className:"language-tsx",children:(0,a.jsxs)(s.code,{className:"language-tsx",children:[(0,a.jsx)(s.span,{className:"token keyword",children:"import"})," ",(0,a.jsxs)(s.span,{className:"token imports",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(s.span,{className:"token maybe-class-name",children:"Grid"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(s.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(s.span,{className:"token string",children:"'@pikas-ui/grid'"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n",(0,a.jsx)(s.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(s.span,{className:"token maybe-class-name",children:"Example"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token maybe-class-name",children:"React"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token method-variable function-variable method function property-access",children:(0,a.jsx)(s.span,{className:"token maybe-class-name",children:"FC"})})," ",(0,a.jsx)(s.span,{className:"token operator",children:"="})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(s.span,{className:"token keyword",children:"return"})," ",(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Grid"})]})," ",(0,a.jsx)(s.span,{className:"token attr-name",children:"type"}),(0,a.jsxs)(s.span,{className:"token attr-value",children:[(0,a.jsx)(s.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:'"'}),"container",(0,a.jsx)(s.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n"]})})}),"\n",(0,a.jsx)(s.h4,{children:"Props"}),"\n",(0,a.jsxs)(s.table,{children:[(0,a.jsx)(s.thead,{children:(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.th,{style:{textAlign:"left"},children:"Prop"}),(0,a.jsx)(s.th,{style:{textAlign:"left"},children:"Description"}),(0,a.jsx)(s.th,{style:{textAlign:"left"},children:"Type"}),(0,a.jsx)(s.th,{style:{textAlign:"left"},children:"Default"})]})}),(0,a.jsxs)(s.tbody,{children:[(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"children"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"The children of the component."}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"ReactNode"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"-"})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"css"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"The css of the component."}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"PikasCSS"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"-"})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"type"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"The type of the component."}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"GridType"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"required"})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"rowGap"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"The row gap of the component."}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"GridContainerRowGap"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:'"md"'})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"columnGap"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"The column gap of the component."}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"GridContainerColumnGap"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:'"md"'})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"cols"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"The number of columns of the component."}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"GridContainerCols"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"required"})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"direction"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"The direction of the component."}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"GridContainerDirection"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"-"})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"justifyContent"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"The justify content of the component."}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"GridContainerJustifyContent"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"-"})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"alignItems"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"The align items of the component."}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"GridContainerAlignItems"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"-"})]})]})]}),"\n",(0,a.jsx)(s.hr,{}),"\n",(0,a.jsx)(s.h4,{children:"Item"}),"\n",(0,a.jsx)(s.div,{className:"remark-highlight",children:(0,a.jsx)(s.pre,{className:"language-tsx",children:(0,a.jsxs)(s.code,{className:"language-tsx",children:[(0,a.jsx)(s.span,{className:"token keyword",children:"import"})," ",(0,a.jsxs)(s.span,{className:"token imports",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(s.span,{className:"token maybe-class-name",children:"Grid"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(s.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(s.span,{className:"token string",children:"'@pikas-ui/grid'"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n\n",(0,a.jsx)(s.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(s.span,{className:"token maybe-class-name",children:"Example"}),(0,a.jsx)(s.span,{className:"token operator",children:":"})," ",(0,a.jsx)(s.span,{className:"token maybe-class-name",children:"React"}),(0,a.jsx)(s.span,{className:"token punctuation",children:"."}),(0,a.jsx)(s.span,{className:"token method-variable function-variable method function property-access",children:(0,a.jsx)(s.span,{className:"token maybe-class-name",children:"FC"})})," ",(0,a.jsx)(s.span,{className:"token operator",children:"="})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"("}),(0,a.jsx)(s.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(s.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(s.span,{className:"token keyword",children:"return"})," ",(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsxs)(s.span,{className:"token tag",children:[(0,a.jsx)(s.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(s.span,{className:"token class-name",children:"Grid"})]})," ",(0,a.jsx)(s.span,{className:"token attr-name",children:"type"}),(0,a.jsxs)(s.span,{className:"token attr-value",children:[(0,a.jsx)(s.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(s.span,{className:"token punctuation",children:'"'}),"type",(0,a.jsx)(s.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(s.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n",(0,a.jsx)(s.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(s.span,{className:"token punctuation",children:";"}),"\n"]})})}),"\n",(0,a.jsx)(s.h4,{children:"Props"}),"\n",(0,a.jsxs)(s.table,{children:[(0,a.jsx)(s.thead,{children:(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.th,{style:{textAlign:"left"},children:"Prop"}),(0,a.jsx)(s.th,{style:{textAlign:"left"},children:"Description"}),(0,a.jsx)(s.th,{style:{textAlign:"left"},children:"Type"}),(0,a.jsx)(s.th,{style:{textAlign:"left"},children:"Default"})]})}),(0,a.jsxs)(s.tbody,{children:[(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"children"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"The children of the component."}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"ReactNode"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"-"})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"css"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"The css of the component."}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"PikasCSS"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"-"})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"type"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"The type of the component."}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"GridType"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"required"})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"cols"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"Number of columns the item should span."}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"GridItemCols"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"-"})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"start"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"The start of the column the item should span."}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"GridItemStart"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"-"})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"end"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"The end of the column the item should span."}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"GridItemEnd"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"-"})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"order"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"The order of the item."}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:(0,a.jsx)(s.code,{children:"GridItemOrder"})}),(0,a.jsx)(s.td,{style:{textAlign:"left"},children:"-"})]})]})]}),"\n",(0,a.jsx)(s.hr,{}),"\n",(0,a.jsx)(s.h2,{children:"Contributing"}),"\n",(0,a.jsxs)(s.p,{children:["This documentation can be edited on GitHub ",(0,a.jsx)(s.a,{href:"https://github.com/Achaak/pikas/blob/main/apps/docs-ui/pages/components/grid.mdx",children:"here"})]})]})}function h(){let n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,t.a)(),...n.components};return s?(0,a.jsx)(s,{...n,children:(0,a.jsx)(m,{...n})}):m(n)}},2640:function(n,s,e){"use strict";e.d(s,{a:function(){return l}});var a=e(2983);let t=a.createContext({});function l(n){let s=a.useContext(t);return a.useMemo(function(){return"function"==typeof n?n(s):{...s,...n}},[s,n])}},3630:function(n,s,e){"use strict";e.d(s,{r:function(){return l}});var a=e(7458);let t=(0,e(2865).zo)("div",{display:"flex",flexDirection:"column",alignItems:"start",justifyContent:"start",transition:"all 0.3s ease",variants:{columnGap:{none:{},xs:{columnGap:8,"@md":{columnGap:8},"@lg":{columnGap:8}},sm:{columnGap:8,"@md":{columnGap:8},"@lg":{columnGap:16}},md:{columnGap:8,"@md":{columnGap:16},"@lg":{columnGap:24}},lg:{columnGap:16,"@md":{columnGap:24},"@lg":{columnGap:32}},xl:{columnGap:24,"@md":{columnGap:32},"@lg":{columnGap:40}}},rowGap:{none:{},xs:{rowGap:8,"@md":{rowGap:8},"@lg":{rowGap:8}},sm:{rowGap:8,"@md":{rowGap:8},"@lg":{rowGap:16}},md:{rowGap:8,"@md":{rowGap:16},"@lg":{rowGap:24}},lg:{rowGap:16,"@md":{rowGap:24},"@lg":{rowGap:32}},xl:{rowGap:24,"@md":{rowGap:32},"@lg":{rowGap:40}}}}}),l=(n={type:"container",rowGap:"md",columnGap:"md",cols:{default:12}})=>{let{children:s,css:e,type:l}=n;return(0,a.jsx)(t,{rowGap:"container"===l&&"string"==typeof n.rowGap?n.rowGap:void 0,columnGap:"container"===l&&"string"==typeof n.columnGap?n.columnGap:void 0,css:{..."container"===l&&{display:"grid",gridAutoFlo
1w:n.direction,justifyContent:n.justifyContent,alignItems:n.alignItems,width:"100%",gridTemplateColumns:`repeat(${n.cols.default}, 1fr)`,..."object"==typeof n.rowGap&&{rowGap:n.rowGap.default},..."object"==typeof n.columnGap&&{columnGap:n.columnGap.default}},..."item"===l&&{gridRowStart:"auto",gridColumn:"span 1",gridRow:"span 1"},..."item"===l&&n.cols?.default&&{gridColumn:`span ${n.cols.default} / span ${n.cols.default}`},..."item"===l&&n.start?.default&&{gridColumnStart:n.start.default},..."item"===l&&n.end?.default&&{gridColumnEnd:n.end.default},..."item"===l&&n.order?.default&&{order:n.order.default},...e,"@xs":{..."container"===l&&{...n.cols.xs&&{gridTemplateColumns:`repeat(${n.cols.xs}, 1fr)`},..."object"==typeof n.rowGap&&n.rowGap.xs&&{rowGap:n.rowGap.xs},..."object"==typeof n.columnGap&&n.columnGap.xs&&{columnGap:n.columnGap.xs}},..."item"===l&&{...n.cols?.xs&&{gridColumn:`span ${n.cols.xs} / span ${n.cols.xs}`},...n.start?.xs&&{gridColumnStart:n.start.xs},...n.end?.xs&&{gridColumnEnd:n.end.xs},...n.order?.xs&&{order:n.order.xs}},...e?.["@xs"]},"@sm":{..."container"===l&&{...n.cols.sm&&{gridTemplateColumns:`repeat(${n.cols.sm}, 1fr)`},..."object"==typeof n.rowGap&&n.rowGap.sm&&{rowGap:n.rowGap.sm},..."object"==typeof n.columnGap&&n.columnGap.sm&&{columnGap:n.columnGap.sm}},..."item"===l&&{...n.cols?.sm&&{gridColumn:`span ${n.cols.sm} / span ${n.cols.sm}`},...n.start?.sm&&{gridColumnStart:n.start.sm},...n.end?.sm&&{gridColumnEnd:n.end.sm},...n.order?.sm&&{order:n.order.sm}},...e?.["@sm"]},"@md":{..."container"===l&&{...n.cols.md&&{gridTemplateColumns:`repeat(${n.cols.md}, 1fr)`},..."object"==typeof n.rowGap&&n.rowGap.md&&{rowGap:n.rowGap.md},..."object"==typeof n.columnGap&&n.columnGap.md&&{columnGap:n.columnGap.md}},..."item"===l&&{...n.cols?.md&&{gridColumn:`span ${n.cols.md} / span ${n.cols.md}`},...n.start?.md&&{gridColumnStart:n.start.md},...n.end?.md&&{gridColumnEnd:n.end.md},...n.order?.md&&{order:n.order.md}},...e?.["@md"]},"@lg":{..."container"===l&&{...n.cols.lg&&{gridTemplateColumns:`repeat(${n.cols.lg}, 1fr)`},..."object"==typeof n.rowGap&&n.rowGap.lg&&{rowGap:n.rowGap.lg},..."object"==typeof n.columnGap&&n.columnGap.lg&&{columnGap:n.columnGap.lg}},..."item"===l&&{...n.cols?.lg&&{gridColumn:`span ${n.cols.lg} / span ${n.cols.lg}`},...n.start?.lg&&{gridColumnStart:n.start.lg},...n.end?.lg&&{gridColumnEnd:n.end.lg},...n.order?.lg&&{order:n.order.lg}},...e?.["@lg"]},"@xl":{..."container"===l&&{...n.cols.xl&&{gridTemplateColumns:`repeat(${n.cols.xl}, 1fr)`},..."object"==typeof n.rowGap&&n.rowGap.xl&&{rowGap:n.rowGap.xl},..."object"==typeof n.columnGap&&n.columnGap.xl&&{columnGap:n.columnGap.xl}},..."item"===l&&{...n.cols?.xl&&{gridColumn:`span ${n.cols.xl} / span ${n.cols.xl}`},...n.start?.xl&&{gridColumnStart:n.start.xl},...n.end?.xl&&{gridColumnEnd:n.end.xl},...n.order?.xl&&{order:n.order.xl}},...e?.["@xl"]},"@2xl":{..."container"===l&&{...n.cols["2xl"]&&{gridTemplateColumns:`repeat(${n.cols["2xl"]}, 1fr)`},..."object"==typeof n.rowGap&&n.rowGap["2xl"]&&{rowGap:n.rowGap["2xl"]},..."object"==typeof n.columnGap&&n.columnGap["2xl"]&&{columnGap:n.columnGap["2xl"]}},..."item"===l&&{...n.cols?.["2xl"]&&{gridColumn:`span ${n.cols["2xl"]} / span ${n.cols["2xl"]}`},...n.start?.["2xl"]&&{gridColumnStart:n.start["2xl"]},...n.end?.["2xl"]&&{gridColumnEnd:n.end["2xl"]},...n.order?.["2xl"]&&{order:n.order["2xl"]}},...e?.["@2xl"]}},children:s})}}},function(n){n.O(0,[2888,9774,179],function(){return n(n.s=2573)}),_N_E=n.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.