(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{CafY:function(e,t,n){"use strict";var o=n("q1tI"),r=n.n(o),c=n("cv3Q"),a=Object(o.createContext)(),i=n("CoLn"),l=[{name:"Getting Started",routes:[{title:"Introduction",href:"".concat("/components")},{title:"Common Props",href:"".concat("/components","/common-props")},{title:"Theming",href:"".concat("/components","/theming")},{title:"Responsive Styling",href:"".concat("/components","/responsive")}]},{name:"Components",routes:[{title:"Alerts",href:"".concat("/components","/alerts")},{title:"Box",href:"".concat("/components","/box")},{title:"Buttons",href:"".concat("/components","/buttons")},{title:"Cards",href:"".concat("/components","/cards")},{title:"Checkbox",href:"".concat("/components","/checkbox")},{title:"Dropdown",href:"".concat("/components","/dropdown")},{title:"Flex",href:"".concat("/components","/flex")},{title:"Grid",href:"".concat("/components","/grid")},{title:"Links",href:"".concat("/components","/links")},{title:"Icons",href:"".concat("/components","/icons")},{title:"Heading",href:"".concat("/components","/heading")},{title:"Radio",href:"".concat("/components","/radio")},{title:"Tables",href:"".concat("/components","/tables")},{title:"Tags",href:"".concat("/components","/tags")},{title:"Text",href:"".concat("/components","/text")},{title:"TextField",href:"".concat("/components","/text-field")}]}],p=[{name:"Getting Started",routes:[{title:"Introduction",href:"".concat("/design")}]},{name:"Base",routes:[{title:"Colors",href:"".concat("/design","/colors")},{title:"Typography",href:"".concat("/design","/typography")},{title:"Logos",href:"".concat("/design","/logos")},{title:"Spacing",href:"".concat("/design","/spacing")},{title:"Breakpoints",href:"".concat("/design","/breakpoints")}]},{name:"UI Patterns",routes:[{title:"Alerts",href:"".concat("/design","/alerts")},{title:"Buttons",href:"".concat("/design","/buttons")},{title:"Cards",href:"".concat("/design","/cards")},{title:"File Upload",href:"".concat("/design","/file-upload")},{title:"Forms",href:"".concat("/design","/forms")},{title:"Form Selections",href:"".concat("/design","/form-selections")},{title:"Tables",href:"".concat("/design","/tables")},{title:"Tags",href:"".concat("/design","/tags")},{title:"Text Fields",href:"".concat("/design","/text-fields")}]}],s=r.a.createElement,b=function(e,t){return s(r.a.Fragment,null,s(c.Text,{type:"body",fontWeight:"700",as:"p",m:"24px 0 8px 0"},e.name),e.routes.map((function(e){return s(c.Text,{key:e.title,as:"p",m:"5px 0",fontWeight:t===e.title?"700":"500"},s(c.Link,{href:e.href},e.title))})))},m=function(e){var t=e.children,n=e.innerRef,o=e.type,r=e.title;return s(c.Flex,{flexShrink:"0",height:"100%",flexDirection:"column",ref:n,width:"280px",pb:"md",pr:"sm",pl:"sm"},t,function(e,t){return"components"===e?l.map((function(e){return b(e,t)})):"design"===e?p.map((function(e){return b(e,t)})):null}(o,r))},d=n("ZHh6"),f=n("Y5X5"),u=r.a.createElement;t.a=function(e){return function(t){var n=t.children;return u(a.Provider,{value:{label:"".concat(e.type)}},u(d.a,{title:e.title}),u(f.a,null),u(c.Flex,{flexWrap:"wrap",m:"10px auto",maxWidth:"1200px"},u(m,{type:e.type,title:e.title}),u(c.Flex,{height:"100%",paddingBottom:"lg",flexDirection:"column",width:["100%","100%","calc(100% - 300px)"],maxWidth:"800px",m:"0 20px"},u(i.a,null,u(c.Heading,{mb:"0px",mt:"0px",type:"h2"},e.title),u("main",null,n)))))}}},Pa8y:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/grid",function(){return n("njCF")}])},njCF:function(e,t,n){"use strict";n.r(t),n.d(t,"meta",(function(){return b})),n.d(t,"default",(function(){return f}));var o=n("wx14"),r=n("Ff2n"),c=n("rePB"),a=n("q1tI"),i=n.n(a),l=n("7ljp"),p=(n("cv3Q"),n("IuJO"),n("CafY"));i.a.createElement;function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}var b={type:"components",title:"Grid"},m={meta:b},d=Object(p.a)(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?s(Object(n),!0).forEach((function(t){Object(c.a)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},b));function f(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(l.b)(d,Object(o.a)({},m,n,{components:t,mdxType:"MDXLayout"}),Object(l.b)("p",null,Object(l.b)("inlineCode",{parentName:"p"},"Grid")," is a ",Object(l.b)("inlineCode",{parentName:"p"},"Box")," that allows grid system props. Visit ",Object(l.b)("a",Object(o.a)({parentName:"p"},{href:"https://css-tricks.com/snippets/css/complete-guide-grid/"}),"CSS Tricks' guide to Grids")," for more on its usage."),Object(l.b)("h3",null,"Example"),Object(l.b)("pre",null,Object(l.b)("code",Object(o.a)({parentName:"pre"},{className:"language-jsx",metastring:"live",live:!0}),'<Grid bg="#fff" gridTemplateColumns="100px 100px 100px" gridGap="12px">\n    <Box bg="blue.0">1</Box>\n    <Box bg="blue.0">2</Box>\n    <Box bg="blue.0">3</Box>\n    <Box bg="blue.0">4</Box>\n    <Box bg="blue.0">5</Box>\n    <Box bg="blue.0">6</Box>\n</Grid>\n')),Object(l.b)("h3",null,"Common Props"),Object(l.b)("p",null,Object(l.b)("inlineCode",{parentName:"p"},"Grid")," includes ",Object(l.b)("inlineCode",{parentName:"p"},"COMMON"),", ",Object(l.b)("inlineCode",{parentName:"p"},"GRID"),", and ",Object(l.b)("inlineCode",{parentName:"p"},"BORDER")," props. Read ",Object(l.b)("a",Object(o.a)({parentName:"p"},{href:"/components/common-props"}),"Common Props")," for details and API. These common props will override component props such as the color."),Object(l.b)("h3",null,"Component Props"),Object(l.b)("table",null,Object(l.b)("thead",{parentName:"table"},Object(l.b)("tr",{parentName:"thead"},Object(l.b)("th",Object(o.a)({parentName:"tr"},{align:"left"}),"Prop name"),Object(l.b)("th",Object(o.a)({parentName:"tr"},{align:"left"}),"Type"),Object(l.b)("th",Object(o.a)({parentName:"tr"},{align:"center"}),"Default"),Object(l.b)("th",Object(o.a)({parentName:"tr"},{align:"left"}),"Description"))),Object(l.b)("tbody",{parentName:"table"},Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(o.a)({parentName:"tr"},{align:"left"}),"theme"),Object(l.b)("td",Object(o.a)({parentName:"tr"},{align:"left"}),"Object"),Object(l.b)("td",Object(o.a)({parentName:"tr"},{align:"center"}),"Bridge Theme"),Object(l.b)("td",Object(o.a)({parentName:"tr"},{align:"left"}),"use to override default bridge theme")))))}f.isMDXComponent=!0}},[["Pa8y",0,2,5,1,3,4]]]);