(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{CafY:function(t,e,n){"use strict";var r=n("q1tI"),a=n.n(r),c=n("cv3Q"),o=Object(r.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=a.a.createElement,b=function(t,e){return s(a.a.Fragment,null,s(c.Text,{type:"body",fontWeight:"700",as:"p",m:"24px 0 8px 0"},t.name),t.routes.map((function(t){return s(c.Text,{key:t.title,as:"p",m:"5px 0",fontWeight:e===t.title?"700":"500"},s(c.Link,{href:t.href},t.title))})))},m=function(t){var e=t.children,n=t.innerRef,r=t.type,a=t.title;return s(c.Flex,{flexShrink:"0",height:"100%",flexDirection:"column",ref:n,width:"280px",pb:"md",pr:"sm",pl:"sm"},e,function(t,e){return"components"===t?l.map((function(t){return b(t,e)})):"design"===t?p.map((function(t){return b(t,e)})):null}(r,a))},d=n("ZHh6"),f=n("Y5X5"),u=a.a.createElement;e.a=function(t){return function(e){var n=e.children;return u(o.Provider,{value:{label:"".concat(t.type)}},u(d.a,{title:t.title}),u(f.a,null),u(c.Flex,{flexWrap:"wrap",m:"10px auto",maxWidth:"1200px"},u(m,{type:t.type,title:t.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"},t.title),u("main",null,n)))))}}},ZxJG:function(t,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/design/spacing",function(){return n("oF6r")}])},oF6r:function(t,e,n){"use strict";n.r(e),n.d(e,"meta",(function(){return b})),n.d(e,"default",(function(){return f}));var r=n("wx14"),a=n("Ff2n"),c=n("rePB"),o=n("q1tI"),i=n.n(o),l=n("7ljp"),p=n("CafY");i.a.createElement;function s(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}var b={type:"design",title:"Spacing"},m={meta:b},d=Object(p.a)(function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?s(Object(n),!0).forEach((function(e){Object(c.a)(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({},b));function f(t){var e=t.components,n=Object(a.a)(t,["components"]);return Object(l.b)(d,Object(r.a)({},m,n,{components:e,mdxType:"MDXLayout"}),Object(l.b)("p",null,"All spacing between text and components are done in increments of 4 pixels.\nTypography follows a ",Object(l.b)("strong",{parentName:"p"},"baseline grid of 4 px"),", so all line heights must be divisible by 4."),Object(l.b)("table",null,Object(l.b)("thead",{parentName:"table"},Object(l.b)("tr",{parentName:"thead"},Object(l.b)("th",Object(r.a)({parentName:"tr"},{align:null}),"Size"),Object(l.b)("th",Object(r.a)({parentName:"tr"},{align:"center"}),"Pixel Value"))),Object(l.b)("tbody",{parentName:"table"},Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"XX- Small"),Object(l.b)("td",Object(r.a)({parentName:"tr"},{align:"center"}),"4px")),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"X- Small"),Object(l.b)("td",Object(r.a)({parentName:"tr"},{align:"center"}),"8px")),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Small"),Object(l.b)("td",Object(r.a)({parentName:"tr"},{align:"center"}),"16px")),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Medium"),Object(l.b)("td",Object(r.a)({parentName:"tr"},{align:"center"}),"32px")),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Large"),Object(l.b)("td",Object(r.a)({parentName:"tr"},{align:"center"}),"64px")),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"X- Large"),Object(l.b)("td",Object(r.a)({parentName:"tr"},{align:"center"}),"128px")))))}f.isMDXComponent=!0}},[["ZxJG",0,2,5,1,3,4]]]);