UNPKG

@tidy-ui/container

Version:

The versatile Container is your layout commander, adapting effortlessly to screen shifts and breakpoints. It comes in two modes: fluid, flexing its width with the screen for a dynamic arrangement of enclosed components; and fixed, aligning components sole

2 lines (1 loc) 2.27 kB
import n from"react";import{styled as t,css as e,devices as r,applyStandardOverrideStyles as a}from"@tidy-ui/commons";var i=function(){return i=Object.assign||function(n){for(var t,e=1,r=arguments.length;e<r;e++)for(var a in t=arguments[e])Object.prototype.hasOwnProperty.call(t,a)&&(n[a]=t[a]);return n},i.apply(this,arguments)};function o(n,t){return Object.defineProperty?Object.defineProperty(n,"raw",{value:t}):n.raw=t,n}var p,x,d,m,l,u=t.div(l||(l=o(["\n ","\n ","\n"],["\n ","\n ","\n"])),function(n){var t=n.theme.layout.screens,a=n.isFixed,i=n.maxWidth,l=n.gutter;return e(m||(m=o(["\n margin-left: auto;\n margin-right: auto;\n box-sizing: border-box;\n ","\n ","\n ","\n "],["\n margin-left: auto;\n margin-right: auto;\n box-sizing: border-box;\n ","\n ","\n ","\n "])),i&&e(p||(p=o(["\n max-width: ","px;\n "],["\n max-width: ","px;\n "])),t[i].breakpoint),l&&e(x||(x=o(["\n padding: 0 ",";\n "],["\n padding: 0 ",";\n "])),l),a&&e(d||(d=o(["\n "," {\n max-width: ","px;\n }\n "," {\n max-width: ","px;\n }\n "," {\n max-width: ","px;\n }\n "," {\n max-width: ","px;\n }\n "," {\n max-width: ","px;\n }\n "],["\n "," {\n max-width: ","px;\n }\n "," {\n max-width: ","px;\n }\n "," {\n max-width: ","px;\n }\n "," {\n max-width: ","px;\n }\n "," {\n max-width: ","px;\n }\n "])),r.mobile,t.xs.breakpoint,r.tablet,t.sm.breakpoint,r.laptop,t.md.breakpoint,r.desktop,t.lg.breakpoint,r.tv,t.xl.breakpoint))},a),b=n.forwardRef(function(t,e){var r=t.children,a=t.ele,o=function(n,t){var e={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&t.indexOf(r)<0&&(e[r]=n[r]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(n);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(n,r[a])&&(e[r[a]]=n[r[a]])}return e}(t,["children","ele"]);return n.createElement(u,i({"data-tui-name":"Container",ref:e},o),a?n.cloneElement(a,{},r):r)});b.defaultProps={gutter:"1.5rem",isFixed:!1},b.displayName="Container";export{b as Container};