@mirai/ui 1.0.12 → 1.0.13

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

@@ -0,0 +1,107 @@
+:root {
+  --mirai-ui-input-text-border: solid 1px var(--mirai-ui-content-400);
+  --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-error: var(--mirai-ui-error);
+}
+
+.inputContainer {
+  flex: 1;
+  margin-bottom: var(--mirai-ui-input-text-padding-y);
+  position: relative;
+}
+
+.inputBorder {
+  border: var(--mirai-ui-input-text-border);
+  border-radius: var(--mirai-ui-input-text-radius);
+}
+
+.inputBorder.disabled {
+  border-color: var(--mirai-ui-input-text-disabled);
+}
+
+.inputBorder.error {
+  border-color: var(--mirai-ui-input-text-error);
+}
+
+.inputBorder.focus {
+  border-color: var(--mirai-ui-input-text-focus);
+}
+
+.input {
+  border-radius: var(--mirai-ui-input-text-radius);
+  padding: var(--mirai-ui-input-text-padding-y) var(--mirai-ui-input-text-padding-x);
+}
+
+.input.iconLeft {
+  padding-left: calc(var(--mirai-ui-input-text-padding-x) * 3);
+}
+
+.input.iconRight {
+  padding-right: calc(var(--mirai-ui-input-text-padding-x) * 3);
+}
+
+.input.empty:not(:focus),
+.input::placeholder {
+  color: var(--mirai-ui-base);
+}
+
+.hint {
+  margin: calc(var(--mirai-ui-input-text-padding-x) / 4) var(--mirai-ui-input-text-padding-x);
+}
+
+.icon {
+  color: var(--mirai-ui-input-disabled);
+  pointer-events: none;
+  position: absolute;
+}
+
+.pressable {
+  position: absolute;
+  right: var(--mirai-ui-input-text-padding-x);
+}
+
+.icon.left {
+  left: var(--mirai-ui-input-text-padding-x);
+}
+
+.icon.right {
+  right: var(--mirai-ui-input-text-padding-x);
+}
+
+.label {
+  background-color: var(--mirai-ui-input-background);
+  font-size: var(--mirai-ui-input-font-size);
+  margin: 0 calc(var(--mirai-ui-input-text-padding-x) / 2);
+  padding: 0 calc(var(--mirai-ui-input-text-padding-x) / 2);
+  pointer-events: none;
+  position: absolute;
+  top: var(--mirai-ui-input-text-padding-y);
+  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;
+}
+
+.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));
+}
+
+.text {
+  color: var(--mirai-ui-input-disabled);
+}
+
+.text.disabled {
+  color: var(--mirai-ui-input-text-disabled);
+}
+
+.text.focus {
+  color: var(--mirai-ui-input-text-focus);
+}
+
+.text.error {
+  color: var(--mirai-ui-error);
+}

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

@@ -0,0 +1,255 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component:<InputText> inherit:className 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputContainer mirai"
+  >
+    <div
+      class="view row inputBorder"
+    >
+      <input
+        class="input input"
+        name="name"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<InputText> prop:disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputContainer"
+  >
+    <div
+      class="view row inputBorder disabled"
+    >
+      <input
+        class="input input"
+        disabled=""
+        name="name"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<InputText> prop:error 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputContainer"
+  >
+    <div
+      class="view row inputBorder error"
+    >
+      <input
+        class="input input"
+        name="name"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<InputText> prop:hint 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputContainer"
+  >
+    <div
+      class="view row inputBorder"
+    >
+      <input
+        class="input input"
+        name="name"
+        type="text"
+        value=""
+      />
+    </div>
+    <span
+      class="text small text hint"
+    >
+      hint
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<InputText> prop:icon 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputContainer"
+  >
+    <div
+      class="view row inputBorder"
+    >
+      <span
+        class="icon icon left"
+      >
+        <svg
+          fill="none"
+          height="1em"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            r="3"
+          />
+        </svg>
+      </span>
+      <input
+        class="input input iconLeft"
+        name="name"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<InputText> prop:label 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputContainer"
+  >
+    <span
+      class="text paragraph text label"
+    >
+      label
+    </span>
+    <div
+      class="view row inputBorder"
+    >
+      <input
+        class="input input"
+        name="name"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<InputText> prop:multiLine 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputContainer"
+  >
+    <div
+      class="view row inputBorder"
+    >
+      <textarea
+        class="input input"
+        name="name"
+        type="text"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<InputText> prop:type 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputContainer"
+  >
+    <div
+      class="view row inputBorder"
+    >
+      <input
+        class="input input"
+        name="name"
+        type="password"
+        value=""
+      />
+      <button
+        class="pressable pressable"
+      >
+        <span
+          class="icon"
+        >
+          <svg
+            fill="none"
+            height="1em"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
+            />
+            <line
+              x1="1"
+              x2="23"
+              y1="1"
+              y2="23"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<InputText> renders 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputContainer"
+  >
+    <div
+      class="view row inputBorder"
+    >
+      <input
+        class="input input"
+        name="name"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<InputText> testID 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputContainer"
+  >
+    <div
+      class="view row inputBorder"
+    >
+      <input
+        class="input input"
+        data-testid="mirai"
+        name="name"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/build/components/InputText/index.js

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

package/build/components/InputText/index.js.map

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

package/build/components/Menu/Menu.Option.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Option = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _primitives = require("../../primitives");
+
+var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
+
+var _excluded = ["children", "disabled", "divider", "icon", "label"];
+
+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 Option = function Option(_ref) {
+  var children = _ref.children,
+      disabled = _ref.disabled,
+      divider = _ref.divider,
+      icon = _ref.icon,
+      label = _ref.label,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, _extends({}, others, {
+    tag: "div",
+    className: (0, _helpers.styles)(_MenuModule.default.option, divider && _MenuModule.default.divider, disabled && _MenuModule.default.disabled)
+  }), icon && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    name: icon,
+    className: (0, _helpers.styles)(_MenuModule.default.icon, disabled && _MenuModule.default.disabled)
+  }), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    className: (0, _helpers.styles)(_MenuModule.default.label, disabled && _MenuModule.default.disabled)
+  }, label), children);
+};
+
+exports.Option = Option;
+Option.displayName = 'Component:Menu:Option';
+Option.propTypes = {
+  children: _propTypes.default.node,
+  disabled: _propTypes.default.bool,
+  divider: _propTypes.default.bool,
+  icon: _propTypes.default.string,
+  label: _propTypes.default.string,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+  onPress: _propTypes.default.func
+};
+//# sourceMappingURL=Menu.Option.js.map

package/build/components/Menu/Menu.Option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.Option.js","names":["Option","children","disabled","divider","icon","label","others","style","option","displayName","propTypes","PropTypes","node","bool","string","value","oneOfType","number","isRequired","onPress","func"],"sources":["../../../src/components/Menu/Menu.Option.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Pressable, Text } from '../../primitives';\nimport style from './Menu.module.css';\n\nconst Option = ({ children, disabled, divider, icon, label, ...others }) => (\n  <Pressable\n    {...others}\n    tag=\"div\"\n    className={styles(style.option, divider && style.divider, disabled && style.disabled)}\n  >\n    {icon && <Icon name={icon} className={styles(style.icon, disabled && style.disabled)} />}\n    <Text className={styles(style.label, disabled && style.disabled)}>{label}</Text>\n    {children}\n  </Pressable>\n);\n\nOption.displayName = 'Component:Menu:Option';\n\nOption.propTypes = {\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  divider: PropTypes.bool,\n  icon: PropTypes.string,\n  label: PropTypes.string,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  onPress: PropTypes.func,\n};\n\nexport { Option };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,IAAGC,QAAH,QAAGA,QAAH;EAAA,IAAaC,QAAb,QAAaA,QAAb;EAAA,IAAuBC,OAAvB,QAAuBA,OAAvB;EAAA,IAAgCC,IAAhC,QAAgCA,IAAhC;EAAA,IAAsCC,KAAtC,QAAsCA,KAAtC;EAAA,IAAgDC,MAAhD;;EAAA,oBACb,6BAAC,qBAAD,eACMA,MADN;IAEE,GAAG,EAAC,KAFN;IAGE,SAAS,EAAE,qBAAOC,oBAAMC,MAAb,EAAqBL,OAAO,IAAII,oBAAMJ,OAAtC,EAA+CD,QAAQ,IAAIK,oBAAML,QAAjE;EAHb,IAKGE,IAAI,iBAAI,6BAAC,gBAAD;IAAM,IAAI,EAAEA,IAAZ;IAAkB,SAAS,EAAE,qBAAOG,oBAAMH,IAAb,EAAmBF,QAAQ,IAAIK,oBAAML,QAArC;EAA7B,EALX,eAME,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOK,oBAAMF,KAAb,EAAoBH,QAAQ,IAAIK,oBAAML,QAAtC;EAAjB,GAAmEG,KAAnE,CANF,EAOGJ,QAPH,CADa;AAAA,CAAf;;;AAYAD,MAAM,CAACS,WAAP,GAAqB,uBAArB;AAEAT,MAAM,CAACU,SAAP,GAAmB;EACjBT,QAAQ,EAAEU,mBAAUC,IADH;EAEjBV,QAAQ,EAAES,mBAAUE,IAFH;EAGjBV,OAAO,EAAEQ,mBAAUE,IAHF;EAIjBT,IAAI,EAAEO,mBAAUG,MAJC;EAKjBT,KAAK,EAAEM,mBAAUG,MALA;EAMjBC,KAAK,EAAEJ,mBAAUK,SAAV,CAAoB,CAACL,mBAAUG,MAAX,EAAmBH,mBAAUM,MAA7B,CAApB,EAA0DC,UANhD;EAOjBC,OAAO,EAAER,mBAAUS;AAPF,CAAnB"}

package/build/components/Menu/Menu.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Menu = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _primitives = require("../../primitives");
+
+var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
+
+var _Menu = require("./Menu.Option");
+
+var _excluded = ["children", "options", "Template", "visible", "onPress"];
+
+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 Menu = function Menu(_ref) {
+  var children = _ref.children,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [] : _ref$options,
+      _ref$Template = _ref.Template,
+      Template = _ref$Template === void 0 ? _Menu.Option : _ref$Template,
+      visible = _ref.visible,
+      _ref$onPress = _ref.onPress,
+      onPress = _ref$onPress === void 0 ? function () {} : _ref$onPress,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(_primitives.Layer, _extends({}, others, {
+    className: (0, _helpers.styles)(_MenuModule.default.menu, visible && _MenuModule.default.visible, others.className),
+    visible: visible
+  }), children, /*#__PURE__*/_react.default.createElement(_primitives.LayerContent, null, options.map(function () {
+    var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var index = arguments.length > 1 ? arguments[1] : undefined;
+    return /*#__PURE__*/_react.default.createElement(Template, _extends({}, option, {
+      "data-testid": others['data-testid'] ? "".concat(others['data-testid'], "-").concat(index) : undefined,
+      key: index,
+      onPress: !option.disabled ? function (event) {
+        return onPress(option.value, event);
+      } : undefined
+    }));
+  })));
+};
+
+exports.Menu = Menu;
+Menu.displayName = 'Component:Menu';
+Menu.propTypes = {
+  children: _propTypes.default.node,
+  options: _propTypes.default.arrayOf(_propTypes.default.shape({
+    children: _propTypes.default.node,
+    disabled: _propTypes.default.bool,
+    divider: _propTypes.default.bool,
+    icon: _propTypes.default.string,
+    label: _propTypes.default.string,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
+  })),
+  Template: _propTypes.default.node,
+  visible: _propTypes.default.bool,
+  onPress: _propTypes.default.func
+};
+//# sourceMappingURL=Menu.js.map

package/build/components/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","names":["Menu","children","options","Template","Option","visible","onPress","others","style","menu","className","map","option","index","undefined","disabled","event","value","displayName","propTypes","PropTypes","node","arrayOf","shape","bool","divider","icon","string","label","oneOfType","number","isRequired","func"],"sources":["../../../src/components/Menu/Menu.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Layer, LayerContent } from '../../primitives';\nimport style from './Menu.module.css';\nimport { Option } from './Menu.Option';\n\nconst Menu = ({ children, options = [], Template = Option, visible, onPress = () => {}, ...others }) => {\n  return (\n    <Layer {...others} className={styles(style.menu, visible && style.visible, others.className)} visible={visible}>\n      {children}\n      <LayerContent>\n        {options.map((option = {}, index) => (\n          <Template\n            {...option}\n            data-testid={others['data-testid'] ? `${others['data-testid']}-${index}` : undefined}\n            key={index}\n            onPress={!option.disabled ? (event) => onPress(option.value, event) : undefined}\n          />\n        ))}\n      </LayerContent>\n    </Layer>\n  );\n};\n\nMenu.displayName = 'Component:Menu';\n\nMenu.propTypes = {\n  children: PropTypes.node,\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      children: PropTypes.node,\n      disabled: PropTypes.bool,\n      divider: PropTypes.bool,\n      icon: PropTypes.string,\n      label: PropTypes.string,\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n    }),\n  ),\n  Template: PropTypes.node,\n  visible: PropTypes.bool,\n  onPress: PropTypes.func,\n};\n\nexport { Menu };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO,OAA2F;EAAA,IAAxFC,QAAwF,QAAxFA,QAAwF;EAAA,wBAA9EC,OAA8E;EAAA,IAA9EA,OAA8E,6BAApE,EAAoE;EAAA,yBAAhEC,QAAgE;EAAA,IAAhEA,QAAgE,8BAArDC,YAAqD;EAAA,IAA7CC,OAA6C,QAA7CA,OAA6C;EAAA,wBAApCC,OAAoC;EAAA,IAApCA,OAAoC,6BAA1B,YAAM,CAAE,CAAkB;EAAA,IAAbC,MAAa;;EACtG,oBACE,6BAAC,iBAAD,eAAWA,MAAX;IAAmB,SAAS,EAAE,qBAAOC,oBAAMC,IAAb,EAAmBJ,OAAO,IAAIG,oBAAMH,OAApC,EAA6CE,MAAM,CAACG,SAApD,CAA9B;IAA8F,OAAO,EAAEL;EAAvG,IACGJ,QADH,eAEE,6BAAC,wBAAD,QACGC,OAAO,CAACS,GAAR,CAAY;IAAA,IAACC,MAAD,uEAAU,EAAV;IAAA,IAAcC,KAAd;IAAA,oBACX,6BAAC,QAAD,eACMD,MADN;MAEE,eAAaL,MAAM,CAAC,aAAD,CAAN,aAA2BA,MAAM,CAAC,aAAD,CAAjC,cAAoDM,KAApD,IAA8DC,SAF7E;MAGE,GAAG,EAAED,KAHP;MAIE,OAAO,EAAE,CAACD,MAAM,CAACG,QAAR,GAAmB,UAACC,KAAD;QAAA,OAAWV,OAAO,CAACM,MAAM,CAACK,KAAR,EAAeD,KAAf,CAAlB;MAAA,CAAnB,GAA6DF;IAJxE,GADW;EAAA,CAAZ,CADH,CAFF,CADF;AAeD,CAhBD;;;AAkBAd,IAAI,CAACkB,WAAL,GAAmB,gBAAnB;AAEAlB,IAAI,CAACmB,SAAL,GAAiB;EACflB,QAAQ,EAAEmB,mBAAUC,IADL;EAEfnB,OAAO,EAAEkB,mBAAUE,OAAV,CACPF,mBAAUG,KAAV,CAAgB;IACdtB,QAAQ,EAAEmB,mBAAUC,IADN;IAEdN,QAAQ,EAAEK,mBAAUI,IAFN;IAGdC,OAAO,EAAEL,mBAAUI,IAHL;IAIdE,IAAI,EAAEN,mBAAUO,MAJF;IAKdC,KAAK,EAAER,mBAAUO,MALH;IAMdV,KAAK,EAAEG,mBAAUS,SAAV,CAAoB,CAACT,mBAAUO,MAAX,EAAmBP,mBAAUU,MAA7B,CAApB,EAA0DC;EANnD,CAAhB,CADO,CAFM;EAYf5B,QAAQ,EAAEiB,mBAAUC,IAZL;EAafhB,OAAO,EAAEe,mBAAUI,IAbJ;EAcflB,OAAO,EAAEc,mBAAUY;AAdJ,CAAjB"}

package/build/components/Menu/Menu.module.css

@@ -0,0 +1,50 @@
+:root {
+  --mirai-ui-menu-base: var(--mirai-ui-base);
+  --mirai-ui-menu-border-radius: var(--mirai-ui-border-radius);
+  --mirai-ui-menu-min-width: 200px;
+  --mirai-ui-menu-shadow: 0 1px calc(var(--mirai-ui-space-XS) / 2) var(--mirai-ui-lighten);
+  --mirai-ui-menu-option-padding: var(--mirai-ui-space-M);
+  --mirai-ui-menu-option-disabled: var(--mirai-ui-disabled);
+  --mirai-ui-menu-option-hover: var(--mirai-ui-accent-lighten);
+}
+
+.menu {
+  background-color: var(--mirai-ui-menu-base);
+  border-radius: var(--mirai-ui-menu-border-radius);
+  box-shadow: var(--mirai-ui-menu-shadow);
+  min-width: var(--mirai-ui-menu-min-width);
+  overflow: hidden;
+}
+
+.menu .option {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  padding: var(--mirai-ui-menu-option-padding);
+  align-items: center;
+  flex: 1;
+  width: 100%;
+}
+
+.menu .option:hover:not(.disabled) {
+  background-color: var(--mirai-ui-menu-option-hover);
+}
+
+.menu .icon {
+  margin-right: var(--mirai-ui-menu-option-padding);
+}
+
+.menu .label {
+  flex: 1;
+  text-align: left;
+  padding-right: var(--mirai-ui-menu-option-padding);
+}
+
+.menu .divider {
+  box-shadow: inset 0 -1px var(--mirai-ui-menu-option-disabled);
+}
+
+.menu .disabled {
+  color: var(--mirai-ui-menu-option-disabled);
+  cursor: default;
+}