@os-design/media 1.0.18 → 1.0.19

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export { default as m } from './media';\nexport { default as useIsMaxWidth } from './useIsMaxWidth';\nexport { default as useIsMinWidth } from './useIsMinWidth';\nexport { default as useIsWidth } from './useIsWidth';\n\nexport * from './media';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAKA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAJA;AACA;AACA;AAAqD;AAAA;AAAA"}
+{"version":3,"file":"index.js","names":["_media","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_useIsMaxWidth","_interopRequireDefault","_useIsMinWidth","_useIsWidth","obj","__esModule","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","newObj","hasPropertyDescriptor","getOwnPropertyDescriptor","desc","set"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as m } from './media';\nexport { default as useIsMaxWidth } from './useIsMaxWidth';\nexport { default as useIsMinWidth } from './useIsMinWidth';\nexport { default as useIsWidth } from './useIsWidth';\n\nexport * from './media';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAKAC,MAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,MAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAd,MAAA,CAAAM,GAAA;IAAA;EAAA;AAAA;AAJA,IAAAS,cAAA,GAAAC,sBAAA,CAAAd,OAAA;AACA,IAAAe,cAAA,GAAAD,sBAAA,CAAAd,OAAA;AACA,IAAAgB,WAAA,GAAAF,sBAAA,CAAAd,OAAA;AAAqD,SAAAc,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAAA,SAAAE,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAArB,wBAAAkB,GAAA,EAAAG,WAAA,SAAAA,WAAA,IAAAH,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,aAAAO,OAAA,CAAAP,GAAA,yBAAAA,GAAA,uCAAAA,GAAA,UAAAQ,KAAA,GAAAN,wBAAA,CAAAC,WAAA,OAAAK,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAb,GAAA,CAAAK,GAAA,SAAAU,MAAA,WAAAC,qBAAA,GAAA3B,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAA4B,wBAAA,WAAAzB,GAAA,IAAAa,GAAA,QAAAb,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAU,GAAA,EAAAb,GAAA,SAAA0B,IAAA,GAAAF,qBAAA,GAAA3B,MAAA,CAAA4B,wBAAA,CAAAZ,GAAA,EAAAb,GAAA,cAAA0B,IAAA,KAAAA,IAAA,CAAAlB,GAAA,IAAAkB,IAAA,CAAAC,GAAA,KAAA9B,MAAA,CAAAS,cAAA,CAAAiB,MAAA,EAAAvB,GAAA,EAAA0B,IAAA,YAAAH,MAAA,CAAAvB,GAAA,IAAAa,GAAA,CAAAb,GAAA,SAAAuB,MAAA,cAAAV,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAM,GAAA,CAAAd,GAAA,EAAAU,MAAA,YAAAA,MAAA"}

package/dist/cjs/media/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["minBreakpoints","xs","sm","md","lg","xl","xxl","maxBreakpoints","xxs","min","Object","keys","reduce","res","key","max","m"],"sources":["../../../src/media/index.ts"],"sourcesContent":["interface Breakpoints {\n  xxs: number;\n  xs: number;\n  sm: number;\n  md: number;\n  lg: number;\n  xl: number;\n  xxl: number;\n}\n\ntype Index<T> = {\n  [key in keyof T]: string;\n};\n\nexport type MinBreakpoints = Omit<Breakpoints, 'xxs'>;\nexport type MaxBreakpoints = Omit<Breakpoints, 'xxl'>;\n\nexport const minBreakpoints: MinBreakpoints = {\n  xs: 480,\n  sm: 576,\n  md: 786,\n  lg: 992,\n  xl: 1200,\n  xxl: 1600,\n};\n\nexport const maxBreakpoints: MaxBreakpoints = {\n  xxs: minBreakpoints.xs - 1,\n  xs: minBreakpoints.sm - 1,\n  sm: minBreakpoints.md - 1,\n  md: minBreakpoints.lg - 1,\n  lg: minBreakpoints.xl - 1,\n  xl: minBreakpoints.xxl - 1,\n};\n\nconst min = Object.keys(minBreakpoints).reduce<Index<MinBreakpoints>>(\n  (res, key) => {\n    res[key] = `@media (min-width: ${minBreakpoints[key]}px)`;\n    return res;\n  },\n  {} as Index<MinBreakpoints>\n);\n\nconst max = Object.keys(maxBreakpoints).reduce<Index<MaxBreakpoints>>(\n  (res, key) => {\n    res[key] = `@media (max-width: ${maxBreakpoints[key]}px)`;\n    return res;\n  },\n  {} as Index<MaxBreakpoints>\n);\n\nconst m = {\n  min,\n  max,\n};\n\nexport default m;\n"],"mappings":";;;;;;AAiBO,IAAMA,cAA8B,GAAG;EAC5CC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,IAAI;EACRC,GAAG,EAAE;AACP,CAAC;AAAC;AAEK,IAAMC,cAA8B,GAAG;EAC5CC,GAAG,EAAER,cAAc,CAACC,EAAE,GAAG,CAAC;EAC1BA,EAAE,EAAED,cAAc,CAACE,EAAE,GAAG,CAAC;EACzBA,EAAE,EAAEF,cAAc,CAACG,EAAE,GAAG,CAAC;EACzBA,EAAE,EAAEH,cAAc,CAACI,EAAE,GAAG,CAAC;EACzBA,EAAE,EAAEJ,cAAc,CAACK,EAAE,GAAG,CAAC;EACzBA,EAAE,EAAEL,cAAc,CAACM,GAAG,GAAG;AAC3B,CAAC;AAAC;AAEF,IAAMG,GAAG,GAAGC,MAAM,CAACC,IAAI,CAACX,cAAc,CAAC,CAACY,MAAM,CAC5C,UAACC,GAAG,EAAEC,GAAG,EAAK;EACZD,GAAG,CAACC,GAAG,CAAC,gCAAyBd,cAAc,CAACc,GAAG,CAAC,QAAK;EACzD,OAAOD,GAAG;AACZ,CAAC,EACD,CAAC,CAAC,CACH;AAED,IAAME,GAAG,GAAGL,MAAM,CAACC,IAAI,CAACJ,cAAc,CAAC,CAACK,MAAM,CAC5C,UAACC,GAAG,EAAEC,GAAG,EAAK;EACZD,GAAG,CAACC,GAAG,CAAC,gCAAyBP,cAAc,CAACO,GAAG,CAAC,QAAK;EACzD,OAAOD,GAAG;AACZ,CAAC,EACD,CAAC,CAAC,CACH;AAED,IAAMG,CAAC,GAAG;EACRP,GAAG,EAAHA,GAAG;EACHM,GAAG,EAAHA;AACF,CAAC;AAAC,eAEaC,CAAC;AAAA"}
+{"version":3,"file":"index.js","names":["minBreakpoints","xs","sm","md","lg","xl","xxl","exports","maxBreakpoints","xxs","min","Object","keys","reduce","res","key","concat","max","m","_default"],"sources":["../../../src/media/index.ts"],"sourcesContent":["interface Breakpoints {\n  xxs: number;\n  xs: number;\n  sm: number;\n  md: number;\n  lg: number;\n  xl: number;\n  xxl: number;\n}\n\ntype Index<T> = {\n  [key in keyof T]: string;\n};\n\nexport type MinBreakpoints = Omit<Breakpoints, 'xxs'>;\nexport type MaxBreakpoints = Omit<Breakpoints, 'xxl'>;\n\nexport const minBreakpoints: MinBreakpoints = {\n  xs: 480,\n  sm: 576,\n  md: 786,\n  lg: 992,\n  xl: 1200,\n  xxl: 1600,\n};\n\nexport const maxBreakpoints: MaxBreakpoints = {\n  xxs: minBreakpoints.xs - 1,\n  xs: minBreakpoints.sm - 1,\n  sm: minBreakpoints.md - 1,\n  md: minBreakpoints.lg - 1,\n  lg: minBreakpoints.xl - 1,\n  xl: minBreakpoints.xxl - 1,\n};\n\nconst min = Object.keys(minBreakpoints).reduce<Index<MinBreakpoints>>(\n  (res, key) => {\n    res[key] = `@media (min-width: ${minBreakpoints[key]}px)`;\n    return res;\n  },\n  {} as Index<MinBreakpoints>\n);\n\nconst max = Object.keys(maxBreakpoints).reduce<Index<MaxBreakpoints>>(\n  (res, key) => {\n    res[key] = `@media (max-width: ${maxBreakpoints[key]}px)`;\n    return res;\n  },\n  {} as Index<MaxBreakpoints>\n);\n\nconst m = {\n  min,\n  max,\n};\n\nexport default m;\n"],"mappings":";;;;;;AAiBO,IAAMA,cAA8B,GAAG;EAC5CC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,IAAI;EACRC,GAAG,EAAE;AACP,CAAC;AAACC,OAAA,CAAAP,cAAA,GAAAA,cAAA;AAEK,IAAMQ,cAA8B,GAAG;EAC5CC,GAAG,EAAET,cAAc,CAACC,EAAE,GAAG,CAAC;EAC1BA,EAAE,EAAED,cAAc,CAACE,EAAE,GAAG,CAAC;EACzBA,EAAE,EAAEF,cAAc,CAACG,EAAE,GAAG,CAAC;EACzBA,EAAE,EAAEH,cAAc,CAACI,EAAE,GAAG,CAAC;EACzBA,EAAE,EAAEJ,cAAc,CAACK,EAAE,GAAG,CAAC;EACzBA,EAAE,EAAEL,cAAc,CAACM,GAAG,GAAG;AAC3B,CAAC;AAACC,OAAA,CAAAC,cAAA,GAAAA,cAAA;AAEF,IAAME,GAAG,GAAGC,MAAM,CAACC,IAAI,CAACZ,cAAc,CAAC,CAACa,MAAM,CAC5C,UAACC,GAAG,EAAEC,GAAG,EAAK;EACZD,GAAG,CAACC,GAAG,CAAC,yBAAAC,MAAA,CAAyBhB,cAAc,CAACe,GAAG,CAAC,QAAK;EACzD,OAAOD,GAAG;AACZ,CAAC,EACD,CAAC,CACH,CAAC;AAED,IAAMG,GAAG,GAAGN,MAAM,CAACC,IAAI,CAACJ,cAAc,CAAC,CAACK,MAAM,CAC5C,UAACC,GAAG,EAAEC,GAAG,EAAK;EACZD,GAAG,CAACC,GAAG,CAAC,yBAAAC,MAAA,CAAyBR,cAAc,CAACO,GAAG,CAAC,QAAK;EACzD,OAAOD,GAAG;AACZ,CAAC,EACD,CAAC,CACH,CAAC;AAED,IAAMI,CAAC,GAAG;EACRR,GAAG,EAAHA,GAAG;EACHO,GAAG,EAAHA;AACF,CAAC;AAAC,IAAAE,QAAA,GAEaD,CAAC;AAAAX,OAAA,cAAAY,QAAA"}

package/dist/cjs/useIsMaxWidth/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useIsMaxWidth","breakpoint","detector","useCallback","width","maxBreakpoints","useIsWidth"],"sources":["../../../src/useIsMaxWidth/index.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { maxBreakpoints, MaxBreakpoints } from '../media';\nimport useIsWidth from '../useIsWidth';\n\n/**\n * Checks whether the width of the screen is less than or equal to\n * the specified media breakpoint (for example, sm).\n */\nconst useIsMaxWidth = (breakpoint: keyof MaxBreakpoints): boolean => {\n  const detector = useCallback(\n    (width) => width <= maxBreakpoints[breakpoint],\n    [breakpoint]\n  );\n  return useIsWidth(detector);\n};\n\nexport default useIsMaxWidth;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAuC;AAEvC;AACA;AACA;AACA;AACA,IAAMA,aAAa,GAAG,SAAhBA,aAAa,CAAIC,UAAgC,EAAc;EACnE,IAAMC,QAAQ,GAAG,IAAAC,kBAAW,EAC1B,UAACC,KAAK;IAAA,OAAKA,KAAK,IAAIC,qBAAc,CAACJ,UAAU,CAAC;EAAA,GAC9C,CAACA,UAAU,CAAC,CACb;EACD,OAAO,IAAAK,sBAAU,EAACJ,QAAQ,CAAC;AAC7B,CAAC;AAAC,eAEaF,aAAa;AAAA"}
+{"version":3,"file":"index.js","names":["_react","require","_media","_useIsWidth","_interopRequireDefault","obj","__esModule","useIsMaxWidth","breakpoint","detector","useCallback","width","maxBreakpoints","useIsWidth","_default","exports"],"sources":["../../../src/useIsMaxWidth/index.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { maxBreakpoints, MaxBreakpoints } from '../media';\nimport useIsWidth from '../useIsWidth';\n\n/**\n * Checks whether the width of the screen is less than or equal to\n * the specified media breakpoint (for example, sm).\n */\nconst useIsMaxWidth = (breakpoint: keyof MaxBreakpoints): boolean => {\n  const detector = useCallback(\n    (width) => width <= maxBreakpoints[breakpoint],\n    [breakpoint]\n  );\n  return useIsWidth(detector);\n};\n\nexport default useIsMaxWidth;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAC,sBAAA,CAAAH,OAAA;AAAuC,SAAAG,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAEvC;AACA;AACA;AACA;AACA,IAAME,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,UAAgC,EAAc;EACnE,IAAMC,QAAQ,GAAG,IAAAC,kBAAW,EAC1B,UAACC,KAAK;IAAA,OAAKA,KAAK,IAAIC,qBAAc,CAACJ,UAAU,CAAC;EAAA,GAC9C,CAACA,UAAU,CACb,CAAC;EACD,OAAO,IAAAK,sBAAU,EAACJ,QAAQ,CAAC;AAC7B,CAAC;AAAC,IAAAK,QAAA,GAEaP,aAAa;AAAAQ,OAAA,cAAAD,QAAA"}

package/dist/cjs/useIsMinWidth/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useIsMinWidth","breakpoint","detector","useCallback","width","minBreakpoints","useIsWidth"],"sources":["../../../src/useIsMinWidth/index.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { MinBreakpoints, minBreakpoints } from '../media';\nimport useIsWidth from '../useIsWidth';\n\n/**\n * Checks whether the width of the screen is greater than or equal to\n * the specified media breakpoint (for example, md).\n */\nconst useIsMinWidth = (breakpoint: keyof MinBreakpoints): boolean => {\n  const detector = useCallback(\n    (width) => width >= minBreakpoints[breakpoint],\n    [breakpoint]\n  );\n  return useIsWidth(detector);\n};\n\nexport default useIsMinWidth;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAuC;AAEvC;AACA;AACA;AACA;AACA,IAAMA,aAAa,GAAG,SAAhBA,aAAa,CAAIC,UAAgC,EAAc;EACnE,IAAMC,QAAQ,GAAG,IAAAC,kBAAW,EAC1B,UAACC,KAAK;IAAA,OAAKA,KAAK,IAAIC,qBAAc,CAACJ,UAAU,CAAC;EAAA,GAC9C,CAACA,UAAU,CAAC,CACb;EACD,OAAO,IAAAK,sBAAU,EAACJ,QAAQ,CAAC;AAC7B,CAAC;AAAC,eAEaF,aAAa;AAAA"}
+{"version":3,"file":"index.js","names":["_react","require","_media","_useIsWidth","_interopRequireDefault","obj","__esModule","useIsMinWidth","breakpoint","detector","useCallback","width","minBreakpoints","useIsWidth","_default","exports"],"sources":["../../../src/useIsMinWidth/index.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { MinBreakpoints, minBreakpoints } from '../media';\nimport useIsWidth from '../useIsWidth';\n\n/**\n * Checks whether the width of the screen is greater than or equal to\n * the specified media breakpoint (for example, md).\n */\nconst useIsMinWidth = (breakpoint: keyof MinBreakpoints): boolean => {\n  const detector = useCallback(\n    (width) => width >= minBreakpoints[breakpoint],\n    [breakpoint]\n  );\n  return useIsWidth(detector);\n};\n\nexport default useIsMinWidth;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAC,sBAAA,CAAAH,OAAA;AAAuC,SAAAG,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAEvC;AACA;AACA;AACA;AACA,IAAME,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,UAAgC,EAAc;EACnE,IAAMC,QAAQ,GAAG,IAAAC,kBAAW,EAC1B,UAACC,KAAK;IAAA,OAAKA,KAAK,IAAIC,qBAAc,CAACJ,UAAU,CAAC;EAAA,GAC9C,CAACA,UAAU,CACb,CAAC;EACD,OAAO,IAAAK,sBAAU,EAACJ,QAAQ,CAAC;AAC7B,CAAC;AAAC,IAAAK,QAAA,GAEaP,aAAa;AAAAQ,OAAA,cAAAD,QAAA"}

package/dist/cjs/useIsWidth/index.js

@@ -8,8 +8,8 @@ var _react = require("react");
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /**
  * Checks whether the width of the screen matches the condition

package/dist/cjs/useIsWidth/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useIsWidth","detector","detectorRef","useRef","useState","window","innerWidth","flag","setFlag","updateFlag","useCallback","current","useEffect","addEventListener","removeEventListener"],"sources":["../../../src/useIsWidth/index.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\n/**\n * Checks whether the width of the screen matches the condition\n * defined by the specified function.\n */\nconst useIsWidth = (detector: (width: number) => boolean): boolean => {\n  const detectorRef = useRef<(width: number) => boolean>(detector);\n  const [flag, setFlag] = useState(() =>\n    detector(typeof window !== 'undefined' ? window.innerWidth : 0)\n  );\n\n  const updateFlag = useCallback(() => {\n    setFlag(detectorRef.current(window.innerWidth));\n  }, []);\n\n  useEffect(() => {\n    detectorRef.current = detector;\n    updateFlag();\n  }, [detector, updateFlag]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updateFlag);\n    return () => window.removeEventListener('resize', updateFlag);\n  }, [updateFlag]);\n\n  return flag;\n};\n\nexport default useIsWidth;\n"],"mappings":";;;;;;AAAA;AAAiE;AAAA;AAAA;AAAA;AAAA;AAAA;AAEjE;AACA;AACA;AACA;AACA,IAAMA,UAAU,GAAG,SAAbA,UAAU,CAAIC,QAAoC,EAAc;EACpE,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAA6BF,QAAQ,CAAC;EAChE,gBAAwB,IAAAG,eAAQ,EAAC;MAAA,OAC/BH,QAAQ,CAAC,OAAOI,MAAM,KAAK,WAAW,GAAGA,MAAM,CAACC,UAAU,GAAG,CAAC,CAAC;IAAA,EAChE;IAAA;IAFMC,IAAI;IAAEC,OAAO;EAIpB,IAAMC,UAAU,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACnCF,OAAO,CAACN,WAAW,CAACS,OAAO,CAACN,MAAM,CAACC,UAAU,CAAC,CAAC;EACjD,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAM,gBAAS,EAAC,YAAM;IACdV,WAAW,CAACS,OAAO,GAAGV,QAAQ;IAC9BQ,UAAU,EAAE;EACd,CAAC,EAAE,CAACR,QAAQ,EAAEQ,UAAU,CAAC,CAAC;EAE1B,IAAAG,gBAAS,EAAC,YAAM;IACdP,MAAM,CAACQ,gBAAgB,CAAC,QAAQ,EAAEJ,UAAU,CAAC;IAC7C,OAAO;MAAA,OAAMJ,MAAM,CAACS,mBAAmB,CAAC,QAAQ,EAAEL,UAAU,CAAC;IAAA;EAC/D,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,OAAOF,IAAI;AACb,CAAC;AAAC,eAEaP,UAAU;AAAA"}
+{"version":3,"file":"index.js","names":["_react","require","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","isArray","useIsWidth","detector","detectorRef","useRef","_useState","useState","window","innerWidth","_useState2","flag","setFlag","updateFlag","useCallback","current","useEffect","addEventListener","removeEventListener","_default","exports"],"sources":["../../../src/useIsWidth/index.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\n/**\n * Checks whether the width of the screen matches the condition\n * defined by the specified function.\n */\nconst useIsWidth = (detector: (width: number) => boolean): boolean => {\n  const detectorRef = useRef<(width: number) => boolean>(detector);\n  const [flag, setFlag] = useState(() =>\n    detector(typeof window !== 'undefined' ? window.innerWidth : 0)\n  );\n\n  const updateFlag = useCallback(() => {\n    setFlag(detectorRef.current(window.innerWidth));\n  }, []);\n\n  useEffect(() => {\n    detectorRef.current = detector;\n    updateFlag();\n  }, [detector, updateFlag]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updateFlag);\n    return () => window.removeEventListener('resize', updateFlag);\n  }, [updateFlag]);\n\n  return flag;\n};\n\nexport default useIsWidth;\n"],"mappings":"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"}

package/dist/esm/media/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["minBreakpoints","xs","sm","md","lg","xl","xxl","maxBreakpoints","xxs","min","Object","keys","reduce","res","key","max","m"],"sources":["../../../src/media/index.ts"],"sourcesContent":["interface Breakpoints {\n  xxs: number;\n  xs: number;\n  sm: number;\n  md: number;\n  lg: number;\n  xl: number;\n  xxl: number;\n}\n\ntype Index<T> = {\n  [key in keyof T]: string;\n};\n\nexport type MinBreakpoints = Omit<Breakpoints, 'xxs'>;\nexport type MaxBreakpoints = Omit<Breakpoints, 'xxl'>;\n\nexport const minBreakpoints: MinBreakpoints = {\n  xs: 480,\n  sm: 576,\n  md: 786,\n  lg: 992,\n  xl: 1200,\n  xxl: 1600,\n};\n\nexport const maxBreakpoints: MaxBreakpoints = {\n  xxs: minBreakpoints.xs - 1,\n  xs: minBreakpoints.sm - 1,\n  sm: minBreakpoints.md - 1,\n  md: minBreakpoints.lg - 1,\n  lg: minBreakpoints.xl - 1,\n  xl: minBreakpoints.xxl - 1,\n};\n\nconst min = Object.keys(minBreakpoints).reduce<Index<MinBreakpoints>>(\n  (res, key) => {\n    res[key] = `@media (min-width: ${minBreakpoints[key]}px)`;\n    return res;\n  },\n  {} as Index<MinBreakpoints>\n);\n\nconst max = Object.keys(maxBreakpoints).reduce<Index<MaxBreakpoints>>(\n  (res, key) => {\n    res[key] = `@media (max-width: ${maxBreakpoints[key]}px)`;\n    return res;\n  },\n  {} as Index<MaxBreakpoints>\n);\n\nconst m = {\n  min,\n  max,\n};\n\nexport default m;\n"],"mappings":"AAiBA,OAAO,MAAMA,cAA8B,GAAG;EAC5CC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,IAAI;EACRC,GAAG,EAAE;AACP,CAAC;AAED,OAAO,MAAMC,cAA8B,GAAG;EAC5CC,GAAG,EAAER,cAAc,CAACC,EAAE,GAAG,CAAC;EAC1BA,EAAE,EAAED,cAAc,CAACE,EAAE,GAAG,CAAC;EACzBA,EAAE,EAAEF,cAAc,CAACG,EAAE,GAAG,CAAC;EACzBA,EAAE,EAAEH,cAAc,CAACI,EAAE,GAAG,CAAC;EACzBA,EAAE,EAAEJ,cAAc,CAACK,EAAE,GAAG,CAAC;EACzBA,EAAE,EAAEL,cAAc,CAACM,GAAG,GAAG;AAC3B,CAAC;AAED,MAAMG,GAAG,GAAGC,MAAM,CAACC,IAAI,CAACX,cAAc,CAAC,CAACY,MAAM,CAC5C,CAACC,GAAG,EAAEC,GAAG,KAAK;EACZD,GAAG,CAACC,GAAG,CAAC,GAAI,sBAAqBd,cAAc,CAACc,GAAG,CAAE,KAAI;EACzD,OAAOD,GAAG;AACZ,CAAC,EACD,CAAC,CAAC,CACH;AAED,MAAME,GAAG,GAAGL,MAAM,CAACC,IAAI,CAACJ,cAAc,CAAC,CAACK,MAAM,CAC5C,CAACC,GAAG,EAAEC,GAAG,KAAK;EACZD,GAAG,CAACC,GAAG,CAAC,GAAI,sBAAqBP,cAAc,CAACO,GAAG,CAAE,KAAI;EACzD,OAAOD,GAAG;AACZ,CAAC,EACD,CAAC,CAAC,CACH;AAED,MAAMG,CAAC,GAAG;EACRP,GAAG;EACHM;AACF,CAAC;AAED,eAAeC,CAAC"}
+{"version":3,"file":"index.js","names":["minBreakpoints","xs","sm","md","lg","xl","xxl","maxBreakpoints","xxs","min","Object","keys","reduce","res","key","max","m"],"sources":["../../../src/media/index.ts"],"sourcesContent":["interface Breakpoints {\n  xxs: number;\n  xs: number;\n  sm: number;\n  md: number;\n  lg: number;\n  xl: number;\n  xxl: number;\n}\n\ntype Index<T> = {\n  [key in keyof T]: string;\n};\n\nexport type MinBreakpoints = Omit<Breakpoints, 'xxs'>;\nexport type MaxBreakpoints = Omit<Breakpoints, 'xxl'>;\n\nexport const minBreakpoints: MinBreakpoints = {\n  xs: 480,\n  sm: 576,\n  md: 786,\n  lg: 992,\n  xl: 1200,\n  xxl: 1600,\n};\n\nexport const maxBreakpoints: MaxBreakpoints = {\n  xxs: minBreakpoints.xs - 1,\n  xs: minBreakpoints.sm - 1,\n  sm: minBreakpoints.md - 1,\n  md: minBreakpoints.lg - 1,\n  lg: minBreakpoints.xl - 1,\n  xl: minBreakpoints.xxl - 1,\n};\n\nconst min = Object.keys(minBreakpoints).reduce<Index<MinBreakpoints>>(\n  (res, key) => {\n    res[key] = `@media (min-width: ${minBreakpoints[key]}px)`;\n    return res;\n  },\n  {} as Index<MinBreakpoints>\n);\n\nconst max = Object.keys(maxBreakpoints).reduce<Index<MaxBreakpoints>>(\n  (res, key) => {\n    res[key] = `@media (max-width: ${maxBreakpoints[key]}px)`;\n    return res;\n  },\n  {} as Index<MaxBreakpoints>\n);\n\nconst m = {\n  min,\n  max,\n};\n\nexport default m;\n"],"mappings":"AAiBA,OAAO,MAAMA,cAA8B,GAAG;EAC5CC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,GAAG;EACPC,EAAE,EAAE,IAAI;EACRC,GAAG,EAAE;AACP,CAAC;AAED,OAAO,MAAMC,cAA8B,GAAG;EAC5CC,GAAG,EAAER,cAAc,CAACC,EAAE,GAAG,CAAC;EAC1BA,EAAE,EAAED,cAAc,CAACE,EAAE,GAAG,CAAC;EACzBA,EAAE,EAAEF,cAAc,CAACG,EAAE,GAAG,CAAC;EACzBA,EAAE,EAAEH,cAAc,CAACI,EAAE,GAAG,CAAC;EACzBA,EAAE,EAAEJ,cAAc,CAACK,EAAE,GAAG,CAAC;EACzBA,EAAE,EAAEL,cAAc,CAACM,GAAG,GAAG;AAC3B,CAAC;AAED,MAAMG,GAAG,GAAGC,MAAM,CAACC,IAAI,CAACX,cAAc,CAAC,CAACY,MAAM,CAC5C,CAACC,GAAG,EAAEC,GAAG,KAAK;EACZD,GAAG,CAACC,GAAG,CAAC,GAAI,sBAAqBd,cAAc,CAACc,GAAG,CAAE,KAAI;EACzD,OAAOD,GAAG;AACZ,CAAC,EACD,CAAC,CACH,CAAC;AAED,MAAME,GAAG,GAAGL,MAAM,CAACC,IAAI,CAACJ,cAAc,CAAC,CAACK,MAAM,CAC5C,CAACC,GAAG,EAAEC,GAAG,KAAK;EACZD,GAAG,CAACC,GAAG,CAAC,GAAI,sBAAqBP,cAAc,CAACO,GAAG,CAAE,KAAI;EACzD,OAAOD,GAAG;AACZ,CAAC,EACD,CAAC,CACH,CAAC;AAED,MAAMG,CAAC,GAAG;EACRP,GAAG;EACHM;AACF,CAAC;AAED,eAAeC,CAAC"}

package/dist/esm/useIsMaxWidth/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useCallback","maxBreakpoints","useIsWidth","useIsMaxWidth","breakpoint","detector","width"],"sources":["../../../src/useIsMaxWidth/index.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { maxBreakpoints, MaxBreakpoints } from '../media';\nimport useIsWidth from '../useIsWidth';\n\n/**\n * Checks whether the width of the screen is less than or equal to\n * the specified media breakpoint (for example, sm).\n */\nconst useIsMaxWidth = (breakpoint: keyof MaxBreakpoints): boolean => {\n  const detector = useCallback(\n    (width) => width <= maxBreakpoints[breakpoint],\n    [breakpoint]\n  );\n  return useIsWidth(detector);\n};\n\nexport default useIsMaxWidth;\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,cAAc,QAAwB,UAAU;AACzD,OAAOC,UAAU,MAAM,eAAe;;AAEtC;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAIC,UAAgC,IAAc;EACnE,MAAMC,QAAQ,GAAGL,WAAW,CACzBM,KAAK,IAAKA,KAAK,IAAIL,cAAc,CAACG,UAAU,CAAC,EAC9C,CAACA,UAAU,CAAC,CACb;EACD,OAAOF,UAAU,CAACG,QAAQ,CAAC;AAC7B,CAAC;AAED,eAAeF,aAAa"}
+{"version":3,"file":"index.js","names":["useCallback","maxBreakpoints","useIsWidth","useIsMaxWidth","breakpoint","detector","width"],"sources":["../../../src/useIsMaxWidth/index.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { maxBreakpoints, MaxBreakpoints } from '../media';\nimport useIsWidth from '../useIsWidth';\n\n/**\n * Checks whether the width of the screen is less than or equal to\n * the specified media breakpoint (for example, sm).\n */\nconst useIsMaxWidth = (breakpoint: keyof MaxBreakpoints): boolean => {\n  const detector = useCallback(\n    (width) => width <= maxBreakpoints[breakpoint],\n    [breakpoint]\n  );\n  return useIsWidth(detector);\n};\n\nexport default useIsMaxWidth;\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,cAAc,QAAwB,UAAU;AACzD,OAAOC,UAAU,MAAM,eAAe;;AAEtC;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAIC,UAAgC,IAAc;EACnE,MAAMC,QAAQ,GAAGL,WAAW,CACzBM,KAAK,IAAKA,KAAK,IAAIL,cAAc,CAACG,UAAU,CAAC,EAC9C,CAACA,UAAU,CACb,CAAC;EACD,OAAOF,UAAU,CAACG,QAAQ,CAAC;AAC7B,CAAC;AAED,eAAeF,aAAa"}

package/dist/esm/useIsMinWidth/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useCallback","minBreakpoints","useIsWidth","useIsMinWidth","breakpoint","detector","width"],"sources":["../../../src/useIsMinWidth/index.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { MinBreakpoints, minBreakpoints } from '../media';\nimport useIsWidth from '../useIsWidth';\n\n/**\n * Checks whether the width of the screen is greater than or equal to\n * the specified media breakpoint (for example, md).\n */\nconst useIsMinWidth = (breakpoint: keyof MinBreakpoints): boolean => {\n  const detector = useCallback(\n    (width) => width >= minBreakpoints[breakpoint],\n    [breakpoint]\n  );\n  return useIsWidth(detector);\n};\n\nexport default useIsMinWidth;\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAAyBC,cAAc,QAAQ,UAAU;AACzD,OAAOC,UAAU,MAAM,eAAe;;AAEtC;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAIC,UAAgC,IAAc;EACnE,MAAMC,QAAQ,GAAGL,WAAW,CACzBM,KAAK,IAAKA,KAAK,IAAIL,cAAc,CAACG,UAAU,CAAC,EAC9C,CAACA,UAAU,CAAC,CACb;EACD,OAAOF,UAAU,CAACG,QAAQ,CAAC;AAC7B,CAAC;AAED,eAAeF,aAAa"}
+{"version":3,"file":"index.js","names":["useCallback","minBreakpoints","useIsWidth","useIsMinWidth","breakpoint","detector","width"],"sources":["../../../src/useIsMinWidth/index.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { MinBreakpoints, minBreakpoints } from '../media';\nimport useIsWidth from '../useIsWidth';\n\n/**\n * Checks whether the width of the screen is greater than or equal to\n * the specified media breakpoint (for example, md).\n */\nconst useIsMinWidth = (breakpoint: keyof MinBreakpoints): boolean => {\n  const detector = useCallback(\n    (width) => width >= minBreakpoints[breakpoint],\n    [breakpoint]\n  );\n  return useIsWidth(detector);\n};\n\nexport default useIsMinWidth;\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAAyBC,cAAc,QAAQ,UAAU;AACzD,OAAOC,UAAU,MAAM,eAAe;;AAEtC;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAIC,UAAgC,IAAc;EACnE,MAAMC,QAAQ,GAAGL,WAAW,CACzBM,KAAK,IAAKA,KAAK,IAAIL,cAAc,CAACG,UAAU,CAAC,EAC9C,CAACA,UAAU,CACb,CAAC;EACD,OAAOF,UAAU,CAACG,QAAQ,CAAC;AAC7B,CAAC;AAED,eAAeF,aAAa"}

package/dist/esm/useIsWidth/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useCallback","useEffect","useRef","useState","useIsWidth","detector","detectorRef","flag","setFlag","window","innerWidth","updateFlag","current","addEventListener","removeEventListener"],"sources":["../../../src/useIsWidth/index.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\n/**\n * Checks whether the width of the screen matches the condition\n * defined by the specified function.\n */\nconst useIsWidth = (detector: (width: number) => boolean): boolean => {\n  const detectorRef = useRef<(width: number) => boolean>(detector);\n  const [flag, setFlag] = useState(() =>\n    detector(typeof window !== 'undefined' ? window.innerWidth : 0)\n  );\n\n  const updateFlag = useCallback(() => {\n    setFlag(detectorRef.current(window.innerWidth));\n  }, []);\n\n  useEffect(() => {\n    detectorRef.current = detector;\n    updateFlag();\n  }, [detector, updateFlag]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updateFlag);\n    return () => window.removeEventListener('resize', updateFlag);\n  }, [updateFlag]);\n\n  return flag;\n};\n\nexport default useIsWidth;\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;;AAEhE;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAIC,QAAoC,IAAc;EACpE,MAAMC,WAAW,GAAGJ,MAAM,CAA6BG,QAAQ,CAAC;EAChE,MAAM,CAACE,IAAI,EAAEC,OAAO,CAAC,GAAGL,QAAQ,CAAC,MAC/BE,QAAQ,CAAC,OAAOI,MAAM,KAAK,WAAW,GAAGA,MAAM,CAACC,UAAU,GAAG,CAAC,CAAC,CAChE;EAED,MAAMC,UAAU,GAAGX,WAAW,CAAC,MAAM;IACnCQ,OAAO,CAACF,WAAW,CAACM,OAAO,CAACH,MAAM,CAACC,UAAU,CAAC,CAAC;EACjD,CAAC,EAAE,EAAE,CAAC;EAENT,SAAS,CAAC,MAAM;IACdK,WAAW,CAACM,OAAO,GAAGP,QAAQ;IAC9BM,UAAU,EAAE;EACd,CAAC,EAAE,CAACN,QAAQ,EAAEM,UAAU,CAAC,CAAC;EAE1BV,SAAS,CAAC,MAAM;IACdQ,MAAM,CAACI,gBAAgB,CAAC,QAAQ,EAAEF,UAAU,CAAC;IAC7C,OAAO,MAAMF,MAAM,CAACK,mBAAmB,CAAC,QAAQ,EAAEH,UAAU,CAAC;EAC/D,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,OAAOJ,IAAI;AACb,CAAC;AAED,eAAeH,UAAU"}
+{"version":3,"file":"index.js","names":["useCallback","useEffect","useRef","useState","useIsWidth","detector","detectorRef","flag","setFlag","window","innerWidth","updateFlag","current","addEventListener","removeEventListener"],"sources":["../../../src/useIsWidth/index.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\n/**\n * Checks whether the width of the screen matches the condition\n * defined by the specified function.\n */\nconst useIsWidth = (detector: (width: number) => boolean): boolean => {\n  const detectorRef = useRef<(width: number) => boolean>(detector);\n  const [flag, setFlag] = useState(() =>\n    detector(typeof window !== 'undefined' ? window.innerWidth : 0)\n  );\n\n  const updateFlag = useCallback(() => {\n    setFlag(detectorRef.current(window.innerWidth));\n  }, []);\n\n  useEffect(() => {\n    detectorRef.current = detector;\n    updateFlag();\n  }, [detector, updateFlag]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updateFlag);\n    return () => window.removeEventListener('resize', updateFlag);\n  }, [updateFlag]);\n\n  return flag;\n};\n\nexport default useIsWidth;\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;;AAEhE;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAIC,QAAoC,IAAc;EACpE,MAAMC,WAAW,GAAGJ,MAAM,CAA6BG,QAAQ,CAAC;EAChE,MAAM,CAACE,IAAI,EAAEC,OAAO,CAAC,GAAGL,QAAQ,CAAC,MAC/BE,QAAQ,CAAC,OAAOI,MAAM,KAAK,WAAW,GAAGA,MAAM,CAACC,UAAU,GAAG,CAAC,CAChE,CAAC;EAED,MAAMC,UAAU,GAAGX,WAAW,CAAC,MAAM;IACnCQ,OAAO,CAACF,WAAW,CAACM,OAAO,CAACH,MAAM,CAACC,UAAU,CAAC,CAAC;EACjD,CAAC,EAAE,EAAE,CAAC;EAENT,SAAS,CAAC,MAAM;IACdK,WAAW,CAACM,OAAO,GAAGP,QAAQ;IAC9BM,UAAU,CAAC,CAAC;EACd,CAAC,EAAE,CAACN,QAAQ,EAAEM,UAAU,CAAC,CAAC;EAE1BV,SAAS,CAAC,MAAM;IACdQ,MAAM,CAACI,gBAAgB,CAAC,QAAQ,EAAEF,UAAU,CAAC;IAC7C,OAAO,MAAMF,MAAM,CAACK,mBAAmB,CAAC,QAAQ,EAAEH,UAAU,CAAC;EAC/D,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,OAAOJ,IAAI;AACb,CAAC;AAED,eAAeH,UAAU"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/media",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -14,7 +14,15 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/__tests__",
+    "!**/*.stories.tsx",
+    "!**/*.stories.mdx",
+    "!**/*.example.tsx",
+    "!**/*.emotion.d.ts"
   ],
   "sideEffects": false,
   "scripts": {
@@ -31,5 +39,5 @@
   "peerDependencies": {
     "react": ">=18"
   },
-  "gitHead": "88df07f5c7c0c5534a24b84689854528fa514153"
+  "gitHead": "3d6b264027712ef81a75379fe3fde3c76c3079af"
 }

package/src/index.ts

@@ -0,0 +1,6 @@
+export { default as m } from './media';
+export { default as useIsMaxWidth } from './useIsMaxWidth';
+export { default as useIsMinWidth } from './useIsMinWidth';
+export { default as useIsWidth } from './useIsWidth';
+
+export * from './media';

package/src/media/index.ts

@@ -0,0 +1,57 @@
+interface Breakpoints {
+  xxs: number;
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  xxl: number;
+}
+
+type Index<T> = {
+  [key in keyof T]: string;
+};
+
+export type MinBreakpoints = Omit<Breakpoints, 'xxs'>;
+export type MaxBreakpoints = Omit<Breakpoints, 'xxl'>;
+
+export const minBreakpoints: MinBreakpoints = {
+  xs: 480,
+  sm: 576,
+  md: 786,
+  lg: 992,
+  xl: 1200,
+  xxl: 1600,
+};
+
+export const maxBreakpoints: MaxBreakpoints = {
+  xxs: minBreakpoints.xs - 1,
+  xs: minBreakpoints.sm - 1,
+  sm: minBreakpoints.md - 1,
+  md: minBreakpoints.lg - 1,
+  lg: minBreakpoints.xl - 1,
+  xl: minBreakpoints.xxl - 1,
+};
+
+const min = Object.keys(minBreakpoints).reduce<Index<MinBreakpoints>>(
+  (res, key) => {
+    res[key] = `@media (min-width: ${minBreakpoints[key]}px)`;
+    return res;
+  },
+  {} as Index<MinBreakpoints>
+);
+
+const max = Object.keys(maxBreakpoints).reduce<Index<MaxBreakpoints>>(
+  (res, key) => {
+    res[key] = `@media (max-width: ${maxBreakpoints[key]}px)`;
+    return res;
+  },
+  {} as Index<MaxBreakpoints>
+);
+
+const m = {
+  min,
+  max,
+};
+
+export default m;

package/src/useIsMaxWidth/index.ts

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+import { maxBreakpoints, MaxBreakpoints } from '../media';
+import useIsWidth from '../useIsWidth';
+
+/**
+ * Checks whether the width of the screen is less than or equal to
+ * the specified media breakpoint (for example, sm).
+ */
+const useIsMaxWidth = (breakpoint: keyof MaxBreakpoints): boolean => {
+  const detector = useCallback(
+    (width) => width <= maxBreakpoints[breakpoint],
+    [breakpoint]
+  );
+  return useIsWidth(detector);
+};
+
+export default useIsMaxWidth;

package/src/useIsMinWidth/index.ts

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+import { MinBreakpoints, minBreakpoints } from '../media';
+import useIsWidth from '../useIsWidth';
+
+/**
+ * Checks whether the width of the screen is greater than or equal to
+ * the specified media breakpoint (for example, md).
+ */
+const useIsMinWidth = (breakpoint: keyof MinBreakpoints): boolean => {
+  const detector = useCallback(
+    (width) => width >= minBreakpoints[breakpoint],
+    [breakpoint]
+  );
+  return useIsWidth(detector);
+};
+
+export default useIsMinWidth;

package/src/useIsWidth/index.ts

@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * Checks whether the width of the screen matches the condition
+ * defined by the specified function.
+ */
+const useIsWidth = (detector: (width: number) => boolean): boolean => {
+  const detectorRef = useRef<(width: number) => boolean>(detector);
+  const [flag, setFlag] = useState(() =>
+    detector(typeof window !== 'undefined' ? window.innerWidth : 0)
+  );
+
+  const updateFlag = useCallback(() => {
+    setFlag(detectorRef.current(window.innerWidth));
+  }, []);
+
+  useEffect(() => {
+    detectorRef.current = detector;
+    updateFlag();
+  }, [detector, updateFlag]);
+
+  useEffect(() => {
+    window.addEventListener('resize', updateFlag);
+    return () => window.removeEventListener('resize', updateFlag);
+  }, [updateFlag]);
+
+  return flag;
+};
+
+export default useIsWidth;