@mirai/ui 1.0.59 → 1.0.60

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

@@ -5,40 +5,40 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ICONS = void 0;
 
-var _fi = require("react-icons/fi");
-
 var _md = require("react-icons/md");
 
 var ICONS = {
-  Empty: undefined,
-  Account: _md.MdOutlineAccountCircle,
-  // directions
-  Left: _fi.FiArrowLeft,
-  Right: _fi.FiArrowRight,
-  Up: _fi.FiArrowUp,
-  Down: _fi.FiArrowDown,
-  // Close
-  Close: _fi.FiX,
-  CloseArrow: _fi.FiChevronDown,
-  // Calc
-  Plus: _fi.FiPlus,
-  Minus: _fi.FiMinus,
-  // Eye
-  EyeOpen: _fi.FiEye,
-  EyeClose: _fi.FiEyeOff,
-  // Check
-  Check: _fi.FiCheck,
-  // Notification,
-  Error: _md.MdError,
-  Info: _md.MdInfo,
-  Success: _md.MdCheckCircle,
-  Warning: _md.MdWarning,
-  // Finder
-  Bed: _md.MdBed,
+  // <Calendar>
+  Left: _md.MdOutlineArrowBack,
+  Right: _md.MdOutlineArrowForward,
+  Up: _md.MdOutlineArrowUpward,
+  Down: _md.MdOutlineArrowDownward,
+  // <Check>
+  Check: _md.MdOutlineCheck,
+  // <InputOption>
+  Add: _md.MdOutlineAdd,
+  Remove: _md.MdOutlineRemove,
+  // <InputSelect>
+  ExpandLess: _md.MdOutlineExpandLess,
+  ExpandMore: _md.MdOutlineExpandMore,
+  // <InputText>
+  EyeOpen: _md.MdOutlineVisibility,
+  EyeClose: _md.MdOutlineVisibilityOff,
+  // <Modal>
+  Close: _md.MdOutlineClose,
+  // <Notification> & <InputText>
+  Error: _md.MdOutlineError,
+  Info: _md.MdOutlineInfo,
+  Success: _md.MdOutlineCheckCircle,
+  Warning: _md.MdOutlineWarning,
+  // @mirai/finder
+  List: _md.MdOutlineListAlt,
+  Lock: _md.MdOutlineLock,
+  Bed: _md.MdOutlineBed,
   Calendar: _md.MdOutlineCalendarToday,
-  List: _md.MdListAlt,
-  Lock: _md.MdLockOutline,
-  Person: _md.MdOutlinePersonOutline
+  Person: _md.MdOutlinePerson,
+  // @mirai/user
+  Account: _md.MdOutlineAccountCircle
 };
 exports.ICONS = ICONS;
 //# sourceMappingURL=Icon.constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.constants.js","names":["ICONS","Empty","undefined","Account","Left","Right","Up","Down","Close","CloseArrow","Plus","Minus","EyeOpen","EyeClose","Check","Error","Info","Success","Warning","Bed","Calendar","List","Lock","Person"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import {\n  // directions\n  FiArrowUp as Up,\n  FiArrowDown as Down,\n  FiArrowLeft as Left,\n  FiArrowRight as Right,\n  // Close\n  FiChevronDown as CloseArrow,\n  FiX as Close,\n  // Calc\n  FiMinus as Minus,\n  FiPlus as Plus,\n  // Eye\n  FiEye as EyeOpen,\n  FiEyeOff as EyeClose,\n  // Check\n  FiCheck as Check,\n  // User\n} from 'react-icons/fi';\nimport {\n  MdOutlineAccountCircle as Account,\n  MdBed as Bed,\n  MdOutlineCalendarToday as Calendar,\n  MdListAlt as List,\n  MdLockOutline as Lock,\n  MdOutlinePersonOutline as Person,\n\n  // Notification\n  MdError as Error,\n  MdInfo as Info,\n  MdCheckCircle as Success,\n  MdWarning as Warning,\n} from 'react-icons/md';\n\nconst ICONS = {\n  Empty: undefined,\n  Account,\n  // directions\n  Left,\n  Right,\n  Up,\n  Down,\n  // Close\n  Close,\n  CloseArrow,\n  // Calc\n  Plus,\n  Minus,\n  // Eye\n  EyeOpen,\n  EyeClose,\n  // Check\n  Check,\n  // Notification,\n  Error,\n  Info,\n  Success,\n  Warning,\n  // Finder\n  Bed,\n  Calendar,\n  List,\n  Lock,\n  Person,\n};\n\nexport { ICONS };\n"],"mappings":";;;;;;;AAAA;;AAmBA;;AAeA,IAAMA,KAAK,GAAG;EACZC,KAAK,EAAEC,SADK;EAEZC,OAAO,EAAPA,0BAFY;EAGZ;EACAC,IAAI,EAAJA,eAJY;EAKZC,KAAK,EAALA,gBALY;EAMZC,EAAE,EAAFA,aANY;EAOZC,IAAI,EAAJA,eAPY;EAQZ;EACAC,KAAK,EAALA,OATY;EAUZC,UAAU,EAAVA,iBAVY;EAWZ;EACAC,IAAI,EAAJA,UAZY;EAaZC,KAAK,EAALA,WAbY;EAcZ;EACAC,OAAO,EAAPA,SAfY;EAgBZC,QAAQ,EAARA,YAhBY;EAiBZ;EACAC,KAAK,EAALA,WAlBY;EAmBZ;EACAC,KAAK,EAALA,WApBY;EAqBZC,IAAI,EAAJA,UArBY;EAsBZC,OAAO,EAAPA,iBAtBY;EAuBZC,OAAO,EAAPA,aAvBY;EAwBZ;EACAC,GAAG,EAAHA,SAzBY;EA0BZC,QAAQ,EAARA,0BA1BY;EA2BZC,IAAI,EAAJA,aA3BY;EA4BZC,IAAI,EAAJA,iBA5BY;EA6BZC,MAAM,EAANA;AA7BY,CAAd"}
+{"version":3,"file":"Icon.constants.js","names":["ICONS","Left","Right","Up","Down","Check","Add","Remove","ExpandLess","ExpandMore","EyeOpen","EyeClose","Close","Error","Info","Success","Warning","List","Lock","Bed","Calendar","Person","Account"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import {\n  // <Calendar>\n  MdOutlineArrowBack as Left,\n  MdOutlineArrowForward as Right,\n  MdOutlineArrowDownward as Down,\n  MdOutlineArrowUpward as Up,\n  // <InputOption>\n  MdOutlineCheck as Check,\n  // <InputNumber>\n  MdOutlineAdd as Add,\n  MdOutlineRemove as Remove,\n  // <InputSelect>\n  MdOutlineExpandLess as ExpandLess,\n  MdOutlineExpandMore as ExpandMore,\n  // <InputText>\n  MdOutlineVisibility as EyeOpen,\n  MdOutlineVisibilityOff as EyeClose,\n  // <Modal>\n  MdOutlineClose as Close,\n  // <Notification> & <InputText>\n  MdOutlineError as Error,\n  MdOutlineInfo as Info,\n  MdOutlineCheckCircle as Success,\n  MdOutlineWarning as Warning,\n  // @mirai/finder\n  MdOutlineListAlt as List,\n  MdOutlineLock as Lock,\n  MdOutlineBed as Bed,\n  MdOutlineCalendarToday as Calendar,\n  MdOutlinePerson as Person,\n  // @mirai/user\n  MdOutlineAccountCircle as Account,\n} from 'react-icons/md';\n\nconst ICONS = {\n  // <Calendar>\n  Left,\n  Right,\n  Up,\n  Down,\n  // <Check>\n  Check,\n  // <InputOption>\n  Add,\n  Remove,\n  // <InputSelect>\n  ExpandLess,\n  ExpandMore,\n  // <InputText>\n  EyeOpen,\n  EyeClose,\n  // <Modal>\n  Close,\n  // <Notification> & <InputText>\n  Error,\n  Info,\n  Success,\n  Warning,\n  // @mirai/finder\n  List,\n  Lock,\n  Bed,\n  Calendar,\n  Person,\n  // @mirai/user\n  Account,\n};\n\nexport { ICONS };\n"],"mappings":";;;;;;;AAAA;;AAkCA,IAAMA,KAAK,GAAG;EACZ;EACAC,IAAI,EAAJA,sBAFY;EAGZC,KAAK,EAALA,yBAHY;EAIZC,EAAE,EAAFA,wBAJY;EAKZC,IAAI,EAAJA,0BALY;EAMZ;EACAC,KAAK,EAALA,kBAPY;EAQZ;EACAC,GAAG,EAAHA,gBATY;EAUZC,MAAM,EAANA,mBAVY;EAWZ;EACAC,UAAU,EAAVA,uBAZY;EAaZC,UAAU,EAAVA,uBAbY;EAcZ;EACAC,OAAO,EAAPA,uBAfY;EAgBZC,QAAQ,EAARA,0BAhBY;EAiBZ;EACAC,KAAK,EAALA,kBAlBY;EAmBZ;EACAC,KAAK,EAALA,kBApBY;EAqBZC,IAAI,EAAJA,iBArBY;EAsBZC,OAAO,EAAPA,wBAtBY;EAuBZC,OAAO,EAAPA,oBAvBY;EAwBZ;EACAC,IAAI,EAAJA,oBAzBY;EA0BZC,IAAI,EAAJA,iBA1BY;EA2BZC,GAAG,EAAHA,gBA3BY;EA4BZC,QAAQ,EAARA,0BA5BY;EA6BZC,MAAM,EAANA,mBA7BY;EA8BZ;EACAC,OAAO,EAAPA;AA/BY,CAAd"}

package/build/primitives/Icon/Icon.js

@@ -15,7 +15,7 @@ var _Icon = require("./Icon.constants");
 
 var _IconModule = _interopRequireDefault(require("./Icon.module.css"));
 
-var _excluded = ["action", "headline", "level", "name", "small"];
+var _excluded = ["action", "headline", "level", "name", "paragraph", "small"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -35,11 +35,12 @@ var Icon = function Icon(_ref) {
       _ref$level = _ref.level,
       level = _ref$level === void 0 ? 3 : _ref$level,
       name = _ref.name,
+      paragraph = _ref.paragraph,
       small = _ref.small,
       others = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement('span', _objectSpread(_objectSpread({}, others), {}, {
-    className: (0, _helpers.styles)(_IconModule.default.icon, headline ? _IconModule.default["headline-".concat(level)] : action ? _IconModule.default.action : small ? _IconModule.default.small : _IconModule.default.paragraph, others.className)
+    className: (0, _helpers.styles)(_IconModule.default.icon, headline ? _IconModule.default["headline-".concat(level)] : action ? _IconModule.default.action : small ? _IconModule.default.small : paragraph ? _IconModule.default.paragraph : _IconModule.default["headline-".concat(level)], others.className)
   }), _Icon.ICONS[name] ? /*#__PURE__*/_react.default.createElement(_Icon.ICONS[name]) : undefined);
 };
 
@@ -50,6 +51,7 @@ Icon.propTypes = {
   headline: _propTypes.default.bool,
   level: _propTypes.default.number,
   name: _propTypes.default.oneOf(Object.keys(_Icon.ICONS)).isRequired,
+  paragraph: _propTypes.default.bool,
   small: _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","name","small","others","React","createElement","className","style","icon","paragraph","ICONS","undefined","displayName","propTypes","PropTypes","bool","number","oneOf","Object","keys","isRequired"],"sources":["../../../src/primitives/Icon/Icon.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { ICONS } from './Icon.constants';\nimport style from './Icon.module.css';\n\nconst Icon = ({ action, headline, level = 3, name, small, ...others }) =>\n  React.createElement(\n    'span',\n    {\n      ...others,\n      className: styles(\n        style.icon,\n        headline ? style[`headline-${level}`] : action ? style.action : small ? style.small : style.paragraph,\n        others.className,\n      ),\n    },\n    ICONS[name] ? React.createElement(ICONS[name]) : undefined,\n  );\n\nIcon.displayName = 'Primitive:Icon';\n\nIcon.propTypes = {\n  action: PropTypes.bool,\n  headline: PropTypes.bool,\n  level: PropTypes.number,\n  name: PropTypes.oneOf(Object.keys(ICONS)).isRequired,\n  small: PropTypes.bool,\n};\n\nexport { Icon };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO;EAAA,IAAGC,MAAH,QAAGA,MAAH;EAAA,IAAWC,QAAX,QAAWA,QAAX;EAAA,sBAAqBC,KAArB;EAAA,IAAqBA,KAArB,2BAA6B,CAA7B;EAAA,IAAgCC,IAAhC,QAAgCA,IAAhC;EAAA,IAAsCC,KAAtC,QAAsCA,KAAtC;EAAA,IAAgDC,MAAhD;;EAAA,oBACXC,eAAMC,aAAN,CACE,MADF,kCAGOF,MAHP;IAIIG,SAAS,EAAE,qBACTC,oBAAMC,IADG,EAETT,QAAQ,GAAGQ,uCAAkBP,KAAlB,EAAH,GAAgCF,MAAM,GAAGS,oBAAMT,MAAT,GAAkBI,KAAK,GAAGK,oBAAML,KAAT,GAAiBK,oBAAME,SAFnF,EAGTN,MAAM,CAACG,SAHE;EAJf,IAUEI,YAAMT,IAAN,iBAAcG,eAAMC,aAAN,CAAoBK,YAAMT,IAAN,CAApB,CAAd,GAAiDU,SAVnD,CADW;AAAA,CAAb;;;AAcAd,IAAI,CAACe,WAAL,GAAmB,gBAAnB;AAEAf,IAAI,CAACgB,SAAL,GAAiB;EACff,MAAM,EAAEgB,mBAAUC,IADH;EAEfhB,QAAQ,EAAEe,mBAAUC,IAFL;EAGff,KAAK,EAAEc,mBAAUE,MAHF;EAIff,IAAI,EAAEa,mBAAUG,KAAV,CAAgBC,MAAM,CAACC,IAAP,CAAYT,WAAZ,CAAhB,EAAoCU,UAJ3B;EAKflB,KAAK,EAAEY,mBAAUC;AALF,CAAjB"}
+{"version":3,"file":"Icon.js","names":["Icon","action","headline","level","name","paragraph","small","others","React","createElement","className","style","icon","ICONS","undefined","displayName","propTypes","PropTypes","bool","number","oneOf","Object","keys","isRequired"],"sources":["../../../src/primitives/Icon/Icon.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { ICONS } from './Icon.constants';\nimport style from './Icon.module.css';\n\nconst Icon = ({ action, headline, level = 3, name, paragraph, small, ...others }) =>\n  React.createElement(\n    'span',\n    {\n      ...others,\n      className: styles(\n        style.icon,\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        others.className,\n      ),\n    },\n    ICONS[name] ? React.createElement(ICONS[name]) : undefined,\n  );\n\nIcon.displayName = 'Primitive:Icon';\n\nIcon.propTypes = {\n  action: PropTypes.bool,\n  headline: PropTypes.bool,\n  level: PropTypes.number,\n  name: PropTypes.oneOf(Object.keys(ICONS)).isRequired,\n  paragraph: PropTypes.bool,\n  small: PropTypes.bool,\n};\n\nexport { Icon };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO;EAAA,IAAGC,MAAH,QAAGA,MAAH;EAAA,IAAWC,QAAX,QAAWA,QAAX;EAAA,sBAAqBC,KAArB;EAAA,IAAqBA,KAArB,2BAA6B,CAA7B;EAAA,IAAgCC,IAAhC,QAAgCA,IAAhC;EAAA,IAAsCC,SAAtC,QAAsCA,SAAtC;EAAA,IAAiDC,KAAjD,QAAiDA,KAAjD;EAAA,IAA2DC,MAA3D;;EAAA,oBACXC,eAAMC,aAAN,CACE,MADF,kCAGOF,MAHP;IAIIG,SAAS,EAAE,qBACTC,oBAAMC,IADG,EAETV,QAAQ,GACJS,uCAAkBR,KAAlB,EADI,GAEJF,MAAM,GACNU,oBAAMV,MADA,GAENK,KAAK,GACLK,oBAAML,KADD,GAELD,SAAS,GACTM,oBAAMN,SADG,GAETM,uCAAkBR,KAAlB,EAVK,EAWTI,MAAM,CAACG,SAXE;EAJf,IAkBEG,YAAMT,IAAN,iBAAcI,eAAMC,aAAN,CAAoBI,YAAMT,IAAN,CAApB,CAAd,GAAiDU,SAlBnD,CADW;AAAA,CAAb;;;AAsBAd,IAAI,CAACe,WAAL,GAAmB,gBAAnB;AAEAf,IAAI,CAACgB,SAAL,GAAiB;EACff,MAAM,EAAEgB,mBAAUC,IADH;EAEfhB,QAAQ,EAAEe,mBAAUC,IAFL;EAGff,KAAK,EAAEc,mBAAUE,MAHF;EAIff,IAAI,EAAEa,mBAAUG,KAAV,CAAgBC,MAAM,CAACC,IAAP,CAAYT,WAAZ,CAAhB,EAAoCU,UAJ3B;EAKflB,SAAS,EAAEY,mBAAUC,IALN;EAMfZ,KAAK,EAAEW,mBAAUC;AANF,CAAjB"}

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

@@ -9,19 +9,30 @@ exports.default = exports.Story = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
+var _View = require("../View");
+
 var _ = require("./");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || 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: 'Primitives'
 };
 exports.default = _default;
 
 var Story = function Story(props) {
-  return /*#__PURE__*/React.createElement(_.Icon, props);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_.Icon, props), /*#__PURE__*/React.createElement(_View.View, {
+    row: true
+  }, Object.keys(_.ICONS).map(function (name) {
+    return /*#__PURE__*/React.createElement(_.Icon, _extends({}, props, {
+      name: name,
+      key: name
+    }));
+  })));
 };
 
 exports.Story = Story;
@@ -31,6 +42,7 @@ Story.args = {
   headline: false,
   level: 3,
   name: 'EyeOpen',
+  paragraph: false,
   small: false
 };
 Story.argTypes = {

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.js","names":["title","Story","props","storyName","args","action","headline","level","name","small","argTypes","options","Object","keys","ICONS","control","type","defaultValue"],"sources":["../../../src/primitives/Icon/Icon.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Icon, ICONS } from './';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => <Icon {...props} />;\n\nStory.storyName = 'Icon';\n\nStory.args = {\n  action: false,\n  headline: false,\n  level: 3,\n  name: 'EyeOpen',\n  small: false,\n};\n\nStory.argTypes = {\n  name: {\n    options: Object.keys(ICONS),\n    control: { type: 'select' },\n    defaultValue: 'EyeOpen',\n  },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBAAW,oBAAC,MAAD,EAAUA,KAAV,CAAX;AAAA,CAAd;;;AAEPD,KAAK,CAACE,SAAN,GAAkB,MAAlB;AAEAF,KAAK,CAACG,IAAN,GAAa;EACXC,MAAM,EAAE,KADG;EAEXC,QAAQ,EAAE,KAFC;EAGXC,KAAK,EAAE,CAHI;EAIXC,IAAI,EAAE,SAJK;EAKXC,KAAK,EAAE;AALI,CAAb;AAQAR,KAAK,CAACS,QAAN,GAAiB;EACfF,IAAI,EAAE;IACJG,OAAO,EAAEC,MAAM,CAACC,IAAP,CAAYC,OAAZ,CADL;IAEJC,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAR,CAFL;IAGJC,YAAY,EAAE;EAHV;AADS,CAAjB"}
+{"version":3,"file":"Icon.stories.js","names":["title","Story","props","Object","keys","ICONS","map","name","storyName","args","action","headline","level","paragraph","small","argTypes","options","control","type","defaultValue"],"sources":["../../../src/primitives/Icon/Icon.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { View } from '../View';\nimport { Icon, ICONS } from './';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => (\n  <>\n    <Icon {...props} />\n    <View row>\n      {Object.keys(ICONS).map((name) => (\n        <Icon {...props} name={name} key={name} />\n      ))}\n    </View>\n  </>\n);\n\nStory.storyName = 'Icon';\n\nStory.args = {\n  action: false,\n  headline: false,\n  level: 3,\n  name: 'EyeOpen',\n  paragraph: false,\n  small: false,\n};\n\nStory.argTypes = {\n  name: {\n    options: Object.keys(ICONS),\n    control: { type: 'select' },\n    defaultValue: 'EyeOpen',\n  },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBACnB,uDACE,oBAAC,MAAD,EAAUA,KAAV,CADF,eAEE,oBAAC,UAAD;IAAM,GAAG;EAAT,GACGC,MAAM,CAACC,IAAP,CAAYC,OAAZ,EAAmBC,GAAnB,CAAuB,UAACC,IAAD;IAAA,oBACtB,oBAAC,MAAD,eAAUL,KAAV;MAAiB,IAAI,EAAEK,IAAvB;MAA6B,GAAG,EAAEA;IAAlC,GADsB;EAAA,CAAvB,CADH,CAFF,CADmB;AAAA,CAAd;;;AAWPN,KAAK,CAACO,SAAN,GAAkB,MAAlB;AAEAP,KAAK,CAACQ,IAAN,GAAa;EACXC,MAAM,EAAE,KADG;EAEXC,QAAQ,EAAE,KAFC;EAGXC,KAAK,EAAE,CAHI;EAIXL,IAAI,EAAE,SAJK;EAKXM,SAAS,EAAE,KALA;EAMXC,KAAK,EAAE;AANI,CAAb;AASAb,KAAK,CAACc,QAAN,GAAiB;EACfR,IAAI,EAAE;IACJS,OAAO,EAAEb,MAAM,CAACC,IAAP,CAAYC,OAAZ,CADL;IAEJY,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAR,CAFL;IAGJC,YAAY,EAAE;EAHV;AADS,CAAjB"}

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

@@ -3,27 +3,23 @@
 exports[`primitive:<Icon> inherit:className 1`] = `
 <DocumentFragment>
   <span
-    class="icon paragraph mirai"
+    class="icon headline-3 mirai"
   >
     <svg
-      fill="none"
+      fill="currentColor"
       height="1em"
       stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
+      stroke-width="0"
       viewBox="0 0 24 24"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <line
-        x1="19"
-        x2="5"
-        y1="12"
-        y2="12"
+      <path
+        d="M0 0h24v24H0V0z"
+        fill="none"
       />
-      <polyline
-        points="12 19 5 12 12 5"
+      <path
+        d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
   </span>
@@ -33,7 +29,7 @@ exports[`primitive:<Icon> inherit:className 1`] = `
 exports[`primitive:<Icon> prop:name (invalid) 1`] = `
 <DocumentFragment>
   <span
-    class="icon paragraph"
+    class="icon headline-3"
   />
 </DocumentFragment>
 `;
@@ -41,30 +37,23 @@ exports[`primitive:<Icon> prop:name (invalid) 1`] = `
 exports[`primitive:<Icon> prop:name 1`] = `
 <DocumentFragment>
   <span
-    class="icon paragraph"
+    class="icon headline-3"
   >
     <svg
-      fill="none"
+      fill="currentColor"
       height="1em"
       stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
+      stroke-width="0"
       viewBox="0 0 24 24"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <line
-        x1="18"
-        x2="6"
-        y1="6"
-        y2="18"
+      <path
+        d="M0 0h24v24H0V0z"
+        fill="none"
       />
-      <line
-        x1="6"
-        x2="18"
-        y1="6"
-        y2="18"
+      <path
+        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
       />
     </svg>
   </span>
@@ -74,27 +63,23 @@ exports[`primitive:<Icon> prop:name 1`] = `
 exports[`primitive:<Icon> renders 1`] = `
 <DocumentFragment>
   <span
-    class="icon paragraph"
+    class="icon headline-3"
   >
     <svg
-      fill="none"
+      fill="currentColor"
       height="1em"
       stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
+      stroke-width="0"
       viewBox="0 0 24 24"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <line
-        x1="19"
-        x2="5"
-        y1="12"
-        y2="12"
+      <path
+        d="M0 0h24v24H0V0z"
+        fill="none"
       />
-      <polyline
-        points="12 19 5 12 12 5"
+      <path
+        d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
   </span>
@@ -104,28 +89,24 @@ exports[`primitive:<Icon> renders 1`] = `
 exports[`primitive:<Icon> testID 1`] = `
 <DocumentFragment>
   <span
-    class="icon paragraph"
+    class="icon headline-3"
     data-testid="mirai"
   >
     <svg
-      fill="none"
+      fill="currentColor"
       height="1em"
       stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
+      stroke-width="0"
       viewBox="0 0 24 24"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <line
-        x1="19"
-        x2="5"
-        y1="12"
-        y2="12"
+      <path
+        d="M0 0h24v24H0V0z"
+        fill="none"
       />
-      <polyline
-        points="12 19 5 12 12 5"
+      <path
+        d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
   </span>

package/build/primitives/Switch/Switch.module.css

@@ -47,9 +47,16 @@
 
 .switch input:disabled + .area {
   background-color: var(--mirai-ui-switch-disabled);
+  cursor: default;
 }
 
 .switch input:checked + .area .toggle {
   left: calc(100% - var(--mirai-ui-switch-border-size));
   transform: translateX(-100%);
 }
+
+@media only screen and (min-width: 600px) {
+  .switch:hover input:not(:disabled) + .area {
+    background-color: var(--mirai-ui-switch-color-hover);
+  }
+}

package/build/theme/default.theme.css

@@ -1,3 +1,9 @@
+/*
+  ! TODO: Review state: {namespace}-{subject}-{property}-{state}
+  EX: --mirai-ui-button-background-hover:
+      --mirai-ui-button-secondary-background-hover
+*/
+
 :root {
   /* typography */
   --mirai-ui-font: Arial, Regular;
@@ -13,7 +19,7 @@
   --mirai-ui-line-height-headline-3: 22px;
   --mirai-ui-font-size-headline-4: 16px;
   --mirai-ui-line-height-headline-4: 19px;
-  --mirai-ui-font-size-paragraph: 14px;
+  --mirai-ui-font-size-paragraph: 16px;
   --mirai-ui-line-height-paragraph: 22px;
   --mirai-ui-font-size-action: 14px;
   --mirai-ui-line-height-action: 20px;
@@ -91,9 +97,9 @@
   --mirai-ui-shadow: 0 0 var(--mirai-ui-space-XS) var(--mirai-ui-content-border);
 }
 
-/* ------------- ------------------------------------------------------------ */
+/* -------------------------------------------------------------------------- */
 /* -- PRIMITIVES ------------------------------------------------------------ */
-/* ------------- ------------------------------------------------------------ */
+/* -------------------------------------------------------------------------- */
 :root {
   /* Checkbox */
   --mirai-ui-checkbox-base: var(--mirai-ui-base);
@@ -136,6 +142,7 @@
   --mirai-ui-switch-border-radius: var(--mirai-ui-space-L);
   --mirai-ui-switch-checked: var(--mirai-ui-accent);
   --mirai-ui-switch-disabled: var(--mirai-ui-content-border);
+  --mirai-ui-switch-color-hover: var(--mirai-ui-content);
   --mirai-ui-switch-size: var(--mirai-ui-space-L);
 
   /* Text */
@@ -143,16 +150,17 @@
   /* View */
 }
 
-/* ------------- ------------------------------------------------------------ */
+/* -------------------------------------------------------------------------- */
 /* -- COMPONENTS ------------------------------------------------------------ */
-/* ------------- ------------------------------------------------------------ */
+/* -------------------------------------------------------------------------- */
 :root {
+  /* Button */
   --mirai-ui-button-background: var(--mirai-ui-accent);
   --mirai-ui-button-busy-width: 0%;
   --mirai-ui-button-busy-motion: calc(var(--mirai-ui-motion-expand) * 10);
   --mirai-ui-button-color: var(--mirai-ui-base);
   --mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
-  --mirai-ui-button-color-focus: var(--mirai-ui-content);
+  --mirai-ui-button-color-hover: var(--mirai-ui-content);
   --mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
   --mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
   --mirai-ui-button-font: var(--mirai-ui-font);
@@ -193,7 +201,7 @@
   --mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
   --mirai-ui-input-text-error: var(--mirai-ui-error);
   --mirai-ui-input-text-focus: var(--mirai-ui-content);
-  --mirai-ui-input-text-icon: var(--mirai-ui-font-size-headline-4);
+  --mirai-ui-input-text-icon: var(--mirai-ui-font-size-headline-3);
   --mirai-ui-input-text-padding-x: var(--mirai-ui-space-S);
   --mirai-ui-input-text-padding-y: var(--mirai-ui-space-S);
   --mirai-ui-input-text-radius: var(--mirai-ui-border-radius);

package/package.json

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