@mirai/ui 1.0.9 → 1.0.10

package/build/primitives/Layer/helpers/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _getElementLayout = require("./getElementLayout");
+
+Object.keys(_getElementLayout).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _getElementLayout[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _getElementLayout[key];
+    }
+  });
+});
+
+var _getLayerPosition = require("./getLayerPosition");
+
+Object.keys(_getLayerPosition).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _getLayerPosition[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _getLayerPosition[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/build/primitives/Layer/helpers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/primitives/Layer/helpers/index.js"],"sourcesContent":["export * from './getElementLayout';\nexport * from './getLayerPosition';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/primitives/Layer/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Layer = require("./Layer");
+
+Object.keys(_Layer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Layer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Layer[key];
+    }
+  });
+});
+
+var _LayerContent = require("./LayerContent");
+
+Object.keys(_LayerContent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _LayerContent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _LayerContent[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/build/primitives/Layer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Layer/index.js"],"sourcesContent":["export * from './Layer';\nexport * from './LayerContent';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/primitives/Radio/Radio.js

@@ -31,15 +31,17 @@ var Radio = function Radio(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers.styles)(_RadioModule.default.radio, others.className)
-  }, /*#__PURE__*/_react.default.createElement("input", Object.assign({}, others, {
+    className: (0, _helpers.styles)(_RadioModule.default.radio, others.className),
+    style: others.style
+  }, /*#__PURE__*/_react.default.createElement("input", {
     checked: checked,
+    "data-testid": others['data-testid'],
     disabled: disabled,
     name: name,
     type: "radio",
     value: value,
     onChange: !disabled ? handleChange : undefined
-  })), /*#__PURE__*/_react.default.createElement("span", {
+  }), /*#__PURE__*/_react.default.createElement("span", {
     className: _RadioModule.default.checkmark
   }));
 };

package/build/primitives/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["Radio","checked","disabled","name","value","onChange","others","handleChange","event","style","radio","className","undefined","checkmark","displayName"],"sources":["../../../src/primitives/Radio/Radio.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './Radio.module.css';\n\nconst Radio = ({ checked, disabled, name, value = '', onChange, ...others }) => {\n  const handleChange = (event) => {\n    onChange && onChange(value, event);\n  };\n\n  return (\n    <div className={styles(style.radio, others.className)}>\n      <input\n        {...others}\n        checked={checked}\n        disabled={disabled}\n        name={name}\n        type=\"radio\"\n        value={value}\n        onChange={!disabled ? handleChange : undefined}\n      />\n      <span className={style.checkmark} />\n    </div>\n  );\n};\n\nRadio.displayName = 'Primitive:Radio';\n\nRadio.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n};\n\nexport { Radio };\n"],"mappings":";;;;;;;;;;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAAkE;EAAA,IAA/DC,OAA+D,QAA/DA,OAA+D;EAAA,IAAtDC,QAAsD,QAAtDA,QAAsD;EAAA,IAA5CC,IAA4C,QAA5CA,IAA4C;EAAA,sBAAtCC,KAAsC;EAAA,IAAtCA,KAAsC,2BAA9B,EAA8B;EAAA,IAA1BC,QAA0B,QAA1BA,QAA0B;EAAA,IAAbC,MAAa;;EAC9E,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAW;IAC9BH,QAAQ,IAAIA,QAAQ,CAACD,KAAD,EAAQI,KAAR,CAApB;EACD,CAFD;;EAIA,oBACE;IAAK,SAAS,EAAE,qBAAOC,qBAAMC,KAAb,EAAoBJ,MAAM,CAACK,SAA3B;EAAhB,gBACE,wDACML,MADN;IAEE,OAAO,EAAEL,OAFX;IAGE,QAAQ,EAAEC,QAHZ;IAIE,IAAI,EAAEC,IAJR;IAKE,IAAI,EAAC,OALP;IAME,KAAK,EAAEC,KANT;IAOE,QAAQ,EAAE,CAACF,QAAD,GAAYK,YAAZ,GAA2BK;EAPvC,GADF,eAUE;IAAM,SAAS,EAAEH,qBAAMI;EAAvB,EAVF,CADF;AAcD,CAnBD;;;AAqBAb,KAAK,CAACc,WAAN,GAAoB,iBAApB"}
+{"version":3,"file":"Radio.js","names":["Radio","checked","disabled","name","value","onChange","others","handleChange","event","style","radio","className","undefined","checkmark","displayName"],"sources":["../../../src/primitives/Radio/Radio.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './Radio.module.css';\n\nconst Radio = ({ checked, disabled, name, value = '', onChange, ...others }) => {\n  const handleChange = (event) => {\n    onChange && onChange(value, event);\n  };\n\n  return (\n    <div className={styles(style.radio, others.className)} style={others.style}>\n      <input\n        checked={checked}\n        data-testid={others['data-testid']}\n        disabled={disabled}\n        name={name}\n        type=\"radio\"\n        value={value}\n        onChange={!disabled ? handleChange : undefined}\n      />\n      <span className={style.checkmark} />\n    </div>\n  );\n};\n\nRadio.displayName = 'Primitive:Radio';\n\nRadio.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n};\n\nexport { Radio };\n"],"mappings":";;;;;;;;;;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAAkE;EAAA,IAA/DC,OAA+D,QAA/DA,OAA+D;EAAA,IAAtDC,QAAsD,QAAtDA,QAAsD;EAAA,IAA5CC,IAA4C,QAA5CA,IAA4C;EAAA,sBAAtCC,KAAsC;EAAA,IAAtCA,KAAsC,2BAA9B,EAA8B;EAAA,IAA1BC,QAA0B,QAA1BA,QAA0B;EAAA,IAAbC,MAAa;;EAC9E,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAW;IAC9BH,QAAQ,IAAIA,QAAQ,CAACD,KAAD,EAAQI,KAAR,CAApB;EACD,CAFD;;EAIA,oBACE;IAAK,SAAS,EAAE,qBAAOC,qBAAMC,KAAb,EAAoBJ,MAAM,CAACK,SAA3B,CAAhB;IAAuD,KAAK,EAAEL,MAAM,CAACG;EAArE,gBACE;IACE,OAAO,EAAER,OADX;IAEE,eAAaK,MAAM,CAAC,aAAD,CAFrB;IAGE,QAAQ,EAAEJ,QAHZ;IAIE,IAAI,EAAEC,IAJR;IAKE,IAAI,EAAC,OALP;IAME,KAAK,EAAEC,KANT;IAOE,QAAQ,EAAE,CAACF,QAAD,GAAYK,YAAZ,GAA2BK;EAPvC,EADF,eAUE;IAAM,SAAS,EAAEH,qBAAMI;EAAvB,EAVF,CADF;AAcD,CAnBD;;;AAqBAb,KAAK,CAACc,WAAN,GAAoB,iBAApB"}

package/build/primitives/Radio/Radio.module.css

@@ -1,8 +1,8 @@
 :root {
-  --mirai-ui-checkbox-base: var(--mirai-ui-base);
-  --mirai-ui-radio-border-color: var(--mirai-ui-lighten);
-  --mirai-ui-radio-checked-color: var(--mirai-ui-accent);
-  --mirai-ui-radio-disabled: var(--mirai-ui-disabled);
+  --mirai-ui-radio-base: var(--mirai-ui-base);
+  --mirai-ui-radio-border: var(--mirai-ui-content-400);
+  --mirai-ui-radio-checked: var(--mirai-ui-accent);
+  --mirai-ui-radio-disabled: var(--mirai-ui-content-300);
   --mirai-ui-radio-size: var(--mirai-ui-space-L);
 }
 
@@ -15,7 +15,7 @@
 
 .radio input {
   background-color: var(--mirai-ui-radio-base);
-  border: 2px solid var(--mirai-ui-radio-border-color);
+  border: 1px solid var(--mirai-ui-radio-border);
   border-radius: 50%;
   box-sizing: border-box;
   height: var(--mirai-ui-radio-size);
@@ -43,17 +43,18 @@
 }
 
 .radio input:disabled {
-  border-color: var(--mirai-ui-checkbox-disabled);
+  border-color: var(--mirai-ui-radio-disabled);
 }
 
 .radio input:checked:not(:disabled) {
-  border-color: var(--mirai-ui-radio-checked-color);
+  background-color: var(--mirai-ui-radio-checked);
+  border-color: var(--mirai-ui-radio-checked);
 }
 
 .radio input:checked:disabled ~ .checkmark {
-  background-color: var(--mirai-ui-checkbox-disabled);
+  background-color: var(--mirai-ui-radio-disabled);
 }
 
 .radio input:checked:not(:disabled) ~ .checkmark {
-  background-color: var(--mirai-ui-radio-checked-color);
+  background-color: var(--mirai-ui-radio-base);
 }

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

@@ -6,7 +6,6 @@ exports[`primitive:<Radio> inherit:className 1`] = `
     class="radio mirai"
   >
     <input
-      class="mirai"
       name="name"
       type="radio"
       value=""

package/build/primitives/ScrollView/ScrollView.module.css

@@ -18,7 +18,7 @@
 }
 
 .indicator {
-  /*  */
+  /* TODO: Just need this empty class */
 }
 
 .scrollview:not(.indicator) {

package/build/primitives/Select/Select.module.css

@@ -1,25 +1,27 @@
 .select {
-  background-color: var(--mirai-ui-base);
+  background-color: var(--mirai-ui-input-background);
   border: none;
   box-sizing: border-box;
-  color: var(--mirai-ui-content);
+  color: var(--mirai-ui-input-color);
+  direction: var(--mirai-ui-text-direction);
   font-family: var(--mirai-ui-input-font);
   font-size: var(--mirai-ui-input-font-size);
-  width: 100%;
   margin: 0;
   outline: none;
+  text-align: var(--mirai-ui-text-align);
   user-select: none;
+  width: 100%;
 
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
 }
 
-.select.empty {
-  color: var(--mirai-ui-lighten);
+.select.empty:not(:focus) {
+  color: var(--mirai-ui-input-disabled);
 }
 
 .select:disabled {
-  /* background-color: transparent; */
-  color: var(--mirai-ui-lighten);
+  color: var(--mirai-ui-input-disabled);
+  opacity: 1;
 }

package/build/primitives/Switch/Switch.js

@@ -18,8 +18,7 @@ var _SwitchModule = _interopRequireDefault(require("./Switch.module.css"));
 var _excluded = ["checked", "disabled", "name", "onChange"];
 
 var Switch = function Switch(_ref) {
-  var _ref$checked = _ref.checked,
-      checked = _ref$checked === void 0 ? false : _ref$checked,
+  var checked = _ref.checked,
       disabled = _ref.disabled,
       name = _ref.name,
       onChange = _ref.onChange,
@@ -36,8 +35,7 @@ var Switch = function Switch(_ref) {
     checked: checked,
     disabled: disabled,
     name: name,
-    type: "checkbox",
-    className: _SwitchModule.default.input
+    type: "checkbox"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _SwitchModule.default.area
   }, /*#__PURE__*/_react.default.createElement("span", {

package/build/primitives/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["Switch","checked","disabled","name","onChange","others","handleChange","event","style","switch","className","undefined","input","area","toggle","displayName"],"sources":["../../../src/primitives/Switch/Switch.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './Switch.module.css';\n\nconst Switch = ({ checked = false, disabled, name, onChange, ...others }) => {\n  const handleChange = (event) => {\n    onChange && onChange(!checked, event);\n  };\n\n  return (\n    <div {...others} className={styles(style.switch, others.className)} onClick={!disabled ? handleChange : undefined}>\n      <input checked={checked} disabled={disabled} name={name} type=\"checkbox\" className={style.input} />\n      <div className={style.area}>\n        <span className={style.toggle}></span>\n      </div>\n    </div>\n  );\n};\n\nSwitch.displayName = 'Primitive:Switch';\n\nSwitch.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n};\n\nexport { Switch };\n"],"mappings":";;;;;;;;;;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS,OAA8D;EAAA,wBAA3DC,OAA2D;EAAA,IAA3DA,OAA2D,6BAAjD,KAAiD;EAAA,IAA1CC,QAA0C,QAA1CA,QAA0C;EAAA,IAAhCC,IAAgC,QAAhCA,IAAgC;EAAA,IAA1BC,QAA0B,QAA1BA,QAA0B;EAAA,IAAbC,MAAa;;EAC3E,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAW;IAC9BH,QAAQ,IAAIA,QAAQ,CAAC,CAACH,OAAF,EAAWM,KAAX,CAApB;EACD,CAFD;;EAIA,oBACE,sDAASF,MAAT;IAAiB,SAAS,EAAE,qBAAOG,sBAAMC,MAAb,EAAqBJ,MAAM,CAACK,SAA5B,CAA5B;IAAoE,OAAO,EAAE,CAACR,QAAD,GAAYI,YAAZ,GAA2BK;EAAxG,iBACE;IAAO,OAAO,EAAEV,OAAhB;IAAyB,QAAQ,EAAEC,QAAnC;IAA6C,IAAI,EAAEC,IAAnD;IAAyD,IAAI,EAAC,UAA9D;IAAyE,SAAS,EAAEK,sBAAMI;EAA1F,EADF,eAEE;IAAK,SAAS,EAAEJ,sBAAMK;EAAtB,gBACE;IAAM,SAAS,EAAEL,sBAAMM;EAAvB,EADF,CAFF,CADF;AAQD,CAbD;;;AAeAd,MAAM,CAACe,WAAP,GAAqB,kBAArB"}
+{"version":3,"file":"Switch.js","names":["Switch","checked","disabled","name","onChange","others","handleChange","event","style","switch","className","undefined","area","toggle","displayName"],"sources":["../../../src/primitives/Switch/Switch.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './Switch.module.css';\n\nconst Switch = ({ checked, disabled, name, onChange, ...others }) => {\n  const handleChange = (event) => {\n    onChange && onChange(!checked, event);\n  };\n\n  return (\n    <div {...others} className={styles(style.switch, others.className)} onClick={!disabled ? handleChange : undefined}>\n      <input checked={checked} disabled={disabled} name={name} type=\"checkbox\" />\n      <div className={style.area}>\n        <span className={style.toggle}></span>\n      </div>\n    </div>\n  );\n};\n\nSwitch.displayName = 'Primitive:Switch';\n\nSwitch.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n};\n\nexport { Switch };\n"],"mappings":";;;;;;;;;;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS,OAAsD;EAAA,IAAnDC,OAAmD,QAAnDA,OAAmD;EAAA,IAA1CC,QAA0C,QAA1CA,QAA0C;EAAA,IAAhCC,IAAgC,QAAhCA,IAAgC;EAAA,IAA1BC,QAA0B,QAA1BA,QAA0B;EAAA,IAAbC,MAAa;;EACnE,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAW;IAC9BH,QAAQ,IAAIA,QAAQ,CAAC,CAACH,OAAF,EAAWM,KAAX,CAApB;EACD,CAFD;;EAIA,oBACE,sDAASF,MAAT;IAAiB,SAAS,EAAE,qBAAOG,sBAAMC,MAAb,EAAqBJ,MAAM,CAACK,SAA5B,CAA5B;IAAoE,OAAO,EAAE,CAACR,QAAD,GAAYI,YAAZ,GAA2BK;EAAxG,iBACE;IAAO,OAAO,EAAEV,OAAhB;IAAyB,QAAQ,EAAEC,QAAnC;IAA6C,IAAI,EAAEC,IAAnD;IAAyD,IAAI,EAAC;EAA9D,EADF,eAEE;IAAK,SAAS,EAAEK,sBAAMI;EAAtB,gBACE;IAAM,SAAS,EAAEJ,sBAAMK;EAAvB,EADF,CAFF,CADF;AAQD,CAbD;;;AAeAb,MAAM,CAACc,WAAP,GAAqB,kBAArB"}

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

@@ -1,6 +1,10 @@
 :root {
-  --mirai-ui-switch-border: 2px;
-  --mirai-ui-switch-radius: var(--mirai-ui-space-L);
+  --mirai-ui-switch-base: var(--mirai-ui-base);
+  --mirai-ui-switch-border-color: var(--mirai-ui-content-400);
+  --mirai-ui-switch-border-size: calc(var(--mirai-ui-space-XS) / 4);
+  --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-300);
   --mirai-ui-switch-size: var(--mirai-ui-space-L);
 }
 
@@ -9,49 +13,53 @@
   box-sizing: border-box;
 }
 
-.switch .input {
+.switch input {
   height: 0;
+  outline: none;
   pointer-events: none;
-  visibility: hidden;
-  width: 0;
   position: absolute;
-  outline: none;
   user-select: none;
+  visibility: hidden;
+  width: 0;
+
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
 }
 
 .switch .area {
   align-items: center;
   justify-content: center;
-  background-color: var(--mirai-ui-lighten);
-  border-radius: var(--mirai-ui-switch-radius);
+  background-color: var(--mirai-ui-switch-border-color);
+  border-radius: var(--mirai-ui-switch-border-radius);
   cursor: pointer;
   display: flex;
-  height: calc(var(--mirai-ui-switch-size) + calc(var(--mirai-ui-switch-border) * 2));
+  height: calc(var(--mirai-ui-switch-size) + calc(var(--mirai-ui-switch-border-size) * 2));
   position: relative;
   transition: background-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
   width: calc(var(--mirai-ui-switch-size) * 2);
 }
 
 .switch .toggle {
-  background-color: var(--mirai-ui-base);
-  border-radius: calc(var(--mirai-ui-switch-radius) - var(--mirai-ui-switch-border));
+  background-color: var(--mirai-ui-switch-base);
+  border-radius: calc(var(--mirai-ui-switch-border-radius) - var(--mirai-ui-switch-border-size));
   height: var(--mirai-ui-switch-size);
-  left: var(--mirai-ui-switch-border);
+  left: var(--mirai-ui-switch-border-size);
   position: absolute;
-  top: var(--mirai-ui-switch-border);
+  top: var(--mirai-ui-switch-border-size);
   transition: var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
   width: var(--mirai-ui-switch-size);
 }
 
-.switch .input:disabled + .area {
-  background-color: var(--mirai-ui-lighten);
+.switch input:checked + .area {
+  background-color: var(--mirai-ui-switch-checked);
 }
 
-.switch .input:checked + .area {
-  background-color: var(--mirai-ui-accent);
+.switch input:disabled + .area {
+  background-color: var(--mirai-ui-switch-disabled);
 }
 
-.switch .input:checked + .area .toggle {
-  left: calc(100% - var(--mirai-ui-switch-border));
+.switch input:checked + .area .toggle {
+  left: calc(100% - var(--mirai-ui-switch-border-size));
   transform: translateX(-100%);
 }

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

@@ -6,7 +6,6 @@ exports[`primitive:<Switch> inherit:className 1`] = `
     class="switch mirai"
   >
     <input
-      class="input"
       name="name"
       type="checkbox"
     />
@@ -28,7 +27,6 @@ exports[`primitive:<Switch> prop:checked 1`] = `
   >
     <input
       checked=""
-      class="input"
       name="name"
       type="checkbox"
     />
@@ -49,7 +47,6 @@ exports[`primitive:<Switch> prop:disabled 1`] = `
     class="switch"
   >
     <input
-      class="input"
       disabled=""
       name="name"
       type="checkbox"
@@ -71,7 +68,6 @@ exports[`primitive:<Switch> render 1`] = `
     class="switch"
   >
     <input
-      class="input"
       name="name"
       type="checkbox"
     />
@@ -93,7 +89,6 @@ exports[`primitive:<Switch> testID 1`] = `
     data-testid="mirai"
   >
     <input
-      class="input"
       name="name"
       type="checkbox"
     />

package/build/primitives/Text/Text.js

@@ -17,21 +17,20 @@ var _helpers = require("../../helpers");
 
 var _TextModule = _interopRequireDefault(require("./Text.module.css"));
 
-var _excluded = ["action", "bold", "children", "headline", "lighten", "small", "tag", "upperCase"];
+var _excluded = ["action", "bold", "children", "headline", "small", "tag", "upperCase"];
 
 var Text = function Text(_ref) {
   var action = _ref.action,
       bold = _ref.bold,
       children = _ref.children,
       headline = _ref.headline,
-      lighten = _ref.lighten,
       small = _ref.small,
       _ref$tag = _ref.tag,
       tag = _ref$tag === void 0 ? 'span' : _ref$tag,
       upperCase = _ref.upperCase,
       others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(tag, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, others), {}, {
-    className: (0, _helpers.styles)(_TextModule.default.text, bold && _TextModule.default.bold, lighten && _TextModule.default.lighten, headline ? _TextModule.default.headline : action ? _TextModule.default.action : small ? _TextModule.default.small : _TextModule.default.paragraph, upperCase && _TextModule.default.upperCase, others.className)
+    className: (0, _helpers.styles)(_TextModule.default.text, bold && _TextModule.default.bold, headline ? _TextModule.default.headline : action ? _TextModule.default.action : small ? _TextModule.default.small : _TextModule.default.paragraph, upperCase && _TextModule.default.upperCase, others.className)
   }), children);
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["Text","action","bold","children","headline","lighten","small","tag","upperCase","others","React","createElement","className","style","text","paragraph","displayName"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './Text.module.css';\n\nconst Text = ({ action, bold, children, headline, lighten, small, tag = 'span', upperCase, ...others }) =>\n  React.createElement(\n    tag,\n    {\n      ...others,\n      className: styles(\n        style.text,\n        bold && style.bold,\n        lighten && style.lighten,\n        headline ? style.headline : action ? style.action : small ? style.small : style.paragraph,\n        upperCase && style.upperCase,\n        others.className,\n      ),\n    },\n    children,\n  );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n  action: PropTypes.bool,\n  bold: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  headline: PropTypes.bool,\n  lighten: PropTypes.bool,\n  upperCase: PropTypes.bool,\n  small: PropTypes.bool,\n  tag: PropTypes.string,\n};\n\nexport { Text };\n"],"mappings":";;;;;;;;;;;;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO;EAAA,IAAGC,MAAH,QAAGA,MAAH;EAAA,IAAWC,IAAX,QAAWA,IAAX;EAAA,IAAiBC,QAAjB,QAAiBA,QAAjB;EAAA,IAA2BC,QAA3B,QAA2BA,QAA3B;EAAA,IAAqCC,OAArC,QAAqCA,OAArC;EAAA,IAA8CC,KAA9C,QAA8CA,KAA9C;EAAA,oBAAqDC,GAArD;EAAA,IAAqDA,GAArD,yBAA2D,MAA3D;EAAA,IAAmEC,SAAnE,QAAmEA,SAAnE;EAAA,IAAiFC,MAAjF;EAAA,oBACXC,eAAMC,aAAN,CACEJ,GADF,8DAGOE,MAHP;IAIIG,SAAS,EAAE,qBACTC,oBAAMC,IADG,EAETZ,IAAI,IAAIW,oBAAMX,IAFL,EAGTG,OAAO,IAAIQ,oBAAMR,OAHR,EAITD,QAAQ,GAAGS,oBAAMT,QAAT,GAAoBH,MAAM,GAAGY,oBAAMZ,MAAT,GAAkBK,KAAK,GAAGO,oBAAMP,KAAT,GAAiBO,oBAAME,SAJvE,EAKTP,SAAS,IAAIK,oBAAML,SALV,EAMTC,MAAM,CAACG,SANE;EAJf,IAaET,QAbF,CADW;AAAA,CAAb;;;AAiBAH,IAAI,CAACgB,WAAL,GAAmB,gBAAnB"}
+{"version":3,"file":"Text.js","names":["Text","action","bold","children","headline","small","tag","upperCase","others","React","createElement","className","style","text","paragraph","displayName"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './Text.module.css';\n\nconst Text = ({ action, bold, children, headline, small, tag = 'span', upperCase, ...others }) =>\n  React.createElement(\n    tag,\n    {\n      ...others,\n      className: styles(\n        style.text,\n        bold && style.bold,\n        headline ? style.headline : action ? style.action : small ? style.small : style.paragraph,\n        upperCase && style.upperCase,\n        others.className,\n      ),\n    },\n    children,\n  );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n  action: PropTypes.bool,\n  bold: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  headline: PropTypes.bool,\n  upperCase: PropTypes.bool,\n  small: PropTypes.bool,\n  tag: PropTypes.string,\n};\n\nexport { Text };\n"],"mappings":";;;;;;;;;;;;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO;EAAA,IAAGC,MAAH,QAAGA,MAAH;EAAA,IAAWC,IAAX,QAAWA,IAAX;EAAA,IAAiBC,QAAjB,QAAiBA,QAAjB;EAAA,IAA2BC,QAA3B,QAA2BA,QAA3B;EAAA,IAAqCC,KAArC,QAAqCA,KAArC;EAAA,oBAA4CC,GAA5C;EAAA,IAA4CA,GAA5C,yBAAkD,MAAlD;EAAA,IAA0DC,SAA1D,QAA0DA,SAA1D;EAAA,IAAwEC,MAAxE;EAAA,oBACXC,eAAMC,aAAN,CACEJ,GADF,8DAGOE,MAHP;IAIIG,SAAS,EAAE,qBACTC,oBAAMC,IADG,EAETX,IAAI,IAAIU,oBAAMV,IAFL,EAGTE,QAAQ,GAAGQ,oBAAMR,QAAT,GAAoBH,MAAM,GAAGW,oBAAMX,MAAT,GAAkBI,KAAK,GAAGO,oBAAMP,KAAT,GAAiBO,oBAAME,SAHvE,EAITP,SAAS,IAAIK,oBAAML,SAJV,EAKTC,MAAM,CAACG,SALE;EAJf,IAYER,QAZF,CADW;AAAA,CAAb;;;AAgBAH,IAAI,CAACe,WAAL,GAAmB,gBAAnB"}

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

@@ -4,6 +4,7 @@
   display: inline-block;
   font-family: var(--mirai-ui-font);
   font-weight: var(--mirai-ui-font-weight);
+  text-align: var(--mirai-ui-text-align);
 }
 
 .bold {
@@ -11,10 +12,6 @@
   font-weight: var(--mirai-ui-font-bold-weight);
 }
 
-.lighten {
-  color: var(--mirai-ui-lighten);
-}
-
 .headline {
   font-size: var(--mirai-ui-font-size-headline);
 }

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

@@ -50,16 +50,6 @@ exports[`primitive:<Text> prop:headline 1`] = `
 </DocumentFragment>
 `;
 
-exports[`primitive:<Text> prop:lighten 1`] = `
-<DocumentFragment>
-  <span
-    class="text lighten paragraph"
-  >
-    Lorem Ipsum
-  </span>
-</DocumentFragment>
-`;
-
 exports[`primitive:<Text> prop:small 1`] = `
 <DocumentFragment>
   <span

package/build/primitives/View/View.js

@@ -11,6 +11,8 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _helpers = require("../../helpers");
@@ -19,7 +21,7 @@ var _ViewModule = _interopRequireDefault(require("./View.module.css"));
 
 var _excluded = ["children", "fit", "row", "tag"];
 
-var View = function View(_ref) {
+var View = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       fit = _ref.fit,
       row = _ref.row,
@@ -27,10 +29,17 @@ var View = function View(_ref) {
       tag = _ref$tag === void 0 ? 'div' : _ref$tag,
       others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(tag, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, others), {}, {
-    className: (0, _helpers.styles)(_ViewModule.default.view, fit && _ViewModule.default.fit, row && _ViewModule.default.row, others.className)
+    className: (0, _helpers.styles)(_ViewModule.default.view, fit && _ViewModule.default.fit, row && _ViewModule.default.row, others.className),
+    ref: ref
   }), children);
-};
+});
 
 exports.View = View;
 View.displayName = 'Primitive:View';
+View.propTypes = {
+  children: _propTypes.default.node,
+  fit: _propTypes.default.bool,
+  row: _propTypes.default.bool,
+  tag: _propTypes.default.string
+};
 //# sourceMappingURL=View.js.map

package/build/primitives/View/View.js.map

@@ -1 +1 @@
-{"version":3,"file":"View.js","names":["View","children","fit","row","tag","others","React","createElement","className","style","view","displayName"],"sources":["../../../src/primitives/View/View.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './View.module.css';\n\nconst View = ({ children, fit, row, tag = 'div', ...others }) =>\n  React.createElement(\n    tag,\n    {\n      ...others,\n      className: styles(style.view, fit && style.fit, row && style.row, others.className),\n    },\n    children,\n  );\n\nView.displayName = 'Primitive:View';\n\nView.propTypes = {\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  row: PropTypes.bool,\n  tag: PropTypes.string,\n};\n\nexport { View };\n"],"mappings":";;;;;;;;;;;;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO;EAAA,IAAGC,QAAH,QAAGA,QAAH;EAAA,IAAaC,GAAb,QAAaA,GAAb;EAAA,IAAkBC,GAAlB,QAAkBA,GAAlB;EAAA,oBAAuBC,GAAvB;EAAA,IAAuBA,GAAvB,yBAA6B,KAA7B;EAAA,IAAuCC,MAAvC;EAAA,oBACXC,eAAMC,aAAN,CACEH,GADF,8DAGOC,MAHP;IAIIG,SAAS,EAAE,qBAAOC,oBAAMC,IAAb,EAAmBR,GAAG,IAAIO,oBAAMP,GAAhC,EAAqCC,GAAG,IAAIM,oBAAMN,GAAlD,EAAuDE,MAAM,CAACG,SAA9D;EAJf,IAMEP,QANF,CADW;AAAA,CAAb;;;AAUAD,IAAI,CAACW,WAAL,GAAmB,gBAAnB"}
+{"version":3,"file":"View.js","names":["View","React","forwardRef","ref","children","fit","row","tag","others","createElement","className","style","view","displayName","propTypes","PropTypes","node","bool","string"],"sources":["../../../src/primitives/View/View.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './View.module.css';\n\nconst View = React.forwardRef(({ children, fit, row, tag = 'div', ...others }, ref) =>\n  React.createElement(\n    tag,\n    {\n      ...others,\n      className: styles(style.view, fit && style.fit, row && style.row, others.className),\n      ref: ref,\n    },\n    children,\n  ),\n);\n\nView.displayName = 'Primitive:View';\n\nView.propTypes = {\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  row: PropTypes.bool,\n  tag: PropTypes.string,\n};\n\nexport { View };\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,IAAI,gBAAGC,eAAMC,UAAN,CAAiB,gBAAiDC,GAAjD;EAAA,IAAGC,QAAH,QAAGA,QAAH;EAAA,IAAaC,GAAb,QAAaA,GAAb;EAAA,IAAkBC,GAAlB,QAAkBA,GAAlB;EAAA,oBAAuBC,GAAvB;EAAA,IAAuBA,GAAvB,yBAA6B,KAA7B;EAAA,IAAuCC,MAAvC;EAAA,oBAC5BP,eAAMQ,aAAN,CACEF,GADF,8DAGOC,MAHP;IAIIE,SAAS,EAAE,qBAAOC,oBAAMC,IAAb,EAAmBP,GAAG,IAAIM,oBAAMN,GAAhC,EAAqCC,GAAG,IAAIK,oBAAML,GAAlD,EAAuDE,MAAM,CAACE,SAA9D,CAJf;IAKIP,GAAG,EAAEA;EALT,IAOEC,QAPF,CAD4B;AAAA,CAAjB,CAAb;;;AAYAJ,IAAI,CAACa,WAAL,GAAmB,gBAAnB;AAEAb,IAAI,CAACc,SAAL,GAAiB;EACfV,QAAQ,EAAEW,mBAAUC,IADL;EAEfX,GAAG,EAAEU,mBAAUE,IAFA;EAGfX,GAAG,EAAES,mBAAUE,IAHA;EAIfV,GAAG,EAAEQ,mBAAUG;AAJA,CAAjB"}

package/build/primitives/index.js

@@ -43,67 +43,67 @@ Object.keys(_Input).forEach(function (key) {
   });
 });
 
-var _Pressable = require("./Pressable");
+var _Layer = require("./Layer");
 
-Object.keys(_Pressable).forEach(function (key) {
+Object.keys(_Layer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Pressable[key]) return;
+  if (key in exports && exports[key] === _Layer[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Pressable[key];
+      return _Layer[key];
     }
   });
 });
 
-var _Radio = require("./Radio");
+var _Pressable = require("./Pressable");
 
-Object.keys(_Radio).forEach(function (key) {
+Object.keys(_Pressable).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Radio[key]) return;
+  if (key in exports && exports[key] === _Pressable[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Radio[key];
+      return _Pressable[key];
     }
   });
 });
 
-var _Select = require("./Select");
+var _Radio = require("./Radio");
 
-Object.keys(_Select).forEach(function (key) {
+Object.keys(_Radio).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Select[key]) return;
+  if (key in exports && exports[key] === _Radio[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Select[key];
+      return _Radio[key];
     }
   });
 });
 
-var _View = require("./View");
+var _ScrollView = require("./ScrollView");
 
-Object.keys(_View).forEach(function (key) {
+Object.keys(_ScrollView).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _View[key]) return;
+  if (key in exports && exports[key] === _ScrollView[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _View[key];
+      return _ScrollView[key];
     }
   });
 });
 
-var _ScrollView = require("./ScrollView");
+var _Select = require("./Select");
 
-Object.keys(_ScrollView).forEach(function (key) {
+Object.keys(_Select).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ScrollView[key]) return;
+  if (key in exports && exports[key] === _Select[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _ScrollView[key];
+      return _Select[key];
     }
   });
 });
@@ -133,4 +133,17 @@ Object.keys(_Text).forEach(function (key) {
     }
   });
 });
+
+var _View = require("./View");
+
+Object.keys(_View).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _View[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _View[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/build/primitives/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/primitives/index.js"],"sourcesContent":["export * from './Checkbox';\nexport * from './Icon';\nexport * from './Input';\nexport * from './Pressable';\nexport * from './Radio';\nexport * from './Select';\nexport * from './View';\nexport * from './ScrollView';\nexport * from './Switch';\nexport * from './Text';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/primitives/index.js"],"sourcesContent":["export * from './Checkbox';\nexport * from './Icon';\nexport * from './Input';\nexport * from './Layer';\nexport * from './Pressable';\nexport * from './Radio';\nexport * from './ScrollView';\nexport * from './Select';\nexport * from './Switch';\nexport * from './Text';\nexport * from './View';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}