@mirai/ui 1.0.63 → 1.0.65

package/build/components/Menu/__tests__/__snapshots__/Menu.test.jsx.snap

@@ -6,21 +6,7 @@ exports[`component:<Menu> inherit:className 1`] = `
 </DocumentFragment>
 `;
 
-exports[`component:<Menu> renders 1`] = `
-<DocumentFragment>
-  <span />
-</DocumentFragment>
-`;
-
-exports[`component:<Menu> testID 1`] = `
-<DocumentFragment>
-  <span
-    data-testid="mirai"
-  />
-</DocumentFragment>
-`;
-
-exports[`component:<Menu> w/ Template 1`] = `
+exports[`component:<Menu> prop:Template 1`] = `
 <DocumentFragment>
   <span>
     <button
@@ -32,7 +18,7 @@ exports[`component:<Menu> w/ Template 1`] = `
 </DocumentFragment>
 `;
 
-exports[`component:<Menu> w/ children 1`] = `
+exports[`component:<Menu> prop:children 1`] = `
 <DocumentFragment>
   <span>
     <button
@@ -44,7 +30,7 @@ exports[`component:<Menu> w/ children 1`] = `
 </DocumentFragment>
 `;
 
-exports[`component:<Menu> w/ options & visible 1`] = `
+exports[`component:<Menu> prop:options & visible 1`] = `
 <DocumentFragment>
   <span>
     <button
@@ -54,7 +40,7 @@ exports[`component:<Menu> w/ options & visible 1`] = `
     </button>
   </span>
   <div
-    class="layer menu visible"
+    class="layer menu desktop visible"
     style="left: 0px; top: 0px;"
   >
     <div
@@ -163,7 +149,19 @@ exports[`component:<Menu> w/ options & visible 1`] = `
 </DocumentFragment>
 `;
 
-exports[`component:<Menu> w/ options 1`] = `
+exports[`component:<Menu> prop:options 1`] = `
+<DocumentFragment>
+  <span>
+    <button
+      class="pressable button"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component:<Menu> prop:title 1`] = `
 <DocumentFragment>
   <span>
     <button
@@ -172,5 +170,23 @@ exports[`component:<Menu> w/ options 1`] = `
       Action
     </button>
   </span>
+  <div
+    class="layer menu desktop visible"
+    style="left: 0px; top: 0px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`component:<Menu> renders 1`] = `
+<DocumentFragment>
+  <span />
+</DocumentFragment>
+`;
+
+exports[`component:<Menu> testID 1`] = `
+<DocumentFragment>
+  <span
+    data-testid="mirai"
+  />
 </DocumentFragment>
 `;

package/build/components/Modal/Modal.js

@@ -19,7 +19,7 @@ var _primitives = require("../../primitives");
 
 var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
 
-var _excluded = ["children", "overflow", "portal", "title", "visible", "onBack", "onClose"];
+var _excluded = ["children", "fit", "overflow", "portal", "title", "visible", "onBack", "onClose"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -31,6 +31,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Modal = function Modal(_ref) {
   var children = _ref.children,
+      _ref$fit = _ref.fit,
+      fit = _ref$fit === void 0 ? false : _ref$fit,
       _ref$overflow = _ref.overflow,
       overflow = _ref$overflow === void 0 ? true : _ref$overflow,
       _ref$portal = _ref.portal,
@@ -53,7 +55,7 @@ var Modal = function Modal(_ref) {
     className: (0, _helpers.styles)(_ModalModule.default.container, overflow && _ModalModule.default.overflow, visible && _ModalModule.default.visible)
   }, /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
     fit: true,
-    className: (0, _helpers.styles)(_ModalModule.default.modal, visible && _ModalModule.default.visible, others.className)
+    className: (0, _helpers.styles)(_ModalModule.default.modal, !fit && _ModalModule.default.calcWidth, visible && _ModalModule.default.visible, others.className)
   }), (title || onBack || onClose) && /*#__PURE__*/_react.default.createElement(_primitives.View, {
     row: true,
     className: _ModalModule.default.header
@@ -78,6 +80,7 @@ var Modal = function Modal(_ref) {
 exports.Modal = Modal;
 Modal.propTypes = {
   children: _propTypes.default.node,
+  fit: _propTypes.default.bool,
   portal: _propTypes.default.bool,
   overflow: _propTypes.default.bool,
   title: _propTypes.default.string,

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/components/Notification/Notification.module.css

@@ -57,22 +57,9 @@
 }
 
 .outlined .text {
-  color: var(--mirai-ui-info-dark);
   flex: 1;
 }
 
-.outlined .text.error {
-  color: var(--mirai-ui-error-dark);
-}
-
-.outlined .text.success {
-  color: var(--mirai-ui-success-dark);
-}
-
-.outlined .text.warning {
-  color: var(--mirai-ui-warning-dark);
-}
-
 .notification .icon {
   margin-top: calc(calc(var(--mirai-ui-line-height-headline-3) - var(--mirai-ui-font-size-headline-3)) / 2);
 }

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

@@ -53,7 +53,11 @@ exports[`component:<Notification> prop:error 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+          d="M0 0h24v24H0V0z"
+          fill="none"
+        />
+        <path
+          d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
         />
       </svg>
     </span>
@@ -284,7 +288,7 @@ exports[`component:<Notification> prop:warning 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
+          d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
         />
       </svg>
     </span>

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/primitives/Icon/Icon.constants.js

@@ -27,10 +27,10 @@ var ICON = {
   // <Modal>
   CLOSE: _md.MdOutlineClose,
   // <Notification> & <InputText>
-  ERROR: _md.MdOutlineError,
+  ERROR: _md.MdErrorOutline,
   INFO: _md.MdOutlineInfo,
   SUCCESS: _md.MdOutlineCheckCircle,
-  WARNING: _md.MdOutlineWarning
+  WARNING: _md.MdOutlineWarningAmber
 };
 exports.ICON = ICON;
 //# sourceMappingURL=Icon.constants.js.map

package/build/primitives/Icon/Icon.constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.constants.js","names":["ICON","LEFT","RIGHT","UP","DOWN","CHECK","ADD","REMOVE","EXPAND_LESS","EXPAND_MORE","EYE_OPEN","EYE_CLOSE","CLOSE","ERROR","INFO","SUCCESS","WARNING"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import {\n  // <Calendar>\n  MdOutlineArrowBack as LEFT,\n  MdOutlineArrowForward as RIGHT,\n  MdOutlineArrowUpward as UP,\n  MdOutlineArrowDownward as DOWN,\n  // <InputOption>\n  MdOutlineCheck as CHECK,\n  // <InputNumber>\n  MdOutlineAdd as ADD,\n  MdOutlineRemove as REMOVE,\n  // <InputSelect>\n  MdOutlineExpandLess as EXPAND_LESS,\n  MdOutlineExpandMore as EXPAND_MORE,\n  // <InputText>\n  MdOutlineVisibility as EYE_OPEN,\n  MdOutlineVisibilityOff as EYE_CLOSE,\n  // <Modal>\n  MdOutlineClose as CLOSE,\n  // <Notification> & <InputText>\n  MdOutlineError as ERROR,\n  MdOutlineInfo as INFO,\n  MdOutlineCheckCircle as SUCCESS,\n  MdOutlineWarning as WARNING,\n} from 'react-icons/md';\n\nexport const ICON = {\n  // <Calendar>\n  LEFT,\n  RIGHT,\n  UP,\n  DOWN,\n  // <Check>\n  CHECK,\n  // <InputOption>\n  ADD,\n  REMOVE,\n  // <InputSelect>\n  EXPAND_LESS,\n  EXPAND_MORE,\n  // <InputText>\n  EYE_OPEN,\n  EYE_CLOSE,\n  // <Modal>\n  CLOSE,\n  // <Notification> & <InputText>\n  ERROR,\n  INFO,\n  SUCCESS,\n  WARNING,\n};\n"],"mappings":";;;;;;;AAAA;;AA0BO,IAAMA,IAAI,GAAG;EAClB;EACAC,IAAI,EAAJA,sBAFkB;EAGlBC,KAAK,EAALA,yBAHkB;EAIlBC,EAAE,EAAFA,wBAJkB;EAKlBC,IAAI,EAAJA,0BALkB;EAMlB;EACAC,KAAK,EAALA,kBAPkB;EAQlB;EACAC,GAAG,EAAHA,gBATkB;EAUlBC,MAAM,EAANA,mBAVkB;EAWlB;EACAC,WAAW,EAAXA,uBAZkB;EAalBC,WAAW,EAAXA,uBAbkB;EAclB;EACAC,QAAQ,EAARA,uBAfkB;EAgBlBC,SAAS,EAATA,0BAhBkB;EAiBlB;EACAC,KAAK,EAALA,kBAlBkB;EAmBlB;EACAC,KAAK,EAALA,kBApBkB;EAqBlBC,IAAI,EAAJA,iBArBkB;EAsBlBC,OAAO,EAAPA,wBAtBkB;EAuBlBC,OAAO,EAAPA;AAvBkB,CAAb"}
+{"version":3,"file":"Icon.constants.js","names":["ICON","LEFT","RIGHT","UP","DOWN","CHECK","ADD","REMOVE","EXPAND_LESS","EXPAND_MORE","EYE_OPEN","EYE_CLOSE","CLOSE","ERROR","INFO","SUCCESS","WARNING"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import {\n  // <Calendar>\n  MdOutlineArrowBack as LEFT,\n  MdOutlineArrowForward as RIGHT,\n  MdOutlineArrowUpward as UP,\n  MdOutlineArrowDownward as DOWN,\n  // <InputOption>\n  MdOutlineCheck as CHECK,\n  // <InputNumber>\n  MdOutlineAdd as ADD,\n  MdOutlineRemove as REMOVE,\n  // <InputSelect>\n  MdOutlineExpandLess as EXPAND_LESS,\n  MdOutlineExpandMore as EXPAND_MORE,\n  // <InputText>\n  MdOutlineVisibility as EYE_OPEN,\n  MdOutlineVisibilityOff as EYE_CLOSE,\n  // <Modal>\n  MdOutlineClose as CLOSE,\n  // <Notification> & <InputText>\n  MdErrorOutline as ERROR,\n  MdOutlineInfo as INFO,\n  MdOutlineCheckCircle as SUCCESS,\n  MdOutlineWarningAmber as WARNING,\n} from 'react-icons/md';\n\nexport const ICON = {\n  // <Calendar>\n  LEFT,\n  RIGHT,\n  UP,\n  DOWN,\n  // <Check>\n  CHECK,\n  // <InputOption>\n  ADD,\n  REMOVE,\n  // <InputSelect>\n  EXPAND_LESS,\n  EXPAND_MORE,\n  // <InputText>\n  EYE_OPEN,\n  EYE_CLOSE,\n  // <Modal>\n  CLOSE,\n  // <Notification> & <InputText>\n  ERROR,\n  INFO,\n  SUCCESS,\n  WARNING,\n};\n"],"mappings":";;;;;;;AAAA;;AA0BO,IAAMA,IAAI,GAAG;EAClB;EACAC,IAAI,EAAJA,sBAFkB;EAGlBC,KAAK,EAALA,yBAHkB;EAIlBC,EAAE,EAAFA,wBAJkB;EAKlBC,IAAI,EAAJA,0BALkB;EAMlB;EACAC,KAAK,EAALA,kBAPkB;EAQlB;EACAC,GAAG,EAAHA,gBATkB;EAUlBC,MAAM,EAANA,mBAVkB;EAWlB;EACAC,WAAW,EAAXA,uBAZkB;EAalBC,WAAW,EAAXA,uBAbkB;EAclB;EACAC,QAAQ,EAARA,uBAfkB;EAgBlBC,SAAS,EAATA,0BAhBkB;EAiBlB;EACAC,KAAK,EAALA,kBAlBkB;EAmBlB;EACAC,KAAK,EAALA,kBApBkB;EAqBlBC,IAAI,EAAJA,iBArBkB;EAsBlBC,OAAO,EAAPA,wBAtBkB;EAuBlBC,OAAO,EAAPA;AAvBkB,CAAb"}

package/build/primitives/Icon/__tests__/__snapshots__/Icon.test.js.snap

@@ -133,7 +133,11 @@ exports[`primitive:<Icon> prop:value prop:value (ERROR) 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+        d="M0 0h24v24H0V0z"
+        fill="none"
+      />
+      <path
+        d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
       />
     </svg>
   </span>
@@ -427,7 +431,7 @@ exports[`primitive:<Icon> prop:value prop:value (WARNING) 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
+        d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
       />
     </svg>
   </span>

package/build/theme/default.theme.css

@@ -34,38 +34,38 @@
   --mirai-ui-content: #484848;
   --mirai-ui-content-background: #f6f6f6;
   --mirai-ui-content-border: #e4e4e4;
-  --mirai-ui-content-dark: #202020;
   --mirai-ui-content-light: #999999;
+  --mirai-ui-content-dark: #202020;
 
   --mirai-ui-accent: #3978c5;
   --mirai-ui-accent-background: #e9f1fc;
   --mirai-ui-accent-border: #b0c9e8;
-  --mirai-ui-accent-dark: #224876;
   --mirai-ui-accent-light: #88aedc;
+  --mirai-ui-accent-dark: #224876;
 
+  --mirai-ui-error: #cc003a;
   --mirai-ui-error-background: #ffece5;
-  --mirai-ui-error-border: #ffb9aa;
-  --mirai-ui-error-light: #ff8a7f;
-  --mirai-ui-error: #ff2b40;
-  --mirai-ui-error-dark: #b71543;
+  --mirai-ui-error-border: #ff8a7f;
+  --mirai-ui-error-light: #ff5c4c;
+  --mirai-ui-error-dark: #99002b;
 
-  --mirai-ui-warning-background: #fff8e5;
-  --mirai-ui-warning-border: #fff2cc;
-  --mirai-ui-warning-light: #ffce66;
-  --mirai-ui-warning: #ff9900;
-  --mirai-ui-warning-dark: #ad5a00;
+  --mirai-ui-warning: #ad5a00;
+  --mirai-ui-warning-background: #fff3cc;
+  --mirai-ui-warning-border: #ffce66;
+  --mirai-ui-warning-light: #ffad00;
+  --mirai-ui-warning-dark: #804200;
 
+  --mirai-ui-success: #067949;
   --mirai-ui-success-background: #e7fde7;
-  --mirai-ui-success-border: #a6faad;
-  --mirai-ui-success-light: #77f18e;
-  --mirai-ui-success: #21d366;
-  --mirai-ui-success-dark: #0e8151;
+  --mirai-ui-success-border: #77f18e;
+  --mirai-ui-success-light: #14be34;
+  --mirai-ui-success-dark: #04492c;
 
   --mirai-ui-info-background: #e6f8ff;
-  --mirai-ui-info-border: #9cdefe;
-  --mirai-ui-info-light: #6bc6fe;
-  --mirai-ui-info: #0a87fc;
-  --mirai-ui-info-dark: #054db5;
+  --mirai-ui-info-border: #6bc6fe;
+  --mirai-ui-info-light: #079ffd;
+  --mirai-ui-info: #005cb2;
+  --mirai-ui-info-dark: #003566;
 
   /* spacing */
   --mirai-ui-space-XS: 8px;
@@ -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.65",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",