@mirai/ui 1.0.63 → 1.0.64

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","children","overflow","portal","title","visible","onBack","onClose","others","isDesktop","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","style","container","modal","className","header","undefined","ICON","LEFT","icon","left","right","CLOSE","EXPAND_MORE","document","body","propTypes","PropTypes","node","bool","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({ children, overflow = true, portal = false, title, visible, onBack, onClose, ...others }) => {\n  const { isDesktop } = useDevice();\n\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { ['data-testid']: testId } = others;\n\n  return renderer(\n    <View row className={styles(style.container, overflow && style.overflow, visible && style.visible)}>\n      <View {...others} fit className={styles(style.modal, visible && style.visible, others.className)}>\n        {(title || onBack || onClose) && (\n          <View row className={style.header}>\n            {onBack && (\n              <Pressable onPress={onBack} data-testid={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Pressable>\n            )}\n            {title && (\n              <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Pressable onPress={onClose} data-testid={testId ? `${testId}-button-close` : undefined}>\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Pressable>\n            )}\n          </View>\n        )}\n        {children}\n      </View>\n    </View>,\n    document.body,\n  );\n};\n\nModal.propTypes = {\n  children: PropTypes.node,\n  portal: PropTypes.bool,\n  overflow: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAA+F;EAAA,IAA5FC,QAA4F,QAA5FA,QAA4F;EAAA,yBAAlFC,QAAkF;EAAA,IAAlFA,QAAkF,8BAAvE,IAAuE;EAAA,uBAAjEC,MAAiE;EAAA,IAAjEA,MAAiE,4BAAxD,KAAwD;EAAA,IAAjDC,KAAiD,QAAjDA,KAAiD;EAAA,IAA1CC,OAA0C,QAA1CA,OAA0C;EAAA,IAAjCC,MAAiC,QAAjCA,MAAiC;EAAA,IAAzBC,OAAyB,QAAzBA,OAAyB;EAAA,IAAbC,MAAa;;EAC3G,iBAAsB,uBAAtB;EAAA,IAAQC,SAAR,cAAQA,SAAR;;EAEA,IAAMC,QAAQ,GAAGC,oBAAW,CAACR,MAAZ,GAAqB,UAACS,GAAD;IAAA,OAASA,GAAT;EAAA,CAArB,GAAoCC,kBAASC,YAA9D;EAEA,IAAyBC,MAAzB,GAAoCP,MAApC,CAAS,aAAT;EAEA,OAAOE,QAAQ,eACb,6BAAC,gBAAD;IAAM,GAAG,MAAT;IAAU,SAAS,EAAE,qBAAOM,qBAAMC,SAAb,EAAwBf,QAAQ,IAAIc,qBAAMd,QAA1C,EAAoDG,OAAO,IAAIW,qBAAMX,OAArE;EAArB,gBACE,6BAAC,gBAAD,eAAUG,MAAV;IAAkB,GAAG,MAArB;IAAsB,SAAS,EAAE,qBAAOQ,qBAAME,KAAb,EAAoBb,OAAO,IAAIW,qBAAMX,OAArC,EAA8CG,MAAM,CAACW,SAArD;EAAjC,IACG,CAACf,KAAK,IAAIE,MAAT,IAAmBC,OAApB,kBACC,6BAAC,gBAAD;IAAM,GAAG,MAAT;IAAU,SAAS,EAAES,qBAAMI;EAA3B,GACGd,MAAM,iBACL,6BAAC,qBAAD;IAAW,OAAO,EAAEA,MAApB;IAA4B,eAAaS,MAAM,aAAMA,MAAN,oBAA6BM;EAA5E,gBACE,6BAAC,gBAAD;IAAM,KAAK,EAAEC,iBAAKC,IAAlB;IAAwB,SAAS,EAAEP,qBAAMQ;EAAzC,EADF,CAFJ,EAMGpB,KAAK,iBACJ,6BAAC,gBAAD;IAAM,QAAQ,MAAd;IAAe,SAAS,EAAE,qBAAOY,qBAAMZ,KAAb,EAAoB,CAACE,MAAD,IAAWU,qBAAMS,IAArC,EAA2C,CAAClB,OAAD,IAAYS,qBAAMU,KAA7D;EAA1B,GACGtB,KADH,CAPJ,EAWGG,OAAO,iBACN,6BAAC,qBAAD;IAAW,OAAO,EAAEA,OAApB;IAA6B,eAAaQ,MAAM,aAAMA,MAAN,qBAA8BM;EAA9E,gBACE,6BAAC,gBAAD;IAAM,KAAK,EAAEZ,SAAS,IAAIL,KAAK,KAAKiB,SAAvB,GAAmCC,iBAAKK,KAAxC,GAAgDL,iBAAKM,WAAlE;IAA+E,SAAS,EAAEZ,qBAAMQ;EAAhG,EADF,CAZJ,CAFJ,EAoBGvB,QApBH,CADF,CADa,EAyBb4B,QAAQ,CAACC,IAzBI,CAAf;AA2BD,CAlCD;;;AAoCA9B,KAAK,CAAC+B,SAAN,GAAkB;EAChB9B,QAAQ,EAAE+B,mBAAUC,IADJ;EAEhB9B,MAAM,EAAE6B,mBAAUE,IAFF;EAGhBhC,QAAQ,EAAE8B,mBAAUE,IAHJ;EAIhB9B,KAAK,EAAE4B,mBAAUG,MAJD;EAKhB9B,OAAO,EAAE2B,mBAAUE,IALH;EAMhB5B,MAAM,EAAE0B,mBAAUI,IANF;EAOhB7B,OAAO,EAAEyB,mBAAUI;AAPH,CAAlB"}
+{"version":3,"file":"Modal.js","names":["Modal","children","fit","overflow","portal","title","visible","onBack","onClose","others","isDesktop","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","style","container","modal","calcWidth","className","header","undefined","ICON","LEFT","icon","left","right","CLOSE","EXPAND_MORE","document","body","propTypes","PropTypes","node","bool","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  children,\n  fit = false,\n  overflow = true,\n  portal = false,\n  title,\n  visible,\n  onBack,\n  onClose,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { ['data-testid']: testId } = others;\n\n  return renderer(\n    <View row className={styles(style.container, overflow && style.overflow, visible && style.visible)}>\n      <View\n        {...others}\n        fit\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View row className={style.header}>\n            {onBack && (\n              <Pressable onPress={onBack} data-testid={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Pressable>\n            )}\n            {title && (\n              <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Pressable onPress={onClose} data-testid={testId ? `${testId}-button-close` : undefined}>\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Pressable>\n            )}\n          </View>\n        )}\n        {children}\n      </View>\n    </View>,\n    document.body,\n  );\n};\n\nModal.propTypes = {\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  portal: PropTypes.bool,\n  overflow: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAUR;EAAA,IATJC,QASI,QATJA,QASI;EAAA,oBARJC,GAQI;EAAA,IARJA,GAQI,yBARE,KAQF;EAAA,yBAPJC,QAOI;EAAA,IAPJA,QAOI,8BAPO,IAOP;EAAA,uBANJC,MAMI;EAAA,IANJA,MAMI,4BANK,KAML;EAAA,IALJC,KAKI,QALJA,KAKI;EAAA,IAJJC,OAII,QAJJA,OAII;EAAA,IAHJC,MAGI,QAHJA,MAGI;EAAA,IAFJC,OAEI,QAFJA,OAEI;EAAA,IADDC,MACC;;EACJ,iBAAsB,uBAAtB;EAAA,IAAQC,SAAR,cAAQA,SAAR;;EAEA,IAAMC,QAAQ,GAAGC,oBAAW,CAACR,MAAZ,GAAqB,UAACS,GAAD;IAAA,OAASA,GAAT;EAAA,CAArB,GAAoCC,kBAASC,YAA9D;EAEA,IAAyBC,MAAzB,GAAoCP,MAApC,CAAS,aAAT;EAEA,OAAOE,QAAQ,eACb,6BAAC,gBAAD;IAAM,GAAG,MAAT;IAAU,SAAS,EAAE,qBAAOM,qBAAMC,SAAb,EAAwBf,QAAQ,IAAIc,qBAAMd,QAA1C,EAAoDG,OAAO,IAAIW,qBAAMX,OAArE;EAArB,gBACE,6BAAC,gBAAD,eACMG,MADN;IAEE,GAAG,MAFL;IAGE,SAAS,EAAE,qBAAOQ,qBAAME,KAAb,EAAoB,CAACjB,GAAD,IAAQe,qBAAMG,SAAlC,EAA6Cd,OAAO,IAAIW,qBAAMX,OAA9D,EAAuEG,MAAM,CAACY,SAA9E;EAHb,IAKG,CAAChB,KAAK,IAAIE,MAAT,IAAmBC,OAApB,kBACC,6BAAC,gBAAD;IAAM,GAAG,MAAT;IAAU,SAAS,EAAES,qBAAMK;EAA3B,GACGf,MAAM,iBACL,6BAAC,qBAAD;IAAW,OAAO,EAAEA,MAApB;IAA4B,eAAaS,MAAM,aAAMA,MAAN,oBAA6BO;EAA5E,gBACE,6BAAC,gBAAD;IAAM,KAAK,EAAEC,iBAAKC,IAAlB;IAAwB,SAAS,EAAER,qBAAMS;EAAzC,EADF,CAFJ,EAMGrB,KAAK,iBACJ,6BAAC,gBAAD;IAAM,QAAQ,MAAd;IAAe,SAAS,EAAE,qBAAOY,qBAAMZ,KAAb,EAAoB,CAACE,MAAD,IAAWU,qBAAMU,IAArC,EAA2C,CAACnB,OAAD,IAAYS,qBAAMW,KAA7D;EAA1B,GACGvB,KADH,CAPJ,EAWGG,OAAO,iBACN,6BAAC,qBAAD;IAAW,OAAO,EAAEA,OAApB;IAA6B,eAAaQ,MAAM,aAAMA,MAAN,qBAA8BO;EAA9E,gBACE,6BAAC,gBAAD;IAAM,KAAK,EAAEb,SAAS,IAAIL,KAAK,KAAKkB,SAAvB,GAAmCC,iBAAKK,KAAxC,GAAgDL,iBAAKM,WAAlE;IAA+E,SAAS,EAAEb,qBAAMS;EAAhG,EADF,CAZJ,CANJ,EAwBGzB,QAxBH,CADF,CADa,EA6Bb8B,QAAQ,CAACC,IA7BI,CAAf;AA+BD,CAhDD;;;AAkDAhC,KAAK,CAACiC,SAAN,GAAkB;EAChBhC,QAAQ,EAAEiC,mBAAUC,IADJ;EAEhBjC,GAAG,EAAEgC,mBAAUE,IAFC;EAGhBhC,MAAM,EAAE8B,mBAAUE,IAHF;EAIhBjC,QAAQ,EAAE+B,mBAAUE,IAJJ;EAKhB/B,KAAK,EAAE6B,mBAAUG,MALD;EAMhB/B,OAAO,EAAE4B,mBAAUE,IANH;EAOhB7B,MAAM,EAAE2B,mBAAUI,IAPF;EAQhB9B,OAAO,EAAE0B,mBAAUI;AARH,CAAlB"}

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

@@ -61,7 +61,8 @@
   opacity: 1;
 }
 
-@media only screen and (max-width: 600px) {
+/* S */
+@media only screen and (max-width: 430px) {
   .container {
     align-items: flex-end;
     align-content: flex-end;
@@ -89,7 +90,8 @@
   }
 }
 
-@media only screen and (min-width: 600px) {
+/* M */
+@media only screen and (min-width: 431px) {
   .container {
     align-items: center;
   }
@@ -99,10 +101,15 @@
   }
 
   .modal {
+    border-radius: var(--mirai-ui-modal-border-radius);
     opacity: 0;
     transform: scale(1.1);
   }
 
+  .modal.calcWidth {
+    width: calc(var(--mirai-ui-breakpoint-content) / 3);
+  }
+
   .modal.visible {
     opacity: 1;
     transform: scale(1);
@@ -112,21 +119,3 @@
     align-self: flex-end;
   }
 }
-
-@media only screen and (min-width: 600px) {
-  .modal {
-    border-radius: var(--mirai-ui-modal-border-radius);
-  }
-}
-
-@media only screen and (min-width: 600px) and (orientation: landscape) {
-  .modal {
-    min-width: 25vw;
-  }
-}
-
-@media only screen and (min-width: 600px) and (orientation: portrait) {
-  .modal {
-    min-width: 40vw;
-  }
-}

package/build/components/Modal/Modal.stories.js

@@ -31,6 +31,7 @@ var Story = function Story(props) {
 exports.Story = Story;
 Story.storyName = 'Modal';
 Story.args = _defineProperty({
+  fit: false,
   overflow: true,
   portal: false,
   title: 'title',

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.js","names":["title","Story","props","storyName","args","overflow","portal","visible","argTypes","onBack","action","onClose"],"sources":["../../../src/components/Modal/Modal.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Modal } from './Modal';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <Modal {...props}>\n    <span className=\"children\">children</span>\n  </Modal>\n);\n\nStory.storyName = 'Modal';\n\nStory.args = {\n  overflow: true,\n  portal: false,\n  title: 'title',\n  visible: true,\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onBack: { action: 'onBack' },\n  onClose: { action: 'onClose' },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBACnB,oBAAC,YAAD,EAAWA,KAAX,eACE;IAAM,SAAS,EAAC;EAAhB,cADF,CADmB;AAAA,CAAd;;;AAMPD,KAAK,CAACE,SAAN,GAAkB,OAAlB;AAEAF,KAAK,CAACG,IAAN;EACEC,QAAQ,EAAE,IADZ;EAEEC,MAAM,EAAE,KAFV;EAGEN,KAAK,EAAE,OAHT;EAIEO,OAAO,EAAE;AAJX,GAKG,aALH,EAKmB,YALnB;AAQAN,KAAK,CAACO,QAAN,GAAiB;EACfC,MAAM,EAAE;IAAEC,MAAM,EAAE;EAAV,CADO;EAEfC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAV;AAFM,CAAjB"}
+{"version":3,"file":"Modal.stories.js","names":["title","Story","props","storyName","args","fit","overflow","portal","visible","argTypes","onBack","action","onClose"],"sources":["../../../src/components/Modal/Modal.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Modal } from './Modal';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <Modal {...props}>\n    <span className=\"children\">children</span>\n  </Modal>\n);\n\nStory.storyName = 'Modal';\n\nStory.args = {\n  fit: false,\n  overflow: true,\n  portal: false,\n  title: 'title',\n  visible: true,\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onBack: { action: 'onBack' },\n  onClose: { action: 'onClose' },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBACnB,oBAAC,YAAD,EAAWA,KAAX,eACE;IAAM,SAAS,EAAC;EAAhB,cADF,CADmB;AAAA,CAAd;;;AAMPD,KAAK,CAACE,SAAN,GAAkB,OAAlB;AAEAF,KAAK,CAACG,IAAN;EACEC,GAAG,EAAE,KADP;EAEEC,QAAQ,EAAE,IAFZ;EAGEC,MAAM,EAAE,KAHV;EAIEP,KAAK,EAAE,OAJT;EAKEQ,OAAO,EAAE;AALX,GAMG,aANH,EAMmB,YANnB;AASAP,KAAK,CAACQ,QAAN,GAAiB;EACfC,MAAM,EAAE;IAAEC,MAAM,EAAE;EAAV,CADO;EAEfC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAV;AAFM,CAAjB"}

package/build/components/Modal/__tests__/__snapshots__/Modal.test.js.snap

@@ -6,7 +6,7 @@ exports[`component:<Modal> Mobile environment prop:onClose 1`] = `
     class="view row container overflow visible"
   >
     <div
-      class="view fit modal visible"
+      class="view fit modal calcWidth visible"
       data-testid="mirai-onClose"
     >
       <div
@@ -51,7 +51,7 @@ exports[`component:<Modal> Mobile environment prop:visible 1`] = `
     class="view row container overflow visible"
   >
     <div
-      class="view fit modal visible"
+      class="view fit modal calcWidth visible"
     />
   </div>
 </DocumentFragment>
@@ -63,7 +63,7 @@ exports[`component:<Modal> inherit:className 1`] = `
     class="view row container overflow"
   >
     <div
-      class="view fit modal mirai"
+      class="view fit modal calcWidth mirai"
     />
   </div>
 </DocumentFragment>
@@ -75,7 +75,7 @@ exports[`component:<Modal> prop:children 1`] = `
     class="view row container overflow"
   >
     <div
-      class="view fit modal"
+      class="view fit modal calcWidth"
     >
       <span>
         children
@@ -85,13 +85,25 @@ exports[`component:<Modal> prop:children 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Modal> prop:fit 1`] = `
+<DocumentFragment>
+  <div
+    class="view row container overflow"
+  >
+    <div
+      class="view fit modal"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<Modal> prop:onBack 1`] = `
 <DocumentFragment>
   <div
     class="view row container overflow visible"
   >
     <div
-      class="view fit modal visible"
+      class="view fit modal calcWidth visible"
       data-testid="mirai-onBack"
     >
       <div
@@ -135,7 +147,7 @@ exports[`component:<Modal> prop:onClose 1`] = `
     class="view row container overflow visible"
   >
     <div
-      class="view fit modal visible"
+      class="view fit modal calcWidth visible"
       data-testid="mirai-onClose"
     >
       <div
@@ -180,7 +192,7 @@ exports[`component:<Modal> prop:portal 1`] = `
     class="view row container overflow"
   >
     <div
-      class="view fit modal"
+      class="view fit modal calcWidth"
     />
   </div>
 </DocumentFragment>
@@ -192,7 +204,7 @@ exports[`component:<Modal> prop:title 1`] = `
     class="view row container overflow"
   >
     <div
-      class="view fit modal"
+      class="view fit modal calcWidth"
     >
       <div
         class="view row header"
@@ -214,7 +226,7 @@ exports[`component:<Modal> prop:visible & prop:overflow (false) 1`] = `
     class="view row container visible"
   >
     <div
-      class="view fit modal visible"
+      class="view fit modal calcWidth visible"
     />
   </div>
 </DocumentFragment>
@@ -226,7 +238,7 @@ exports[`component:<Modal> prop:visible 1`] = `
     class="view row container overflow visible"
   >
     <div
-      class="view fit modal visible"
+      class="view fit modal calcWidth visible"
     />
   </div>
 </DocumentFragment>
@@ -238,7 +250,7 @@ exports[`component:<Modal> renders 1`] = `
     class="view row container overflow"
   >
     <div
-      class="view fit modal"
+      class="view fit modal calcWidth"
     />
   </div>
 </DocumentFragment>
@@ -250,7 +262,7 @@ exports[`component:<Modal> testID 1`] = `
     class="view row container overflow"
   >
     <div
-      class="view fit modal"
+      class="view fit modal calcWidth"
       data-testid="mirai"
     />
   </div>

package/build/hooks/useDevice.js

@@ -45,7 +45,7 @@ var useDevice = function useDevice() {
   }, []);
   return (0, _react.useMemo)(function () {
     var isLandscape = resolution.width >= resolution.height;
-    var isMobile = resolution.width < 512;
+    var isMobile = resolution.width <= 430;
     var navigator = (0, _helpers.getNavigator)();
     return _objectSpread(_objectSpread(_objectSpread({}, resolution), navigator), {}, {
       isLandscape: isLandscape,

package/build/hooks/useDevice.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDevice.js","names":["useDevice","resolution","setResolution","handleResize","window","addEventListener","removeEventListener","isLandscape","width","height","isMobile","navigator","isPortrait","isDesktop"],"sources":["../../src/hooks/useDevice.js"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { getResolution, getNavigator } 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 isLandscape = resolution.width >= resolution.height;\n    const isMobile = resolution.width < 512;\n    const navigator = getNavigator();\n\n    return {\n      ...resolution,\n      ...navigator,\n      isLandscape,\n      isPortrait: !isLandscape,\n      isMobile,\n      isDesktop: !isMobile,\n    };\n  }, [resolution]);\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,SAAS,GAAG,SAAZA,SAAY,GAAM;EAC7B,gBAAoC,qBAAS,6BAAT,CAApC;EAAA;EAAA,IAAOC,UAAP;EAAA,IAAmBC,aAAnB;;EAEA,sBAAU,YAAM;IACd,IAAMC,YAAY,GAAG,SAAfA,YAAe;MAAA,OAAMD,aAAa,CAAC,6BAAD,CAAnB;IAAA,CAArB;;IAEAE,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkCF,YAAlC;IAEA,OAAO;MAAA,OAAMC,MAAM,CAACE,mBAAP,CAA2B,QAA3B,EAAqCH,YAArC,CAAN;IAAA,CAAP;EACD,CAND,EAMG,EANH;EAQA,OAAO,oBAAQ,YAAM;IACnB,IAAMI,WAAW,GAAGN,UAAU,CAACO,KAAX,IAAoBP,UAAU,CAACQ,MAAnD;IACA,IAAMC,QAAQ,GAAGT,UAAU,CAACO,KAAX,GAAmB,GAApC;IACA,IAAMG,SAAS,GAAG,4BAAlB;IAEA,qDACKV,UADL,GAEKU,SAFL;MAGEJ,WAAW,EAAXA,WAHF;MAIEK,UAAU,EAAE,CAACL,WAJf;MAKEG,QAAQ,EAARA,QALF;MAMEG,SAAS,EAAE,CAACH;IANd;EAQD,CAbM,EAaJ,CAACT,UAAD,CAbI,CAAP;AAcD,CAzBM"}
+{"version":3,"file":"useDevice.js","names":["useDevice","resolution","setResolution","handleResize","window","addEventListener","removeEventListener","isLandscape","width","height","isMobile","navigator","isPortrait","isDesktop"],"sources":["../../src/hooks/useDevice.js"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { getResolution, getNavigator } 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 isLandscape = resolution.width >= resolution.height;\n    const isMobile = resolution.width <= 430;\n    const navigator = getNavigator();\n\n    return {\n      ...resolution,\n      ...navigator,\n      isLandscape,\n      isPortrait: !isLandscape,\n      isMobile,\n      isDesktop: !isMobile,\n    };\n  }, [resolution]);\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,SAAS,GAAG,SAAZA,SAAY,GAAM;EAC7B,gBAAoC,qBAAS,6BAAT,CAApC;EAAA;EAAA,IAAOC,UAAP;EAAA,IAAmBC,aAAnB;;EAEA,sBAAU,YAAM;IACd,IAAMC,YAAY,GAAG,SAAfA,YAAe;MAAA,OAAMD,aAAa,CAAC,6BAAD,CAAnB;IAAA,CAArB;;IAEAE,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkCF,YAAlC;IAEA,OAAO;MAAA,OAAMC,MAAM,CAACE,mBAAP,CAA2B,QAA3B,EAAqCH,YAArC,CAAN;IAAA,CAAP;EACD,CAND,EAMG,EANH;EAQA,OAAO,oBAAQ,YAAM;IACnB,IAAMI,WAAW,GAAGN,UAAU,CAACO,KAAX,IAAoBP,UAAU,CAACQ,MAAnD;IACA,IAAMC,QAAQ,GAAGT,UAAU,CAACO,KAAX,IAAoB,GAArC;IACA,IAAMG,SAAS,GAAG,4BAAlB;IAEA,qDACKV,UADL,GAEKU,SAFL;MAGEJ,WAAW,EAAXA,WAHF;MAIEK,UAAU,EAAE,CAACL,WAJf;MAKEG,QAAQ,EAARA,QALF;MAMEG,SAAS,EAAE,CAACH;IANd;EAQD,CAbM,EAaJ,CAACT,UAAD,CAbI,CAAP;AAcD,CAzBM"}

package/build/theme/default.theme.css

@@ -78,7 +78,7 @@
   /* breakpoints */
   --mirai-ui-breakpoint-S: 430px;
   --mirai-ui-breakpoint-M: 768px;
-  /* --mirai-ui-breakpoint-L: 769px; */
+  --mirai-ui-breakpoint-content: 1280px;
 
   /* motion */
   --mirai-ui-motion-collapse: 200ms;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.0.63",
+  "version": "1.0.64",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",