@mirai/ui 1.0.246 → 1.0.247

package/README.md

@@ -44,12 +44,15 @@ This primitive returns a span with an icon based on a mandatory string prop `nam
 
 - `accent:boolean` use theme's accent color
 - `action:boolean` modifying font-size
+- `error:boolean` use theme's error color
 - `headline:boolean` modifying font-size (default headline:3)
 - `level:number` assign the level of heading (1, 2, 3 or 4)
 - `lighten:boolean` use theme's content-light color
 - `paragraph:boolean` modifying font-size
 - `small:boolean` modifying font-size
+- `success:boolean` use theme's success color
 - `value:func` Enum value
+- `warning:boolean` use theme's warning color
 
 ```jsx
 import { Icon, ICON, View } from '@mirai/ui';
@@ -319,15 +322,18 @@ A primitive for displaying text. It receives the following props:
 - `bold:boolean` modifying font-weight
 - `capitalize:boolean` capitalize the first word of a sentence
 - `children:string`
+- `error:boolean` use theme's error color
 - `headline:boolean` modifying font-size
 - `level:number` assign the level of heading (1, 2, 3 or 4)
 - `lighten:boolean` use theme's content-light color
 - `markdown:boolean` if true renders content as parsed markdown
 - `small:boolean` modifying font-size
+- `success:boolean` use theme's success color
 - `tag:string` html tag of resulting element
 - `tiny:bool` modifying font-size
 - `underline:boolean` use an underline text decoration
 - `upperCase:boolean` switching text to upper case
+- `warning:boolean` use theme's warning color
 - `wide:boolean` specifies whether the component should have more width or not
 
 ```jsx

package/build/primitives/Icon/Icon.js

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _Primitive = require("../Primitive");
 var _IconModule = _interopRequireDefault(require("./Icon.module.css"));
-var _excluded = ["accent", "action", "headline", "level", "lighten", "paragraph", "small", "value"];
+var _excluded = ["accent", "action", "error", "headline", "level", "lighten", "paragraph", "small", "success", "value", "warning"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -22,18 +22,21 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Icon = function Icon(_ref) {
   var accent = _ref.accent,
     action = _ref.action,
+    error = _ref.error,
     headline = _ref.headline,
     _ref$level = _ref.level,
     level = _ref$level === void 0 ? 3 : _ref$level,
     lighten = _ref.lighten,
     paragraph = _ref.paragraph,
     small = _ref.small,
+    success = _ref.success,
     value = _ref.value,
+    warning = _ref.warning,
     others = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _objectSpread(_objectSpread({}, others), {}, {
     role: others.role || 'icon',
     tag: 'span',
-    className: (0, _helpers.styles)(_IconModule.default.icon, accent && _IconModule.default.accent, headline ? _IconModule.default["headline-".concat(level)] : action ? _IconModule.default.action : small ? _IconModule.default.small : paragraph ? _IconModule.default.paragraph : _IconModule.default["headline-".concat(level)], lighten && _IconModule.default.lighten, others.className)
+    className: (0, _helpers.styles)(_IconModule.default.icon, accent && _IconModule.default.accent, error && _IconModule.default.error, headline ? _IconModule.default["headline-".concat(level)] : action ? _IconModule.default.action : small ? _IconModule.default.small : paragraph ? _IconModule.default.paragraph : _IconModule.default["headline-".concat(level)], lighten && _IconModule.default.lighten, success && _IconModule.default.success, warning && _IconModule.default.warning, others.className)
   }), value ? /*#__PURE__*/_react.default.createElement(value) : undefined);
 };
 exports.Icon = Icon;
@@ -41,11 +44,14 @@ Icon.displayName = 'Primitive:Icon';
 Icon.propTypes = {
   accent: _propTypes.default.bool,
   action: _propTypes.default.bool,
+  error: _propTypes.default.bool,
   headline: _propTypes.default.bool,
   level: _propTypes.default.number,
   lighten: _propTypes.default.bool,
   paragraph: _propTypes.default.bool,
   small: _propTypes.default.bool,
-  value: _propTypes.default.func.isRequired
+  success: _propTypes.default.bool,
+  value: _propTypes.default.func.isRequired,
+  warning: _propTypes.default.bool
 };
 //# sourceMappingURL=Icon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["Icon","accent","action","headline","level","lighten","paragraph","small","value","others","React","createElement","Primitive","role","tag","className","styles","style","icon","undefined","displayName","propTypes","PropTypes","bool","number","func","isRequired"],"sources":["../../../src/primitives/Icon/Icon.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './Icon.module.css';\n\nconst Icon = ({ accent, action, headline, level = 3, lighten, paragraph, small, value, ...others }) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      role: others.role || 'icon',\n      tag: 'span',\n      className: styles(\n        style.icon,\n        accent && style.accent,\n        headline\n          ? style[`headline-${level}`]\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : paragraph\n          ? style.paragraph\n          : style[`headline-${level}`],\n        lighten && style.lighten,\n        others.className,\n      ),\n    },\n    value ? React.createElement(value) : undefined,\n  );\n\nIcon.displayName = 'Primitive:Icon';\n\nIcon.propTypes = {\n  accent: PropTypes.bool,\n  action: PropTypes.bool,\n  headline: PropTypes.bool,\n  level: PropTypes.number,\n  lighten: PropTypes.bool,\n  paragraph: PropTypes.bool,\n  small: PropTypes.bool,\n  value: PropTypes.func.isRequired,\n};\n\nexport { Icon };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,IAAI,GAAG,SAAPA,IAAI;EAAA,IAAMC,MAAM,QAANA,MAAM;IAAEC,MAAM,QAANA,MAAM;IAAEC,QAAQ,QAARA,QAAQ;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAEC,OAAO,QAAPA,OAAO;IAAEC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAKC,MAAM;EAAA,oBAC9FC,cAAK,CAACC,aAAa,CACjBC,oBAAS,kCAEJH,MAAM;IACTI,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,MAAM;IAC3BC,GAAG,EAAE,MAAM;IACXC,SAAS,EAAE,IAAAC,eAAM,EACfC,mBAAK,CAACC,IAAI,EACVjB,MAAM,IAAIgB,mBAAK,CAAChB,MAAM,EACtBE,QAAQ,GACJc,mBAAK,oBAAab,KAAK,EAAG,GAC1BF,MAAM,GACNe,mBAAK,CAACf,MAAM,GACZK,KAAK,GACLU,mBAAK,CAACV,KAAK,GACXD,SAAS,GACTW,mBAAK,CAACX,SAAS,GACfW,mBAAK,oBAAab,KAAK,EAAG,EAC9BC,OAAO,IAAIY,mBAAK,CAACZ,OAAO,EACxBI,MAAM,CAACM,SAAS;EACjB,IAEHP,KAAK,gBAAGE,cAAK,CAACC,aAAa,CAACH,KAAK,CAAC,GAAGW,SAAS,CAC/C;AAAA;AAAC;AAEJnB,IAAI,CAACoB,WAAW,GAAG,gBAAgB;AAEnCpB,IAAI,CAACqB,SAAS,GAAG;EACfpB,MAAM,EAAEqB,kBAAS,CAACC,IAAI;EACtBrB,MAAM,EAAEoB,kBAAS,CAACC,IAAI;EACtBpB,QAAQ,EAAEmB,kBAAS,CAACC,IAAI;EACxBnB,KAAK,EAAEkB,kBAAS,CAACE,MAAM;EACvBnB,OAAO,EAAEiB,kBAAS,CAACC,IAAI;EACvBjB,SAAS,EAAEgB,kBAAS,CAACC,IAAI;EACzBhB,KAAK,EAAEe,kBAAS,CAACC,IAAI;EACrBf,KAAK,EAAEc,kBAAS,CAACG,IAAI,CAACC;AACxB,CAAC"}
+{"version":3,"file":"Icon.js","names":["Icon","accent","action","error","headline","level","lighten","paragraph","small","success","value","warning","others","React","createElement","Primitive","role","tag","className","styles","style","icon","undefined","displayName","propTypes","PropTypes","bool","number","func","isRequired"],"sources":["../../../src/primitives/Icon/Icon.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './Icon.module.css';\n\nconst Icon = ({\n  accent,\n  action,\n  error,\n  headline,\n  level = 3,\n  lighten,\n  paragraph,\n  small,\n  success,\n  value,\n  warning,\n  ...others\n}) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      role: others.role || 'icon',\n      tag: 'span',\n      className: styles(\n        style.icon,\n        accent && style.accent,\n        error && style.error,\n        headline\n          ? style[`headline-${level}`]\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : paragraph\n          ? style.paragraph\n          : style[`headline-${level}`],\n        lighten && style.lighten,\n        success && style.success,\n        warning && style.warning,\n        others.className,\n      ),\n    },\n    value ? React.createElement(value) : undefined,\n  );\n\nIcon.displayName = 'Primitive:Icon';\n\nIcon.propTypes = {\n  accent: PropTypes.bool,\n  action: PropTypes.bool,\n  error: PropTypes.bool,\n  headline: PropTypes.bool,\n  level: PropTypes.number,\n  lighten: PropTypes.bool,\n  paragraph: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  value: PropTypes.func.isRequired,\n  warning: PropTypes.bool,\n};\n\nexport { Icon };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,IAAI,GAAG,SAAPA,IAAI;EAAA,IACRC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IAAA,kBACRC,KAAK;IAALA,KAAK,2BAAG,CAAC;IACTC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACJC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,oBAAS,kCAEJH,MAAM;IACTI,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,MAAM;IAC3BC,GAAG,EAAE,MAAM;IACXC,SAAS,EAAE,IAAAC,eAAM,EACfC,mBAAK,CAACC,IAAI,EACVpB,MAAM,IAAImB,mBAAK,CAACnB,MAAM,EACtBE,KAAK,IAAIiB,mBAAK,CAACjB,KAAK,EACpBC,QAAQ,GACJgB,mBAAK,oBAAaf,KAAK,EAAG,GAC1BH,MAAM,GACNkB,mBAAK,CAAClB,MAAM,GACZM,KAAK,GACLY,mBAAK,CAACZ,KAAK,GACXD,SAAS,GACTa,mBAAK,CAACb,SAAS,GACfa,mBAAK,oBAAaf,KAAK,EAAG,EAC9BC,OAAO,IAAIc,mBAAK,CAACd,OAAO,EACxBG,OAAO,IAAIW,mBAAK,CAACX,OAAO,EACxBE,OAAO,IAAIS,mBAAK,CAACT,OAAO,EACxBC,MAAM,CAACM,SAAS;EACjB,IAEHR,KAAK,gBAAGG,cAAK,CAACC,aAAa,CAACJ,KAAK,CAAC,GAAGY,SAAS,CAC/C;AAAA;AAAC;AAEJtB,IAAI,CAACuB,WAAW,GAAG,gBAAgB;AAEnCvB,IAAI,CAACwB,SAAS,GAAG;EACfvB,MAAM,EAAEwB,kBAAS,CAACC,IAAI;EACtBxB,MAAM,EAAEuB,kBAAS,CAACC,IAAI;EACtBvB,KAAK,EAAEsB,kBAAS,CAACC,IAAI;EACrBtB,QAAQ,EAAEqB,kBAAS,CAACC,IAAI;EACxBrB,KAAK,EAAEoB,kBAAS,CAACE,MAAM;EACvBrB,OAAO,EAAEmB,kBAAS,CAACC,IAAI;EACvBnB,SAAS,EAAEkB,kBAAS,CAACC,IAAI;EACzBlB,KAAK,EAAEiB,kBAAS,CAACC,IAAI;EACrBjB,OAAO,EAAEgB,kBAAS,CAACC,IAAI;EACvBhB,KAAK,EAAEe,kBAAS,CAACG,IAAI,CAACC,UAAU;EAChClB,OAAO,EAAEc,kBAAS,CAACC;AACrB,CAAC"}

package/build/primitives/Icon/Icon.module.css

@@ -6,6 +6,17 @@
   color: var(--mirai-ui-accent);
 }
 
+.action {
+  font-size: var(--mirai-ui-font-size-action);
+  height: var(--mirai-ui-font-size-action);
+  line-height: var(--mirai-ui-font-size-action);
+  width: var(--mirai-ui-font-size-action);
+}
+
+.error {
+  color: var(--mirai-ui-error);
+}
+
 .headline-1 {
   font-size: var(--mirai-ui-font-size-headline-1);
   height: var(--mirai-ui-font-size-headline-1);
@@ -45,16 +56,17 @@
   width: var(--mirai-ui-font-size-paragraph);
 }
 
-.action {
-  font-size: var(--mirai-ui-font-size-action);
-  height: var(--mirai-ui-font-size-action);
-  line-height: var(--mirai-ui-font-size-action);
-  width: var(--mirai-ui-font-size-action);
-}
-
 .small {
   font-size: var(--mirai-ui-font-size-small);
   height: var(--mirai-ui-font-size-small);
   line-height: var(--mirai-ui-font-size-small);
   width: var(--mirai-ui-font-size-small);
 }
+
+.success {
+  color: var(--mirai-ui-success);
+}
+
+.warning {
+  color: var(--mirai-ui-warning);
+}

package/build/primitives/Icon/Icon.stories.js

@@ -27,12 +27,15 @@ Story.storyName = 'Icon';
 Story.args = {
   accent: false,
   action: false,
+  error: false,
   headline: false,
   level: 3,
   lighten: false,
   paragraph: false,
   small: false,
+  success: false,
   value: undefined,
+  warning: false,
   // inherited properties
   testId: 'test-story',
   style: {}

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.js","names":["title","Story","value","props","ICON","storyName","args","accent","action","headline","level","lighten","paragraph","small","undefined","testId","style","argTypes","options","Object","keys","control","type","defaultValue"],"sources":["../../../src/primitives/Icon/Icon.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React from 'react';\n\nimport { Icon, ICON } from './';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ value, ...props }) => <Icon {...props} value={ICON[value]} />;\n\nStory.storyName = 'Icon';\n\nStory.args = {\n  accent: false,\n  action: false,\n  headline: false,\n  level: 3,\n  lighten: false,\n  paragraph: false,\n  small: false,\n  value: undefined,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  value: {\n    options: Object.keys(ICON),\n    control: { type: 'select' },\n    defaultValue: Object.keys(ICON)[0],\n  },\n};\n"],"mappings":";;;;;;AACA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,KAAK,QAALA,KAAK;IAAKC,KAAK;EAAA,oBAAO,6BAAC,MAAI,eAAKA,KAAK;IAAE,KAAK,EAAEC,MAAI,CAACF,KAAK;EAAE,GAAG;AAAA;AAAC;AAEtFD,KAAK,CAACI,SAAS,GAAG,MAAM;AAExBJ,KAAK,CAACK,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,MAAM,EAAE,KAAK;EACbC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,CAAC;EACRC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;EACZX,KAAK,EAAEY,SAAS;EAChB;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDf,KAAK,CAACgB,QAAQ,GAAG;EACff,KAAK,EAAE;IACLgB,OAAO,EAAEC,MAAM,CAACC,IAAI,CAAChB,MAAI,CAAC;IAC1BiB,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAEJ,MAAM,CAACC,IAAI,CAAChB,MAAI,CAAC,CAAC,CAAC;EACnC;AACF,CAAC"}
+{"version":3,"file":"Icon.stories.js","names":["title","Story","value","props","ICON","storyName","args","accent","action","error","headline","level","lighten","paragraph","small","success","undefined","warning","testId","style","argTypes","options","Object","keys","control","type","defaultValue"],"sources":["../../../src/primitives/Icon/Icon.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React from 'react';\n\nimport { Icon, ICON } from './';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ value, ...props }) => <Icon {...props} value={ICON[value]} />;\n\nStory.storyName = 'Icon';\n\nStory.args = {\n  accent: false,\n  action: false,\n  error: false,\n  headline: false,\n  level: 3,\n  lighten: false,\n  paragraph: false,\n  small: false,\n  success: false,\n  value: undefined,\n  warning: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  value: {\n    options: Object.keys(ICON),\n    control: { type: 'select' },\n    defaultValue: Object.keys(ICON)[0],\n  },\n};\n"],"mappings":";;;;;;AACA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,KAAK,QAALA,KAAK;IAAKC,KAAK;EAAA,oBAAO,6BAAC,MAAI,eAAKA,KAAK;IAAE,KAAK,EAAEC,MAAI,CAACF,KAAK;EAAE,GAAG;AAAA;AAAC;AAEtFD,KAAK,CAACI,SAAS,GAAG,MAAM;AAExBJ,KAAK,CAACK,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE,KAAK;EACZC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,CAAC;EACRC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdb,KAAK,EAAEc,SAAS;EAChBC,OAAO,EAAE,KAAK;EACd;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDlB,KAAK,CAACmB,QAAQ,GAAG;EACflB,KAAK,EAAE;IACLmB,OAAO,EAAEC,MAAM,CAACC,IAAI,CAACnB,MAAI,CAAC;IAC1BoB,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAEJ,MAAM,CAACC,IAAI,CAACnB,MAAI,CAAC,CAAC,CAAC;EACnC;AACF,CAAC"}

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

@@ -78,6 +78,32 @@ exports[`primitive:<Icon> prop:action 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<Icon> prop:error 1`] = `
+<DocumentFragment>
+  <span
+    class="icon error headline-3"
+  >
+    <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="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+      />
+    </svg>
+  </span>
+</DocumentFragment>
+`;
+
 exports[`primitive:<Icon> prop:headline & level:1 1`] = `
 <DocumentFragment>
   <span
@@ -286,6 +312,32 @@ exports[`primitive:<Icon> prop:small 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<Icon> prop:success 1`] = `
+<DocumentFragment>
+  <span
+    class="icon headline-3 success"
+  >
+    <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="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+      />
+    </svg>
+  </span>
+</DocumentFragment>
+`;
+
 exports[`primitive:<Icon> prop:value prop:value (ADD) 1`] = `
 <DocumentFragment>
   <span
@@ -799,6 +851,32 @@ exports[`primitive:<Icon> prop:value prop:value (WARNING) 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<Icon> prop:warning 1`] = `
+<DocumentFragment>
+  <span
+    class="icon headline-3 warning"
+  >
+    <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="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+      />
+    </svg>
+  </span>
+</DocumentFragment>
+`;
+
 exports[`primitive:<Icon> renders 1`] = `
 <DocumentFragment>
   <span

package/build/primitives/Text/Text.js

@@ -11,7 +11,7 @@ var _helpers = require("../../helpers");
 var _Primitive = require("../Primitive");
 var _helpers2 = require("./helpers");
 var _TextModule = _interopRequireDefault(require("./Text.module.css"));
-var _excluded = ["accent", "action", "bold", "capitalize", "children", "headline", "level", "lighten", "markdown", "small", "tag", "tiny", "underline", "upperCase", "wide"];
+var _excluded = ["accent", "action", "bold", "capitalize", "children", "error", "headline", "level", "lighten", "markdown", "small", "success", "tag", "tiny", "underline", "upperCase", "warning", "wide"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -26,6 +26,7 @@ var Text = function Text(_ref) {
     bold = _ref.bold,
     capitalize = _ref.capitalize,
     children = _ref.children,
+    error = _ref.error,
     headline = _ref.headline,
     _ref$level = _ref.level,
     level = _ref$level === void 0 ? 3 : _ref$level,
@@ -33,16 +34,18 @@ var Text = function Text(_ref) {
     _ref$markdown = _ref.markdown,
     markdown = _ref$markdown === void 0 ? true : _ref$markdown,
     small = _ref.small,
+    success = _ref.success,
     tag = _ref.tag,
     tiny = _ref.tiny,
     underline = _ref.underline,
     upperCase = _ref.upperCase,
+    warning = _ref.warning,
     wide = _ref.wide,
     others = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _objectSpread(_objectSpread({}, others), {}, {
     role: others.role || 'text',
     tag: tag || (headline ? "h".concat(level) : 'span'),
-    className: (0, _helpers.styles)(_TextModule.default.text, accent && _TextModule.default.accent, bold && _TextModule.default.bold, capitalize && _TextModule.default.capitalize, headline ? _TextModule.default["headline-".concat(level)] : action ? _TextModule.default.action : small ? _TextModule.default.small : tiny ? _TextModule.default.tiny : _TextModule.default.paragraph, lighten && _TextModule.default.lighten, underline && _TextModule.default.underline, upperCase && _TextModule.default.upperCase, wide && _TextModule.default.wide, others.className)
+    className: (0, _helpers.styles)(_TextModule.default.text, accent && _TextModule.default.accent, bold && _TextModule.default.bold, capitalize && _TextModule.default.capitalize, error && _TextModule.default.error, headline ? _TextModule.default["headline-".concat(level)] : action ? _TextModule.default.action : small ? _TextModule.default.small : tiny ? _TextModule.default.tiny : _TextModule.default.paragraph, lighten && _TextModule.default.lighten, success && _TextModule.default.success, underline && _TextModule.default.underline, upperCase && _TextModule.default.upperCase, warning && _TextModule.default.warning, wide && _TextModule.default.wide, others.className)
   }), markdown ? (0, _helpers2.parseMarkdown)(children) : children);
 };
 exports.Text = Text;
@@ -53,15 +56,18 @@ Text.propTypes = {
   bold: _propTypes.default.bool,
   capitalize: _propTypes.default.bool,
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
+  error: _propTypes.default.bool,
   headline: _propTypes.default.bool,
   level: _propTypes.default.number,
   lighten: _propTypes.default.bool,
   markdown: _propTypes.default.bool,
   small: _propTypes.default.bool,
+  success: _propTypes.default.bool,
   tag: _propTypes.default.string,
   tiny: _propTypes.default.bool,
   underline: _propTypes.default.bool,
   upperCase: _propTypes.default.bool,
+  warning: _propTypes.default.bool,
   wide: _propTypes.default.bool
 };
 //# sourceMappingURL=Text.js.map

package/build/primitives/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["Text","accent","action","bold","capitalize","children","headline","level","lighten","markdown","small","tag","tiny","underline","upperCase","wide","others","React","createElement","Primitive","role","className","styles","style","text","paragraph","parseMarkdown","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { parseMarkdown } from './helpers';\nimport style from './Text.module.css';\n\nconst Text = ({\n  accent,\n  action,\n  bold,\n  capitalize,\n  children,\n  headline,\n  level = 3,\n  lighten,\n  markdown = true,\n  small,\n  tag,\n  tiny,\n  underline,\n  upperCase,\n  wide,\n  ...others\n}) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      role: others.role || 'text',\n      tag: tag || (headline ? `h${level}` : 'span'),\n      className: styles(\n        style.text,\n        accent && style.accent,\n        bold && style.bold,\n        capitalize && style.capitalize,\n        headline\n          ? style[`headline-${level}`]\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : tiny\n          ? style.tiny\n          : style.paragraph,\n        lighten && style.lighten,\n        underline && style.underline,\n        upperCase && style.upperCase,\n        wide && style.wide,\n        others.className,\n      ),\n    },\n    markdown ? parseMarkdown(children) : children,\n  );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n  accent: PropTypes.bool,\n  action: PropTypes.bool,\n  bold: PropTypes.bool,\n  capitalize: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n  headline: PropTypes.bool,\n  level: PropTypes.number,\n  lighten: PropTypes.bool,\n  markdown: PropTypes.bool,\n  small: PropTypes.bool,\n  tag: PropTypes.string,\n  tiny: PropTypes.bool,\n  underline: PropTypes.bool,\n  upperCase: PropTypes.bool,\n  wide: PropTypes.bool,\n};\n\nexport { Text };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,IAAI,GAAG,SAAPA,IAAI;EAAA,IACRC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,IAAI,QAAJA,IAAI;IACJC,UAAU,QAAVA,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IAAA,kBACRC,KAAK;IAALA,KAAK,2BAAG,CAAC;IACTC,OAAO,QAAPA,OAAO;IAAA,qBACPC,QAAQ;IAARA,QAAQ,8BAAG,IAAI;IACfC,KAAK,QAALA,KAAK;IACLC,GAAG,QAAHA,GAAG;IACHC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACDC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,oBAAS,kCAEJH,MAAM;IACTI,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,MAAM;IAC3BT,GAAG,EAAEA,GAAG,KAAKL,QAAQ,cAAOC,KAAK,IAAK,MAAM,CAAC;IAC7Cc,SAAS,EAAE,IAAAC,eAAM,EACfC,mBAAK,CAACC,IAAI,EACVvB,MAAM,IAAIsB,mBAAK,CAACtB,MAAM,EACtBE,IAAI,IAAIoB,mBAAK,CAACpB,IAAI,EAClBC,UAAU,IAAImB,mBAAK,CAACnB,UAAU,EAC9BE,QAAQ,GACJiB,mBAAK,oBAAahB,KAAK,EAAG,GAC1BL,MAAM,GACNqB,mBAAK,CAACrB,MAAM,GACZQ,KAAK,GACLa,mBAAK,CAACb,KAAK,GACXE,IAAI,GACJW,mBAAK,CAACX,IAAI,GACVW,mBAAK,CAACE,SAAS,EACnBjB,OAAO,IAAIe,mBAAK,CAACf,OAAO,EACxBK,SAAS,IAAIU,mBAAK,CAACV,SAAS,EAC5BC,SAAS,IAAIS,mBAAK,CAACT,SAAS,EAC5BC,IAAI,IAAIQ,mBAAK,CAACR,IAAI,EAClBC,MAAM,CAACK,SAAS;EACjB,IAEHZ,QAAQ,GAAG,IAAAiB,uBAAa,EAACrB,QAAQ,CAAC,GAAGA,QAAQ,CAC9C;AAAA;AAAC;AAEJL,IAAI,CAAC2B,WAAW,GAAG,gBAAgB;AAEnC3B,IAAI,CAAC4B,SAAS,GAAG;EACf3B,MAAM,EAAE4B,kBAAS,CAACC,IAAI;EACtB5B,MAAM,EAAE2B,kBAAS,CAACC,IAAI;EACtB3B,IAAI,EAAE0B,kBAAS,CAACC,IAAI;EACpB1B,UAAU,EAAEyB,kBAAS,CAACC,IAAI;EAC1BzB,QAAQ,EAAEwB,kBAAS,CAACE,SAAS,CAAC,CAACF,kBAAS,CAACG,MAAM,EAAEH,kBAAS,CAACI,MAAM,EAAEJ,kBAAS,CAACK,KAAK,CAAC,CAAC;EACpF5B,QAAQ,EAAEuB,kBAAS,CAACC,IAAI;EACxBvB,KAAK,EAAEsB,kBAAS,CAACI,MAAM;EACvBzB,OAAO,EAAEqB,kBAAS,CAACC,IAAI;EACvBrB,QAAQ,EAAEoB,kBAAS,CAACC,IAAI;EACxBpB,KAAK,EAAEmB,kBAAS,CAACC,IAAI;EACrBnB,GAAG,EAAEkB,kBAAS,CAACG,MAAM;EACrBpB,IAAI,EAAEiB,kBAAS,CAACC,IAAI;EACpBjB,SAAS,EAAEgB,kBAAS,CAACC,IAAI;EACzBhB,SAAS,EAAEe,kBAAS,CAACC,IAAI;EACzBf,IAAI,EAAEc,kBAAS,CAACC;AAClB,CAAC"}
+{"version":3,"file":"Text.js","names":["Text","accent","action","bold","capitalize","children","error","headline","level","lighten","markdown","small","success","tag","tiny","underline","upperCase","warning","wide","others","React","createElement","Primitive","role","className","styles","style","text","paragraph","parseMarkdown","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { parseMarkdown } from './helpers';\nimport style from './Text.module.css';\n\nconst Text = ({\n  accent,\n  action,\n  bold,\n  capitalize,\n  children,\n  error,\n  headline,\n  level = 3,\n  lighten,\n  markdown = true,\n  small,\n  success,\n  tag,\n  tiny,\n  underline,\n  upperCase,\n  warning,\n  wide,\n  ...others\n}) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      role: others.role || 'text',\n      tag: tag || (headline ? `h${level}` : 'span'),\n      className: styles(\n        style.text,\n        accent && style.accent,\n        bold && style.bold,\n        capitalize && style.capitalize,\n        error && style.error,\n        headline\n          ? style[`headline-${level}`]\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : tiny\n          ? style.tiny\n          : style.paragraph,\n        lighten && style.lighten,\n        success && style.success,\n        underline && style.underline,\n        upperCase && style.upperCase,\n        warning && style.warning,\n        wide && style.wide,\n        others.className,\n      ),\n    },\n    markdown ? parseMarkdown(children) : children,\n  );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n  accent: PropTypes.bool,\n  action: PropTypes.bool,\n  bold: PropTypes.bool,\n  capitalize: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n  error: PropTypes.bool,\n  headline: PropTypes.bool,\n  level: PropTypes.number,\n  lighten: PropTypes.bool,\n  markdown: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  tag: PropTypes.string,\n  tiny: PropTypes.bool,\n  underline: PropTypes.bool,\n  upperCase: PropTypes.bool,\n  warning: PropTypes.bool,\n  wide: PropTypes.bool,\n};\n\nexport { Text };\n"],"mappings":"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"}

package/build/primitives/Text/Text.module.css

@@ -13,6 +13,15 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.accent {
+  color: var(--mirai-ui-accent);
+}
+
+.action {
+  font-size: var(--mirai-ui-font-size-action);
+  line-height: var(--mirai-ui-line-height-action);
+}
+
 .bold {
   font-family: var(--mirai-ui-font-bold);
   font-weight: var(--mirai-ui-font-bold-weight);
@@ -26,6 +35,10 @@
   text-transform: uppercase;
 }
 
+.error {
+  color: var(--mirai-ui-error);
+}
+
 .headline-1 {
   font-size: var(--mirai-ui-font-size-headline-1);
   line-height: var(--mirai-ui-line-height-headline-1);
@@ -51,15 +64,6 @@
   line-height: var(--mirai-ui-line-height-paragraph);
 }
 
-.accent {
-  color: var(--mirai-ui-accent);
-}
-
-.action {
-  font-size: var(--mirai-ui-font-size-action);
-  line-height: var(--mirai-ui-line-height-action);
-}
-
 .lighten {
   color: var(--mirai-ui-content-light);
 }
@@ -69,6 +73,10 @@
   line-height: var(--mirai-ui-line-height-small);
 }
 
+.success {
+  color: var(--mirai-ui-success);
+}
+
 .tiny {
   font-size: var(--mirai-ui-font-size-tiny);
   line-height: var(--mirai-ui-line-height-tiny);
@@ -82,6 +90,10 @@
   text-transform: uppercase;
 }
 
+.warning {
+  color: var(--mirai-ui-warning);
+}
+
 .wide {
   width: 100%;
 }

package/build/primitives/Text/Text.stories.js

@@ -31,14 +31,17 @@ Story.args = {
   capitalize: false,
   children: 'children',
   childrenMarkdown: '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',
+  error: false,
   headline: false,
   level: 3,
   lighten: false,
   small: false,
+  success: false,
   tag: 'span',
   tiny: false,
   underline: false,
   upperCase: false,
+  warning: false,
   wide: false,
   // inherited properties
   testId: 'test-story',

package/build/primitives/Text/Text.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.stories.js","names":["title","Story","childrenMarkdown","props","storyName","args","accent","action","bold","capitalize","children","headline","level","lighten","small","tag","tiny","underline","upperCase","wide","testId","style","argTypes"],"sources":["../../../src/primitives/Text/Text.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from './Text';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ childrenMarkdown, ...props }) => (\n  <>\n    <Text {...props} />\n    <Text {...props} children={childrenMarkdown} />\n  </>\n);\n\nStory.storyName = 'Text';\n\nStory.args = {\n  accent: false,\n  action: false,\n  bold: false,\n  capitalize: false,\n  children: 'children',\n  childrenMarkdown:\n    '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',\n  headline: false,\n  level: 3,\n  lighten: false,\n  small: false,\n  tag: 'span',\n  tiny: false,\n  underline: false,\n  upperCase: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,eAEf;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,gBAAgB,QAAhBA,gBAAgB;IAAKC,KAAK;EAAA,oBAChD,yEACE,6BAAC,UAAI,EAAKA,KAAK,CAAI,eACnB,6BAAC,UAAI,eAAKA,KAAK;IAAE,QAAQ,EAAED;EAAiB,GAAG,CAC9C;AAAA,CACJ;AAAC;AAEFD,KAAK,CAACG,SAAS,GAAG,MAAM;AAExBH,KAAK,CAACI,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE,KAAK;EACXC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,UAAU;EACpBR,gBAAgB,EACd,8HAA8H;EAChIS,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,CAAC;EACRC,OAAO,EAAE,KAAK;EACdC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,MAAM;EACXC,IAAI,EAAE,KAAK;EACXC,SAAS,EAAE,KAAK;EAChBC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDpB,KAAK,CAACqB,QAAQ,GAAG,CAAC,CAAC"}
+{"version":3,"file":"Text.stories.js","names":["title","Story","childrenMarkdown","props","storyName","args","accent","action","bold","capitalize","children","error","headline","level","lighten","small","success","tag","tiny","underline","upperCase","warning","wide","testId","style","argTypes"],"sources":["../../../src/primitives/Text/Text.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from './Text';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ childrenMarkdown, ...props }) => (\n  <>\n    <Text {...props} />\n    <Text {...props} children={childrenMarkdown} />\n  </>\n);\n\nStory.storyName = 'Text';\n\nStory.args = {\n  accent: false,\n  action: false,\n  bold: false,\n  capitalize: false,\n  children: 'children',\n  childrenMarkdown:\n    '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',\n  error: false,\n  headline: false,\n  level: 3,\n  lighten: false,\n  small: false,\n  success: false,\n  tag: 'span',\n  tiny: false,\n  underline: false,\n  upperCase: false,\n  warning: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,eAEf;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,gBAAgB,QAAhBA,gBAAgB;IAAKC,KAAK;EAAA,oBAChD,yEACE,6BAAC,UAAI,EAAKA,KAAK,CAAI,eACnB,6BAAC,UAAI,eAAKA,KAAK;IAAE,QAAQ,EAAED;EAAiB,GAAG,CAC9C;AAAA,CACJ;AAAC;AAEFD,KAAK,CAACG,SAAS,GAAG,MAAM;AAExBH,KAAK,CAACI,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE,KAAK;EACXC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,UAAU;EACpBR,gBAAgB,EACd,8HAA8H;EAChIS,KAAK,EAAE,KAAK;EACZC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,CAAC;EACRC,OAAO,EAAE,KAAK;EACdC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,GAAG,EAAE,MAAM;EACXC,IAAI,EAAE,KAAK;EACXC,SAAS,EAAE,KAAK;EAChBC,SAAS,EAAE,KAAK;EAChBC,OAAO,EAAE,KAAK;EACdC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDvB,KAAK,CAACwB,QAAQ,GAAG,CAAC,CAAC"}

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

@@ -50,6 +50,16 @@ exports[`primitive:<Text> prop:capitalize 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<Text> prop:error 1`] = `
+<DocumentFragment>
+  <span
+    class="text error paragraph"
+  >
+    Lorem Ipsum
+  </span>
+</DocumentFragment>
+`;
+
 exports[`primitive:<Text> prop:headline & level:1 1`] = `
 <DocumentFragment>
   <h1
@@ -140,6 +150,16 @@ exports[`primitive:<Text> prop:small 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<Text> prop:success 1`] = `
+<DocumentFragment>
+  <span
+    class="text paragraph success"
+  >
+    Lorem Ipsum
+  </span>
+</DocumentFragment>
+`;
+
 exports[`primitive:<Text> prop:tag 1`] = `
 <DocumentFragment>
   <p
@@ -180,6 +200,16 @@ exports[`primitive:<Text> prop:upperCase 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<Text> prop:warning 1`] = `
+<DocumentFragment>
+  <span
+    class="text paragraph warning"
+  >
+    Lorem Ipsum
+  </span>
+</DocumentFragment>
+`;
+
 exports[`primitive:<Text> prop:wide 1`] = `
 <DocumentFragment>
   <span

package/package.json

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