@mirai/ui 1.0.18 → 1.0.21

package/build/components/Button/Button.module.css

@@ -3,12 +3,15 @@
   --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-disabled-background: var(--mirai-ui-content-300);
-  --mirai-ui-button-disabled-color: var(--mirai-ui-content-400);
+  --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);
+  --mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
   --mirai-ui-button-outlined-background: var(--mirai-ui-base);
-  --mirai-ui-button-padding-x: var(--mirai-ui-space-S);
-  --mirai-ui-button-padding-y: var(--mirai-ui-space-L);
+  --mirai-ui-button-padding-y: var(--mirai-ui-space-S);
+  --mirai-ui-button-padding-x: var(--mirai-ui-space-L);
   --mirai-ui-button-radius: var(--mirai-ui-border-radius);
+  --mirai-ui-button-squared: calc(var(--mirai-ui-space-M) * 2);
 }
 
 .button {
@@ -17,11 +20,11 @@
   border-radius: var(--mirai-ui-button-radius);
   color: var(--mirai-ui-button-color);
   display: flex;
-  font-family: var(--mirai-ui-font);
+  font-family: var(--mirai-ui-button-font);
   font-size: var(--mirai-ui-font-size-action);
-  font-weight: var(--mirai-ui-font-bold-weight);
+  font-weight: var(--mirai-ui-button-font-weight);
   justify-content: center;
-  padding: var(--mirai-ui-button-padding-x) var(--mirai-ui-button-padding-y);
+  padding: var(--mirai-ui-button-padding-y) var(--mirai-ui-button-padding-x);
   transition: background-color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
     box-shadow var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
     color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
@@ -34,8 +37,8 @@
 }
 
 .outlined {
-  border: solid 1px var(--mirai-ui-button-background);
   background-color: var(--mirai-ui-button-outlined-background);
+  border: solid 1px var(--mirai-ui-button-background);
   color: var(--mirai-ui-button-background);
 }
 
@@ -45,11 +48,13 @@
 
 .large:not(.squared) {
   font-size: var(--mirai-ui-font-size-headline);
+  padding: var(--mirai-ui-button-padding-y)
+    calc(var(--mirai-ui-button-padding-x) + calc(var(--mirai-ui-button-padding-y) / 2));
 }
 
 .small:not(.squared) {
   font-size: var(--mirai-ui-font-size-small);
-  padding: calc(var(--mirai-ui-button-padding-x) / 2) calc(var(--mirai-ui-button-padding-y) / 2);
+  padding: var(--mirai-ui-button-padding-y) calc(var(--mirai-ui-button-padding-x) / 2);
 }
 
 .rounded {
@@ -57,22 +62,10 @@
 }
 
 .squared {
+  height: var(--mirai-ui-button-squared);
   padding: 0;
-  height: var(--mirai-ui-space-XL);
-  min-width: var(--mirai-ui-space-XL);
-  width: var(--mirai-ui-space-XL);
-}
-
-.squared.small {
-  height: var(--mirai-ui-space-L);
-  min-width: var(--mirai-ui-space-L);
-  width: var(--mirai-ui-space-L);
-}
-
-.squared.large {
-  height: var(--mirai-ui-space-XXL);
-  min-width: var(--mirai-ui-space-XXL);
-  width: var(--mirai-ui-space-XXL);
+  min-width: var(--mirai-ui-button-squared);
+  width: var(--mirai-ui-button-squared);
 }
 
 @media only screen and (max-width: 600px) {

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

@@ -1,15 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` 1`] = `
-<DocumentFragment>
-  <button
-    class="pressable button squared"
-  >
-    children
-  </button>
-</DocumentFragment>
-`;
-
 exports[`component:<Button> inherit:className 1`] = `
 <DocumentFragment>
   <button
@@ -61,20 +51,10 @@ exports[`component:<Button> prop:small 1`] = `
 </DocumentFragment>
 `;
 
-exports[`component:<Button> prop:squared & large 1`] = `
+exports[`component:<Button> prop:squared 1`] = `
 <DocumentFragment>
   <button
-    class="pressable button large squared"
-  >
-    children
-  </button>
-</DocumentFragment>
-`;
-
-exports[`component:<Button> prop:squared & small 1`] = `
-<DocumentFragment>
-  <button
-    class="pressable button small squared"
+    class="pressable button squared"
   >
     children
   </button>

package/build/components/Calendar/Calendar.module.css

@@ -1,11 +1,11 @@
 :root {
-  --mirai-ui-calendar-cell: calc(var(--mirai-ui-space-XL) + var(--mirai-ui-space-S));
+  --mirai-ui-calendar-cell: var(--mirai-ui-space-XL);
   --mirai-ui-calendar-highlight-color: var(--mirai-ui-accent);
   --mirai-ui-calendar-week-margin: 2px;
-  --mirai-ui-calendar-hover-background: var(--mirai-ui-accent-300);
+  --mirai-ui-calendar-hover-background: var(--mirai-ui-accent-background);
   --mirai-ui-calendar-selected-background: var(--mirai-ui-accent);
   --mirai-ui-calendar-selected-color: var(--mirai-ui-base);
-  --mirai-ui-calendar-weekday-color: var(--mirai-ui-content-400);
+  --mirai-ui-calendar-weekday-color: var(--mirai-ui-content-light);
 }
 
 .scrollview {
@@ -66,7 +66,7 @@
 }
 
 .textDisabled {
-  color: var(--mirai-ui-content-300);
+  color: var(--mirai-ui-content-border);
 }
 
 .textHighlight {
@@ -86,7 +86,7 @@
 }
 
 .caption.empty {
-  color: var(--mirai-ui-content-300);
+  color: var(--mirai-ui-content-border);
 }
 
 @media only screen and (max-width: 600px) {
@@ -104,7 +104,7 @@
   }
 
   .weekdays {
-    border-bottom: solid 1px var(--mirai-ui-content-300);
+    border-bottom: solid 1px var(--mirai-ui-content-border);
   }
 }
 

package/build/components/InputNumber/InputNumber.js

@@ -36,7 +36,7 @@ var InputNumber = function InputNumber(_ref) {
       min = _ref$min === void 0 ? 0 : _ref$min,
       name = _ref.name,
       _ref$rounded = _ref.rounded,
-      rounded = _ref$rounded === void 0 ? false : _ref$rounded,
+      rounded = _ref$rounded === void 0 ? true : _ref$rounded,
       _ref$step = _ref.step,
       step = _ref$step === void 0 ? 1 : _ref$step,
       _ref$value = _ref.value,
@@ -51,6 +51,7 @@ var InputNumber = function InputNumber(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_primitives.View, {
     className: _InputNumberModule.default.texts
   }, label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    subheadline: true,
     className: disabled && _InputNumberModule.default.disabled
   }, label), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     small: true,
@@ -67,6 +68,7 @@ var InputNumber = function InputNumber(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     name: "Minus"
   })), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    headline: true,
     className: _InputNumberModule.default.value
   }, typeof value === 'number' ? value : min), /*#__PURE__*/_react.default.createElement(_Button.Button, {
     disabled: disabled || value >= max,

package/build/components/InputNumber/InputNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.js","names":["InputNumber","disabled","hint","label","max","min","name","rounded","step","value","onChange","others","style","inputNumber","className","texts","propTypes","PropTypes","bool","oneOfType","string","array","number","isRequired","func"],"sources":["../../../src/components/InputNumber/InputNumber.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport style from './InputNumber.module.css';\n\nexport const InputNumber = ({\n  disabled,\n  hint,\n  label,\n  max,\n  min = 0,\n  name,\n  rounded = false,\n  step = 1,\n  value = 0,\n  onChange = () => {},\n  ...others\n}) => (\n  <View {...others} row className={styles(style.inputNumber, others.className)}>\n    <View className={style.texts}>\n      {label && <Text className={disabled && style.disabled}>{label}</Text>}\n      {hint && (\n        <Text small className={styles(style.hint, disabled && style.disabled)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n    <Button\n      disabled={disabled || value <= min}\n      outlined\n      preventDefault\n      rounded={rounded}\n      squared\n      onPress={() => onChange(value - step, name)}\n    >\n      <Icon name=\"Minus\" />\n    </Button>\n    <Text className={style.value}>{typeof value === 'number' ? value : min}</Text>\n    <Button\n      disabled={disabled || value >= max}\n      outlined\n      preventDefault\n      rounded={rounded}\n      squared\n      onPress={() => onChange(value + step, name)}\n    >\n      <Icon name=\"Plus\" />\n    </Button>\n  </View>\n);\n\nInputNumber.propTypes = {\n  disabled: PropTypes.bool,\n  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n  label: PropTypes.string,\n  max: PropTypes.number,\n  min: PropTypes.number,\n  name: PropTypes.string.isRequired,\n  rounded: PropTypes.bool,\n  step: PropTypes.number,\n  value: PropTypes.number,\n  onChange: PropTypes.func,\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc;EAAA,IACzBC,QADyB,QACzBA,QADyB;EAAA,IAEzBC,IAFyB,QAEzBA,IAFyB;EAAA,IAGzBC,KAHyB,QAGzBA,KAHyB;EAAA,IAIzBC,GAJyB,QAIzBA,GAJyB;EAAA,oBAKzBC,GALyB;EAAA,IAKzBA,GALyB,yBAKnB,CALmB;EAAA,IAMzBC,IANyB,QAMzBA,IANyB;EAAA,wBAOzBC,OAPyB;EAAA,IAOzBA,OAPyB,6BAOf,KAPe;EAAA,qBAQzBC,IARyB;EAAA,IAQzBA,IARyB,0BAQlB,CARkB;EAAA,sBASzBC,KATyB;EAAA,IASzBA,KATyB,2BASjB,CATiB;EAAA,yBAUzBC,QAVyB;EAAA,IAUzBA,QAVyB,8BAUd,YAAM,CAAE,CAVM;EAAA,IAWtBC,MAXsB;;EAAA,oBAazB,6BAAC,gBAAD,eAAUA,MAAV;IAAkB,GAAG,MAArB;IAAsB,SAAS,EAAE,qBAAOC,2BAAMC,WAAb,EAA0BF,MAAM,CAACG,SAAjC;EAAjC,iBACE,6BAAC,gBAAD;IAAM,SAAS,EAAEF,2BAAMG;EAAvB,GACGZ,KAAK,iBAAI,6BAAC,gBAAD;IAAM,SAAS,EAAEF,QAAQ,IAAIW,2BAAMX;EAAnC,GAA8CE,KAA9C,CADZ,EAEGD,IAAI,iBACH,6BAAC,gBAAD;IAAM,KAAK,MAAX;IAAY,SAAS,EAAE,qBAAOU,2BAAMV,IAAb,EAAmBD,QAAQ,IAAIW,2BAAMX,QAArC;EAAvB,GACGC,IADH,CAHJ,CADF,eASE,6BAAC,cAAD;IACE,QAAQ,EAAED,QAAQ,IAAIQ,KAAK,IAAIJ,GADjC;IAEE,QAAQ,MAFV;IAGE,cAAc,MAHhB;IAIE,OAAO,EAAEE,OAJX;IAKE,OAAO,MALT;IAME,OAAO,EAAE;MAAA,OAAMG,QAAQ,CAACD,KAAK,GAAGD,IAAT,EAAeF,IAAf,CAAd;IAAA;EANX,gBAQE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EARF,CATF,eAmBE,6BAAC,gBAAD;IAAM,SAAS,EAAEM,2BAAMH;EAAvB,GAA+B,OAAOA,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCJ,GAAnE,CAnBF,eAoBE,6BAAC,cAAD;IACE,QAAQ,EAAEJ,QAAQ,IAAIQ,KAAK,IAAIL,GADjC;IAEE,QAAQ,MAFV;IAGE,cAAc,MAHhB;IAIE,OAAO,EAAEG,OAJX;IAKE,OAAO,MALT;IAME,OAAO,EAAE;MAAA,OAAMG,QAAQ,CAACD,KAAK,GAAGD,IAAT,EAAeF,IAAf,CAAd;IAAA;EANX,gBAQE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EARF,CApBF,CAbyB;AAAA,CAApB;;;AA8CPN,WAAW,CAACgB,SAAZ,GAAwB;EACtBf,QAAQ,EAAEgB,mBAAUC,IADE;EAEtBhB,IAAI,EAAEe,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,KAA7B,CAApB,CAFgB;EAGtBlB,KAAK,EAAEc,mBAAUG,MAHK;EAItBhB,GAAG,EAAEa,mBAAUK,MAJO;EAKtBjB,GAAG,EAAEY,mBAAUK,MALO;EAMtBhB,IAAI,EAAEW,mBAAUG,MAAV,CAAiBG,UAND;EAOtBhB,OAAO,EAAEU,mBAAUC,IAPG;EAQtBV,IAAI,EAAES,mBAAUK,MARM;EAStBb,KAAK,EAAEQ,mBAAUK,MATK;EAUtBZ,QAAQ,EAAEO,mBAAUO;AAVE,CAAxB"}
+{"version":3,"file":"InputNumber.js","names":["InputNumber","disabled","hint","label","max","min","name","rounded","step","value","onChange","others","style","inputNumber","className","texts","propTypes","PropTypes","bool","oneOfType","string","array","number","isRequired","func"],"sources":["../../../src/components/InputNumber/InputNumber.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport style from './InputNumber.module.css';\n\nexport const InputNumber = ({\n  disabled,\n  hint,\n  label,\n  max,\n  min = 0,\n  name,\n  rounded = true,\n  step = 1,\n  value = 0,\n  onChange = () => {},\n  ...others\n}) => (\n  <View {...others} row className={styles(style.inputNumber, others.className)}>\n    <View className={style.texts}>\n      {label && (\n        <Text subheadline className={disabled && style.disabled}>\n          {label}\n        </Text>\n      )}\n      {hint && (\n        <Text small className={styles(style.hint, disabled && style.disabled)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n    <Button\n      disabled={disabled || value <= min}\n      outlined\n      preventDefault\n      rounded={rounded}\n      squared\n      onPress={() => onChange(value - step, name)}\n    >\n      <Icon name=\"Minus\" />\n    </Button>\n    <Text headline className={style.value}>\n      {typeof value === 'number' ? value : min}\n    </Text>\n    <Button\n      disabled={disabled || value >= max}\n      outlined\n      preventDefault\n      rounded={rounded}\n      squared\n      onPress={() => onChange(value + step, name)}\n    >\n      <Icon name=\"Plus\" />\n    </Button>\n  </View>\n);\n\nInputNumber.propTypes = {\n  disabled: PropTypes.bool,\n  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n  label: PropTypes.string,\n  max: PropTypes.number,\n  min: PropTypes.number,\n  name: PropTypes.string.isRequired,\n  rounded: PropTypes.bool,\n  step: PropTypes.number,\n  value: PropTypes.number,\n  onChange: PropTypes.func,\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc;EAAA,IACzBC,QADyB,QACzBA,QADyB;EAAA,IAEzBC,IAFyB,QAEzBA,IAFyB;EAAA,IAGzBC,KAHyB,QAGzBA,KAHyB;EAAA,IAIzBC,GAJyB,QAIzBA,GAJyB;EAAA,oBAKzBC,GALyB;EAAA,IAKzBA,GALyB,yBAKnB,CALmB;EAAA,IAMzBC,IANyB,QAMzBA,IANyB;EAAA,wBAOzBC,OAPyB;EAAA,IAOzBA,OAPyB,6BAOf,IAPe;EAAA,qBAQzBC,IARyB;EAAA,IAQzBA,IARyB,0BAQlB,CARkB;EAAA,sBASzBC,KATyB;EAAA,IASzBA,KATyB,2BASjB,CATiB;EAAA,yBAUzBC,QAVyB;EAAA,IAUzBA,QAVyB,8BAUd,YAAM,CAAE,CAVM;EAAA,IAWtBC,MAXsB;;EAAA,oBAazB,6BAAC,gBAAD,eAAUA,MAAV;IAAkB,GAAG,MAArB;IAAsB,SAAS,EAAE,qBAAOC,2BAAMC,WAAb,EAA0BF,MAAM,CAACG,SAAjC;EAAjC,iBACE,6BAAC,gBAAD;IAAM,SAAS,EAAEF,2BAAMG;EAAvB,GACGZ,KAAK,iBACJ,6BAAC,gBAAD;IAAM,WAAW,MAAjB;IAAkB,SAAS,EAAEF,QAAQ,IAAIW,2BAAMX;EAA/C,GACGE,KADH,CAFJ,EAMGD,IAAI,iBACH,6BAAC,gBAAD;IAAM,KAAK,MAAX;IAAY,SAAS,EAAE,qBAAOU,2BAAMV,IAAb,EAAmBD,QAAQ,IAAIW,2BAAMX,QAArC;EAAvB,GACGC,IADH,CAPJ,CADF,eAaE,6BAAC,cAAD;IACE,QAAQ,EAAED,QAAQ,IAAIQ,KAAK,IAAIJ,GADjC;IAEE,QAAQ,MAFV;IAGE,cAAc,MAHhB;IAIE,OAAO,EAAEE,OAJX;IAKE,OAAO,MALT;IAME,OAAO,EAAE;MAAA,OAAMG,QAAQ,CAACD,KAAK,GAAGD,IAAT,EAAeF,IAAf,CAAd;IAAA;EANX,gBAQE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EARF,CAbF,eAuBE,6BAAC,gBAAD;IAAM,QAAQ,MAAd;IAAe,SAAS,EAAEM,2BAAMH;EAAhC,GACG,OAAOA,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCJ,GADvC,CAvBF,eA0BE,6BAAC,cAAD;IACE,QAAQ,EAAEJ,QAAQ,IAAIQ,KAAK,IAAIL,GADjC;IAEE,QAAQ,MAFV;IAGE,cAAc,MAHhB;IAIE,OAAO,EAAEG,OAJX;IAKE,OAAO,MALT;IAME,OAAO,EAAE;MAAA,OAAMG,QAAQ,CAACD,KAAK,GAAGD,IAAT,EAAeF,IAAf,CAAd;IAAA;EANX,gBAQE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EARF,CA1BF,CAbyB;AAAA,CAApB;;;AAoDPN,WAAW,CAACgB,SAAZ,GAAwB;EACtBf,QAAQ,EAAEgB,mBAAUC,IADE;EAEtBhB,IAAI,EAAEe,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,KAA7B,CAApB,CAFgB;EAGtBlB,KAAK,EAAEc,mBAAUG,MAHK;EAItBhB,GAAG,EAAEa,mBAAUK,MAJO;EAKtBjB,GAAG,EAAEY,mBAAUK,MALO;EAMtBhB,IAAI,EAAEW,mBAAUG,MAAV,CAAiBG,UAND;EAOtBhB,OAAO,EAAEU,mBAAUC,IAPG;EAQtBV,IAAI,EAAES,mBAAUK,MARM;EAStBb,KAAK,EAAEQ,mBAAUK,MATK;EAUtBZ,QAAQ,EAAEO,mBAAUO;AAVE,CAAxB"}

package/build/components/InputNumber/InputNumber.module.css

@@ -1,5 +1,5 @@
 :root {
-  --mirai-ui-input-number-value-width: var(--mirai-ui-space-XXL);
+  --mirai-ui-input-number-value-width: var(--mirai-ui-space-XL);
 }
 
 .inputNumber {
@@ -17,7 +17,7 @@
 }
 
 .hint {
-  color: var(--mirai-ui-input-disabled);
+  color: var(--mirai-ui-content-light);
 }
 
 .disabled {

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

@@ -9,7 +9,7 @@ exports[`component:<InputNumber> inherit:className 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -36,12 +36,12 @@ exports[`component:<InputNumber> inherit:className 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       0
     </span>
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"
@@ -85,7 +85,7 @@ exports[`component:<InputNumber> prop:disabled 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -112,12 +112,12 @@ exports[`component:<InputNumber> prop:disabled 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       0
     </span>
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -168,7 +168,7 @@ exports[`component:<InputNumber> prop:hint 1`] = `
       </span>
     </div>
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -195,12 +195,12 @@ exports[`component:<InputNumber> prop:hint 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       0
     </span>
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"
@@ -244,13 +244,13 @@ exports[`component:<InputNumber> prop:label 1`] = `
       class="view texts"
     >
       <span
-        class="text paragraph"
+        class="text subheadline"
       >
         label
       </span>
     </div>
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -277,12 +277,12 @@ exports[`component:<InputNumber> prop:label 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       0
     </span>
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"
@@ -326,7 +326,7 @@ exports[`component:<InputNumber> prop:max 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"
@@ -352,12 +352,12 @@ exports[`component:<InputNumber> prop:max 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       10
     </span>
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -402,7 +402,7 @@ exports[`component:<InputNumber> prop:min 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -429,12 +429,12 @@ exports[`component:<InputNumber> prop:min 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       10
     </span>
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"
@@ -504,7 +504,7 @@ exports[`component:<InputNumber> prop:rounded 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       10
     </span>
@@ -553,7 +553,7 @@ exports[`component:<InputNumber> prop:value 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"
@@ -579,12 +579,12 @@ exports[`component:<InputNumber> prop:value 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       10
     </span>
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"
@@ -628,7 +628,7 @@ exports[`component:<InputNumber> renders 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -655,12 +655,12 @@ exports[`component:<InputNumber> renders 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       0
     </span>
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"
@@ -705,7 +705,7 @@ exports[`component:<InputNumber> testID 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -732,12 +732,12 @@ exports[`component:<InputNumber> testID 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       0
     </span>
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"

package/build/components/InputOption/InputOption.module.css

@@ -1,5 +1,5 @@
 :root {
-  --mirai-ui-input-option-disabled: var(--mirai-ui-content-300);
+  --mirai-ui-input-option-disabled: var(--mirai-ui-content-light);
   --mirai-ui-input-option-label-margin: var(--mirai-ui-space-S);
   --mirai-ui-input-option-padding-y: var(--mirai-ui-space-S);
 }

package/build/components/InputText/InputText.module.css

@@ -1,10 +1,10 @@
 :root {
-  --mirai-ui-input-text-border: solid 1px var(--mirai-ui-content-400);
+  --mirai-ui-input-text-border: solid 1px var(--mirai-ui-content-border);
   --mirai-ui-input-text-focus: var(--mirai-ui-accent);
   --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);
-  --mirai-ui-input-text-disabled: var(--mirai-ui-content-300);
+  --mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
   --mirai-ui-input-text-error: var(--mirai-ui-error);
 }
 
@@ -79,7 +79,7 @@
   padding: 0 calc(var(--mirai-ui-input-text-padding-x) / 2);
   pointer-events: none;
   position: absolute;
-  top: var(--mirai-ui-input-text-padding-y);
+  top: calc(var(--mirai-ui-input-text-padding-y) / 1.3);
   transition: font-size var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
     top var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
   z-index: 1;
@@ -87,7 +87,7 @@
 
 .label.value {
   font-size: var(--mirai-ui-font-size-small);
-  top: calc(calc(var(--mirai-ui-input-text-padding-y) * -1) + calc(var(--mirai-ui-input-text-padding-y) / 2));
+  top: calc(var(--mirai-ui-input-text-padding-y) * -1);
 }
 
 .text {

package/build/components/Notification/Notification.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Notification = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _primitives = require("../../primitives");
+
+var _NotificationModule = _interopRequireDefault(require("./Notification.module.css"));
+
+var _excluded = ["children", "error", "success", "title", "warning", "onClose"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+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 Notification = function Notification(_ref) {
+  var children = _ref.children,
+      error = _ref.error,
+      success = _ref.success,
+      title = _ref.title,
+      warning = _ref.warning,
+      onClose = _ref.onClose,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
+    row: true,
+    className: (0, _helpers.styles)(_NotificationModule.default.notification, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : undefined, others.className)
+  }), /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    name: error ? 'Error' : warning ? 'Warning' : success ? 'Success' : 'Info',
+    className: _NotificationModule.default.icon
+  }), /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    className: (0, _helpers.styles)(_NotificationModule.default.text, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : undefined)
+  }, title && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    bold: true,
+    action: true
+  }, "Title"), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    action: true
+  }, children)), onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    className: _NotificationModule.default.pressable,
+    onPress: onClose
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    name: "Close",
+    className: _NotificationModule.default.icon
+  })));
+};
+
+exports.Notification = Notification;
+Notification.displayName = 'Component:Notification';
+Notification.propTypes = {
+  children: _propTypes.default.string.isRequired,
+  error: _propTypes.default.bool,
+  success: _propTypes.default.bool,
+  title: _propTypes.default.string,
+  warning: _propTypes.default.bool,
+  onClose: _propTypes.default.func
+};
+//# sourceMappingURL=Notification.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","names":["Notification","children","error","success","title","warning","onClose","others","style","notification","undefined","className","icon","text","pressable","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 { styles } from '../../helpers';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({ children, error, success, title, 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      others.className,\n    )}\n  >\n    <Icon name={error ? 'Error' : warning ? 'Warning' : success ? 'Success' : 'Info'} className={style.icon} />\n    <View\n      className={styles(\n        style.text,\n        error ? style.error : warning ? style.warning : success ? style.success : undefined,\n      )}\n    >\n      {title && (\n        <Text bold action>\n          Title\n        </Text>\n      )}\n      <Text action>{children}</Text>\n    </View>\n    {onClose && (\n      <Pressable className={style.pressable} onPress={onClose}>\n        <Icon name=\"Close\" className={style.icon} />\n      </Pressable>\n    )}\n  </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n  children: PropTypes.string.isRequired,\n  error: PropTypes.bool,\n  success: PropTypes.bool,\n  title: PropTypes.string,\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,IAAoBC,OAApB,QAAoBA,OAApB;EAAA,IAA6BC,KAA7B,QAA6BA,KAA7B;EAAA,IAAoCC,OAApC,QAAoCA,OAApC;EAAA,IAA6CC,OAA7C,QAA6CA,OAA7C;EAAA,IAAyDC,MAAzD;;EAAA,oBACnB,6BAAC,gBAAD,eACMA,MADN;IAEE,GAAG,MAFL;IAGE,SAAS,EAAE,qBACTC,4BAAMC,YADG,EAETP,KAAK,GAAGM,4BAAMN,KAAT,GAAiBG,OAAO,GAAGG,4BAAMH,OAAT,GAAmBF,OAAO,GAAGK,4BAAML,OAAT,GAAmBO,SAFjE,EAGTH,MAAM,CAACI,SAHE;EAHb,iBASE,6BAAC,gBAAD;IAAM,IAAI,EAAET,KAAK,GAAG,OAAH,GAAaG,OAAO,GAAG,SAAH,GAAeF,OAAO,GAAG,SAAH,GAAe,MAA1E;IAAkF,SAAS,EAAEK,4BAAMI;EAAnG,EATF,eAUE,6BAAC,gBAAD;IACE,SAAS,EAAE,qBACTJ,4BAAMK,IADG,EAETX,KAAK,GAAGM,4BAAMN,KAAT,GAAiBG,OAAO,GAAGG,4BAAMH,OAAT,GAAmBF,OAAO,GAAGK,4BAAML,OAAT,GAAmBO,SAFjE;EADb,GAMGN,KAAK,iBACJ,6BAAC,gBAAD;IAAM,IAAI,MAAV;IAAW,MAAM;EAAjB,WAPJ,eAWE,6BAAC,gBAAD;IAAM,MAAM;EAAZ,GAAcH,QAAd,CAXF,CAVF,EAuBGK,OAAO,iBACN,6BAAC,qBAAD;IAAW,SAAS,EAAEE,4BAAMM,SAA5B;IAAuC,OAAO,EAAER;EAAhD,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAC,OAAX;IAAmB,SAAS,EAAEE,4BAAMI;EAApC,EADF,CAxBJ,CADmB;AAAA,CAArB;;;AAgCAZ,YAAY,CAACe,WAAb,GAA2B,wBAA3B;AAEAf,YAAY,CAACgB,SAAb,GAAyB;EACvBf,QAAQ,EAAEgB,mBAAUC,MAAV,CAAiBC,UADJ;EAEvBjB,KAAK,EAAEe,mBAAUG,IAFM;EAGvBjB,OAAO,EAAEc,mBAAUG,IAHI;EAIvBhB,KAAK,EAAEa,mBAAUC,MAJM;EAKvBb,OAAO,EAAEY,mBAAUG,IALI;EAMvBd,OAAO,EAAEW,mBAAUI;AANI,CAAzB"}

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

@@ -0,0 +1,73 @@
+:root {
+  --mirai-ui-notification-border-radius: var(--mirai-ui-border-radius);
+  --mirai-ui-notification-padding: var(--mirai-ui-space-S);
+  --mirai-ui-notification-icon: var(--mirai-ui-font-size-headline);
+}
+
+.notification {
+  align-items: flex-start;
+  background-color: var(--mirai-ui-accent-background);
+  border-radius: var(--mirai-ui-notification-border-radius);
+  padding: var(--mirai-ui-notification-padding);
+  border: solid 1px var(--mirai-ui-accent-border);
+}
+
+.notification * {
+  color: var(--mirai-ui-accent);
+}
+
+.notification.success {
+  background-color: var(--mirai-ui-success-background);
+  border-color: var(--mirai-ui-success-border);
+}
+
+.notification.success * {
+  color: var(--mirai-ui-success);
+}
+
+.notification.error {
+  background-color: var(--mirai-ui-error-background);
+  border-color: var(--mirai-ui-error-border);
+}
+
+.notification.error * {
+  color: var(--mirai-ui-error);
+}
+
+.notification.warning {
+  background-color: var(--mirai-ui-warning-background);
+  border-color: var(--mirai-ui-warning-border);
+}
+
+.notification.warning * {
+  color: var(--mirai-ui-warning);
+}
+
+.icon {
+  line-height: var(--mirai-ui-notification-icon);
+  height: var(--mirai-ui-notification-icon);
+  width: var(--mirai-ui-notification-icon);
+  font-size: var(--mirai-ui-notification-icon);
+}
+
+.text {
+  flex: 1;
+  padding-left: var(--mirai-ui-notification-padding);
+  padding-right: var(--mirai-ui-notification-padding);
+}
+
+.text * {
+  color: var(--mirai-ui-accent-dark);
+}
+
+.text.error * {
+  color: var(--mirai-ui-error-dark);
+}
+
+.text.success * {
+  color: var(--mirai-ui-success-dark);
+}
+
+.text.warning * {
+  color: var(--mirai-ui-warning-dark);
+}