New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
atomic-layout
Advanced tools
atomic-layout - npm Package Compare versions
Comparing version 0.10.0 to 0.10.1
@@ -12,3 +12,3 @@ "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("styled-components")),r=require("react"),n=e(r);const o={defaultUnit:"px",defaultBehavior:"up",defaultBreakpointName:"xs",breakpoints:{xs:{maxWidth:"575px"},sm:{minWidth:"576px",maxWidth:"767px"},md:{minWidth:"768px",maxWidth:"991px"},lg:{minWidth:"992px",maxWidth:"1199px"},xl:{minWidth:"1200px"}}};function a(e,t){if(!e)throw new Error(t)}function i(e,t){e||console.warn(t)}var s=new class{constructor(e){return this.defaultUnit=o.defaultUnit,this.defaultBehavior=o.defaultBehavior,this.breakpoints=o.breakpoints,this.defaultBreakpointName=o.defaultBreakpointName,this.isConfigureCalled=!1,e?this.configure(e,!1):this}configure(e,t=!0){return t&&i(!this.isConfigureCalled,"Failed to configure Layout: do not call `Layout.configure()` more than once. Layout configuration must remain consistent throughout the application."),a(e&&"object"==typeof e,`Failed to configure Layout: expected an options Object, but got: ${e}.`),Object.keys(e||{}).forEach(t=>{this[t]=e[t]}),a(this.breakpoints,"Failed to configure Layout: expected to have at least one breakpoint specified, but got none."),a(this.breakpoints.hasOwnProperty(this.defaultBreakpointName),`Failed to configure Layout: cannot use "${this.defaultBreakpointName}" as the default breakpoint (breakpoint not found).`),a(this.defaultBreakpointName,`Failed to configure Layout: expected "defaultBreakpointName" property set, but got: ${this.defaultBreakpointName}.`),this.isConfigureCalled=t,this}};function p(...e){return e.reduce((e,t)=>(...r)=>e(t(...r)))}function u(e){return null!=e}function c(e){if(!u(e))return"";return`${e}${"number"==typeof e&&0!==e?s.defaultUnit:""}`}const l=["/","auto"];function m(e){const t=/^[0-9]/.test(e),r=l.includes(e);return!t&&!r}const d=p(e=>{const t=[],r=[];return e.forEach(e=>{m(e)?t.push(e):r.push(e)}),[t.length>0?`'${t.join(" ")}'`:"",r.join(" ")].filter(Boolean).join(" ")},e=>e.split(" "),e=>e.replace(/'+/gm,""),e=>e.trim()),f=p(e=>e.join("\n"),e=>e.map(d),e=>e.split("\n"),e=>e.trim()),g={area:{props:["grid-area"]},areas:{props:["grid-template-areas"],transformValue:f},template:{props:["grid-template"],transformValue:f},templateCols:{props:["grid-template-columns"]},templateRows:{props:["grid-template-rows"]},col:{props:["grid-column"]},colStart:{props:["grid-column-start"]},colEnd:{props:["grid-column-end"]},row:{props:["grid-row"]},rowStart:{props:["grid-row-start"]},rowEnd:{props:["grid-row-end"]},gap:{props:["grid-gap"],transformValue:c},gapCol:{props:["grid-column-gap"],transformValue:c},gapRow:{props:["grid-row-gap"],transformValue:c},gutter:{props:["grid-gap"],transformValue:c},gutterCol:{props:["grid-column-gap"],transformValue:c},gutterRow:{props:["grid-row-gap"],transformValue:c},autoRows:{props:["grid-auto-rows"],transformValue:c},autoCols:{props:["grid-auto-columns"],transformValue:c},autoFlow:{props:["grid-auto-flow"]},align:{props:["align-self"]},alignItems:{props:["align-items"]},alignContent:{props:["align-content"]},justify:{props:["justify-self"]},justifyItems:{props:["justify-items"]},justifyContent:{props:["justify-content"]},place:{props:["place-self"]},placeItems:{props:["place-items"]},placeContent:{props:["place-content"]},flexDirection:{props:["flex-direction"]},flexShrink:{props:["flex-shrink"]},flexGrow:{props:["flex-grow"]},flexWrap:{props:["flex-wrap"]},height:{props:["height"],transformValue:c},minHeight:{props:["min-height"],transformValue:c},maxHeight:{props:["max-height"],transformValue:c},width:{props:["width"],transformValue:c},minWidth:{props:["min-width"],transformValue:c},maxWidth:{props:["max-width"],transformValue:c},margin:{props:["margin"],transformValue:c},marginTop:{props:["margin-top"],transformValue:c},marginRight:{props:["margin-right"],transformValue:c},marginBottom:{props:["margin-bottom"],transformValue:c},marginLeft:{props:["margin-left"],transformValue:c},marginVertical:{props:["margin-top","margin-bottom"],transformValue:c},marginHorizontal:{props:["margin-right","margin-left"],transformValue:c},padding:{props:["padding"],transformValue:c},paddingTop:{props:["padding-top"],transformValue:c},paddingRight:{props:["padding-right"],transformValue:c},paddingBottom:{props:["padding-bottom"],transformValue:c},paddingLeft:{props:["padding-left"],transformValue:c},paddingVertical:{props:["padding-top","padding-bottom"],transformValue:c},paddingHorizontal:{props:["padding-right","padding-left"],transformValue:c}};function h(e){return e.slice(0,1).toLowerCase()+e.slice(1,e.length)}function b(e){const t=Object.keys(s.breakpoints).join("|"),r=["down","only"].join("|"),n=new RegExp(`(${t})$`,"gi"),o=new RegExp(`(${r})$`,"gi"),a=e.match(o),i=a?a[0]:"",p=e.replace(i,"").match(n),u=p?p[0]:"",c=e.replace(u,"").replace(i,""),l=u?h(u):s.defaultBreakpointName,m=l===s.defaultBreakpointName;return{originPropName:e,purePropName:c,behavior:i?h(i):s.defaultBehavior,breakpoint:{name:l,isDefault:m}}}function k(e){return e.replace(/[A-Z]/g,e=>`-${e}`.toLowerCase())}function x(e){return Object.entries(e).filter(([e,t])=>u(t)).map(([e,t])=>[k(e),t])}const y=e=>t=>t.filter(([t])=>((e,t)=>{const[r,n]=e.split("-");return!["height","width"].includes(n)||("min"===r&&["up","only"].includes(t)||"max"===r&&["down","only"].includes(t))})(t,e)),w=e=>t=>t.map(e).join(" and ");function j(e,t){return p(w(([e,t])=>`(${e}:${String(c(t))})`),y(t),x)(e)}const v=(e,t,r,n)=>{const o=e.map(e=>`${e}:${String(t)};`).join(""),a=s.breakpoints[r.name];return a&&!(r.isDefault&&n===s.defaultBehavior)?`@media ${j(a,n)} {${o}}`:o};function V(e){return Object.keys(e).map(b).filter(({purePropName:e})=>g.hasOwnProperty(e)).filter(({originPropName:t})=>u(e[t])).map(({purePropName:t,originPropName:r,breakpoint:n,behavior:o})=>{const{props:a,transformValue:i}=g[t],s=e[r],p=i?i(s):s;return v(a,p,n,o)}).join(" ")}const $=t.div` | ||
| } | ||
| `;function U(e){return Object.entries(e).map(([e,t])=>[C(e),e,t]).filter(([e])=>"max"!==e).reduce((e,[t,r,n])=>{const o="min"===t,a=o?r.replace(/^min/,"max"):r,[,i,s]=/(\d+)(.+)?/.exec(n),p=o?parseFloat(i)-1:i;return{...e,[a]:s?`${p}${s}`:p}},{})}const z=e=>"string"==typeof e?s.breakpoints[e]:e;const D=(e,t=70)=>{const n=r.useRef();r.useEffect(()=>{n.current=function(e,t){let r,n=null;return function o(...a){const i=Date.now();clearTimeout(n),!r||i-r>=t?(e.apply(null,a),r=i):n=setTimeout(o.bind(null,...a),t-(i-r))}}(e,t)}),r.useEffect(()=>{const{current:e}=n;return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[])},H=(e,t,r=s.breakpoints)=>{let n;D(()=>{const t=Object.keys(r).find(e=>{const t=j(r[e],"only");return matchMedia(t).matches});n!==t&&(e(t),n=t)},t)},T=(e=>{const t=Object.keys(e);return(r,n)=>{const o=Object.keys(r).filter(e=>{const r=t.includes(e);return r||console.warn('useBreakpoints: Breakpoint "%s" is not found. Add it via "Layout.configure()", or use one of the existing breakpoints (%s).',e,t.join(", ")),r}).find(t=>{const r=e[t],n=j(r,"only");return r&&matchMedia(n).matches});return o?r[o]:n}})(s.breakpoints),_=e=>{const[t,n]=r.useState();return H(()=>{const t=Object.keys(e).map(b).filter(({breakpoint:e,behavior:t})=>{const r=j(s.breakpoints[e.name],t);return matchMedia(r).matches}).reduce((t,{originPropName:r,purePropName:n})=>({...t,[n]:e[r]}),{});n(t)}),t||{}};exports.Box=$,exports.Composition=({children:e,...t})=>{const n=M(t),o=Object.keys(n).length>0,a=typeof e,s="function"===a;return i(!(o&&!s),`Failed to render 'Composition' with template areas ["${Object.keys(n).join('", "')}"]: expected children to be a function, but got: ${a}. Please provide render function as children, or remove assigned template props.`),r.createElement(A,Object.assign({},t),o&&s?e(n):e)},exports.MediaQuery=O,exports.Only=({children:e,except:t,for:n,from:o,to:a,...i})=>{const s=((e,t)=>(...n)=>{const o=R($,n);return r.createElement(o,Object.assign({},t),e)})(e,i);if(n)return s(z(n));const p=z(o),u=z(a);if(p&&u&&!t){return s(E({behavior:"down",breakpoint:u},{behavior:"up",breakpoint:p},!1).breakpoint)}return p&&u&&t?s(U(p),P(u)):p&&!u?s(P(p)):!p&&u?s(U(u)):e},exports.default=s,exports.defaultOptions=o,exports.useBreakpointChange=H,exports.useResponsiveComponent=function(e){return t=>{const r=_(t);return n.createElement(e,Object.assign({},r))}},exports.useResponsiveProps=_,exports.useResponsiveValue=(e,t)=>{const[n,o]=r.useState(t);return H(()=>{const r=T(e,t);o(r)}),n},exports.useViewportChange=D,exports.withBreakpoints=T; | ||
| `;function U(e){return Object.entries(e).map(([e,t])=>[C(e),e,t]).filter(([e])=>"max"!==e).reduce((e,[t,r,n])=>{const o="min"===t,a=o?r.replace(/^min/,"max"):r,[,i,s]=/(\d+)(.+)?/.exec(n),p=o?parseFloat(i)-1:i;return{...e,[a]:s?`${p}${s}`:p}},{})}const z=e=>"string"==typeof e?s.breakpoints[e]:e;const D=(e,t=70)=>{const n=r.useRef();r.useEffect(()=>{n.current=function(e,t){let r,n=null;return function o(...a){const i=Date.now();clearTimeout(n),!r||i-r>=t?(e.apply(null,a),r=i):n=setTimeout(o.bind(null,...a),t-(i-r))}}(e,t)}),r.useEffect(()=>{const{current:e}=n;return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[])},H=(e,t,r=s.breakpoints)=>{let n;D(()=>{const t=Object.keys(r).find(e=>{const t=j(r[e],"only");return matchMedia(t).matches});n!==t&&(e(t),n=t)},t)},T=(e=>{const t=Object.keys(e);return(r,n)=>{const o=Object.keys(r).filter(e=>{const r=t.includes(e);return r||console.warn('useBreakpoints: Breakpoint "%s" is not found. Add it via "Layout.configure()", or use one of the existing breakpoints (%s).',e,t.join(", ")),r}).find(t=>{const r=e[t],n=j(r,"only");return r&&matchMedia(n).matches});return o?r[o]:n}})(s.breakpoints),_=e=>{const[t,n]=r.useState();return H(()=>{const t=Object.keys(e).map(b).filter(({breakpoint:e,behavior:t})=>{const r=j(s.breakpoints[e.name],t);return matchMedia(r).matches}).reduce((t,{originPropName:r,purePropName:n})=>({...t,[n]:e[r]}),{});n(t)}),t||{}};exports.Box=$,exports.Composition=({children:e,...t})=>{const n=M(t),o=Object.keys(n).length>0,a=typeof e,s="function"===a;return i(!(o&&!s),`Failed to render 'Composition' with template areas ["${Object.keys(n).join('", "')}"]: expected children to be a function, but got: ${a}. Please provide render function as children, or remove assigned template props.`),r.createElement(A,Object.assign({},t),o&&s?e(n):e)},exports.MediaQuery=O,exports.Only=({children:e,except:t,for:n,from:o,to:a,...i})=>{const s=((e,t)=>(...n)=>{const o=R($,n);return r.createElement(o,Object.assign({},t),e)})(e,i);if(n)return s(z(n));const p=z(o),u=z(a);if(p&&u&&!t){return s(E({behavior:"down",breakpoint:u},{behavior:"up",breakpoint:p},!1).breakpoint)}return p&&u&&t?s(U(p),P(u)):p&&!u?s(P(p)):!p&&u?s(U(u)):r.createElement(r.Fragment,null,"children")},exports.default=s,exports.defaultOptions=o,exports.useBreakpointChange=H,exports.useResponsiveComponent=function(e){return t=>{const r=_(t);return n.createElement(e,Object.assign({},r))}},exports.useResponsiveProps=_,exports.useResponsiveValue=(e,t)=>{const[n,o]=r.useState(t);return H(()=>{const r=T(e,t);o(r)}),n},exports.useViewportChange=D,exports.withBreakpoints=T; | ||
| //# sourceMappingURL=index.js.map |
@@ -1309,3 +1309,3 @@ import styled from 'styled-components'; | ||
| return children; | ||
| return createElement(Fragment, null, "children"); | ||
| }; | ||
@@ -1312,0 +1312,0 @@ |
| { | ||
| "name": "atomic-layout", | ||
| "version": "0.10.0", | ||
| "version": "0.10.1", | ||
| "description": "Physical representation of layout composition to create declarative, responsive layouts in React.", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
@@ -8,3 +8,3 @@ import * as React from 'react'; | ||
| } | ||
| declare const Box: React.FunctionComponent<BoxProps>; | ||
| declare const Box: React.FC<BoxProps>; | ||
| export default Box; |
@@ -10,3 +10,3 @@ import * as React from 'react'; | ||
| } | ||
| declare const Composition: React.FunctionComponent<CompositionProps>; | ||
| declare const Composition: React.FC<CompositionProps>; | ||
| export default Composition; |
@@ -0,7 +1,8 @@ | ||
| import * as React from 'react'; | ||
| import { MediaQuery as MediaQueryParams } from "../const/defaultOptions"; | ||
| interface Props extends MediaQueryParams { | ||
| interface MediaQueryProps extends MediaQueryParams { | ||
| children: (matches: boolean) => JSX.Element; | ||
| matches?: boolean; | ||
| } | ||
| declare const MediaQuery: (props: Props) => JSX.Element; | ||
| declare const MediaQuery: React.FC<MediaQueryProps>; | ||
| export default MediaQuery; |
@@ -0,5 +1,6 @@ | ||
| import * as React from 'react'; | ||
| import { BoxProps } from './Box'; | ||
| import { Breakpoint } from "../const/defaultOptions"; | ||
| import { GenericProps } from "../const/props"; | ||
| export declare type BreakpointRef = string | Breakpoint; | ||
| export interface OnlyProps extends GenericProps { | ||
| export interface OnlyProps extends BoxProps { | ||
| /** | ||
@@ -24,5 +25,3 @@ * Renders children only at the specified breakpoint. | ||
| } | ||
| declare const Only: ({ children, except, for: exactBreakpointName, from: minBreakpointName, to: maxBreakpointName, ...restProps }: { | ||
| children: any; | ||
| } & OnlyProps) => JSX.Element; | ||
| declare const Only: React.FC<OnlyProps>; | ||
| export default Only; |
@@ -116,3 +116,3 @@ import { Numeric } from './defaultOptions'; | ||
| } | ||
| export interface GridProps extends GenericProps { | ||
| export interface GridProps { | ||
| /** | ||
@@ -119,0 +119,0 @@ * Grid area. |
@@ -7,3 +7,3 @@ import React from 'react'; | ||
| */ | ||
| declare function useResponsiveComponent<OwnProps extends Record<string, any>, ResponsiveProps extends Record<string, Numeric>>(Component: React.FunctionComponent<OwnProps>): React.FunctionComponent<OwnProps & Partial<ResponsiveProps>>; | ||
| declare function useResponsiveComponent<OwnProps extends Record<string, any>, ResponsiveProps extends Record<string, Numeric>>(Component: React.FC<OwnProps>): React.FC<OwnProps & Partial<ResponsiveProps>>; | ||
| export default useResponsiveComponent; |
@@ -6,3 +6,3 @@ import { AreasList } from '../getAreasList'; | ||
| import { BoxProps } from "../../../components/Box"; | ||
| export declare type AreaComponent = React.FunctionComponent<BoxProps>; | ||
| export declare type AreaComponent = React.FC<BoxProps>; | ||
| export interface AreasMap { | ||
@@ -9,0 +9,0 @@ [componentName: string]: AreaComponent; |
@@ -1,1 +0,1 @@ | ||
| !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("styled-components"),require("react")):"function"==typeof define&&define.amd?define(["exports","styled-components","react"],n):n((e=e||self).AtomicLayout={},e.styled,e.React)}(this,(function(e,n,r){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n;var t="default"in r?r.default:r;function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,n){for(var r=0;r<n.length;r++){var t=n[r];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}function i(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function u(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function c(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?u(r,!0).forEach((function(n){i(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):u(r).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function p(e,n){if(null==e)return{};var r,t,o=function(e,n){if(null==e)return{};var r,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function f(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function s(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var r=[],t=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(t=(i=u.next()).done)&&(r.push(i.value),!n||r.length!==n);t=!0);}catch(e){o=!0,a=e}finally{try{t||null==u.return||u.return()}finally{if(o)throw a}}return r}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var l={defaultUnit:"px",defaultBehavior:"up",defaultBreakpointName:"xs",breakpoints:{xs:{maxWidth:"575px"},sm:{minWidth:"576px",maxWidth:"767px"},md:{minWidth:"768px",maxWidth:"991px"},lg:{minWidth:"992px",maxWidth:"1199px"},xl:{minWidth:"1200px"}}};function d(e,n){if(!e)throw new Error(n)}function m(e,n){e||console.warn(n)}var g=new(function(){function e(n){return function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,e),this.defaultUnit=l.defaultUnit,this.defaultBehavior=l.defaultBehavior,this.breakpoints=l.breakpoints,this.defaultBreakpointName=l.defaultBreakpointName,this.isConfigureCalled=!1,n?this.configure(n,!1):this}var n,r,t;return n=e,(r=[{key:"configure",value:function(e){var n=this,r=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return r&&m(!this.isConfigureCalled,"Failed to configure Layout: do not call `Layout.configure()` more than once. Layout configuration must remain consistent throughout the application."),d(e&&"object"===o(e),"Failed to configure Layout: expected an options Object, but got: ".concat(e,".")),Object.keys(e||{}).forEach((function(r){n[r]=e[r]})),d(this.breakpoints,"Failed to configure Layout: expected to have at least one breakpoint specified, but got none."),d(this.breakpoints.hasOwnProperty(this.defaultBreakpointName),'Failed to configure Layout: cannot use "'.concat(this.defaultBreakpointName,'" as the default breakpoint (breakpoint not found).')),d(this.defaultBreakpointName,'Failed to configure Layout: expected "defaultBreakpointName" property set, but got: '.concat(this.defaultBreakpointName,".")),this.isConfigureCalled=r,this}}])&&a(n.prototype,r),t&&a(n,t),e}());function h(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return n.reduce((function(e,n){return function(){return e(n.apply(void 0,arguments))}}))}function v(e){return null!=e}function b(e){if(!v(e))return"";var n="number"==typeof e&&0!==e?g.defaultUnit:"";return"".concat(e).concat(n)}var y=["/","auto"];function k(e){var n=/^[0-9]/.test(e),r=y.includes(e);return!n&&!r}var w=h((function(e){var n=[],r=[];return e.forEach((function(e){k(e)?n.push(e):r.push(e)})),[n.length>0?"'".concat(n.join(" "),"'"):"",r.join(" ")].filter(Boolean).join(" ")}),(function(e){return e.split(" ")}),(function(e){return e.replace(/'+/gm,"")}),(function(e){return e.trim()})),j=h((function(e){return e.join("\n")}),(function(e){return e.map(w)}),(function(e){return e.split("\n")}),(function(e){return e.trim()})),O={area:{props:["grid-area"]},areas:{props:["grid-template-areas"],transformValue:j},template:{props:["grid-template"],transformValue:j},templateCols:{props:["grid-template-columns"]},templateRows:{props:["grid-template-rows"]},col:{props:["grid-column"]},colStart:{props:["grid-column-start"]},colEnd:{props:["grid-column-end"]},row:{props:["grid-row"]},rowStart:{props:["grid-row-start"]},rowEnd:{props:["grid-row-end"]},gap:{props:["grid-gap"],transformValue:b},gapCol:{props:["grid-column-gap"],transformValue:b},gapRow:{props:["grid-row-gap"],transformValue:b},gutter:{props:["grid-gap"],transformValue:b},gutterCol:{props:["grid-column-gap"],transformValue:b},gutterRow:{props:["grid-row-gap"],transformValue:b},autoRows:{props:["grid-auto-rows"],transformValue:b},autoCols:{props:["grid-auto-columns"],transformValue:b},autoFlow:{props:["grid-auto-flow"]},align:{props:["align-self"]},alignItems:{props:["align-items"]},alignContent:{props:["align-content"]},justify:{props:["justify-self"]},justifyItems:{props:["justify-items"]},justifyContent:{props:["justify-content"]},place:{props:["place-self"]},placeItems:{props:["place-items"]},placeContent:{props:["place-content"]},flexDirection:{props:["flex-direction"]},flexShrink:{props:["flex-shrink"]},flexGrow:{props:["flex-grow"]},flexWrap:{props:["flex-wrap"]},height:{props:["height"],transformValue:b},minHeight:{props:["min-height"],transformValue:b},maxHeight:{props:["max-height"],transformValue:b},width:{props:["width"],transformValue:b},minWidth:{props:["min-width"],transformValue:b},maxWidth:{props:["max-width"],transformValue:b},margin:{props:["margin"],transformValue:b},marginTop:{props:["margin-top"],transformValue:b},marginRight:{props:["margin-right"],transformValue:b},marginBottom:{props:["margin-bottom"],transformValue:b},marginLeft:{props:["margin-left"],transformValue:b},marginVertical:{props:["margin-top","margin-bottom"],transformValue:b},marginHorizontal:{props:["margin-right","margin-left"],transformValue:b},padding:{props:["padding"],transformValue:b},paddingTop:{props:["padding-top"],transformValue:b},paddingRight:{props:["padding-right"],transformValue:b},paddingBottom:{props:["padding-bottom"],transformValue:b},paddingLeft:{props:["padding-left"],transformValue:b},paddingVertical:{props:["padding-top","padding-bottom"],transformValue:b},paddingHorizontal:{props:["padding-right","padding-left"],transformValue:b}};function x(e){return e.slice(0,1).toLowerCase()+e.slice(1,e.length)}function V(e){var n=Object.keys(g.breakpoints).join("|"),r=["down","only"].join("|"),t=new RegExp("(".concat(n,")$"),"gi"),o=new RegExp("(".concat(r,")$"),"gi"),a=e.match(o),i=a?a[0]:"",u=e.replace(i,"").match(t),c=u?u[0]:"",p=e.replace(c,"").replace(i,""),f=c?x(c):g.defaultBreakpointName,s=f===g.defaultBreakpointName;return{originPropName:e,purePropName:p,behavior:i?x(i):g.defaultBehavior,breakpoint:{name:f,isDefault:s}}}function P(e){return Object.entries(e).filter((function(e){var n=s(e,2);n[0];return v(n[1])})).map((function(e){var n,r=s(e,2),t=r[0],o=r[1];return[(n=t,n.replace(/[A-Z]/g,(function(e){return"-".concat(e).toLowerCase()}))),o]}))}var B=function(e){return function(n){return n.filter((function(n){return function(e,n){var r=s(e.split("-"),2),t=r[0],o=r[1];return!["height","width"].includes(o)||("min"===t&&["up","only"].includes(n)||"max"===t&&["down","only"].includes(n))}(s(n,1)[0],e)}))}},E=function(e){return function(n){return n.map(e).join(" and ")}};function S(e,n){return h(E((function(e){var n=s(e,2),r=n[0],t=n[1];return"(".concat(r,":").concat(String(b(t)),")")})),B(n),P)(e)}var C=function(e,n,r,t){var o=e.map((function(e){return"".concat(e,":").concat(String(n),";")})).join(""),a=g.breakpoints[r.name];return a&&!(r.isDefault&&t===g.defaultBehavior)?"@media ".concat(S(a,t)," {").concat(o,"}"):o};function N(e){return Object.keys(e).map(V).filter((function(e){var n=e.purePropName;return O.hasOwnProperty(n)})).filter((function(n){var r=n.originPropName;return v(e[r])})).map((function(n){var r=n.purePropName,t=n.originPropName,o=n.breakpoint,a=n.behavior,i=O[r],u=i.props,c=i.transformValue,p=e[t],f=c?c(p):p;return C(u,f,o,a)})).join(" ")}function L(){var e=f(["\n display: ",";\n\n && {\n ",";\n }\n"]);return L=function(){return e},e}var R=n.div(L(),(function(e){var n=e.flex,r=e.inline;return n?r?"inline-flex":"flex":r?"inline-block":"block"}),N);var W=function(e){var n=e.children,t=p(e,["children"]),o=r.useMemo((function(){return function(e){return h(E((function(e){var n=s(e,2),r=n[0],t=n[1],o=/^\d/.test(String(t))?b(t):t;return"(".concat(r,":").concat(o,")")})),P)(e)}(t)}),[t]),a=s(r.useState(!1),2),i=a[0],u=a[1],c=function(e){u(e.matches)};return r.useEffect((function(){var e=matchMedia(o);return c(e),e.addListener(c),function(){return e.removeListener(c)}}),Object.keys(t)),n(i)};function A(e){return e.slice(0,e.length-1)}var F=function(e){return e.replace(/^min|max/,"_")};function D(e){var n=e.match(/^(min|max)/);return n?n[0]:""}function M(e,n,r){var t=n.behavior,o=e.behavior,a="up"===t,u=t===o,p=a&&"down"===o,f=a,s=!r&&f?"down":o,l=c({},n.breakpoint,{},e.breakpoint);return{behavior:s,breakpoint:Object.keys(l).reduce((function(t,o){var a=l[o],s=D(o);if("max"===s&&!r&&f){var d=e.breakpoint[o.replace(/^max/,"min")];a="calc(".concat(b(d)," - 1px)")}return"min"===s&&(r?(u||p)&&(a=n.breakpoint[o]):f&&(a=n.breakpoint[o])),c({},t,i({},o,a))}),{})}}function z(e){return Object.keys(e).reduce((function(n,r){return c({},n,i({},r,"max"===D(r)?void 0:e[r]))}),{})}var T=function(e,n){var r,t,o,a=e.behavior===n.behavior,i="up"===e.behavior&&"down"===n.behavior;return!(!a&&!i)&&(r=e.breakpoint,t=n.breakpoint,(o=Object.keys(r).concat(Object.keys(t))).every((function(e,n){var r=F(e);return r===F(o[n-1]||r)})))},I=function(e,n){return{behavior:n.behavior,breakpoint:e&&"up"===n.behavior?z(n.breakpoint):n.breakpoint}};var U=function(e,n){var t=function(t){var o=t.children,a=p(t,["children"]),i=n.reduce((function(n,t,i){return n.concat(r.createElement(W,Object.assign({},t,{key:"".concat(e.displayName,"_").concat(i)}),(function(n){return n&&r.createElement(e,Object.assign({},a),o)})))}),[]);return r.createElement(r.Fragment,null,i)};return t.displayName="Placeholder(".concat(e.displayName,")"),t},H=function(e){return function(n){return r.createElement(R,Object.assign({area:e},n))}};var _,q,$=h((function(e){return e.sort()}),(function(e){return Array.from(new Set(e))}),(function(e){return e.filter(k)}),(function(e){return e.filter(Boolean)}),(function(e){return e.split(" ")}),(function(e){return e.replace(/\s+/g," ")}),(function(e){return e.replace(/\r?\n|\'+/g," ")})),G=h((_=function(e){return function(e){var n=e.length,r=0,t=0;if(n>0)for(;t<n;)r=(r<<5)-r+e.charCodeAt(t++)|0;return r}(Object.entries(e).reduce((function(e,n){var r=s(n,2),t=r[0],o=r[1];return e.concat("".concat(t,":").concat(o.join()))}),[]).join()).toString()},q={},function(e){return function(){var n=_.apply(void 0,arguments);return n in q||(q[n]=e.apply(void 0,arguments)),q[n]}})(h((function(e){var n=e.areas,r=e.templates,t=n.reduce((function(e,n){var t=function(e,n){var r=n.length;return n.reduce((function(n,t,o){var a=t.areas,i=t.behavior,u=t.breakpoint,c=o===r-1,p=a.includes(e),f={breakpoint:u,behavior:i},s=n[n.length-1];if(p){if(s&&T(s,f)){var l=M(f,s,p);return A(n).concat(I(c,l))}return n.concat(I(c,f))}if(s){var d=M(f,s,p);return A(n).concat([d,null])}return n.concat(null)}),[])}(n,r),o=t.filter(Boolean).map((function(e){return e.breakpoint})),a=1===t.length&&o.every((function(e){return!e.minWidth&&!e.maxWidth})),u=H(n),p=n.replace(/^./,(function(e){return e.toUpperCase()}));return u.displayName=p,c({},e,i({},p,a?u:U(u,o)))}),{});return"undefined"==typeof Proxy?t:new Proxy(t,{get:function(e,n){return n in e||"symbol"===o(n)?e[n]:function(){return null}}})}),(function(e){var n=Object.entries(e).reduce((function(e,n){var r=s(n,2),t=r[0],o=r[1],a=V(t),i=a.breakpoint,u=a.behavior;return{areas:e.areas.concat(o),templates:e.templates.concat({breakpoint:g.breakpoints[i.name],behavior:u,areas:o})}}),{areas:[],templates:[]}),r=n.areas,t=n.templates;return{areas:Array.from(new Set(r)),templates:t}}))),(function(e){return Object.keys(e).filter((function(e){var n=V(e).purePropName;return["areas","template"].includes(n)})).reduce((function(n,r){return c({},n,i({},r,$(e[r])))}),{})}));function Q(){var e=f(["\n && {\n ",";\n display: ",";\n }\n"]);return Q=function(){return e},e}var Z=n.div(Q(),N,(function(e){return e.inline?"inline-grid":"grid"}));function J(e){return Object.entries(e).map((function(e){var n=s(e,2),r=n[0],t=n[1];return[D(r),r,t]})).filter((function(e){return"max"!==s(e,1)[0]})).reduce((function(e,n){var r=s(n,3),t=r[0],o=r[1],a=r[2],u="min"===t,p=u?o.replace(/^min/,"max"):o,f=s(/(\d+)(.+)?/.exec(a),3),l=f[1],d=f[2],m=u?parseFloat(l)-1:l;return c({},e,i({},p,d?"".concat(m).concat(d):m))}),{})}var K=function(e){return"string"==typeof e?g.breakpoints[e]:e};function X(e,n){var r,t=null;return function o(){var a=Date.now();clearTimeout(t);for(var i=arguments.length,u=new Array(i),c=0;c<i;c++)u[c]=arguments[c];!r||a-r>=n?(e.apply(null,u),r=a):t=setTimeout(o.bind.apply(o,[null].concat(u)),n-(a-r))}}var Y,ee,ne=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:70,t=r.useRef();r.useEffect((function(){t.current=X(e,n)})),r.useEffect((function(){var e=t.current;return e(),window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[])},re=function(e,n){var r,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:g.breakpoints;ne((function(){var n=Object.keys(t).find((function(e){var n=S(t[e],"only");return matchMedia(n).matches}));r!==n&&(e(n),r=n)}),n)},te=(Y=g.breakpoints,ee=Object.keys(Y),function(e,n){var r=Object.keys(e).filter((function(e){var n=ee.includes(e);return n||console.warn('useBreakpoints: Breakpoint "%s" is not found. Add it via "Layout.configure()", or use one of the existing breakpoints (%s).',e,ee.join(", ")),n})).find((function(e){var n=Y[e],r=S(n,"only");return n&&matchMedia(r).matches}));return r?e[r]:n}),oe=function(e){var n=s(r.useState(),2),t=n[0],o=n[1];return re((function(){var n=Object.keys(e).map(V).filter((function(e){var n=e.breakpoint,r=e.behavior,t=S(g.breakpoints[n.name],r);return matchMedia(t).matches})).reduce((function(n,r){var t=r.originPropName;return c({},n,i({},r.purePropName,e[t]))}),{});o(n)})),t||{}};e.Box=R,e.Composition=function(e){var n=e.children,t=p(e,["children"]),a=G(t),i=Object.keys(a).length>0,u=o(n),c="function"===u;return m(!(i&&!c),"Failed to render 'Composition' with template areas [\"".concat(Object.keys(a).join('", "'),'"]: expected children to be a function, but got: ').concat(u,". Please provide render function as children, or remove assigned template props.")),r.createElement(Z,Object.assign({},t),i&&c?n(a):n)},e.MediaQuery=W,e.Only=function(e){var n=e.children,t=e.except,o=e.for,a=e.from,i=e.to,u=function(e,n){return function(){for(var t=arguments.length,o=new Array(t),a=0;a<t;a++)o[a]=arguments[a];var i=U(R,o);return r.createElement(i,Object.assign({},n),e)}}(n,p(e,["children","except","for","from","to"]));if(o)return u(K(o));var c=K(a),f=K(i);return c&&f&&!t?u(M({behavior:"down",breakpoint:f},{behavior:"up",breakpoint:c},!1).breakpoint):c&&f&&t?u(J(c),z(f)):c&&!f?u(z(c)):!c&&f?u(J(f)):n},e.default=g,e.defaultOptions=l,e.useBreakpointChange=re,e.useResponsiveComponent=function(e){return function(n){var r=oe(n);return t.createElement(e,Object.assign({},r))}},e.useResponsiveProps=oe,e.useResponsiveValue=function(e,n){var t=s(r.useState(n),2),o=t[0],a=t[1];return re((function(){var r=te(e,n);a(r)})),o},e.useViewportChange=ne,e.withBreakpoints=te,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
| !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("styled-components"),require("react")):"function"==typeof define&&define.amd?define(["exports","styled-components","react"],n):n((e=e||self).AtomicLayout={},e.styled,e.React)}(this,(function(e,n,r){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n;var t="default"in r?r.default:r;function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,n){for(var r=0;r<n.length;r++){var t=n[r];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}function i(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function u(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function c(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?u(r,!0).forEach((function(n){i(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):u(r).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function p(e,n){if(null==e)return{};var r,t,o=function(e,n){if(null==e)return{};var r,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function f(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function s(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var r=[],t=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(t=(i=u.next()).done)&&(r.push(i.value),!n||r.length!==n);t=!0);}catch(e){o=!0,a=e}finally{try{t||null==u.return||u.return()}finally{if(o)throw a}}return r}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var l={defaultUnit:"px",defaultBehavior:"up",defaultBreakpointName:"xs",breakpoints:{xs:{maxWidth:"575px"},sm:{minWidth:"576px",maxWidth:"767px"},md:{minWidth:"768px",maxWidth:"991px"},lg:{minWidth:"992px",maxWidth:"1199px"},xl:{minWidth:"1200px"}}};function d(e,n){if(!e)throw new Error(n)}function m(e,n){e||console.warn(n)}var g=new(function(){function e(n){return function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,e),this.defaultUnit=l.defaultUnit,this.defaultBehavior=l.defaultBehavior,this.breakpoints=l.breakpoints,this.defaultBreakpointName=l.defaultBreakpointName,this.isConfigureCalled=!1,n?this.configure(n,!1):this}var n,r,t;return n=e,(r=[{key:"configure",value:function(e){var n=this,r=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return r&&m(!this.isConfigureCalled,"Failed to configure Layout: do not call `Layout.configure()` more than once. Layout configuration must remain consistent throughout the application."),d(e&&"object"===o(e),"Failed to configure Layout: expected an options Object, but got: ".concat(e,".")),Object.keys(e||{}).forEach((function(r){n[r]=e[r]})),d(this.breakpoints,"Failed to configure Layout: expected to have at least one breakpoint specified, but got none."),d(this.breakpoints.hasOwnProperty(this.defaultBreakpointName),'Failed to configure Layout: cannot use "'.concat(this.defaultBreakpointName,'" as the default breakpoint (breakpoint not found).')),d(this.defaultBreakpointName,'Failed to configure Layout: expected "defaultBreakpointName" property set, but got: '.concat(this.defaultBreakpointName,".")),this.isConfigureCalled=r,this}}])&&a(n.prototype,r),t&&a(n,t),e}());function h(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return n.reduce((function(e,n){return function(){return e(n.apply(void 0,arguments))}}))}function v(e){return null!=e}function b(e){if(!v(e))return"";var n="number"==typeof e&&0!==e?g.defaultUnit:"";return"".concat(e).concat(n)}var y=["/","auto"];function k(e){var n=/^[0-9]/.test(e),r=y.includes(e);return!n&&!r}var w=h((function(e){var n=[],r=[];return e.forEach((function(e){k(e)?n.push(e):r.push(e)})),[n.length>0?"'".concat(n.join(" "),"'"):"",r.join(" ")].filter(Boolean).join(" ")}),(function(e){return e.split(" ")}),(function(e){return e.replace(/'+/gm,"")}),(function(e){return e.trim()})),j=h((function(e){return e.join("\n")}),(function(e){return e.map(w)}),(function(e){return e.split("\n")}),(function(e){return e.trim()})),O={area:{props:["grid-area"]},areas:{props:["grid-template-areas"],transformValue:j},template:{props:["grid-template"],transformValue:j},templateCols:{props:["grid-template-columns"]},templateRows:{props:["grid-template-rows"]},col:{props:["grid-column"]},colStart:{props:["grid-column-start"]},colEnd:{props:["grid-column-end"]},row:{props:["grid-row"]},rowStart:{props:["grid-row-start"]},rowEnd:{props:["grid-row-end"]},gap:{props:["grid-gap"],transformValue:b},gapCol:{props:["grid-column-gap"],transformValue:b},gapRow:{props:["grid-row-gap"],transformValue:b},gutter:{props:["grid-gap"],transformValue:b},gutterCol:{props:["grid-column-gap"],transformValue:b},gutterRow:{props:["grid-row-gap"],transformValue:b},autoRows:{props:["grid-auto-rows"],transformValue:b},autoCols:{props:["grid-auto-columns"],transformValue:b},autoFlow:{props:["grid-auto-flow"]},align:{props:["align-self"]},alignItems:{props:["align-items"]},alignContent:{props:["align-content"]},justify:{props:["justify-self"]},justifyItems:{props:["justify-items"]},justifyContent:{props:["justify-content"]},place:{props:["place-self"]},placeItems:{props:["place-items"]},placeContent:{props:["place-content"]},flexDirection:{props:["flex-direction"]},flexShrink:{props:["flex-shrink"]},flexGrow:{props:["flex-grow"]},flexWrap:{props:["flex-wrap"]},height:{props:["height"],transformValue:b},minHeight:{props:["min-height"],transformValue:b},maxHeight:{props:["max-height"],transformValue:b},width:{props:["width"],transformValue:b},minWidth:{props:["min-width"],transformValue:b},maxWidth:{props:["max-width"],transformValue:b},margin:{props:["margin"],transformValue:b},marginTop:{props:["margin-top"],transformValue:b},marginRight:{props:["margin-right"],transformValue:b},marginBottom:{props:["margin-bottom"],transformValue:b},marginLeft:{props:["margin-left"],transformValue:b},marginVertical:{props:["margin-top","margin-bottom"],transformValue:b},marginHorizontal:{props:["margin-right","margin-left"],transformValue:b},padding:{props:["padding"],transformValue:b},paddingTop:{props:["padding-top"],transformValue:b},paddingRight:{props:["padding-right"],transformValue:b},paddingBottom:{props:["padding-bottom"],transformValue:b},paddingLeft:{props:["padding-left"],transformValue:b},paddingVertical:{props:["padding-top","padding-bottom"],transformValue:b},paddingHorizontal:{props:["padding-right","padding-left"],transformValue:b}};function x(e){return e.slice(0,1).toLowerCase()+e.slice(1,e.length)}function V(e){var n=Object.keys(g.breakpoints).join("|"),r=["down","only"].join("|"),t=new RegExp("(".concat(n,")$"),"gi"),o=new RegExp("(".concat(r,")$"),"gi"),a=e.match(o),i=a?a[0]:"",u=e.replace(i,"").match(t),c=u?u[0]:"",p=e.replace(c,"").replace(i,""),f=c?x(c):g.defaultBreakpointName,s=f===g.defaultBreakpointName;return{originPropName:e,purePropName:p,behavior:i?x(i):g.defaultBehavior,breakpoint:{name:f,isDefault:s}}}function P(e){return Object.entries(e).filter((function(e){var n=s(e,2);n[0];return v(n[1])})).map((function(e){var n,r=s(e,2),t=r[0],o=r[1];return[(n=t,n.replace(/[A-Z]/g,(function(e){return"-".concat(e).toLowerCase()}))),o]}))}var B=function(e){return function(n){return n.filter((function(n){return function(e,n){var r=s(e.split("-"),2),t=r[0],o=r[1];return!["height","width"].includes(o)||("min"===t&&["up","only"].includes(n)||"max"===t&&["down","only"].includes(n))}(s(n,1)[0],e)}))}},E=function(e){return function(n){return n.map(e).join(" and ")}};function S(e,n){return h(E((function(e){var n=s(e,2),r=n[0],t=n[1];return"(".concat(r,":").concat(String(b(t)),")")})),B(n),P)(e)}var C=function(e,n,r,t){var o=e.map((function(e){return"".concat(e,":").concat(String(n),";")})).join(""),a=g.breakpoints[r.name];return a&&!(r.isDefault&&t===g.defaultBehavior)?"@media ".concat(S(a,t)," {").concat(o,"}"):o};function N(e){return Object.keys(e).map(V).filter((function(e){var n=e.purePropName;return O.hasOwnProperty(n)})).filter((function(n){var r=n.originPropName;return v(e[r])})).map((function(n){var r=n.purePropName,t=n.originPropName,o=n.breakpoint,a=n.behavior,i=O[r],u=i.props,c=i.transformValue,p=e[t],f=c?c(p):p;return C(u,f,o,a)})).join(" ")}function L(){var e=f(["\n display: ",";\n\n && {\n ",";\n }\n"]);return L=function(){return e},e}var R=n.div(L(),(function(e){var n=e.flex,r=e.inline;return n?r?"inline-flex":"flex":r?"inline-block":"block"}),N);var W=function(e){var n=e.children,t=p(e,["children"]),o=r.useMemo((function(){return function(e){return h(E((function(e){var n=s(e,2),r=n[0],t=n[1],o=/^\d/.test(String(t))?b(t):t;return"(".concat(r,":").concat(o,")")})),P)(e)}(t)}),[t]),a=s(r.useState(!1),2),i=a[0],u=a[1],c=function(e){u(e.matches)};return r.useEffect((function(){var e=matchMedia(o);return c(e),e.addListener(c),function(){return e.removeListener(c)}}),Object.keys(t)),n(i)};function A(e){return e.slice(0,e.length-1)}var F=function(e){return e.replace(/^min|max/,"_")};function D(e){var n=e.match(/^(min|max)/);return n?n[0]:""}function M(e,n,r){var t=n.behavior,o=e.behavior,a="up"===t,u=t===o,p=a&&"down"===o,f=a,s=!r&&f?"down":o,l=c({},n.breakpoint,{},e.breakpoint);return{behavior:s,breakpoint:Object.keys(l).reduce((function(t,o){var a=l[o],s=D(o);if("max"===s&&!r&&f){var d=e.breakpoint[o.replace(/^max/,"min")];a="calc(".concat(b(d)," - 1px)")}return"min"===s&&(r?(u||p)&&(a=n.breakpoint[o]):f&&(a=n.breakpoint[o])),c({},t,i({},o,a))}),{})}}function z(e){return Object.keys(e).reduce((function(n,r){return c({},n,i({},r,"max"===D(r)?void 0:e[r]))}),{})}var T=function(e,n){var r,t,o,a=e.behavior===n.behavior,i="up"===e.behavior&&"down"===n.behavior;return!(!a&&!i)&&(r=e.breakpoint,t=n.breakpoint,(o=Object.keys(r).concat(Object.keys(t))).every((function(e,n){var r=F(e);return r===F(o[n-1]||r)})))},I=function(e,n){return{behavior:n.behavior,breakpoint:e&&"up"===n.behavior?z(n.breakpoint):n.breakpoint}};var U=function(e,n){var t=function(t){var o=t.children,a=p(t,["children"]),i=n.reduce((function(n,t,i){return n.concat(r.createElement(W,Object.assign({},t,{key:"".concat(e.displayName,"_").concat(i)}),(function(n){return n&&r.createElement(e,Object.assign({},a),o)})))}),[]);return r.createElement(r.Fragment,null,i)};return t.displayName="Placeholder(".concat(e.displayName,")"),t},H=function(e){return function(n){return r.createElement(R,Object.assign({area:e},n))}};var _,q,$=h((function(e){return e.sort()}),(function(e){return Array.from(new Set(e))}),(function(e){return e.filter(k)}),(function(e){return e.filter(Boolean)}),(function(e){return e.split(" ")}),(function(e){return e.replace(/\s+/g," ")}),(function(e){return e.replace(/\r?\n|\'+/g," ")})),G=h((_=function(e){return function(e){var n=e.length,r=0,t=0;if(n>0)for(;t<n;)r=(r<<5)-r+e.charCodeAt(t++)|0;return r}(Object.entries(e).reduce((function(e,n){var r=s(n,2),t=r[0],o=r[1];return e.concat("".concat(t,":").concat(o.join()))}),[]).join()).toString()},q={},function(e){return function(){var n=_.apply(void 0,arguments);return n in q||(q[n]=e.apply(void 0,arguments)),q[n]}})(h((function(e){var n=e.areas,r=e.templates,t=n.reduce((function(e,n){var t=function(e,n){var r=n.length;return n.reduce((function(n,t,o){var a=t.areas,i=t.behavior,u=t.breakpoint,c=o===r-1,p=a.includes(e),f={breakpoint:u,behavior:i},s=n[n.length-1];if(p){if(s&&T(s,f)){var l=M(f,s,p);return A(n).concat(I(c,l))}return n.concat(I(c,f))}if(s){var d=M(f,s,p);return A(n).concat([d,null])}return n.concat(null)}),[])}(n,r),o=t.filter(Boolean).map((function(e){return e.breakpoint})),a=1===t.length&&o.every((function(e){return!e.minWidth&&!e.maxWidth})),u=H(n),p=n.replace(/^./,(function(e){return e.toUpperCase()}));return u.displayName=p,c({},e,i({},p,a?u:U(u,o)))}),{});return"undefined"==typeof Proxy?t:new Proxy(t,{get:function(e,n){return n in e||"symbol"===o(n)?e[n]:function(){return null}}})}),(function(e){var n=Object.entries(e).reduce((function(e,n){var r=s(n,2),t=r[0],o=r[1],a=V(t),i=a.breakpoint,u=a.behavior;return{areas:e.areas.concat(o),templates:e.templates.concat({breakpoint:g.breakpoints[i.name],behavior:u,areas:o})}}),{areas:[],templates:[]}),r=n.areas,t=n.templates;return{areas:Array.from(new Set(r)),templates:t}}))),(function(e){return Object.keys(e).filter((function(e){var n=V(e).purePropName;return["areas","template"].includes(n)})).reduce((function(n,r){return c({},n,i({},r,$(e[r])))}),{})}));function Q(){var e=f(["\n && {\n ",";\n display: ",";\n }\n"]);return Q=function(){return e},e}var Z=n.div(Q(),N,(function(e){return e.inline?"inline-grid":"grid"}));function J(e){return Object.entries(e).map((function(e){var n=s(e,2),r=n[0],t=n[1];return[D(r),r,t]})).filter((function(e){return"max"!==s(e,1)[0]})).reduce((function(e,n){var r=s(n,3),t=r[0],o=r[1],a=r[2],u="min"===t,p=u?o.replace(/^min/,"max"):o,f=s(/(\d+)(.+)?/.exec(a),3),l=f[1],d=f[2],m=u?parseFloat(l)-1:l;return c({},e,i({},p,d?"".concat(m).concat(d):m))}),{})}var K=function(e){return"string"==typeof e?g.breakpoints[e]:e};function X(e,n){var r,t=null;return function o(){var a=Date.now();clearTimeout(t);for(var i=arguments.length,u=new Array(i),c=0;c<i;c++)u[c]=arguments[c];!r||a-r>=n?(e.apply(null,u),r=a):t=setTimeout(o.bind.apply(o,[null].concat(u)),n-(a-r))}}var Y,ee,ne=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:70,t=r.useRef();r.useEffect((function(){t.current=X(e,n)})),r.useEffect((function(){var e=t.current;return e(),window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[])},re=function(e,n){var r,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:g.breakpoints;ne((function(){var n=Object.keys(t).find((function(e){var n=S(t[e],"only");return matchMedia(n).matches}));r!==n&&(e(n),r=n)}),n)},te=(Y=g.breakpoints,ee=Object.keys(Y),function(e,n){var r=Object.keys(e).filter((function(e){var n=ee.includes(e);return n||console.warn('useBreakpoints: Breakpoint "%s" is not found. Add it via "Layout.configure()", or use one of the existing breakpoints (%s).',e,ee.join(", ")),n})).find((function(e){var n=Y[e],r=S(n,"only");return n&&matchMedia(r).matches}));return r?e[r]:n}),oe=function(e){var n=s(r.useState(),2),t=n[0],o=n[1];return re((function(){var n=Object.keys(e).map(V).filter((function(e){var n=e.breakpoint,r=e.behavior,t=S(g.breakpoints[n.name],r);return matchMedia(t).matches})).reduce((function(n,r){var t=r.originPropName;return c({},n,i({},r.purePropName,e[t]))}),{});o(n)})),t||{}};e.Box=R,e.Composition=function(e){var n=e.children,t=p(e,["children"]),a=G(t),i=Object.keys(a).length>0,u=o(n),c="function"===u;return m(!(i&&!c),"Failed to render 'Composition' with template areas [\"".concat(Object.keys(a).join('", "'),'"]: expected children to be a function, but got: ').concat(u,". Please provide render function as children, or remove assigned template props.")),r.createElement(Z,Object.assign({},t),i&&c?n(a):n)},e.MediaQuery=W,e.Only=function(e){var n=e.children,t=e.except,o=e.for,a=e.from,i=e.to,u=function(e,n){return function(){for(var t=arguments.length,o=new Array(t),a=0;a<t;a++)o[a]=arguments[a];var i=U(R,o);return r.createElement(i,Object.assign({},n),e)}}(n,p(e,["children","except","for","from","to"]));if(o)return u(K(o));var c=K(a),f=K(i);return c&&f&&!t?u(M({behavior:"down",breakpoint:f},{behavior:"up",breakpoint:c},!1).breakpoint):c&&f&&t?u(J(c),z(f)):c&&!f?u(z(c)):!c&&f?u(J(f)):r.createElement(r.Fragment,null,"children")},e.default=g,e.defaultOptions=l,e.useBreakpointChange=re,e.useResponsiveComponent=function(e){return function(n){var r=oe(n);return t.createElement(e,Object.assign({},r))}},e.useResponsiveProps=oe,e.useResponsiveValue=function(e,n){var t=s(r.useState(n),2),o=t[0],a=t[1];return re((function(){var r=te(e,n);a(r)})),o},e.useViewportChange=ne,e.withBreakpoints=te,Object.defineProperty(e,"__esModule",{value:!0})})); |
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-0.06%
117459
No dependency changes