@gsretail.com/gui-core
Version:
A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook
2 lines (1 loc) • 1.09 kB
JavaScript
import e from"../../../../@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js";import n from"../../../../@babel/runtime/helpers/esm/extends.js";const t=["values","unit","step"];function r(r){const{values:i={xs:0,sm:600,md:900,lg:1200,xl:1536},unit:o="px",step:u=5}=r,s=e(r,t),m=(e=>{const t=Object.keys(e).map((n=>({key:n,val:e[n]})))||[];return t.sort(((e,n)=>e.val-n.val)),t.reduce(((e,t)=>n({},e,{[t.key]:t.val})),{})})(i),a=Object.keys(m);function d(e){return`@media (min-width:${"number"==typeof i[e]?i[e]:e}${o})`}function l(e){return`@media (max-width:${("number"==typeof i[e]?i[e]:e)-u/100}${o})`}function f(e,n){const t=a.indexOf(n);return`@media (min-width:${"number"==typeof i[e]?i[e]:e}${o}) and (max-width:${(-1!==t&&"number"==typeof i[a[t]]?i[a[t]]:n)-u/100}${o})`}return n({keys:a,values:m,up:d,down:l,between:f,only:function(e){return a.indexOf(e)+1<a.length?f(e,a[a.indexOf(e)+1]):d(e)},not:function(e){const n=a.indexOf(e);return 0===n?d(a[1]):n===a.length-1?l(a[n]):f(e,a[a.indexOf(e)+1]).replace("@media","@media not all and")},unit:o},s)}export{r as default};