@mirai/ui 1.1.12 → 1.1.14

package/README.md

@@ -1382,7 +1382,7 @@ Theme.setDirection(DIRECTION_TYPE.RIGHT);
 --mirai-ui-space-XXL: 64px;
 
 /* breakpoints */
---mirai-ui-breakpoint-S: 430px;
+--mirai-ui-breakpoint-S: 480px;
 --mirai-ui-breakpoint-M: 820px;
 --mirai-ui-breakpoint-content: 1280px;
 
@@ -1434,8 +1434,8 @@ This _hook_ can help you know what type of device your application or component
 - `isLandscape:bool` orientation is landscape
 - `isPortrait:bool` orientation is portrait
 <!-- type -->
-- `isMobile:bool` is in the mobile breakpoint (<=430)
-- `isTable:bool` is in the mobile breakpoint (>430px && <=820px)
+- `isMobile:bool` is in the mobile breakpoint (<=480)
+- `isTable:bool` is in the mobile breakpoint (>480px && <=820px)
 - `isDesktop:bool` in in the desktop breakpoint (>820px)
 
 Let's see a simple use of the hook:

package/build/components/Calendar/Calendar.module.css

@@ -120,7 +120,7 @@
   color: transparent;
 }
 
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .dayTouchable:hover {
     background-color: var(--mirai-ui-calendar-selected-background);
   }

package/build/components/InputOption/InputOption.module.css

@@ -20,13 +20,13 @@
   color: var(--mirai-ui-input-text-focus);
 }
 
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
   .icon {
     margin: calc(calc(var(--mirai-ui-checkbox-size-mobile) - var(--mirai-ui-input-text-icon)) / 2);
   }
 }
 
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .icon {
     margin: var(--mirai-ui-border-width);
   }

package/build/components/Menu/Menu.module.css

@@ -54,13 +54,13 @@
 }
 
 /* S */
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
   .menu {
     padding-bottom: var(--mirai-ui-space-XS);
   }
 }
 
-@media only screen and (min-width: 430px) {
+@media only screen and (min-width: 481px) {
   .menu {
     background-color: var(--mirai-ui-menu-base);
     border-radius: var(--mirai-ui-menu-border-radius);

package/build/components/Modal/Modal.constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EVENT_VISIBLE = void 0;
+var EVENT_VISIBLE = 'Component:Modal:visible';
+exports.EVENT_VISIBLE = EVENT_VISIBLE;
+//# sourceMappingURL=Modal.constants.js.map

package/build/components/Modal/Modal.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.constants.js","names":["EVENT_VISIBLE"],"sources":["../../../src/components/Modal/Modal.constants.js"],"sourcesContent":["const EVENT_VISIBLE = 'Component:Modal:visible';\n\nexport { EVENT_VISIBLE };\n"],"mappings":";;;;;;AAAA,IAAMA,aAAa,GAAG,yBAAyB;AAAC"}

package/build/components/Modal/Modal.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Modal = void 0;
+var _dataSources = require("@mirai/data-sources");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -13,8 +14,9 @@ var _helpers = require("../../helpers");
 var _hooks = require("../../hooks");
 var _primitives = require("../../primitives");
 var _theme = require("../../theme");
+var _Modal = require("./Modal.constants");
 var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
-var _excluded = ["blur", "children", "fit", "mobileBehavior", "overflow", "portal", "preventDefault", "title", "visible", "onBack", "onClose", "onOverflow"];
+var _excluded = ["blur", "children", "displayName", "fit", "mobileBehavior", "overflow", "portal", "preventDefault", "title", "visible", "onBack", "onClose", "onOverflow"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,6 +38,7 @@ var Modal = function Modal(_ref) {
   var _ref$blur = _ref.blur,
     blur = _ref$blur === void 0 ? false : _ref$blur,
     children = _ref.children,
+    displayName = _ref.displayName,
     _ref$fit = _ref.fit,
     fit = _ref$fit === void 0 ? false : _ref$fit,
     _ref$mobileBehavior = _ref.mobileBehavior,
@@ -62,6 +65,10 @@ var Modal = function Modal(_ref) {
     dataset = _useState2[0],
     setDataset = _useState2[1];
   (0, _react.useEffect)(function () {
+    _dataSources.Event.publish(_Modal.EVENT_VISIBLE, {
+      visible: visible,
+      displayName: displayName
+    });
     if (!visible || !onClose) return;
     var handleKeydown = function handleKeydown(event) {
       return event.key === 'Escape' && onClose();
@@ -146,6 +153,7 @@ Modal.displayName = 'Component:Modal';
 Modal.propTypes = {
   blur: _propTypes.default.bool,
   children: _propTypes.default.node,
+  displayName: _propTypes.default.string,
   fit: _propTypes.default.bool,
   mobileBehavior: _propTypes.default.bool,
   overflow: _propTypes.default.bool,

package/build/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","blur","children","fit","mobileBehavior","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","isMobile","height","ref","useRef","useState","dataset","setDataset","useEffect","handleKeydown","event","key","document","addEventListener","removeEventListener","body","miraiModal","undefined","handleOverflow","target","current","contains","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","role","styles","style","container","modal","calcWidth","className","header","reverse","hideBack","hideClose","ICON","icon","button","CLOSE","EXPAND_MORE","React","Children","map","child","index","cloneElement","props","displayName","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components';\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  fit = false,\n  mobileBehavior = false,\n  overflow = true,\n  portal = false,\n  preventDefault = true,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  ...others\n}) => {\n  const { isDesktop, isMobile, height } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (!visible || !onClose) return;\n\n    const handleKeydown = (event) => event.key === 'Escape' && onClose();\n\n    document.addEventListener('keydown', handleKeydown);\n    return () => document.removeEventListener('keydown', handleKeydown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible]);\n\n  useEffect(() => {\n    if (visible && !dataset) {\n      setDataset(true);\n      document.body.dataset.miraiModal = true;\n    }\n\n    return () => {\n      if (visible && dataset) {\n        setDataset(undefined);\n        delete document.body.dataset.miraiModal;\n      }\n    };\n  }, [dataset, visible]);\n\n  const handleOverflow = (event) => {\n    const { target } = event;\n    onOverflow && !ref.current?.contains(target) && onOverflow(event);\n  };\n\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n  const { testId } = others;\n\n  return renderer(\n    <Pressable\n      preventDefault={preventDefault}\n      role={others.role ? `${others.role}-overflow` : 'modal-overflow'}\n      onPress={visible && overflow ? handleOverflow : undefined}\n      className={styles(\n        style.container,\n        isDesktop && mobileBehavior && style.mobileBehavior,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      style={{ height }}\n      testId={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        ref={ref}\n        role={others.role || 'modal'}\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View\n            row\n            className={styles(\n              style.header,\n              !defaultDirection && style.reverse,\n              !onBack && style.hideBack,\n              !onClose && style.hideClose,\n            )}\n          >\n            {onBack && (\n              <Button small squared transparent onPress={onBack} testId={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Button>\n            )}\n            {title && (\n              <Text headline={!isMobile} className={style.title}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Button\n                small\n                squared\n                transparent\n                onPress={onClose}\n                testId={testId ? `${testId}-button-close` : undefined}\n                className={style.button}\n              >\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Button>\n            )}\n          </View>\n        )}\n\n        {React.Children.map(children, (child, index) =>\n          !child || child === null\n            ? null\n            : React.cloneElement(child, { key: child.key || index, ...child.props, role: 'modal-content' }),\n        )}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  mobileBehavior: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n  onOverflow: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["Modal","blur","children","displayName","fit","mobileBehavior","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","isMobile","height","ref","useRef","useState","dataset","setDataset","useEffect","Event","publish","EVENT_VISIBLE","handleKeydown","event","key","document","addEventListener","removeEventListener","body","miraiModal","undefined","handleOverflow","target","current","contains","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","role","styles","style","container","modal","calcWidth","className","header","reverse","hideBack","hideClose","ICON","icon","button","CLOSE","EXPAND_MORE","React","Children","map","child","index","cloneElement","props","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import { Event } from '@mirai/data-sources';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components';\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { EVENT_VISIBLE } from './Modal.constants';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  displayName,\n  fit = false,\n  mobileBehavior = false,\n  overflow = true,\n  portal = false,\n  preventDefault = true,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  ...others\n}) => {\n  const { isDesktop, isMobile, height } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    Event.publish(EVENT_VISIBLE, { visible, displayName });\n    if (!visible || !onClose) return;\n\n    const handleKeydown = (event) => event.key === 'Escape' && onClose();\n\n    document.addEventListener('keydown', handleKeydown);\n    return () => document.removeEventListener('keydown', handleKeydown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible]);\n\n  useEffect(() => {\n    if (visible && !dataset) {\n      setDataset(true);\n      document.body.dataset.miraiModal = true;\n    }\n\n    return () => {\n      if (visible && dataset) {\n        setDataset(undefined);\n        delete document.body.dataset.miraiModal;\n      }\n    };\n  }, [dataset, visible]);\n\n  const handleOverflow = (event) => {\n    const { target } = event;\n    onOverflow && !ref.current?.contains(target) && onOverflow(event);\n  };\n\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n  const { testId } = others;\n\n  return renderer(\n    <Pressable\n      preventDefault={preventDefault}\n      role={others.role ? `${others.role}-overflow` : 'modal-overflow'}\n      onPress={visible && overflow ? handleOverflow : undefined}\n      className={styles(\n        style.container,\n        isDesktop && mobileBehavior && style.mobileBehavior,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      style={{ height }}\n      testId={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        ref={ref}\n        role={others.role || 'modal'}\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View\n            row\n            className={styles(\n              style.header,\n              !defaultDirection && style.reverse,\n              !onBack && style.hideBack,\n              !onClose && style.hideClose,\n            )}\n          >\n            {onBack && (\n              <Button small squared transparent onPress={onBack} testId={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Button>\n            )}\n            {title && (\n              <Text headline={!isMobile} className={style.title}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Button\n                small\n                squared\n                transparent\n                onPress={onClose}\n                testId={testId ? `${testId}-button-close` : undefined}\n                className={style.button}\n              >\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Button>\n            )}\n          </View>\n        )}\n\n        {React.Children.map(children, (child, index) =>\n          !child || child === null\n            ? null\n            : React.cloneElement(child, { key: child.key || index, ...child.props, role: 'modal-content' }),\n        )}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  displayName: PropTypes.string,\n  fit: PropTypes.bool,\n  mobileBehavior: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n  onOverflow: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}

package/build/components/Modal/Modal.module.css

@@ -97,7 +97,7 @@
 }
 
 /* S */
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
   .container {
     align-items: flex-end;
     align-content: flex-end;
@@ -130,7 +130,7 @@
 }
 
 /* M & L */
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .container {
     align-items: center;
     top: 0;

package/build/components/Modal/index.js

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  MODAL_EVENT_VISIBLE: true
+};
+Object.defineProperty(exports, "MODAL_EVENT_VISIBLE", {
+  enumerable: true,
+  get: function get() {
+    return _Modal2.EVENT_VISIBLE;
+  }
+});
 var _Modal = require("./Modal");
 Object.keys(_Modal).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Modal[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -14,4 +24,5 @@ Object.keys(_Modal).forEach(function (key) {
     }
   });
 });
+var _Modal2 = require("./Modal.constants");
 //# sourceMappingURL=index.js.map

package/build/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Modal/index.js"],"sourcesContent":["export * from './Modal';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Modal/index.js"],"sourcesContent":["export * from './Modal';\nexport { EVENT_VISIBLE as MODAL_EVENT_VISIBLE } from './Modal.constants';\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA"}

package/build/components/Slider/Slider.module.css

@@ -105,11 +105,11 @@
 }
 
 /* S */
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
 }
 
 /* M & L */
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .item .caption {
     transition: opacity var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
     opacity: 0;

package/build/components/Table/Table.module.css

@@ -154,7 +154,7 @@
 }
 
 /* Mobile */
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
   .table .checkbox {
     max-width: var(--mirai-ui-checkbox-size-mobile);
     min-width: var(--mirai-ui-checkbox-size-mobile);
@@ -162,7 +162,7 @@
 }
 
 /* Table & Desktop */
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .table .checkbox {
     max-width: var(--mirai-ui-checkbox-size);
     min-width: var(--mirai-ui-checkbox-size);

package/build/components/Table/Table.stories.module.css

@@ -23,14 +23,14 @@
 }
 
 /* Mobile */
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
   .table {
     max-height: 80svh;
   }
 }
 
 /* Tablet & Desktop  */
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .table {
     max-height: 70svh;
   }

package/build/hooks/useDevice.js

@@ -36,7 +36,7 @@ var useDevice = function useDevice() {
   return (0, _react.useMemo)(function () {
     var _Theme$get = _theme.Theme.get(),
       _Theme$get$breakpoint = _Theme$get.breakpointS,
-      breakpointS = _Theme$get$breakpoint === void 0 ? '430px' : _Theme$get$breakpoint,
+      breakpointS = _Theme$get$breakpoint === void 0 ? '480px' : _Theme$get$breakpoint,
       _Theme$get$breakpoint2 = _Theme$get.breakpointM,
       breakpointM = _Theme$get$breakpoint2 === void 0 ? '820px' : _Theme$get$breakpoint2;
     var isLandscape = resolution.width >= resolution.height;

package/build/hooks/useDevice.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDevice.js","names":["useDevice","useState","getResolution","resolution","setResolution","useEffect","handleResize","window","addEventListener","removeEventListener","useMemo","Theme","get","breakpointS","breakpointM","isLandscape","width","height","isMobile","sanitizePx","isTablet","navigator","getNavigator","isPortrait","isDesktop"],"sources":["../../src/hooks/useDevice.js"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { Theme } from '../theme';\nimport { getResolution, getNavigator, sanitizePx } from './helpers';\n\nexport const useDevice = () => {\n  const [resolution, setResolution] = useState(getResolution());\n\n  useEffect(() => {\n    const handleResize = () => setResolution(getResolution());\n\n    window.addEventListener('resize', handleResize);\n\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return useMemo(() => {\n    const { breakpointS = '430px', breakpointM = '820px' } = Theme.get();\n    const isLandscape = resolution.width >= resolution.height;\n    const isMobile = resolution.width <= sanitizePx(breakpointS);\n    const isTablet = !isMobile && resolution.width <= sanitizePx(breakpointM);\n    const navigator = getNavigator();\n\n    return {\n      ...resolution,\n      ...navigator,\n      isLandscape,\n      isPortrait: !isLandscape,\n      isMobile,\n      isTablet,\n      isDesktop: !isMobile && !isTablet,\n    };\n  }, [resolution]);\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE7D,IAAMA,SAAS,GAAG,SAAZA,SAAS,GAAS;EAC7B,gBAAoC,IAAAC,eAAQ,EAAC,IAAAC,sBAAa,GAAE,CAAC;IAAA;IAAtDC,UAAU;IAAEC,aAAa;EAEhC,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAMC,YAAY,GAAG,SAAfA,YAAY;MAAA,OAASF,aAAa,CAAC,IAAAF,sBAAa,GAAE,CAAC;IAAA;IAEzDK,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAE/C,OAAO;MAAA,OAAMC,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEH,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAAI,cAAO,EAAC,YAAM;IACnB,iBAAyDC,YAAK,CAACC,GAAG,EAAE;MAAA,mCAA5DC,WAAW;MAAXA,WAAW,sCAAG,OAAO;MAAA,oCAAEC,WAAW;MAAXA,WAAW,uCAAG,OAAO;IACpD,IAAMC,WAAW,GAAGZ,UAAU,CAACa,KAAK,IAAIb,UAAU,CAACc,MAAM;IACzD,IAAMC,QAAQ,GAAGf,UAAU,CAACa,KAAK,IAAI,IAAAG,mBAAU,EAACN,WAAW,CAAC;IAC5D,IAAMO,QAAQ,GAAG,CAACF,QAAQ,IAAIf,UAAU,CAACa,KAAK,IAAI,IAAAG,mBAAU,EAACL,WAAW,CAAC;IACzE,IAAMO,SAAS,GAAG,IAAAC,qBAAY,GAAE;IAEhC,qDACKnB,UAAU,GACVkB,SAAS;MACZN,WAAW,EAAXA,WAAW;MACXQ,UAAU,EAAE,CAACR,WAAW;MACxBG,QAAQ,EAARA,QAAQ;MACRE,QAAQ,EAARA,QAAQ;MACRI,SAAS,EAAE,CAACN,QAAQ,IAAI,CAACE;IAAQ;EAErC,CAAC,EAAE,CAACjB,UAAU,CAAC,CAAC;AAClB,CAAC;AAAC"}
+{"version":3,"file":"useDevice.js","names":["useDevice","useState","getResolution","resolution","setResolution","useEffect","handleResize","window","addEventListener","removeEventListener","useMemo","Theme","get","breakpointS","breakpointM","isLandscape","width","height","isMobile","sanitizePx","isTablet","navigator","getNavigator","isPortrait","isDesktop"],"sources":["../../src/hooks/useDevice.js"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { Theme } from '../theme';\nimport { getResolution, getNavigator, sanitizePx } from './helpers';\n\nexport const useDevice = () => {\n  const [resolution, setResolution] = useState(getResolution());\n\n  useEffect(() => {\n    const handleResize = () => setResolution(getResolution());\n\n    window.addEventListener('resize', handleResize);\n\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return useMemo(() => {\n    const { breakpointS = '480px', breakpointM = '820px' } = Theme.get();\n    const isLandscape = resolution.width >= resolution.height;\n    const isMobile = resolution.width <= sanitizePx(breakpointS);\n    const isTablet = !isMobile && resolution.width <= sanitizePx(breakpointM);\n    const navigator = getNavigator();\n\n    return {\n      ...resolution,\n      ...navigator,\n      isLandscape,\n      isPortrait: !isLandscape,\n      isMobile,\n      isTablet,\n      isDesktop: !isMobile && !isTablet,\n    };\n  }, [resolution]);\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE7D,IAAMA,SAAS,GAAG,SAAZA,SAAS,GAAS;EAC7B,gBAAoC,IAAAC,eAAQ,EAAC,IAAAC,sBAAa,GAAE,CAAC;IAAA;IAAtDC,UAAU;IAAEC,aAAa;EAEhC,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAMC,YAAY,GAAG,SAAfA,YAAY;MAAA,OAASF,aAAa,CAAC,IAAAF,sBAAa,GAAE,CAAC;IAAA;IAEzDK,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAE/C,OAAO;MAAA,OAAMC,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEH,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAAI,cAAO,EAAC,YAAM;IACnB,iBAAyDC,YAAK,CAACC,GAAG,EAAE;MAAA,mCAA5DC,WAAW;MAAXA,WAAW,sCAAG,OAAO;MAAA,oCAAEC,WAAW;MAAXA,WAAW,uCAAG,OAAO;IACpD,IAAMC,WAAW,GAAGZ,UAAU,CAACa,KAAK,IAAIb,UAAU,CAACc,MAAM;IACzD,IAAMC,QAAQ,GAAGf,UAAU,CAACa,KAAK,IAAI,IAAAG,mBAAU,EAACN,WAAW,CAAC;IAC5D,IAAMO,QAAQ,GAAG,CAACF,QAAQ,IAAIf,UAAU,CAACa,KAAK,IAAI,IAAAG,mBAAU,EAACL,WAAW,CAAC;IACzE,IAAMO,SAAS,GAAG,IAAAC,qBAAY,GAAE;IAEhC,qDACKnB,UAAU,GACVkB,SAAS;MACZN,WAAW,EAAXA,WAAW;MACXQ,UAAU,EAAE,CAACR,WAAW;MACxBG,QAAQ,EAARA,QAAQ;MACRE,QAAQ,EAARA,QAAQ;MACRI,SAAS,EAAE,CAACN,QAAQ,IAAI,CAACE;IAAQ;EAErC,CAAC,EAAE,CAACjB,UAAU,CAAC,CAAC;AAClB,CAAC;AAAC"}

package/build/primitives/Checkbox/Checkbox.module.css

@@ -56,7 +56,7 @@
 }
 
 /* S */
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
   .checkbox {
     height: var(--mirai-ui-checkbox-size-mobile);
     width: var(--mirai-ui-checkbox-size-mobile);
@@ -69,7 +69,7 @@
 }
 
 /* M & L */
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .checkbox {
     height: var(--mirai-ui-checkbox-size);
     width: var(--mirai-ui-checkbox-size);

package/build/primitives/Radio/Radio.module.css

@@ -72,7 +72,7 @@
 }
 
 /* S */
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
   .radio {
     height: var(--mirai-ui-radio-size-mobile);
     width: var(--mirai-ui-radio-size-mobile);
@@ -91,7 +91,7 @@
 }
 
 /* M & L */
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .radio {
     height: var(--mirai-ui-radio-size);
     width: var(--mirai-ui-radio-size);

package/build/primitives/Switch/Switch.module.css

@@ -61,7 +61,7 @@
   transform: translateX(-100%);
 }
 
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
   .switch .area {
     height: calc(var(--mirai-ui-switch-size-mobile) + calc(var(--mirai-ui-switch-border-size) * 2));
     width: calc(var(--mirai-ui-switch-size-mobile) * 2.4);
@@ -73,7 +73,7 @@
   }
 }
 
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .switch .area {
     height: calc(var(--mirai-ui-switch-size) + calc(var(--mirai-ui-switch-border-size) * 2));
     width: calc(var(--mirai-ui-switch-size) * 2.4);

package/build/theme/default.theme.css

@@ -72,7 +72,7 @@
   --mirai-ui-space-XXL: 64px;
 
   /* breakpoints */
-  --mirai-ui-breakpoint-S: 430px;
+  --mirai-ui-breakpoint-S: 480px;
   --mirai-ui-breakpoint-M: 820px;
   --mirai-ui-breakpoint-content: 1280px;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.1.12",
+  "version": "1.1.14",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",
@@ -24,6 +24,7 @@
     "release": "yarn version --patch && yarn publish --access public"
   },
   "dependencies": {
+    "@mirai/data-sources": "^0.1",
     "@mirai/locale": "^0.2",
     "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v5.0.1/react-icons-all-files-5.0.1.tgz",
     "react": "^17.0.2",