@mirai/ui 1.0.76 → 1.0.78

package/build/components/Action/Action.module.css

@@ -8,7 +8,6 @@
   justify-content: center;
   padding: var(--mirai-ui-button-padding-y) 0;
   position: relative;
-  transition: color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
   width: fit-content;
 }
 

package/build/components/Button/Button.module.css

@@ -10,9 +10,6 @@
   justify-content: center;
   padding: var(--mirai-ui-button-padding-y) var(--mirai-ui-button-padding-x);
   position: relative;
-  transition: background-color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
-    box-shadow var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
-    color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
   width: fit-content;
 }
 

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

@@ -87,26 +87,27 @@
   color: var(--mirai-ui-content-border);
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
   .container {
-    max-height: calc(var(--mirai-ui-calendar-cell) * 15);
-  }
-
-  .month {
-    width: 100%;
-    margin-left: 0;
+    max-height: calc(var(--mirai-ui-calendar-cell) * 9.75);
   }
 
   .day {
     width: auto;
   }
 
+  .month {
+    margin-left: 0;
+    padding-bottom: 0;
+    width: 100%;
+  }
+
   .weekdays {
     border-bottom: solid var(--mirai-ui-border-width) var(--mirai-ui-content-border);
   }
 }
 
-@media only screen and (min-width: 600px) {
+@media only screen and (min-width: 768px) {
   .dayTouchable:hover {
     background-color: var(--mirai-ui-calendar-selected-background);
   }

package/build/components/Notification/Notification.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
 var _NotificationModule = _interopRequireDefault(require("./Notification.module.css"));
-var _excluded = ["children", "error", "inline", "large", "small", "success", "warning", "onClose"];
+var _excluded = ["children", "error", "info", "inline", "large", "small", "success", "warning", "onClose"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -17,6 +17,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Notification = function Notification(_ref) {
   var children = _ref.children,
     error = _ref.error,
+    info = _ref.info,
     _ref$inline = _ref.inline,
     inline = _ref$inline === void 0 ? false : _ref$inline,
     large = _ref.large,
@@ -27,7 +28,7 @@ var Notification = function Notification(_ref) {
     others = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
     row: true,
-    className: (0, _helpers.styles)(_NotificationModule.default.notification, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : undefined, inline ? _NotificationModule.default.inline : _NotificationModule.default.outlined, inline && _NotificationModule.default.inline, large ? _NotificationModule.default.large : small && _NotificationModule.default.small, others.className)
+    className: (0, _helpers.styles)(_NotificationModule.default.notification, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : info ? _NotificationModule.default.info : undefined, inline ? _NotificationModule.default.inline : _NotificationModule.default.outlined, inline && _NotificationModule.default.inline, large ? _NotificationModule.default.large : small && _NotificationModule.default.small, others.className)
   }), /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     headline: large,
     level: large ? 1 : undefined,
@@ -54,6 +55,7 @@ Notification.displayName = 'Component:Notification';
 Notification.propTypes = {
   children: _propTypes.default.any.isRequired,
   error: _propTypes.default.bool,
+  info: _propTypes.default.bool,
   inline: _propTypes.default.bool,
   large: _propTypes.default.bool,
   small: _propTypes.default.bool,

package/build/components/Notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","names":["Notification","children","error","inline","large","small","success","warning","onClose","others","styles","style","notification","undefined","outlined","className","getIconState","icon","text","pressable","ICON","CLOSE","displayName","propTypes","PropTypes","any","isRequired","bool","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getIconState, styles } from '../../helpers';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({ children, error, inline = false, large, small, success, warning, onClose, ...others }) => (\n  <View\n    {...others}\n    row\n    className={styles(\n      style.notification,\n      error ? style.error : warning ? style.warning : success ? style.success : undefined,\n      inline ? style.inline : style.outlined,\n      inline && style.inline,\n      large ? style.large : small && style.small,\n      others.className,\n    )}\n  >\n    <Icon\n      headline={large}\n      level={large ? 1 : undefined}\n      paragraph={small}\n      value={getIconState({ error, success, warning })}\n      className={style.icon}\n    />\n    <Text\n      small={small}\n      className={styles(\n        style.text,\n        error ? style.error : warning ? style.warning : success ? style.success : undefined,\n      )}\n    >\n      {children}\n    </Text>\n    {!large && onClose && (\n      <Pressable className={styles(style.pressable, style.icon)} onPress={onClose}>\n        <Icon value={ICON.CLOSE} paragraph={small} />\n      </Pressable>\n    )}\n  </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n  children: PropTypes.any.isRequired,\n  error: PropTypes.bool,\n  inline: PropTypes.bool,\n  large: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  warning: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA8C;AAAA;AAAA;AAAA;AAAA;AAE9C,IAAMA,YAAY,GAAG,SAAfA,YAAY;EAAA,IAAMC,QAAQ,QAARA,QAAQ;IAAEC,KAAK,QAALA,KAAK;IAAA,mBAAEC,MAAM;IAANA,MAAM,4BAAG,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAEC,OAAO,QAAPA,OAAO;IAAEC,OAAO,QAAPA,OAAO;IAAEC,OAAO,QAAPA,OAAO;IAAKC,MAAM;EAAA,oBACzG,6BAAC,gBAAI,eACCA,MAAM;IACV,GAAG;IACH,SAAS,EAAE,IAAAC,eAAM,EACfC,2BAAK,CAACC,YAAY,EAClBV,KAAK,GAAGS,2BAAK,CAACT,KAAK,GAAGK,OAAO,GAAGI,2BAAK,CAACJ,OAAO,GAAGD,OAAO,GAAGK,2BAAK,CAACL,OAAO,GAAGO,SAAS,EACnFV,MAAM,GAAGQ,2BAAK,CAACR,MAAM,GAAGQ,2BAAK,CAACG,QAAQ,EACtCX,MAAM,IAAIQ,2BAAK,CAACR,MAAM,EACtBC,KAAK,GAAGO,2BAAK,CAACP,KAAK,GAAGC,KAAK,IAAIM,2BAAK,CAACN,KAAK,EAC1CI,MAAM,CAACM,SAAS;EAChB,iBAEF,6BAAC,gBAAI;IACH,QAAQ,EAAEX,KAAM;IAChB,KAAK,EAAEA,KAAK,GAAG,CAAC,GAAGS,SAAU;IAC7B,SAAS,EAAER,KAAM;IACjB,KAAK,EAAE,IAAAW,qBAAY,EAAC;MAAEd,KAAK,EAALA,KAAK;MAAEI,OAAO,EAAPA,OAAO;MAAEC,OAAO,EAAPA;IAAQ,CAAC,CAAE;IACjD,SAAS,EAAEI,2BAAK,CAACM;EAAK,EACtB,eACF,6BAAC,gBAAI;IACH,KAAK,EAAEZ,KAAM;IACb,SAAS,EAAE,IAAAK,eAAM,EACfC,2BAAK,CAACO,IAAI,EACVhB,KAAK,GAAGS,2BAAK,CAACT,KAAK,GAAGK,OAAO,GAAGI,2BAAK,CAACJ,OAAO,GAAGD,OAAO,GAAGK,2BAAK,CAACL,OAAO,GAAGO,SAAS;EACnF,GAEDZ,QAAQ,CACJ,EACN,CAACG,KAAK,IAAII,OAAO,iBAChB,6BAAC,qBAAS;IAAC,SAAS,EAAE,IAAAE,eAAM,EAACC,2BAAK,CAACQ,SAAS,EAAER,2BAAK,CAACM,IAAI,CAAE;IAAC,OAAO,EAAET;EAAQ,gBAC1E,6BAAC,gBAAI;IAAC,KAAK,EAAEY,gBAAI,CAACC,KAAM;IAAC,SAAS,EAAEhB;EAAM,EAAG,CAEhD,CACI;AAAA,CACR;AAAC;AAEFL,YAAY,CAACsB,WAAW,GAAG,wBAAwB;AAEnDtB,YAAY,CAACuB,SAAS,GAAG;EACvBtB,QAAQ,EAAEuB,kBAAS,CAACC,GAAG,CAACC,UAAU;EAClCxB,KAAK,EAAEsB,kBAAS,CAACG,IAAI;EACrBxB,MAAM,EAAEqB,kBAAS,CAACG,IAAI;EACtBvB,KAAK,EAAEoB,kBAAS,CAACG,IAAI;EACrBtB,KAAK,EAAEmB,kBAAS,CAACG,IAAI;EACrBrB,OAAO,EAAEkB,kBAAS,CAACG,IAAI;EACvBpB,OAAO,EAAEiB,kBAAS,CAACG,IAAI;EACvBnB,OAAO,EAAEgB,kBAAS,CAACI;AACrB,CAAC"}
+{"version":3,"file":"Notification.js","names":["Notification","children","error","info","inline","large","small","success","warning","onClose","others","styles","style","notification","undefined","outlined","className","getIconState","icon","text","pressable","ICON","CLOSE","displayName","propTypes","PropTypes","any","isRequired","bool","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getIconState, styles } from '../../helpers';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({\n  children,\n  error,\n  info,\n  inline = false,\n  large,\n  small,\n  success,\n  warning,\n  onClose,\n  ...others\n}) => (\n  <View\n    {...others}\n    row\n    className={styles(\n      style.notification,\n      error ? style.error : warning ? style.warning : success ? style.success : info ? style.info : undefined,\n      inline ? style.inline : style.outlined,\n      inline && style.inline,\n      large ? style.large : small && style.small,\n      others.className,\n    )}\n  >\n    <Icon\n      headline={large}\n      level={large ? 1 : undefined}\n      paragraph={small}\n      value={getIconState({ error, success, warning })}\n      className={style.icon}\n    />\n    <Text\n      small={small}\n      className={styles(\n        style.text,\n        error ? style.error : warning ? style.warning : success ? style.success : undefined,\n      )}\n    >\n      {children}\n    </Text>\n    {!large && onClose && (\n      <Pressable className={styles(style.pressable, style.icon)} onPress={onClose}>\n        <Icon value={ICON.CLOSE} paragraph={small} />\n      </Pressable>\n    )}\n  </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n  children: PropTypes.any.isRequired,\n  error: PropTypes.bool,\n  info: PropTypes.bool,\n  inline: PropTypes.bool,\n  large: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  warning: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA8C;AAAA;AAAA;AAAA;AAAA;AAE9C,IAAMA,YAAY,GAAG,SAAfA,YAAY;EAAA,IAChBC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IAAA,mBACJC,MAAM;IAANA,MAAM,4BAAG,KAAK;IACdC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACJC,MAAM;EAAA,oBAET,6BAAC,gBAAI,eACCA,MAAM;IACV,GAAG;IACH,SAAS,EAAE,IAAAC,eAAM,EACfC,2BAAK,CAACC,YAAY,EAClBX,KAAK,GAAGU,2BAAK,CAACV,KAAK,GAAGM,OAAO,GAAGI,2BAAK,CAACJ,OAAO,GAAGD,OAAO,GAAGK,2BAAK,CAACL,OAAO,GAAGJ,IAAI,GAAGS,2BAAK,CAACT,IAAI,GAAGW,SAAS,EACvGV,MAAM,GAAGQ,2BAAK,CAACR,MAAM,GAAGQ,2BAAK,CAACG,QAAQ,EACtCX,MAAM,IAAIQ,2BAAK,CAACR,MAAM,EACtBC,KAAK,GAAGO,2BAAK,CAACP,KAAK,GAAGC,KAAK,IAAIM,2BAAK,CAACN,KAAK,EAC1CI,MAAM,CAACM,SAAS;EAChB,iBAEF,6BAAC,gBAAI;IACH,QAAQ,EAAEX,KAAM;IAChB,KAAK,EAAEA,KAAK,GAAG,CAAC,GAAGS,SAAU;IAC7B,SAAS,EAAER,KAAM;IACjB,KAAK,EAAE,IAAAW,qBAAY,EAAC;MAAEf,KAAK,EAALA,KAAK;MAAEK,OAAO,EAAPA,OAAO;MAAEC,OAAO,EAAPA;IAAQ,CAAC,CAAE;IACjD,SAAS,EAAEI,2BAAK,CAACM;EAAK,EACtB,eACF,6BAAC,gBAAI;IACH,KAAK,EAAEZ,KAAM;IACb,SAAS,EAAE,IAAAK,eAAM,EACfC,2BAAK,CAACO,IAAI,EACVjB,KAAK,GAAGU,2BAAK,CAACV,KAAK,GAAGM,OAAO,GAAGI,2BAAK,CAACJ,OAAO,GAAGD,OAAO,GAAGK,2BAAK,CAACL,OAAO,GAAGO,SAAS;EACnF,GAEDb,QAAQ,CACJ,EACN,CAACI,KAAK,IAAII,OAAO,iBAChB,6BAAC,qBAAS;IAAC,SAAS,EAAE,IAAAE,eAAM,EAACC,2BAAK,CAACQ,SAAS,EAAER,2BAAK,CAACM,IAAI,CAAE;IAAC,OAAO,EAAET;EAAQ,gBAC1E,6BAAC,gBAAI;IAAC,KAAK,EAAEY,gBAAI,CAACC,KAAM;IAAC,SAAS,EAAEhB;EAAM,EAAG,CAEhD,CACI;AAAA,CACR;AAAC;AAEFN,YAAY,CAACuB,WAAW,GAAG,wBAAwB;AAEnDvB,YAAY,CAACwB,SAAS,GAAG;EACvBvB,QAAQ,EAAEwB,kBAAS,CAACC,GAAG,CAACC,UAAU;EAClCzB,KAAK,EAAEuB,kBAAS,CAACG,IAAI;EACrBzB,IAAI,EAAEsB,kBAAS,CAACG,IAAI;EACpBxB,MAAM,EAAEqB,kBAAS,CAACG,IAAI;EACtBvB,KAAK,EAAEoB,kBAAS,CAACG,IAAI;EACrBtB,KAAK,EAAEmB,kBAAS,CAACG,IAAI;EACrBrB,OAAO,EAAEkB,kBAAS,CAACG,IAAI;EACvBpB,OAAO,EAAEiB,kBAAS,CAACG,IAAI;EACvBnB,OAAO,EAAEgB,kBAAS,CAACI;AACrB,CAAC"}

package/build/components/Notification/Notification.module.css

@@ -4,8 +4,8 @@
 }
 
 .notification.outlined {
-  background-color: var(--mirai-ui-info-background);
-  border: solid var(--mirai-ui-border-width) var(--mirai-ui-info-border);
+  background-color: var(--mirai-ui-content-background);
+  border: solid var(--mirai-ui-border-width) var(--mirai-ui-content-border);
   border-radius: var(--mirai-ui-notification-border-radius);
   padding: var(--mirai-ui-notification-padding);
 }
@@ -24,7 +24,7 @@
 }
 
 .notification * {
-  color: var(--mirai-ui-info);
+  color: var(--mirai-ui-content);
 }
 
 .notification.success:not(.inline) {
@@ -54,6 +54,15 @@
   color: var(--mirai-ui-warning);
 }
 
+.notification.info:not(.inline) {
+  background-color: var(--mirai-ui-info-background);
+  border-color: var(--mirai-ui-info-border);
+}
+
+.notification.info * {
+  color: var(--mirai-ui-info);
+}
+
 .notification:not(.large):not(.small) .text {
   margin-left: var(--mirai-ui-notification-padding);
   margin-right: var(--mirai-ui-notification-padding);

package/build/components/Notification/Notification.stories.js

@@ -24,6 +24,7 @@ Story.storyName = 'Notification';
 Story.args = _defineProperty({
   children: 'children',
   error: false,
+  info: false,
   inline: false,
   large: false,
   small: false,

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.stories.js","names":["title","Story","props","storyName","args","children","error","inline","large","small","success","warning","argTypes","onClose","action"],"sources":["../../../src/components/Notification/Notification.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Notification } from './Notification';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Notification {...props} />;\n\nStory.storyName = 'Notification';\n\nStory.args = {\n  children: 'children',\n  error: false,\n  inline: false,\n  large: false,\n  small: false,\n  success: false,\n  warning: false,\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onClose: { action: 'onClose' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAE/B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,oBAAC,0BAAY,EAAKA,KAAK,CAAI;AAAA;AAAC;AAE5DD,KAAK,CAACE,SAAS,GAAG,cAAc;AAEhCF,KAAK,CAACG,IAAI;EACRC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE,KAAK;EACZC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,OAAO,EAAE;AAAK,GACb,aAAa,EAAG,YAAY,CAC9B;AAEDV,KAAK,CAACW,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU;AAC/B,CAAC"}
+{"version":3,"file":"Notification.stories.js","names":["title","Story","props","storyName","args","children","error","info","inline","large","small","success","warning","argTypes","onClose","action"],"sources":["../../../src/components/Notification/Notification.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Notification } from './Notification';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Notification {...props} />;\n\nStory.storyName = 'Notification';\n\nStory.args = {\n  children: 'children',\n  error: false,\n  info: false,\n  inline: false,\n  large: false,\n  small: false,\n  success: false,\n  warning: false,\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onClose: { action: 'onClose' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAE/B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,oBAAC,0BAAY,EAAKA,KAAK,CAAI;AAAA;AAAC;AAE5DD,KAAK,CAACE,SAAS,GAAG,cAAc;AAEhCF,KAAK,CAACG,IAAI;EACRC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE,KAAK;EACXC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,OAAO,EAAE;AAAK,GACb,aAAa,EAAG,YAAY,CAC9B;AAEDX,KAAK,CAACY,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU;AAC/B,CAAC"}

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

@@ -70,6 +70,146 @@ exports[`component:<Notification> prop:error 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Notification> prop:info & inline 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification info inline inline"
+  >
+    <span
+      class="icon headline-3 icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0V0z"
+          fill="none"
+        />
+        <path
+          d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+        />
+      </svg>
+    </span>
+    <span
+      class="text paragraph text"
+    >
+      Lorem Ipsum...
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> prop:info & large 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification info outlined large"
+  >
+    <span
+      class="icon headline-1 icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0V0z"
+          fill="none"
+        />
+        <path
+          d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+        />
+      </svg>
+    </span>
+    <span
+      class="text paragraph text"
+    >
+      Lorem Ipsum...
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> prop:info & small 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification info outlined small"
+  >
+    <span
+      class="icon paragraph icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0V0z"
+          fill="none"
+        />
+        <path
+          d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+        />
+      </svg>
+    </span>
+    <span
+      class="text small text"
+    >
+      Lorem Ipsum...
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> prop:info 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification info outlined"
+  >
+    <span
+      class="icon headline-3 icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0V0z"
+          fill="none"
+        />
+        <path
+          d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+        />
+      </svg>
+    </span>
+    <span
+      class="text paragraph text"
+    >
+      Lorem Ipsum...
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<Notification> prop:inline 1`] = `
 <DocumentFragment>
   <div
@@ -305,6 +445,111 @@ exports[`component:<Notification> prop:small 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Notification> prop:success & inline 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification success inline inline"
+  >
+    <span
+      class="icon headline-3 icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0V0z"
+          fill="none"
+        />
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"
+        />
+      </svg>
+    </span>
+    <span
+      class="text paragraph text success"
+    >
+      Lorem Ipsum...
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> prop:success & large 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification success outlined large"
+  >
+    <span
+      class="icon headline-1 icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0V0z"
+          fill="none"
+        />
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"
+        />
+      </svg>
+    </span>
+    <span
+      class="text paragraph text success"
+    >
+      Lorem Ipsum...
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> prop:success & small 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification success outlined small"
+  >
+    <span
+      class="icon paragraph icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0V0z"
+          fill="none"
+        />
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"
+        />
+      </svg>
+    </span>
+    <span
+      class="text small text success"
+    >
+      Lorem Ipsum...
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<Notification> prop:success 1`] = `
 <DocumentFragment>
   <div
@@ -340,6 +585,99 @@ exports[`component:<Notification> prop:success 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Notification> prop:warning & inline 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification warning inline inline"
+  >
+    <span
+      class="icon headline-3 icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
+        />
+      </svg>
+    </span>
+    <span
+      class="text paragraph text warning"
+    >
+      Lorem Ipsum...
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> prop:warning & large 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification warning outlined large"
+  >
+    <span
+      class="icon headline-1 icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
+        />
+      </svg>
+    </span>
+    <span
+      class="text paragraph text warning"
+    >
+      Lorem Ipsum...
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> prop:warning & small 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification warning outlined small"
+  >
+    <span
+      class="icon paragraph icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
+        />
+      </svg>
+    </span>
+    <span
+      class="text small text warning"
+    >
+      Lorem Ipsum...
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<Notification> prop:warning 1`] = `
 <DocumentFragment>
   <div

package/package.json

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