@mirai/ui 1.1.0-f → 1.1.2

package/build/primitives/Checkbox/Checkbox.module.css

@@ -1,7 +1,5 @@
 .checkbox {
-  height: var(--mirai-ui-checkbox-size);
   position: relative;
-  width: var(--mirai-ui-checkbox-size);
 }
 
 .checkbox input {
@@ -10,13 +8,12 @@
   border-radius: var(--mirai-ui-checkbox-border-radius);
   box-sizing: border-box;
   cursor: pointer;
-  height: var(--mirai-ui-checkbox-size);
   margin: 0;
   outline: none;
   transition: background-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing),
-    border-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
+    border-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing),
+    box-shadow var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
   user-select: none;
-  width: var(--mirai-ui-checkbox-size);
 
   appearance: none;
   -webkit-appearance: none;
@@ -36,8 +33,48 @@
   border-color: var(--mirai-ui-checkbox-checked);
 }
 
+.checkbox input:not(:disabled).error {
+  border-color: var(--mirai-ui-error);
+  border-width: calc(var(--mirai-ui-border-width) * 2);
+}
+
+.checkbox input:not(:disabled):focus,
+.checkbox input:not(:disabled):hover {
+  border-color: var(--mirai-ui-focus-color);
+  box-shadow: var(--mirai-ui-focus-shadow);
+}
+
+.checkbox input:not(:disabled):checked:focus,
+.checkbox input:not(:disabled):checked:hover {
+  background-color: var(--mirai-ui-focus-color);
+}
+
 /* -- reset defaults -------------------------------------------------------- */
 .checkbox input.input {
   margin-right: 0;
   top: 0;
-}
+}
+
+@media only screen and (max-width: 431px) {
+  .checkbox {
+    height: var(--mirai-ui-checkbox-size-mobile);
+    width: var(--mirai-ui-checkbox-size-mobile);
+  }
+
+  .checkbox input {
+    height: var(--mirai-ui-checkbox-size-mobile);
+    width: var(--mirai-ui-checkbox-size-mobile);
+  }
+}
+
+@media only screen and (min-width: 430px) {
+  .checkbox {
+    height: var(--mirai-ui-checkbox-size);
+    width: var(--mirai-ui-checkbox-size);
+  }
+
+  .checkbox input {
+    height: var(--mirai-ui-checkbox-size);
+    width: var(--mirai-ui-checkbox-size);
+  }
+}

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

@@ -2,7 +2,7 @@
 
 exports[`primitive:<Checkbox> inherit:className 1`] = `
 <DocumentFragment>
-  <ui_checkbox
+  <div
     class="checkbox mirai"
   >
     <input
@@ -11,13 +11,13 @@ exports[`primitive:<Checkbox> inherit:className 1`] = `
       type="checkbox"
       value=""
     />
-  </ui_checkbox>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Checkbox> prop:checked && disabled 1`] = `
 <DocumentFragment>
-  <ui_checkbox
+  <div
     class="checkbox"
   >
     <input
@@ -28,13 +28,13 @@ exports[`primitive:<Checkbox> prop:checked && disabled 1`] = `
       type="checkbox"
       value=""
     />
-  </ui_checkbox>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Checkbox> prop:checked 1`] = `
 <DocumentFragment>
-  <ui_checkbox
+  <div
     class="checkbox"
   >
     <input
@@ -44,13 +44,13 @@ exports[`primitive:<Checkbox> prop:checked 1`] = `
       type="checkbox"
       value=""
     />
-  </ui_checkbox>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Checkbox> prop:children 1`] = `
 <DocumentFragment>
-  <ui_checkbox
+  <div
     class="checkbox"
   >
     <input
@@ -60,13 +60,13 @@ exports[`primitive:<Checkbox> prop:children 1`] = `
       value=""
     />
     <div />
-  </ui_checkbox>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Checkbox> prop:disabled 1`] = `
 <DocumentFragment>
-  <ui_checkbox
+  <div
     class="checkbox"
   >
     <input
@@ -76,13 +76,44 @@ exports[`primitive:<Checkbox> prop:disabled 1`] = `
       type="checkbox"
       value=""
     />
-  </ui_checkbox>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Checkbox> prop:error && disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="checkbox"
+  >
+    <input
+      class="input"
+      disabled=""
+      name="name"
+      type="checkbox"
+      value=""
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Checkbox> prop:error 1`] = `
+<DocumentFragment>
+  <div
+    class="checkbox"
+  >
+    <input
+      class="error input"
+      name="name"
+      type="checkbox"
+      value=""
+    />
+  </div>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Checkbox> prop:value 1`] = `
 <DocumentFragment>
-  <ui_checkbox
+  <div
     class="checkbox"
   >
     <input
@@ -91,13 +122,13 @@ exports[`primitive:<Checkbox> prop:value 1`] = `
       type="checkbox"
       value="value"
     />
-  </ui_checkbox>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Checkbox> render 1`] = `
 <DocumentFragment>
-  <ui_checkbox
+  <div
     class="checkbox"
   >
     <input
@@ -106,13 +137,13 @@ exports[`primitive:<Checkbox> render 1`] = `
       type="checkbox"
       value=""
     />
-  </ui_checkbox>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Checkbox> testId 1`] = `
 <DocumentFragment>
-  <ui_checkbox
+  <div
     class="checkbox"
   >
     <input
@@ -122,6 +153,6 @@ exports[`primitive:<Checkbox> testId 1`] = `
       type="checkbox"
       value=""
     />
-  </ui_checkbox>
+  </div>
 </DocumentFragment>
 `;

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

@@ -4,37 +4,59 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ICON = void 0;
-var _lia = require("react-icons/lia");
-var _md = require("react-icons/md");
+var _LiaMarkdown = require("@react-icons/all-files/lia/LiaMarkdown");
+var _MdCheckCircleOutline = require("@react-icons/all-files/md/MdCheckCircleOutline");
+var _MdErrorOutline = require("@react-icons/all-files/md/MdErrorOutline");
+var _MdOutlineAdd = require("@react-icons/all-files/md/MdOutlineAdd");
+var _MdOutlineArrowBack = require("@react-icons/all-files/md/MdOutlineArrowBack");
+var _MdOutlineArrowDownward = require("@react-icons/all-files/md/MdOutlineArrowDownward");
+var _MdOutlineArrowForward = require("@react-icons/all-files/md/MdOutlineArrowForward");
+var _MdOutlineArrowUpward = require("@react-icons/all-files/md/MdOutlineArrowUpward");
+var _MdOutlineCheck = require("@react-icons/all-files/md/MdOutlineCheck");
+var _MdOutlineClose = require("@react-icons/all-files/md/MdOutlineClose");
+var _MdOutlineExpandLess = require("@react-icons/all-files/md/MdOutlineExpandLess");
+var _MdOutlineExpandMore = require("@react-icons/all-files/md/MdOutlineExpandMore");
+var _MdOutlineFilterList = require("@react-icons/all-files/md/MdOutlineFilterList");
+var _MdOutlineInfo = require("@react-icons/all-files/md/MdOutlineInfo");
+var _MdOutlinePhotoLibrary = require("@react-icons/all-files/md/MdOutlinePhotoLibrary");
+var _MdOutlineRemove = require("@react-icons/all-files/md/MdOutlineRemove");
+var _MdOutlineReplay = require("@react-icons/all-files/md/MdOutlineReplay");
+var _MdOutlineSearch = require("@react-icons/all-files/md/MdOutlineSearch");
+var _MdOutlineVisibility = require("@react-icons/all-files/md/MdOutlineVisibility");
+var _MdOutlineVisibilityOff = require("@react-icons/all-files/md/MdOutlineVisibilityOff");
+var _MdOutlineWarningAmber = require("@react-icons/all-files/md/MdOutlineWarningAmber");
 var ICON = {
   // <Calendar>
-  LEFT: _md.MdOutlineArrowBack,
-  RIGHT: _md.MdOutlineArrowForward,
-  UP: _md.MdOutlineArrowUpward,
-  DOWN: _md.MdOutlineArrowDownward,
+  LEFT: _MdOutlineArrowBack.MdOutlineArrowBack,
+  RIGHT: _MdOutlineArrowForward.MdOutlineArrowForward,
+  UP: _MdOutlineArrowUpward.MdOutlineArrowUpward,
+  DOWN: _MdOutlineArrowDownward.MdOutlineArrowDownward,
   // <Check>
-  CHECK: _md.MdOutlineCheck,
+  CHECK: _MdOutlineCheck.MdOutlineCheck,
   // <InputOption>
-  ADD: _md.MdOutlineAdd,
-  REMOVE: _md.MdOutlineRemove,
+  ADD: _MdOutlineAdd.MdOutlineAdd,
+  REMOVE: _MdOutlineRemove.MdOutlineRemove,
   // <InputSelect>
-  EXPAND_LESS: _md.MdOutlineExpandLess,
-  EXPAND_MORE: _md.MdOutlineExpandMore,
+  EXPAND_LESS: _MdOutlineExpandLess.MdOutlineExpandLess,
+  EXPAND_MORE: _MdOutlineExpandMore.MdOutlineExpandMore,
   // <InputText>
-  SEARCH: _md.MdOutlineSearch,
-  EYE_OPEN: _md.MdOutlineVisibility,
-  EYE_CLOSE: _md.MdOutlineVisibilityOff,
+  SEARCH: _MdOutlineSearch.MdOutlineSearch,
+  EYE_OPEN: _MdOutlineVisibility.MdOutlineVisibility,
+  EYE_CLOSE: _MdOutlineVisibilityOff.MdOutlineVisibilityOff,
   // <Modal>
-  CLOSE: _md.MdOutlineClose,
+  CLOSE: _MdOutlineClose.MdOutlineClose,
   // <Notification> & <InputText>
-  ERROR: _md.MdErrorOutline,
-  INFO: _md.MdOutlineInfo,
-  SUCCESS: _md.MdOutlineCheckCircle,
-  WARNING: _md.MdOutlineWarningAmber,
+  ERROR: _MdErrorOutline.MdErrorOutline,
+  INFO: _MdOutlineInfo.MdOutlineInfo,
+  SUCCESS: _MdCheckCircleOutline.MdCheckCircleOutline,
+  WARNING: _MdOutlineWarningAmber.MdOutlineWarningAmber,
+  // <Slider>
+  PHOTO_LIBRARY: _MdOutlinePhotoLibrary.MdOutlinePhotoLibrary,
+  REPLAY: _MdOutlineReplay.MdOutlineReplay,
   // <Table>
-  FILTER: _md.MdOutlineFilterList,
+  FILTER: _MdOutlineFilterList.MdOutlineFilterList,
   // Filetype
-  MARKDOWN: _lia.LiaMarkdown
+  MARKDOWN: _LiaMarkdown.LiaMarkdown
 };
 exports.ICON = ICON;
 //# sourceMappingURL=Icon.constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.constants.js","names":["ICON","LEFT","RIGHT","UP","DOWN","CHECK","ADD","REMOVE","EXPAND_LESS","EXPAND_MORE","SEARCH","EYE_OPEN","EYE_CLOSE","CLOSE","ERROR","INFO","SUCCESS","WARNING","FILTER","MARKDOWN"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import { LiaMarkdown as MARKDOWN } from 'react-icons/lia';\nimport {\n  // <Calendar>\n  MdOutlineArrowBack as LEFT,\n  MdOutlineArrowForward as RIGHT,\n  MdOutlineArrowUpward as UP,\n  MdOutlineArrowDownward as DOWN,\n  // <InputOption>\n  MdOutlineCheck as CHECK,\n  // <InputNumber>\n  MdOutlineAdd as ADD,\n  MdOutlineRemove as REMOVE,\n  // <InputSelect>\n  MdOutlineExpandLess as EXPAND_LESS,\n  MdOutlineExpandMore as EXPAND_MORE,\n  // <InputText>\n  MdOutlineSearch as SEARCH,\n  MdOutlineVisibility as EYE_OPEN,\n  MdOutlineVisibilityOff as EYE_CLOSE,\n  // <Modal>\n  MdOutlineClose as CLOSE,\n  // <Notification> & <InputText>\n  MdErrorOutline as ERROR,\n  MdOutlineInfo as INFO,\n  MdOutlineCheckCircle as SUCCESS,\n  MdOutlineWarningAmber as WARNING,\n  // <Table>\n  MdOutlineFilterList as FILTER,\n} from 'react-icons/md';\n\nexport const ICON = {\n  // <Calendar>\n  LEFT,\n  RIGHT,\n  UP,\n  DOWN,\n  // <Check>\n  CHECK,\n  // <InputOption>\n  ADD,\n  REMOVE,\n  // <InputSelect>\n  EXPAND_LESS,\n  EXPAND_MORE,\n  // <InputText>\n  SEARCH,\n  EYE_OPEN,\n  EYE_CLOSE,\n  // <Modal>\n  CLOSE,\n  // <Notification> & <InputText>\n  ERROR,\n  INFO,\n  SUCCESS,\n  WARNING,\n  // <Table>\n  FILTER,\n  // Filetype\n  MARKDOWN,\n};\n"],"mappings":";;;;;;AAAA;AACA;AA6BO,IAAMA,IAAI,GAAG;EAClB;EACAC,IAAI,EAAJA,sBAAI;EACJC,KAAK,EAALA,yBAAK;EACLC,EAAE,EAAFA,wBAAE;EACFC,IAAI,EAAJA,0BAAI;EACJ;EACAC,KAAK,EAALA,kBAAK;EACL;EACAC,GAAG,EAAHA,gBAAG;EACHC,MAAM,EAANA,mBAAM;EACN;EACAC,WAAW,EAAXA,uBAAW;EACXC,WAAW,EAAXA,uBAAW;EACX;EACAC,MAAM,EAANA,mBAAM;EACNC,QAAQ,EAARA,uBAAQ;EACRC,SAAS,EAATA,0BAAS;EACT;EACAC,KAAK,EAALA,kBAAK;EACL;EACAC,KAAK,EAALA,kBAAK;EACLC,IAAI,EAAJA,iBAAI;EACJC,OAAO,EAAPA,wBAAO;EACPC,OAAO,EAAPA,yBAAO;EACP;EACAC,MAAM,EAANA,uBAAM;EACN;EACAC,QAAQ,EAARA;AACF,CAAC;AAAC"}
+{"version":3,"file":"Icon.constants.js","names":["ICON","LEFT","RIGHT","UP","DOWN","CHECK","ADD","REMOVE","EXPAND_LESS","EXPAND_MORE","SEARCH","EYE_OPEN","EYE_CLOSE","CLOSE","ERROR","INFO","SUCCESS","WARNING","PHOTO_LIBRARY","REPLAY","FILTER","MARKDOWN"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import { LiaMarkdown as MARKDOWN } from '@react-icons/all-files/lia/LiaMarkdown';\nimport { MdCheckCircleOutline as SUCCESS } from '@react-icons/all-files/md/MdCheckCircleOutline';\nimport { MdErrorOutline as ERROR } from '@react-icons/all-files/md/MdErrorOutline';\nimport { MdOutlineAdd as ADD } from '@react-icons/all-files/md/MdOutlineAdd';\nimport { MdOutlineArrowBack as LEFT } from '@react-icons/all-files/md/MdOutlineArrowBack';\nimport { MdOutlineArrowDownward as DOWN } from '@react-icons/all-files/md/MdOutlineArrowDownward';\nimport { MdOutlineArrowForward as RIGHT } from '@react-icons/all-files/md/MdOutlineArrowForward';\nimport { MdOutlineArrowUpward as UP } from '@react-icons/all-files/md/MdOutlineArrowUpward';\nimport { MdOutlineCheck as CHECK } from '@react-icons/all-files/md/MdOutlineCheck';\nimport { MdOutlineClose as CLOSE } from '@react-icons/all-files/md/MdOutlineClose';\nimport { MdOutlineExpandLess as EXPAND_LESS } from '@react-icons/all-files/md/MdOutlineExpandLess';\nimport { MdOutlineExpandMore as EXPAND_MORE } from '@react-icons/all-files/md/MdOutlineExpandMore';\nimport { MdOutlineFilterList as FILTER } from '@react-icons/all-files/md/MdOutlineFilterList';\nimport { MdOutlineInfo as INFO } from '@react-icons/all-files/md/MdOutlineInfo';\nimport { MdOutlinePhotoLibrary as PHOTO_LIBRARY } from '@react-icons/all-files/md/MdOutlinePhotoLibrary';\nimport { MdOutlineRemove as REMOVE } from '@react-icons/all-files/md/MdOutlineRemove';\nimport { MdOutlineReplay as REPLAY } from '@react-icons/all-files/md/MdOutlineReplay';\nimport { MdOutlineSearch as SEARCH } from '@react-icons/all-files/md/MdOutlineSearch';\nimport { MdOutlineVisibility as EYE_OPEN } from '@react-icons/all-files/md/MdOutlineVisibility';\nimport { MdOutlineVisibilityOff as EYE_CLOSE } from '@react-icons/all-files/md/MdOutlineVisibilityOff';\nimport { MdOutlineWarningAmber as WARNING } from '@react-icons/all-files/md/MdOutlineWarningAmber';\n\nexport const ICON = {\n  // <Calendar>\n  LEFT,\n  RIGHT,\n  UP,\n  DOWN,\n  // <Check>\n  CHECK,\n  // <InputOption>\n  ADD,\n  REMOVE,\n  // <InputSelect>\n  EXPAND_LESS,\n  EXPAND_MORE,\n  // <InputText>\n  SEARCH,\n  EYE_OPEN,\n  EYE_CLOSE,\n  // <Modal>\n  CLOSE,\n  // <Notification> & <InputText>\n  ERROR,\n  INFO,\n  SUCCESS,\n  WARNING,\n  // <Slider>\n  PHOTO_LIBRARY,\n  REPLAY,\n  // <Table>\n  FILTER,\n  // Filetype\n  MARKDOWN,\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,IAAI,GAAG;EAClB;EACAC,IAAI,EAAJA,sCAAI;EACJC,KAAK,EAALA,4CAAK;EACLC,EAAE,EAAFA,0CAAE;EACFC,IAAI,EAAJA,8CAAI;EACJ;EACAC,KAAK,EAALA,8BAAK;EACL;EACAC,GAAG,EAAHA,0BAAG;EACHC,MAAM,EAANA,gCAAM;EACN;EACAC,WAAW,EAAXA,wCAAW;EACXC,WAAW,EAAXA,wCAAW;EACX;EACAC,MAAM,EAANA,gCAAM;EACNC,QAAQ,EAARA,wCAAQ;EACRC,SAAS,EAATA,8CAAS;EACT;EACAC,KAAK,EAALA,8BAAK;EACL;EACAC,KAAK,EAALA,8BAAK;EACLC,IAAI,EAAJA,4BAAI;EACJC,OAAO,EAAPA,0CAAO;EACPC,OAAO,EAAPA,4CAAO;EACP;EACAC,aAAa,EAAbA,4CAAa;EACbC,MAAM,EAANA,gCAAM;EACN;EACAC,MAAM,EAANA,wCAAM;EACN;EACAC,QAAQ,EAARA;AACF,CAAC;AAAC"}

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 = ["action", "headline", "level", "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; }
@@ -20,28 +20,38 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 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; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var Icon = function Icon(_ref) {
-  var action = _ref.action,
+  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: 'icon',
-    className: (0, _helpers.styles)(_IconModule.default.icon, headline ? _IconModule.default["h".concat(level)] : action ? _IconModule.default.action : small ? _IconModule.default.small : paragraph ? _IconModule.default.paragraph : _IconModule.default["h".concat(level)], others.className)
+    tag: 'span',
+    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;
 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","action","headline","level","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 = ({ action, headline, level = 3, paragraph, small, value, ...others }) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      role: others.role || 'icon',\n      tag: 'icon',\n      className: styles(\n        style.icon,\n        headline\n          ? style[`h${level}`]\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : paragraph\n          ? style.paragraph\n          : style[`h${level}`],\n        others.className,\n      ),\n    },\n    value ? React.createElement(value) : undefined,\n  );\n\nIcon.displayName = 'Primitive:Icon';\n\nIcon.propTypes = {\n  action: PropTypes.bool,\n  headline: PropTypes.bool,\n  level: PropTypes.number,\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,QAAQ,QAARA,QAAQ;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAEC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAKC,MAAM;EAAA,oBAC7EC,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,EACVd,QAAQ,GACJa,mBAAK,YAAKZ,KAAK,EAAG,GAClBF,MAAM,GACNc,mBAAK,CAACd,MAAM,GACZI,KAAK,GACLU,mBAAK,CAACV,KAAK,GACXD,SAAS,GACTW,mBAAK,CAACX,SAAS,GACfW,mBAAK,YAAKZ,KAAK,EAAG,EACtBI,MAAM,CAACM,SAAS;EACjB,IAEHP,KAAK,gBAAGE,cAAK,CAACC,aAAa,CAACH,KAAK,CAAC,GAAGW,SAAS,CAC/C;AAAA;AAAC;AAEJjB,IAAI,CAACkB,WAAW,GAAG,gBAAgB;AAEnClB,IAAI,CAACmB,SAAS,GAAG;EACflB,MAAM,EAAEmB,kBAAS,CAACC,IAAI;EACtBnB,QAAQ,EAAEkB,kBAAS,CAACC,IAAI;EACxBlB,KAAK,EAAEiB,kBAAS,CAACE,MAAM;EACvBlB,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

@@ -2,32 +2,44 @@
   display: block;
 }
 
-.h1 {
-  font-size: var(--mirai-ui-font-size-headline-1);
-  height: var(--mirai-ui-font-size-headline-1);
-  line-height: var(--mirai-ui-font-size-headline-1);
-  width: var(--mirai-ui-font-size-headline-1);
+.accent {
+  color: var(--mirai-ui-accent);
 }
 
-.h2 {
+.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-space-XL);
+  height: var(--mirai-ui-space-XL);
+  line-height: var(--mirai-ui-space-XL);
+  width: var(--mirai-ui-space-XL);
+}
+
+.headline-2 {
   font-size: var(--mirai-ui-font-size-headline-2);
   height: var(--mirai-ui-font-size-headline-2);
   line-height: var(--mirai-ui-font-size-headline-2);
   width: var(--mirai-ui-font-size-headline-2);
 }
 
-.h3 {
+.headline-3 {
   font-size: var(--mirai-ui-font-size-headline-3);
   height: var(--mirai-ui-font-size-headline-3);
   line-height: var(--mirai-ui-font-size-headline-3);
   width: var(--mirai-ui-font-size-headline-3);
 }
 
-.h4 {
-  font-size: var(--mirai-ui-font-size-headline-4);
-  height: var(--mirai-ui-font-size-headline-4);
-  line-height: var(--mirai-ui-font-size-headline-4);
-  width: var(--mirai-ui-font-size-headline-4);
+.lighten {
+  color: var(--mirai-ui-content-light);
 }
 
 .paragraph {
@@ -37,16 +49,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

@@ -25,12 +25,17 @@ var Story = function Story(_ref) {
 exports.Story = Story;
 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","action","headline","level","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  action: false,\n  headline: false,\n  level: 3,\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,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;EACZT,KAAK,EAAEU,SAAS;EAChB;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDb,KAAK,CAACc,QAAQ,GAAG;EACfb,KAAK,EAAE;IACLc,OAAO,EAAEC,MAAM,CAACC,IAAI,CAACd,MAAI,CAAC;IAC1Be,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAEJ,MAAM,CAACC,IAAI,CAACd,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"}