@mirai/ui 1.0.61 → 1.0.62

package/build/components/Notification/Notification.js

@@ -45,12 +45,13 @@ var Notification = function Notification(_ref) {
       success: success,
       warning: warning
     }),
-    paragraph: small
+    paragraph: small,
+    className: (0, _helpers.styles)(_NotificationModule.default.icon, small && _NotificationModule.default.small)
   }), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     small: small,
     className: (0, _helpers.styles)(_NotificationModule.default.text, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : undefined)
   }, children), onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    className: _NotificationModule.default.pressable,
+    className: (0, _helpers.styles)(_NotificationModule.default.pressable, _NotificationModule.default.icon, small && _NotificationModule.default.small),
     onPress: onClose
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: _primitives.ICON.CLOSE,

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","names":["Notification","children","error","inline","small","success","warning","onClose","others","style","notification","undefined","outlined","className","text","pressable","ICON","CLOSE","displayName","propTypes","PropTypes","string","isRequired","bool","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getIconState, styles } from '../../helpers';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({ children, error, inline = false, small, success, warning, onClose, ...others }) => (\n  <View\n    {...others}\n    row\n    className={styles(\n      style.notification,\n      error ? style.error : warning ? style.warning : success ? style.success : undefined,\n      inline ? style.inline : style.outlined,\n      inline && style.inline,\n      small && style.small,\n      others.className,\n    )}\n  >\n    <Icon value={getIconState({ error, success, warning })} paragraph={small} />\n    <Text\n      small={small}\n      className={styles(\n        style.text,\n        error ? style.error : warning ? style.warning : success ? style.success : undefined,\n      )}\n    >\n      {children}\n    </Text>\n    {onClose && (\n      <Pressable className={style.pressable} onPress={onClose}>\n        <Icon value={ICON.CLOSE} paragraph={small} />\n      </Pressable>\n    )}\n  </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n  children: PropTypes.string.isRequired,\n  error: PropTypes.bool,\n  inline: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  warning: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe;EAAA,IAAGC,QAAH,QAAGA,QAAH;EAAA,IAAaC,KAAb,QAAaA,KAAb;EAAA,uBAAoBC,MAApB;EAAA,IAAoBA,MAApB,4BAA6B,KAA7B;EAAA,IAAoCC,KAApC,QAAoCA,KAApC;EAAA,IAA2CC,OAA3C,QAA2CA,OAA3C;EAAA,IAAoDC,OAApD,QAAoDA,OAApD;EAAA,IAA6DC,OAA7D,QAA6DA,OAA7D;EAAA,IAAyEC,MAAzE;;EAAA,oBACnB,6BAAC,gBAAD,eACMA,MADN;IAEE,GAAG,MAFL;IAGE,SAAS,EAAE,qBACTC,4BAAMC,YADG,EAETR,KAAK,GAAGO,4BAAMP,KAAT,GAAiBI,OAAO,GAAGG,4BAAMH,OAAT,GAAmBD,OAAO,GAAGI,4BAAMJ,OAAT,GAAmBM,SAFjE,EAGTR,MAAM,GAAGM,4BAAMN,MAAT,GAAkBM,4BAAMG,QAHrB,EAITT,MAAM,IAAIM,4BAAMN,MAJP,EAKTC,KAAK,IAAIK,4BAAML,KALN,EAMTI,MAAM,CAACK,SANE;EAHb,iBAYE,6BAAC,gBAAD;IAAM,KAAK,EAAE,2BAAa;MAAEX,KAAK,EAALA,KAAF;MAASG,OAAO,EAAPA,OAAT;MAAkBC,OAAO,EAAPA;IAAlB,CAAb,CAAb;IAAwD,SAAS,EAAEF;EAAnE,EAZF,eAaE,6BAAC,gBAAD;IACE,KAAK,EAAEA,KADT;IAEE,SAAS,EAAE,qBACTK,4BAAMK,IADG,EAETZ,KAAK,GAAGO,4BAAMP,KAAT,GAAiBI,OAAO,GAAGG,4BAAMH,OAAT,GAAmBD,OAAO,GAAGI,4BAAMJ,OAAT,GAAmBM,SAFjE;EAFb,GAOGV,QAPH,CAbF,EAsBGM,OAAO,iBACN,6BAAC,qBAAD;IAAW,SAAS,EAAEE,4BAAMM,SAA5B;IAAuC,OAAO,EAAER;EAAhD,gBACE,6BAAC,gBAAD;IAAM,KAAK,EAAES,iBAAKC,KAAlB;IAAyB,SAAS,EAAEb;EAApC,EADF,CAvBJ,CADmB;AAAA,CAArB;;;AA+BAJ,YAAY,CAACkB,WAAb,GAA2B,wBAA3B;AAEAlB,YAAY,CAACmB,SAAb,GAAyB;EACvBlB,QAAQ,EAAEmB,mBAAUC,MAAV,CAAiBC,UADJ;EAEvBpB,KAAK,EAAEkB,mBAAUG,IAFM;EAGvBpB,MAAM,EAAEiB,mBAAUG,IAHK;EAIvBnB,KAAK,EAAEgB,mBAAUG,IAJM;EAKvBlB,OAAO,EAAEe,mBAAUG,IALI;EAMvBjB,OAAO,EAAEc,mBAAUG,IANI;EAOvBhB,OAAO,EAAEa,mBAAUI;AAPI,CAAzB"}
+{"version":3,"file":"Notification.js","names":["Notification","children","error","inline","small","success","warning","onClose","others","style","notification","undefined","outlined","className","icon","text","pressable","ICON","CLOSE","displayName","propTypes","PropTypes","string","isRequired","bool","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getIconState, styles } from '../../helpers';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({ children, error, inline = false, small, success, warning, onClose, ...others }) => (\n  <View\n    {...others}\n    row\n    className={styles(\n      style.notification,\n      error ? style.error : warning ? style.warning : success ? style.success : undefined,\n      inline ? style.inline : style.outlined,\n      inline && style.inline,\n      small && style.small,\n      others.className,\n    )}\n  >\n    <Icon\n      value={getIconState({ error, success, warning })}\n      paragraph={small}\n      className={styles(style.icon, small && style.small)}\n    />\n    <Text\n      small={small}\n      className={styles(\n        style.text,\n        error ? style.error : warning ? style.warning : success ? style.success : undefined,\n      )}\n    >\n      {children}\n    </Text>\n    {onClose && (\n      <Pressable className={styles(style.pressable, style.icon, small && style.small)} onPress={onClose}>\n        <Icon value={ICON.CLOSE} paragraph={small} />\n      </Pressable>\n    )}\n  </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n  children: PropTypes.string.isRequired,\n  error: PropTypes.bool,\n  inline: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  warning: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe;EAAA,IAAGC,QAAH,QAAGA,QAAH;EAAA,IAAaC,KAAb,QAAaA,KAAb;EAAA,uBAAoBC,MAApB;EAAA,IAAoBA,MAApB,4BAA6B,KAA7B;EAAA,IAAoCC,KAApC,QAAoCA,KAApC;EAAA,IAA2CC,OAA3C,QAA2CA,OAA3C;EAAA,IAAoDC,OAApD,QAAoDA,OAApD;EAAA,IAA6DC,OAA7D,QAA6DA,OAA7D;EAAA,IAAyEC,MAAzE;;EAAA,oBACnB,6BAAC,gBAAD,eACMA,MADN;IAEE,GAAG,MAFL;IAGE,SAAS,EAAE,qBACTC,4BAAMC,YADG,EAETR,KAAK,GAAGO,4BAAMP,KAAT,GAAiBI,OAAO,GAAGG,4BAAMH,OAAT,GAAmBD,OAAO,GAAGI,4BAAMJ,OAAT,GAAmBM,SAFjE,EAGTR,MAAM,GAAGM,4BAAMN,MAAT,GAAkBM,4BAAMG,QAHrB,EAITT,MAAM,IAAIM,4BAAMN,MAJP,EAKTC,KAAK,IAAIK,4BAAML,KALN,EAMTI,MAAM,CAACK,SANE;EAHb,iBAYE,6BAAC,gBAAD;IACE,KAAK,EAAE,2BAAa;MAAEX,KAAK,EAALA,KAAF;MAASG,OAAO,EAAPA,OAAT;MAAkBC,OAAO,EAAPA;IAAlB,CAAb,CADT;IAEE,SAAS,EAAEF,KAFb;IAGE,SAAS,EAAE,qBAAOK,4BAAMK,IAAb,EAAmBV,KAAK,IAAIK,4BAAML,KAAlC;EAHb,EAZF,eAiBE,6BAAC,gBAAD;IACE,KAAK,EAAEA,KADT;IAEE,SAAS,EAAE,qBACTK,4BAAMM,IADG,EAETb,KAAK,GAAGO,4BAAMP,KAAT,GAAiBI,OAAO,GAAGG,4BAAMH,OAAT,GAAmBD,OAAO,GAAGI,4BAAMJ,OAAT,GAAmBM,SAFjE;EAFb,GAOGV,QAPH,CAjBF,EA0BGM,OAAO,iBACN,6BAAC,qBAAD;IAAW,SAAS,EAAE,qBAAOE,4BAAMO,SAAb,EAAwBP,4BAAMK,IAA9B,EAAoCV,KAAK,IAAIK,4BAAML,KAAnD,CAAtB;IAAiF,OAAO,EAAEG;EAA1F,gBACE,6BAAC,gBAAD;IAAM,KAAK,EAAEU,iBAAKC,KAAlB;IAAyB,SAAS,EAAEd;EAApC,EADF,CA3BJ,CADmB;AAAA,CAArB;;;AAmCAJ,YAAY,CAACmB,WAAb,GAA2B,wBAA3B;AAEAnB,YAAY,CAACoB,SAAb,GAAyB;EACvBnB,QAAQ,EAAEoB,mBAAUC,MAAV,CAAiBC,UADJ;EAEvBrB,KAAK,EAAEmB,mBAAUG,IAFM;EAGvBrB,MAAM,EAAEkB,mBAAUG,IAHK;EAIvBpB,KAAK,EAAEiB,mBAAUG,IAJM;EAKvBnB,OAAO,EAAEgB,mBAAUG,IALI;EAMvBlB,OAAO,EAAEe,mBAAUG,IANI;EAOvBjB,OAAO,EAAEc,mBAAUI;AAPI,CAAzB"}

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

@@ -1,5 +1,6 @@
 .notification {
   width: fit-content;
+  align-items: flex-start;
 }
 
 .notification.outlined {
@@ -71,3 +72,11 @@
 .outlined .text.warning {
   color: var(--mirai-ui-warning-dark);
 }
+
+.notification .icon {
+  margin-top: calc(calc(var(--mirai-ui-line-height-headline-3) - var(--mirai-ui-font-size-headline-3)) / 2);
+}
+
+.notification .icon.small {
+  margin-top: calc(calc(var(--mirai-ui-line-height-small) - var(--mirai-ui-font-size-paragraph)) / 2);
+}

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

@@ -6,7 +6,7 @@ exports[`component:<Notification> inherit:className 1`] = `
     class="view row notification outlined mirai"
   >
     <span
-      class="icon headline-3"
+      class="icon headline-3 icon"
     >
       <svg
         fill="currentColor"
@@ -41,7 +41,7 @@ exports[`component:<Notification> prop:error 1`] = `
     class="view row notification error outlined"
   >
     <span
-      class="icon headline-3"
+      class="icon headline-3 icon"
     >
       <svg
         fill="currentColor"
@@ -72,7 +72,7 @@ exports[`component:<Notification> prop:inline 1`] = `
     class="view row notification inline inline"
   >
     <span
-      class="icon headline-3"
+      class="icon headline-3 icon"
     >
       <svg
         fill="currentColor"
@@ -107,7 +107,7 @@ exports[`component:<Notification> prop:onClose 1`] = `
     class="view row notification outlined"
   >
     <span
-      class="icon headline-3"
+      class="icon headline-3 icon"
     >
       <svg
         fill="currentColor"
@@ -133,7 +133,7 @@ exports[`component:<Notification> prop:onClose 1`] = `
       Lorem Ipsum...
     </span>
     <button
-      class="pressable pressable"
+      class="pressable pressable icon"
     >
       <span
         class="icon headline-3"
@@ -167,7 +167,7 @@ exports[`component:<Notification> prop:small & prop:inline 1`] = `
     class="view row notification inline inline small"
   >
     <span
-      class="icon paragraph"
+      class="icon paragraph icon small"
     >
       <svg
         fill="currentColor"
@@ -202,7 +202,7 @@ exports[`component:<Notification> prop:small 1`] = `
     class="view row notification outlined small"
   >
     <span
-      class="icon paragraph"
+      class="icon paragraph icon small"
     >
       <svg
         fill="currentColor"
@@ -237,7 +237,7 @@ exports[`component:<Notification> prop:success 1`] = `
     class="view row notification success outlined"
   >
     <span
-      class="icon headline-3"
+      class="icon headline-3 icon"
     >
       <svg
         fill="currentColor"
@@ -272,7 +272,7 @@ exports[`component:<Notification> prop:warning 1`] = `
     class="view row notification warning outlined"
   >
     <span
-      class="icon headline-3"
+      class="icon headline-3 icon"
     >
       <svg
         fill="currentColor"
@@ -303,7 +303,7 @@ exports[`component:<Notification> renders 1`] = `
     class="view row notification outlined"
   >
     <span
-      class="icon headline-3"
+      class="icon headline-3 icon"
     >
       <svg
         fill="currentColor"
@@ -339,7 +339,7 @@ exports[`component:<Notification> testID 1`] = `
     data-testid="mirai"
   >
     <span
-      class="icon headline-3"
+      class="icon headline-3 icon"
     >
       <svg
         fill="currentColor"

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

@@ -30,15 +30,7 @@ var ICON = {
   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,
-  PERSON: _md.MdOutlinePerson,
-  // @mirai/user
-  ACCOUNT: _md.MdOutlineAccountCircle
+  WARNING: _md.MdOutlineWarning
 };
 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","EYE_OPEN","EYE_CLOSE","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  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  MdOutlineVisibility as EYE_OPEN,\n  MdOutlineVisibilityOff as EYE_CLOSE,\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\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  EYE_OPEN,\n  EYE_CLOSE,\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"],"mappings":";;;;;;;AAAA;;AAkCO,IAAMA,IAAI,GAAG;EAClB;EACAC,IAAI,EAAJA,sBAFkB;EAGlBC,KAAK,EAALA,yBAHkB;EAIlBC,EAAE,EAAFA,wBAJkB;EAKlBC,IAAI,EAAJA,0BALkB;EAMlB;EACAC,KAAK,EAALA,kBAPkB;EAQlB;EACAC,GAAG,EAAHA,gBATkB;EAUlBC,MAAM,EAANA,mBAVkB;EAWlB;EACAC,WAAW,EAAXA,uBAZkB;EAalBC,WAAW,EAAXA,uBAbkB;EAclB;EACAC,QAAQ,EAARA,uBAfkB;EAgBlBC,SAAS,EAATA,0BAhBkB;EAiBlB;EACAC,KAAK,EAALA,kBAlBkB;EAmBlB;EACAC,KAAK,EAALA,kBApBkB;EAqBlBC,IAAI,EAAJA,iBArBkB;EAsBlBC,OAAO,EAAPA,wBAtBkB;EAuBlBC,OAAO,EAAPA,oBAvBkB;EAwBlB;EACAC,IAAI,EAAJA,oBAzBkB;EA0BlBC,IAAI,EAAJA,iBA1BkB;EA2BlBC,GAAG,EAAHA,gBA3BkB;EA4BlBC,QAAQ,EAARA,0BA5BkB;EA6BlBC,MAAM,EAANA,mBA7BkB;EA8BlB;EACAC,OAAO,EAAPA;AA/BkB,CAAb"}
+{"version":3,"file":"Icon.constants.js","names":["ICON","LEFT","RIGHT","UP","DOWN","CHECK","ADD","REMOVE","EXPAND_LESS","EXPAND_MORE","EYE_OPEN","EYE_CLOSE","CLOSE","ERROR","INFO","SUCCESS","WARNING"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import {\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  MdOutlineVisibility as EYE_OPEN,\n  MdOutlineVisibilityOff as EYE_CLOSE,\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} 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  EYE_OPEN,\n  EYE_CLOSE,\n  // <Modal>\n  CLOSE,\n  // <Notification> & <InputText>\n  ERROR,\n  INFO,\n  SUCCESS,\n  WARNING,\n};\n"],"mappings":";;;;;;;AAAA;;AA0BO,IAAMA,IAAI,GAAG;EAClB;EACAC,IAAI,EAAJA,sBAFkB;EAGlBC,KAAK,EAALA,yBAHkB;EAIlBC,EAAE,EAAFA,wBAJkB;EAKlBC,IAAI,EAAJA,0BALkB;EAMlB;EACAC,KAAK,EAALA,kBAPkB;EAQlB;EACAC,GAAG,EAAHA,gBATkB;EAUlBC,MAAM,EAANA,mBAVkB;EAWlB;EACAC,WAAW,EAAXA,uBAZkB;EAalBC,WAAW,EAAXA,uBAbkB;EAclB;EACAC,QAAQ,EAARA,uBAfkB;EAgBlBC,SAAS,EAATA,0BAhBkB;EAiBlB;EACAC,KAAK,EAALA,kBAlBkB;EAmBlB;EACAC,KAAK,EAALA,kBApBkB;EAqBlBC,IAAI,EAAJA,iBArBkB;EAsBlBC,OAAO,EAAPA,wBAtBkB;EAuBlBC,OAAO,EAAPA;AAvBkB,CAAb"}

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

@@ -9,33 +9,6 @@ exports[`primitive:<Icon> inherit:className 1`] = `
 </DocumentFragment>
 `;
 
-exports[`primitive:<Icon> prop:value prop:value (ACCOUNT) 1`] = `
-<DocumentFragment>
-  <span
-    class="icon headline-3"
-    name="Left"
-  >
-    <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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7.07 18.28c.43-.9 3.05-1.78 4.93-1.78s4.51.88 4.93 1.78C15.57 19.36 13.86 20 12 20s-3.57-.64-4.93-1.72zm11.29-1.45c-1.43-1.74-4.9-2.33-6.36-2.33s-4.93.59-6.36 2.33A7.95 7.95 0 014 12c0-4.41 3.59-8 8-8s8 3.59 8 8c0 1.82-.62 3.49-1.64 4.83zM12 6c-1.94 0-3.5 1.56-3.5 3.5S10.06 13 12 13s3.5-1.56 3.5-3.5S13.94 6 12 6zm0 5c-.83 0-1.5-.67-1.5-1.5S11.17 8 12 8s1.5.67 1.5 1.5S12.83 11 12 11z"
-      />
-    </svg>
-  </span>
-</DocumentFragment>
-`;
-
 exports[`primitive:<Icon> prop:value prop:value (ADD) 1`] = `
 <DocumentFragment>
   <span
@@ -63,60 +36,6 @@ exports[`primitive:<Icon> prop:value prop:value (ADD) 1`] = `
 </DocumentFragment>
 `;
 
-exports[`primitive:<Icon> prop:value prop:value (BED) 1`] = `
-<DocumentFragment>
-  <span
-    class="icon headline-3"
-    name="Left"
-  >
-    <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="M21 10.78V8c0-1.65-1.35-3-3-3h-4c-.77 0-1.47.3-2 .78-.53-.48-1.23-.78-2-.78H6C4.35 5 3 6.35 3 8v2.78c-.61.55-1 1.34-1 2.22v6h2v-2h16v2h2v-6c0-.88-.39-1.67-1-2.22zM14 7h4c.55 0 1 .45 1 1v2h-6V8c0-.55.45-1 1-1zM5 8c0-.55.45-1 1-1h4c.55 0 1 .45 1 1v2H5V8zm-1 7v-2c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v2H4z"
-      />
-    </svg>
-  </span>
-</DocumentFragment>
-`;
-
-exports[`primitive:<Icon> prop:value prop:value (CALENDAR) 1`] = `
-<DocumentFragment>
-  <span
-    class="icon headline-3"
-    name="Left"
-  >
-    <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 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V10h16v11zm0-13H4V5h16v3z"
-      />
-    </svg>
-  </span>
-</DocumentFragment>
-`;
-
 exports[`primitive:<Icon> prop:value prop:value (CHECK) 1`] = `
 <DocumentFragment>
   <span
@@ -384,94 +303,6 @@ exports[`primitive:<Icon> prop:value prop:value (LEFT) 1`] = `
 </DocumentFragment>
 `;
 
-exports[`primitive:<Icon> prop:value prop:value (LIST) 1`] = `
-<DocumentFragment>
-  <span
-    class="icon headline-3"
-    name="Left"
-  >
-    <svg
-      fill="currentColor"
-      height="1em"
-      stroke="currentColor"
-      stroke-width="0"
-      viewBox="0 0 24 24"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M0 0h24v24H0V0z"
-        fill="none"
-      />
-      <path
-        d="M11 7h6v2h-6zm0 4h6v2h-6zm0 4h6v2h-6zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20.1 3H3.9c-.5 0-.9.4-.9.9v16.2c0 .4.4.9.9.9h16.2c.4 0 .9-.5.9-.9V3.9c0-.5-.5-.9-.9-.9zM19 19H5V5h14v14z"
-      />
-    </svg>
-  </span>
-</DocumentFragment>
-`;
-
-exports[`primitive:<Icon> prop:value prop:value (LOCK) 1`] = `
-<DocumentFragment>
-  <span
-    class="icon headline-3"
-    name="Left"
-  >
-    <svg
-      fill="currentColor"
-      height="1em"
-      stroke="currentColor"
-      stroke-width="0"
-      viewBox="0 0 24 24"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        fill="none"
-      >
-        <path
-          d="M0 0h24v24H0V0z"
-        />
-        <path
-          d="M0 0h24v24H0V0z"
-          opacity=".87"
-        />
-      </g>
-      <path
-        d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"
-      />
-    </svg>
-  </span>
-</DocumentFragment>
-`;
-
-exports[`primitive:<Icon> prop:value prop:value (PERSON) 1`] = `
-<DocumentFragment>
-  <span
-    class="icon headline-3"
-    name="Left"
-  >
-    <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="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-      />
-    </svg>
-  </span>
-</DocumentFragment>
-`;
-
 exports[`primitive:<Icon> prop:value prop:value (REMOVE) 1`] = `
 <DocumentFragment>
   <span

package/build/theme/default.theme.css

@@ -43,29 +43,29 @@
   --mirai-ui-accent-dark: #224876;
   --mirai-ui-accent-light: #88aedc;
 
-  --mirai-ui-error: #d14343;
-  --mirai-ui-error-background: #fdf4f4;
-  --mirai-ui-error-border: #f4b6b6;
-  --mirai-ui-error-dark: #7d2828;
-  --mirai-ui-error-light: #ee9191;
-
-  --mirai-ui-success: #52bd94;
-  --mirai-ui-success-background: #f5fbf8;
-  --mirai-ui-success-border: #dcf2ea;
-  --mirai-ui-success-dark: #317159;
-  --mirai-ui-success-light: #a3e6cd;
-
-  --mirai-ui-warning: #ffb020;
-  --mirai-ui-warning-background: #fffaf1;
-  --mirai-ui-warning-border: #ffdfa6;
-  --mirai-ui-warning-dark: #66460d;
-  --mirai-ui-warning-light: #ffd079;
-
-  --mirai-ui-info: #0783ff;
-  --mirai-ui-info-background: #f0faff;
-  --mirai-ui-info-border: #a8e1ff;
-  --mirai-ui-info-dark: #0d3268;
-  --mirai-ui-info-light: #7ac3ff;
+  --mirai-ui-error-background: #ffece5;
+  --mirai-ui-error-border: #ffb9aa;
+  --mirai-ui-error-light: #ff8a7f;
+  --mirai-ui-error: #ff2b40;
+  --mirai-ui-error-dark: #b71543;
+
+  --mirai-ui-warning-background: #fff8e5;
+  --mirai-ui-warning-border: #fff2cc;
+  --mirai-ui-warning-light: #ffce66;
+  --mirai-ui-warning: #ff9900;
+  --mirai-ui-warning-dark: #ad5a00;
+
+  --mirai-ui-success-background: #e7fde7;
+  --mirai-ui-success-border: #a6faad;
+  --mirai-ui-success-light: #77f18e;
+  --mirai-ui-success: #21d366;
+  --mirai-ui-success-dark: #0e8151;
+
+  --mirai-ui-info-background: #e6f8ff;
+  --mirai-ui-info-border: #9cdefe;
+  --mirai-ui-info-light: #6bc6fe;
+  --mirai-ui-info: #0a87fc;
+  --mirai-ui-info-dark: #054db5;
 
   /* spacing */
   --mirai-ui-space-XS: 8px;

package/package.json

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