@mirai/ui 1.0.12 → 1.0.13

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

@@ -0,0 +1,535 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`primitive:<ScrollView> inherit:className 1`] = `
+<DocumentFragment>
+  <div
+    class="scrollview mirai"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<ScrollView> prop:height 1`] = `
+<DocumentFragment>
+  <div
+    class="scrollview"
+    style="height: 256px;"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<ScrollView> prop:horizontal 1`] = `
+<DocumentFragment>
+  <div
+    class="scrollview horizontal"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<ScrollView> prop:scrollIndicator 1`] = `
+<DocumentFragment>
+  <div
+    class="scrollview indicator"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<ScrollView> prop:scrollto 1`] = `
+<DocumentFragment>
+  <div
+    class="scrollview"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<ScrollView> prop:tag 1`] = `
+<DocumentFragment>
+  <section
+    class="scrollview"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </section>
+</DocumentFragment>
+`;
+
+exports[`primitive:<ScrollView> prop:width 1`] = `
+<DocumentFragment>
+  <div
+    class="scrollview"
+    style="width: 256px;"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<ScrollView> renders 1`] = `
+<DocumentFragment>
+  <div
+    class="scrollview"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<ScrollView> testID 1`] = `
+<DocumentFragment>
+  <div
+    class="scrollview"
+    data-testid="mirai"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/build/primitives/ScrollView/index.js

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

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

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

package/build/primitives/Select/Select.js

@@ -0,0 +1,95 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Select = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
+
+var _excluded = ["disabled", "emptyOption", "options", "value", "onChange", "onEnter", "onError", "onLeave"];
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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 EMPTY = '';
+
+var Select = function Select(_ref) {
+  var disabled = _ref.disabled,
+      emptyOption = _ref.emptyOption,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [] : _ref$options,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      onEnter = _ref.onEnter,
+      onError = _ref.onError,
+      onLeave = _ref.onLeave,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  (0, _react.useEffect)(function () {
+    var errors = (0, _helpers.getInputErrors)(_objectSpread({}, others));
+    if (errors && onError) onError(errors); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  var handleChange = function handleChange(value, event) {
+    onError && onError((0, _helpers.getInputErrors)(_objectSpread(_objectSpread({}, others), {}, {
+      value: value
+    })));
+    onChange && onChange(value, event);
+  };
+
+  return /*#__PURE__*/_react.default.createElement('select', _objectSpread(_objectSpread({}, others), {}, {
+    disabled: disabled,
+    value: value,
+    className: (0, _helpers.styles)(_SelectModule.default.select, value === EMPTY && _SelectModule.default.empty, others.className)
+  }, !disabled ? {
+    onChange: function onChange(event) {
+      return handleChange(event.target.value, event);
+    },
+    onFocus: onEnter,
+    onBlur: onLeave
+  } : {}), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, emptyOption && /*#__PURE__*/_react.default.createElement("option", {
+    value: EMPTY
+  }, emptyOption), options.map(function (option) {
+    return /*#__PURE__*/_react.default.createElement("option", {
+      value: option,
+      key: option
+    }, option);
+  })));
+};
+
+exports.Select = Select;
+Select.displayName = 'Primitive:Input';
+Select.propTypes = {
+  disabled: _propTypes.default.bool,
+  emptyOption: _propTypes.default.string,
+  name: _propTypes.default.string.isRequired,
+  options: _propTypes.default.arrayOf(_propTypes.default.string),
+  value: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  onEnter: _propTypes.default.func,
+  onError: _propTypes.default.func,
+  onLeave: _propTypes.default.func
+};
+//# sourceMappingURL=Select.js.map

package/build/primitives/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":["EMPTY","Select","disabled","emptyOption","options","value","onChange","onEnter","onError","onLeave","others","errors","handleChange","event","React","createElement","className","style","select","empty","target","onFocus","onBlur","map","option","displayName","propTypes","PropTypes","bool","string","name","isRequired","arrayOf","func"],"sources":["../../../src/primitives/Select/Select.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect } from 'react';\n\nimport { getInputErrors, styles } from '../../helpers';\nimport style from './Select.module.css';\n\nconst EMPTY = '';\n\nconst Select = ({ disabled, emptyOption, options = [], value, onChange, onEnter, onError, onLeave, ...others }) => {\n  useEffect(() => {\n    const errors = getInputErrors({ ...others });\n    if (errors && onError) onError(errors);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleChange = (value, event) => {\n    onError && onError(getInputErrors({ ...others, value }));\n    onChange && onChange(value, event);\n  };\n\n  return React.createElement(\n    'select',\n    {\n      ...others,\n      disabled,\n      value,\n      className: styles(style.select, value === EMPTY && style.empty, others.className),\n      ...(!disabled\n        ? {\n            onChange: (event) => handleChange(event.target.value, event),\n            onFocus: onEnter,\n            onBlur: onLeave,\n          }\n        : {}),\n    },\n    <>\n      {emptyOption && <option value={EMPTY}>{emptyOption}</option>}\n      {options.map((option) => (\n        <option value={option} key={option}>\n          {option}\n        </option>\n      ))}\n    </>,\n  );\n};\n\nSelect.displayName = 'Primitive:Input';\n\nSelect.propTypes = {\n  disabled: PropTypes.bool,\n  emptyOption: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  options: PropTypes.arrayOf(PropTypes.string),\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onError: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { Select };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,KAAK,GAAG,EAAd;;AAEA,IAAMC,MAAM,GAAG,SAATA,MAAS,OAAoG;EAAA,IAAjGC,QAAiG,QAAjGA,QAAiG;EAAA,IAAvFC,WAAuF,QAAvFA,WAAuF;EAAA,wBAA1EC,OAA0E;EAAA,IAA1EA,OAA0E,6BAAhE,EAAgE;EAAA,IAA5DC,KAA4D,QAA5DA,KAA4D;EAAA,IAArDC,QAAqD,QAArDA,QAAqD;EAAA,IAA3CC,OAA2C,QAA3CA,OAA2C;EAAA,IAAlCC,OAAkC,QAAlCA,OAAkC;EAAA,IAAzBC,OAAyB,QAAzBA,OAAyB;EAAA,IAAbC,MAAa;;EACjH,sBAAU,YAAM;IACd,IAAMC,MAAM,GAAG,+CAAoBD,MAApB,EAAf;IACA,IAAIC,MAAM,IAAIH,OAAd,EAAuBA,OAAO,CAACG,MAAD,CAAP,CAFT,CAGd;EACD,CAJD,EAIG,EAJH;;EAMA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACP,KAAD,EAAQQ,KAAR,EAAkB;IACrCL,OAAO,IAAIA,OAAO,CAAC,6DAAoBE,MAApB;MAA4BL,KAAK,EAALA;IAA5B,GAAD,CAAlB;IACAC,QAAQ,IAAIA,QAAQ,CAACD,KAAD,EAAQQ,KAAR,CAApB;EACD,CAHD;;EAKA,oBAAOC,eAAMC,aAAN,CACL,QADK,kCAGAL,MAHA;IAIHR,QAAQ,EAARA,QAJG;IAKHG,KAAK,EAALA,KALG;IAMHW,SAAS,EAAE,qBAAOC,sBAAMC,MAAb,EAAqBb,KAAK,KAAKL,KAAV,IAAmBiB,sBAAME,KAA9C,EAAqDT,MAAM,CAACM,SAA5D;EANR,GAOC,CAACd,QAAD,GACA;IACEI,QAAQ,EAAE,kBAACO,KAAD;MAAA,OAAWD,YAAY,CAACC,KAAK,CAACO,MAAN,CAAaf,KAAd,EAAqBQ,KAArB,CAAvB;IAAA,CADZ;IAEEQ,OAAO,EAAEd,OAFX;IAGEe,MAAM,EAAEb;EAHV,CADA,GAMA,EAbD,gBAeL,4DACGN,WAAW,iBAAI;IAAQ,KAAK,EAAEH;EAAf,GAAuBG,WAAvB,CADlB,EAEGC,OAAO,CAACmB,GAAR,CAAY,UAACC,MAAD;IAAA,oBACX;MAAQ,KAAK,EAAEA,MAAf;MAAuB,GAAG,EAAEA;IAA5B,GACGA,MADH,CADW;EAAA,CAAZ,CAFH,CAfK,CAAP;AAwBD,CApCD;;;AAsCAvB,MAAM,CAACwB,WAAP,GAAqB,iBAArB;AAEAxB,MAAM,CAACyB,SAAP,GAAmB;EACjBxB,QAAQ,EAAEyB,mBAAUC,IADH;EAEjBzB,WAAW,EAAEwB,mBAAUE,MAFN;EAGjBC,IAAI,EAAEH,mBAAUE,MAAV,CAAiBE,UAHN;EAIjB3B,OAAO,EAAEuB,mBAAUK,OAAV,CAAkBL,mBAAUE,MAA5B,CAJQ;EAKjBxB,KAAK,EAAEsB,mBAAUE,MALA;EAMjBvB,QAAQ,EAAEqB,mBAAUM,IANH;EAOjB1B,OAAO,EAAEoB,mBAAUM,IAPF;EAQjBzB,OAAO,EAAEmB,mBAAUM,IARF;EASjBxB,OAAO,EAAEkB,mBAAUM;AATF,CAAnB"}

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

@@ -0,0 +1,27 @@
+.select {
+  background-color: var(--mirai-ui-input-background);
+  border: none;
+  box-sizing: border-box;
+  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);
+  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:not(:focus) {
+  color: var(--mirai-ui-input-disabled);
+}
+
+.select:disabled {
+  color: var(--mirai-ui-input-disabled);
+  opacity: 1;
+}