@mirai/ui 1.0.255 → 1.0.257

package/README.md

@@ -1304,32 +1304,26 @@ Theme.setDirection(DIRECTION_TYPE.RIGHT);
 --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-warning: #ffad00;
+--mirai-ui-warning-background: #fff3cc;
+
+--mirai-ui-success: #067949;
+--mirai-ui-success-background: #e7fde7;
 
---mirai-ui-error: #d14343;
---mirai-ui-error-background: #fdf4f4;
---mirai-ui-error-border: #f4b6b6;
---mirai-ui-error-dark: #7d2828;
---mirai-ui-error-light: #ee9191;
-
---mirai-ui-success: #52bd94;
---mirai-ui-success-background: #f5fbf8;
---mirai-ui-success-border: #dcf2ea;
---mirai-ui-success-dark: #317159;
---mirai-ui-success-light: #a3e6cd;
-
---mirai-ui-warning: #ffb020;
---mirai-ui-warning-background: #fffaf1;
---mirai-ui-warning-border: #ffdfa6;
---mirai-ui-warning-dark: #66460d;
---mirai-ui-warning-light: #ffd079;
+--mirai-ui-info: #005cb2;
+--mirai-ui-info-background: #e6f8ff;
 
 /* spacing */
 --mirai-ui-space-XS: 8px;

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

@@ -1195,7 +1195,7 @@ exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
             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"
+            d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"
           />
         </svg>
       </span>
@@ -1293,7 +1293,11 @@ exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
+            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>
@@ -1395,7 +1399,7 @@ exports[`component:<InputPhone> prop:success 1`] = `
             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"
+            d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"
           />
         </svg>
       </span>
@@ -1607,7 +1611,11 @@ exports[`component:<InputPhone> prop:warning 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
+            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>

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

@@ -757,7 +757,11 @@ exports[`component:<InputSelect> prop:warning 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
+            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>

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

@@ -426,7 +426,7 @@ exports[`component:<InputText> prop:success 1`] = `
             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"
+            d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"
           />
         </svg>
       </span>
@@ -515,7 +515,11 @@ exports[`component:<InputText> prop:warning 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
+            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>

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", "info", "inline", "large", "small", "success", "warning", "wide", "onClose"];
+var _excluded = ["children", "error", "info", "inline", "large", "small", "success", "title", "warning", "wide", "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; }
@@ -23,6 +23,7 @@ var Notification = function Notification(_ref) {
     large = _ref.large,
     small = _ref.small,
     success = _ref.success,
+    title = _ref.title,
     warning = _ref.warning,
     wide = _ref.wide,
     onClose = _ref.onClose,
@@ -30,27 +31,30 @@ var Notification = function Notification(_ref) {
   return /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
     row: true,
     role: others.role || 'notification',
-    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, wide && _NotificationModule.default.wide, 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, large ? _NotificationModule.default.large : small ? _NotificationModule.default.small : undefined, wide && _NotificationModule.default.wide, others.className)
   }), /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    headline: large,
-    level: large ? 1 : undefined,
-    paragraph: small,
+    headline: true,
+    level: large ? 1 : small || !title ? 3 : 2,
     value: (0, _helpers.getIconState)({
       error: error,
       success: success,
       warning: warning
     }),
-    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), !large && onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    className: (0, _helpers.styles)(_NotificationModule.default.icon, (small || !title) && !large && _NotificationModule.default.small)
+  }), /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    className: _NotificationModule.default.texts
+  }, title && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    action: small,
+    bold: true,
+    headline: large
+  }, title), children && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    action: !small,
+    small: small
+  }, children)), !inline && !large && onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
     onPress: onClose,
-    className: (0, _helpers.styles)(_NotificationModule.default.pressable, _NotificationModule.default.icon),
     testId: others.testId ? "".concat(others.testId, "-button-close") : undefined
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    value: _primitives.ICON.CLOSE,
-    paragraph: small
+    value: _primitives.ICON.CLOSE
   })));
 };
 exports.Notification = Notification;
@@ -63,6 +67,7 @@ Notification.propTypes = {
   large: _propTypes.default.bool,
   small: _propTypes.default.bool,
   success: _propTypes.default.bool,
+  title: _propTypes.default.string,
   warning: _propTypes.default.bool,
   wide: _propTypes.default.bool,
   onClose: _propTypes.default.func

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","names":["Notification","children","error","info","inline","large","small","success","warning","wide","onClose","others","role","styles","style","notification","undefined","outlined","className","getIconState","icon","text","pressable","testId","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  wide,\n  onClose,\n  ...others\n}) => (\n  <View\n    {...others}\n    row\n    role={others.role || 'notification'}\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      wide && style.wide,\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\n        onPress={onClose}\n        className={styles(style.pressable, style.icon)}\n        testId={others.testId ? `${others.testId}-button-close` : undefined}\n      >\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  wide: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":"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"}
+{"version":3,"file":"Notification.js","names":["Notification","children","error","info","inline","large","small","success","title","warning","wide","onClose","others","role","styles","style","notification","undefined","outlined","className","getIconState","icon","texts","testId","ICON","CLOSE","displayName","propTypes","PropTypes","any","isRequired","bool","string","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  title,\n  warning,\n  wide,\n  onClose,\n  ...others\n}) => (\n  <View\n    {...others}\n    row\n    role={others.role || 'notification'}\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      large ? style.large : small ? style.small : undefined,\n      wide && style.wide,\n      others.className,\n    )}\n  >\n    <Icon\n      headline\n      level={large ? 1 : small || !title ? 3 : 2}\n      value={getIconState({ error, success, warning })}\n      className={styles(style.icon, (small || !title) && !large && style.small)}\n    />\n\n    <View className={style.texts}>\n      {title && (\n        <Text action={small} bold headline={large}>\n          {title}\n        </Text>\n      )}\n      {children && (\n        <Text action={!small} small={small}>\n          {children}\n        </Text>\n      )}\n    </View>\n\n    {!inline && !large && onClose && (\n      <Pressable onPress={onClose} testId={others.testId ? `${others.testId}-button-close` : undefined}>\n        <Icon value={ICON.CLOSE} />\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  title: PropTypes.string,\n  warning: PropTypes.bool,\n  wide: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":"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"}

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

@@ -1,13 +1,7 @@
 .notification {
+  align-items: center;
   width: fit-content;
-  align-items: flex-start;
-}
-
-.notification.outlined {
-  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);
+  gap: var(--mirai-ui-space-S);
 }
 
 .notification.large {
@@ -19,91 +13,81 @@
   width: 100%;
 }
 
-.notification.outlined.large {
-  padding: var(--mirai-ui-notification-padding-large);
-}
-
-.notification.outlined.small {
-  padding: var(--mirai-ui-notification-padding-small);
+.notification .info {
+  color: var(--mirai-ui-info);
 }
 
-.notification * {
-  color: var(--mirai-ui-content);
+/* -- outlined ------------------------------------------------------------------------------------------------------ */
+.notification.outlined {
+  background-color: var(--mirai-ui-content-background);
+  border-radius: var(--mirai-ui-notification-border-radius);
+  padding: var(--mirai-ui-notification-padding);
 }
 
-.notification.success:not(.inline) {
-  background-color: var(--mirai-ui-success-background);
-  border-color: var(--mirai-ui-success-border);
+.notification.outlined.large {
+  padding: var(--mirai-ui-notification-padding-large);
 }
 
-.notification.success * {
-  color: var(--mirai-ui-success);
+.notification.outlined.small {
+  padding: var(--mirai-ui-notification-padding-small);
 }
 
-.notification.error:not(.inline) {
+.notification.outlined.error {
   background-color: var(--mirai-ui-error-background);
-  border-color: var(--mirai-ui-error-border);
-}
-
-.notification.error * {
-  color: var(--mirai-ui-error);
 }
 
-.notification.warning:not(.inline) {
+.notification.outlined.warning {
   background-color: var(--mirai-ui-warning-background);
-  border-color: var(--mirai-ui-warning-border);
 }
 
-.notification.warning * {
-  color: var(--mirai-ui-warning);
+.notification.outlined.success {
+  background-color: var(--mirai-ui-success-background);
 }
 
-.notification.info:not(.inline) {
+.notification.outlined.info {
   background-color: var(--mirai-ui-info-background);
-  border-color: var(--mirai-ui-info-border);
 }
 
-.notification.info * {
-  color: var(--mirai-ui-info);
+/* -- <Icon> ---------------------------------------------------------------------------------------------------------*/
+.notification .icon {
+  background-color: var(--mirai-ui-content);
+  border-radius: 50%;
 }
 
-.notification:not(.large):not(.small) .text {
-  margin-left: var(--mirai-ui-notification-padding);
-  margin-right: var(--mirai-ui-notification-padding);
+.notification .icon:not(.small) {
+  padding: calc(var(--mirai-ui-space-XS) / 2);
 }
 
-.notification.large .text {
-  margin-top: var(--mirai-ui-notification-padding-large);
-  text-align: center;
+.notification .icon.small {
+  padding: calc(var(--mirai-ui-space-XS) / 4);
 }
 
-.notification.small .text {
-  margin-left: var(--mirai-ui-notification-padding-small);
-  margin-right: var(--mirai-ui-notification-padding-small);
+.notification:not(.warning) .icon {
+  color: var(--mirai-ui-base);
 }
 
-.notification.outlined .text {
-  flex: 1;
+.notification.error .icon {
+  background-color: var(--mirai-ui-error);
 }
 
-.notification.large:not(.outlined) .text {
-  color: var(--mirai-ui-content);
+.notification.warning .icon {
+  background-color: var(--mirai-ui-warning);
 }
 
-.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.success .icon {
+  background-color: var(--mirai-ui-success);
 }
 
-.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.info .icon {
+  background-color: var(--mirai-ui-info);
 }
 
-.notification.small .icon {
-  margin-top: calc(calc(var(--mirai-ui-line-height-small) - var(--mirai-ui-font-size-paragraph)) / 2);
+/* -- <Text>s ------------------------------------------------------------------------------------------------------- */
+.notification .texts {
+  flex: 1;
 }
 
-.notification .icon.small {
+.notification.large .texts {
+  align-items: center;
+  gap: var(--mirai-ui-space-XS);
 }

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

@@ -5,19 +5,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Story = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _primitives = require("../../primitives");
 var _Notification = require("./Notification");
 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); }
 var _default = {
   title: 'Components'
 };
 exports.default = _default;
 var Story = function Story(props) {
-  return /*#__PURE__*/_react.default.createElement(_Notification.Notification, props);
+  return /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    style: {
+      gap: 'var(--mirai-ui-space-M)'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Notification.Notification, props), /*#__PURE__*/_react.default.createElement(_Notification.Notification, _extends({}, props, {
+    small: true
+  })), /*#__PURE__*/_react.default.createElement(_Notification.Notification, _extends({}, props, {
+    large: true
+  })), /*#__PURE__*/_react.default.createElement(_Notification.Notification, _extends({}, props, {
+    inline: true
+  })));
 };
 exports.Story = Story;
 Story.storyName = 'Notification';
 Story.args = {
-  children: 'children',
+  children: 'We hold your booking until _Feb 14, 12:00 AM_. If your reserve change, we will get back to you.',
+  title: 'Your booking is on Hold',
   error: false,
   info: false,
   inline: 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","info","inline","large","small","success","warning","wide","testId","style","argTypes","onClose","action"],"sources":["../../../src/components/Notification/Notification.stories.jsx"],"sourcesContent":["import 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  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  onClose: { action: 'onClose' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8C;AAAA,eAE/B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,6BAAC,0BAAY,EAAKA,KAAK,CAAI;AAAA;AAAC;AAE5DD,KAAK,CAACE,SAAS,GAAG,cAAc;AAEhCF,KAAK,CAACG,IAAI,GAAG;EACXC,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,KAAK;EACdC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDd,KAAK,CAACe,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU;AAC/B,CAAC"}
+{"version":3,"file":"Notification.stories.js","names":["title","Story","props","gap","storyName","args","children","error","info","inline","large","small","success","warning","wide","testId","style","argTypes","onClose","action"],"sources":["../../../src/components/Notification/Notification.stories.jsx"],"sourcesContent":["import React from 'react';\nimport { View } from '../../primitives';\n\nimport { Notification } from './Notification';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <View style={{ gap: 'var(--mirai-ui-space-M)' }}>\n    <Notification {...props} />\n    <Notification {...props} small />\n    <Notification {...props} large />\n    <Notification {...props} inline />\n  </View>\n);\n\nStory.storyName = 'Notification';\n\nStory.args = {\n  children: 'We hold your booking until _Feb 14, 12:00 AM_. If your reserve change, we will get back to you.',\n  title: 'Your booking is on Hold',\n  error: false,\n  info: false,\n  inline: false,\n  large: false,\n  small: false,\n  success: false,\n  warning: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  onClose: { action: 'onClose' },\n};\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AAA8C;AAAA;AAAA,eAE/B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,gBAAI;IAAC,KAAK,EAAE;MAAEC,GAAG,EAAE;IAA0B;EAAE,gBAC9C,6BAAC,0BAAY,EAAKD,KAAK,CAAI,eAC3B,6BAAC,0BAAY,eAAKA,KAAK;IAAE,KAAK;EAAA,GAAG,eACjC,6BAAC,0BAAY,eAAKA,KAAK;IAAE,KAAK;EAAA,GAAG,eACjC,6BAAC,0BAAY,eAAKA,KAAK;IAAE,MAAM;EAAA,GAAG,CAC7B;AAAA,CACR;AAAC;AAEFD,KAAK,CAACG,SAAS,GAAG,cAAc;AAEhCH,KAAK,CAACI,IAAI,GAAG;EACXC,QAAQ,EAAE,iGAAiG;EAC3GN,KAAK,EAAE,yBAAyB;EAChCO,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,KAAK;EACdC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDf,KAAK,CAACgB,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU;AAC/B,CAAC"}