@mirai/ui 1.0.68 → 1.0.69

package/build/components/Action/Action.stories.js

@@ -26,7 +26,7 @@ Story.args = _defineProperty({
   disabled: false,
   large: false,
   small: false,
-  tag: 'Button',
+  tag: 'button',
   wide: false
 }, 'data-testid', 'test-story');
 Story.argTypes = {

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

@@ -1 +1 @@
-{"version":3,"file":"Action.stories.js","names":["title","Story","props","storyName","args","children","disabled","large","small","tag","wide","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Action/Action.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Action } from './Action';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Action {...props} />;\n\nStory.storyName = 'Action';\n\nStory.args = {\n  children: 'children',\n  disabled: false,\n  large: false,\n  small: false,\n  tag: 'Button',\n  wide: false,\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,oBAAC,cAAM,EAAKA,KAAK,CAAI;AAAA;AAAC;AAEtDD,KAAK,CAACE,SAAS,GAAG,QAAQ;AAE1BF,KAAK,CAACG,IAAI;EACRC,QAAQ,EAAE,UAAU;EACpBC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,QAAQ;EACbC,IAAI,EAAE;AAAK,GACV,aAAa,EAAG,YAAY,CAC9B;AAEDT,KAAK,CAACU,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}
+{"version":3,"file":"Action.stories.js","names":["title","Story","props","storyName","args","children","disabled","large","small","tag","wide","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Action/Action.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Action } from './Action';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Action {...props} />;\n\nStory.storyName = 'Action';\n\nStory.args = {\n  children: 'children',\n  disabled: false,\n  large: false,\n  small: false,\n  tag: 'button',\n  wide: false,\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,oBAAC,cAAM,EAAKA,KAAK,CAAI;AAAA;AAAC;AAEtDD,KAAK,CAACE,SAAS,GAAG,QAAQ;AAE1BF,KAAK,CAACG,IAAI;EACRC,QAAQ,EAAE,UAAU;EACpBC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,QAAQ;EACbC,IAAI,EAAE;AAAK,GACV,aAAa,EAAG,YAAY,CAC9B;AAEDT,KAAK,CAACU,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}

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", "small", "success", "warning", "onClose"];
+var _excluded = ["children", "error", "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; }
@@ -19,6 +19,7 @@ var Notification = function Notification(_ref) {
     error = _ref.error,
     _ref$inline = _ref.inline,
     inline = _ref$inline === void 0 ? false : _ref$inline,
+    large = _ref.large,
     small = _ref.small,
     success = _ref.success,
     warning = _ref.warning,
@@ -26,20 +27,22 @@ 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, 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 : 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,
+    paragraph: small,
     value: (0, _helpers.getIconState)({
       error: error,
       success: success,
       warning: warning
     }),
-    paragraph: small,
-    className: (0, _helpers.styles)(_NotificationModule.default.icon, small && _NotificationModule.default.small)
+    className: _NotificationModule.default.icon
   }), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     small: small,
     className: (0, _helpers.styles)(_NotificationModule.default.text, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : undefined)
-  }, children), onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    className: (0, _helpers.styles)(_NotificationModule.default.pressable, _NotificationModule.default.icon, small && _NotificationModule.default.small),
+  }, children), !large && onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    className: (0, _helpers.styles)(_NotificationModule.default.pressable, _NotificationModule.default.icon),
     onPress: onClose
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: _primitives.ICON.CLOSE,
@@ -52,6 +55,7 @@ Notification.propTypes = {
   children: _propTypes.default.string.isRequired,
   error: _propTypes.default.bool,
   inline: _propTypes.default.bool,
+  large: _propTypes.default.bool,
   small: _propTypes.default.bool,
   success: _propTypes.default.bool,
   warning: _propTypes.default.bool,

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","names":["Notification","children","error","inline","small","success","warning","onClose","others","styles","style","notification","undefined","outlined","className","getIconState","icon","text","pressable","ICON","CLOSE","displayName","propTypes","PropTypes","string","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, 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      small && style.small,\n      others.className,\n    )}\n  >\n    <Icon\n      value={getIconState({ error, success, warning })}\n      paragraph={small}\n      className={styles(style.icon, small && style.small)}\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    {onClose && (\n      <Pressable className={styles(style.pressable, style.icon, small && style.small)} 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.string.isRequired,\n  error: PropTypes.bool,\n  inline: 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,OAAO,QAAPA,OAAO;IAAEC,OAAO,QAAPA,OAAO;IAAEC,OAAO,QAAPA,OAAO;IAAKC,MAAM;EAAA,oBAClG,6BAAC,gBAAI,eACCA,MAAM;IACV,GAAG;IACH,SAAS,EAAE,IAAAC,eAAM,EACfC,2BAAK,CAACC,YAAY,EAClBT,KAAK,GAAGQ,2BAAK,CAACR,KAAK,GAAGI,OAAO,GAAGI,2BAAK,CAACJ,OAAO,GAAGD,OAAO,GAAGK,2BAAK,CAACL,OAAO,GAAGO,SAAS,EACnFT,MAAM,GAAGO,2BAAK,CAACP,MAAM,GAAGO,2BAAK,CAACG,QAAQ,EACtCV,MAAM,IAAIO,2BAAK,CAACP,MAAM,EACtBC,KAAK,IAAIM,2BAAK,CAACN,KAAK,EACpBI,MAAM,CAACM,SAAS;EAChB,iBAEF,6BAAC,gBAAI;IACH,KAAK,EAAE,IAAAC,qBAAY,EAAC;MAAEb,KAAK,EAALA,KAAK;MAAEG,OAAO,EAAPA,OAAO;MAAEC,OAAO,EAAPA;IAAQ,CAAC,CAAE;IACjD,SAAS,EAAEF,KAAM;IACjB,SAAS,EAAE,IAAAK,eAAM,EAACC,2BAAK,CAACM,IAAI,EAAEZ,KAAK,IAAIM,2BAAK,CAACN,KAAK;EAAE,EACpD,eACF,6BAAC,gBAAI;IACH,KAAK,EAAEA,KAAM;IACb,SAAS,EAAE,IAAAK,eAAM,EACfC,2BAAK,CAACO,IAAI,EACVf,KAAK,GAAGQ,2BAAK,CAACR,KAAK,GAAGI,OAAO,GAAGI,2BAAK,CAACJ,OAAO,GAAGD,OAAO,GAAGK,2BAAK,CAACL,OAAO,GAAGO,SAAS;EACnF,GAEDX,QAAQ,CACJ,EACNM,OAAO,iBACN,6BAAC,qBAAS;IAAC,SAAS,EAAE,IAAAE,eAAM,EAACC,2BAAK,CAACQ,SAAS,EAAER,2BAAK,CAACM,IAAI,EAAEZ,KAAK,IAAIM,2BAAK,CAACN,KAAK,CAAE;IAAC,OAAO,EAAEG;EAAQ,gBAChG,6BAAC,gBAAI;IAAC,KAAK,EAAEY,gBAAI,CAACC,KAAM;IAAC,SAAS,EAAEhB;EAAM,EAAG,CAEhD,CACI;AAAA,CACR;AAAC;AAEFJ,YAAY,CAACqB,WAAW,GAAG,wBAAwB;AAEnDrB,YAAY,CAACsB,SAAS,GAAG;EACvBrB,QAAQ,EAAEsB,kBAAS,CAACC,MAAM,CAACC,UAAU;EACrCvB,KAAK,EAAEqB,kBAAS,CAACG,IAAI;EACrBvB,MAAM,EAAEoB,kBAAS,CAACG,IAAI;EACtBtB,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","inline","large","small","success","warning","onClose","others","styles","style","notification","undefined","outlined","className","getIconState","icon","text","pressable","ICON","CLOSE","displayName","propTypes","PropTypes","string","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.string.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,MAAM,CAACC,UAAU;EACrCxB,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"}

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

@@ -11,6 +11,11 @@
   width: 100%;
 }
 
+.notification.large {
+  flex-direction: column;
+  align-items: center;
+}
+
 .notification.outlined.small {
   padding: var(--mirai-ui-notification-padding-small);
 }
@@ -46,24 +51,43 @@
   color: var(--mirai-ui-warning);
 }
 
-.notification:not(.small) .text {
+.notification:not(.large):not(.small) .text {
   margin-left: var(--mirai-ui-notification-padding);
   margin-right: var(--mirai-ui-notification-padding);
 }
 
+.notification.large .text {
+  margin-bottom: var(--mirai-ui-notification-padding);
+  margin-top: var(--mirai-ui-notification-padding);
+}
+
 .notification.small .text {
   margin-left: var(--mirai-ui-notification-padding-small);
   margin-right: var(--mirai-ui-notification-padding-small);
 }
 
-.outlined .text {
+.notification.outlined .text {
   flex: 1;
 }
 
-.notification .icon {
+.notification.large:not(.outlined) .text {
+  color: var(--mirai-ui-content);
+}
+
+.notification:not(.large):not(.small) .icon {
   margin-top: calc(calc(var(--mirai-ui-line-height-headline-3) - var(--mirai-ui-font-size-headline-3)) / 2);
 }
 
-.notification .icon.small {
+.notification.large .icon {
+  font-size: var(--mirai-ui-space-XL);
+  line-height: var(--mirai-ui-space-XL);
+  height: var(--mirai-ui-space-XL);
+  width: var(--mirai-ui-space-XL);
+}
+
+.notification.small .icon {
   margin-top: calc(calc(var(--mirai-ui-line-height-small) - var(--mirai-ui-font-size-paragraph)) / 2);
 }
+
+.notification .icon.small {
+}

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

@@ -25,6 +25,7 @@ Story.args = _defineProperty({
   children: 'children',
   error: false,
   inline: false,
+  large: false,
   small: false,
   success: false,
   warning: 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","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  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,OAAO,EAAE,KAAK;EACdC,OAAO,EAAE;AAAK,GACb,aAAa,EAAG,YAAY,CAC9B;AAEDT,KAAK,CAACU,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","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"}

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

@@ -105,6 +105,76 @@ exports[`component:<Notification> prop:inline 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Notification> prop:large & prop:inline 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification inline inline 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:large 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification 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:onClose 1`] = `
 <DocumentFragment>
   <div
@@ -171,7 +241,7 @@ exports[`component:<Notification> prop:small & prop:inline 1`] = `
     class="view row notification inline inline small"
   >
     <span
-      class="icon paragraph icon small"
+      class="icon paragraph icon"
     >
       <svg
         fill="currentColor"
@@ -206,7 +276,7 @@ exports[`component:<Notification> prop:small 1`] = `
     class="view row notification outlined small"
   >
     <span
-      class="icon paragraph icon small"
+      class="icon paragraph icon"
     >
       <svg
         fill="currentColor"

package/package.json

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