@mirai/ui 1.0.49 → 1.0.51

package/README.md

@@ -85,6 +85,14 @@ const MyComponent = () => (
 );
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-input-background: var(--mirai-ui-base);
+--mirai-ui-input-color: var(--mirai-ui-content);
+--mirai-ui-input-disabled: var(--mirai-ui-content-light);
+```
+
 ### Layer
 
 This primitive returns an element that displays with relative position to other element based on the following props:
@@ -119,6 +127,12 @@ const MyComponent = () => {
 };
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-layer-content: var(--mirai-ui-layer-XL);
+```
+
 ### Pressable
 
 This primitive returns pressable elements based on the following properties:
@@ -168,6 +182,16 @@ const MyComponent = () => (
   </View>
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-radio-base: var(--mirai-ui-base);
+--mirai-ui-radio-border: var(--mirai-ui-content-light);
+--mirai-ui-radio-checked: var(--mirai-ui-accent);
+--mirai-ui-radio-disabled: var(--mirai-ui-content-border);
+--mirai-ui-radio-size: var(--mirai-ui-space-L);
+```
+
 ### ScrollView
 
 This primitive is used to make vertically scrollable views and receives the following props:
@@ -259,6 +283,7 @@ A button component that receives the following props:
 - `small:boolean` modifying the button size
 - `squared:boolean` if true gives rectangular shape to the button (false by default)
 - `tag:string` html tag of resulting element ('button' by default)
+- `wide:bool` modifying the button to full-width
 - `onEnter:function` executed when the user hovers over
 - `onLeave:function` executed when the user hovers away
 - `onPress:function` executed on mouse click on the element
@@ -277,6 +302,26 @@ const MyComponent = (props) => {
 };
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-button-background: var(--mirai-ui-accent);
+--mirai-ui-button-busy-width: 0%;
+--mirai-ui-button-busy-motion: calc(var(--mirai-ui-motion-expand) * 10);
+--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-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-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);
+```
+
 ### Calendar
 
 A calendar component that receives the following props:
@@ -325,6 +370,20 @@ const MyComponent = props => {
 }
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-calendar-caption-color: var(--mirai-ui-content-light);
+--mirai-ui-calendar-cell: var(--mirai-ui-space-XL);
+--mirai-ui-calendar-highlight-color: var(--mirai-ui-accent);
+--mirai-ui-calendar-padding: var(--mirai-ui-space-XS);
+--mirai-ui-calendar-range-background: var(--mirai-ui-content-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-light);
+--mirai-ui-calendar-week-margin: 2px;
+```
+
 ### InputNumber
 
 Input number component controlling the value with 2 buttons. Receives the following props:
@@ -350,6 +409,12 @@ const MyComponent = (props) => {
 };
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-input-number-value-width: var(--mirai-ui-space-XL);
+```
+
 ### InputOption
 
 This component is used to display a radio button or checkbox base on a mandatory string prop `type`. It receives the following props:
@@ -404,6 +469,14 @@ const MyComponent = () => {
 };
 ```
 
+**Theming variables**
+
+```css
+--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);
+```
+
 ### InputText
 
 Text input component receiving the following props:
@@ -440,6 +513,19 @@ const MyComponent = (props) => {
 };
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-input-text-border: solid 1px var(--mirai-ui-content-border);
+--mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
+--mirai-ui-input-text-error: var(--mirai-ui-error);
+--mirai-ui-input-text-focus: var(--mirai-ui-accent);
+--mirai-ui-input-text-icon: var(--mirai-ui-icon);
+--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);
+```
+
 ### Menu
 
 This component helps you to create a menu over a determinate component receiving the following props:
@@ -482,6 +568,19 @@ const MyComponent = () => {
 };
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-menu-base: var(--mirai-ui-base);
+--mirai-ui-menu-border-radius: var(--mirai-ui-border-radius);
+--mirai-ui-menu-min-width: 192px;
+--mirai-ui-menu-shadow: var(--mirai-ui-shadow);
+--mirai-ui-menu-option-disabled: var(--mirai-ui-content-border);
+--mirai-ui-menu-option-hover-background: var(--mirai-ui-accent);
+--mirai-ui-menu-option-hover-color: var(--mirai-ui-base);
+--mirai-ui-menu-option-padding: var(--mirai-ui-space-M);
+```
+
 ### Modal
 
 A modal component receiving the following props:
@@ -508,6 +607,17 @@ const MyComponent = (props) => {
 };
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-modal-background: var(--mirai-ui-base);
+--mirai-ui-modal-header-padding: var(--mirai-ui-space-M);
+--mirai-ui-modal-icon: var(--mirai-ui-space-L);
+--mirai-ui-modal-layer: var(--mirai-ui-layer-L);
+--mirai-ui-modal-overflow: rgba(0, 0, 0, 0.15);
+--mirai-ui-modal-shadow: var(--mirai-ui-shadow);
+```
+
 ### Tooltip
 
 This component helps you to create a tooltip over a determinate component receiving the following props:
@@ -529,6 +639,16 @@ const MyComponent = () => {
 };
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-tooltip-background: rgba(0, 0, 0, 0.8);
+--mirai-ui-tooltip-border-radius: var(--mirai-ui-border-radius);
+--mirai-ui-tooltip-color: var(--mirai-ui-base);
+--mirai-ui-tooltip-space: var(--mirai-ui-space-XS);
+--mirai-ui-tooltip-max-width: calc(var(--mirai-ui-space-XXL) * 4);
+```
+
 ## Theme
 
 Styles can be customised by using Theme utility.
@@ -578,6 +698,86 @@ Theme.shadeColors()
    ACCENT:200 #edffff
 ```
 
+### List of Theming variables
+
+```css
+/* typography */
+--mirai-ui-font: Arial, Regular;
+--mirai-ui-input-font: Arial, Regular;
+--mirai-ui-font-weight: 400;
+--mirai-ui-font-bold: Arial, Regular;
+--mirai-ui-font-bold-weight: 700;
+--mirai-ui-font-size-headline: 18px;
+--mirai-ui-font-size-subheadline: 16px;
+--mirai-ui-font-size-paragraph: 14px;
+--mirai-ui-font-size-action: 14px;
+--mirai-ui-font-size-small: 12px;
+--mirai-ui-line-height: 24px;
+--mirai-ui-text-direction: ltr;
+--mirai-ui-text-align: left;
+
+/* palette */
+--mirai-ui-base: #ffffff;
+/* !TODO: Change to -text ------------------------------------------------- */
+--mirai-ui-content: #484848;
+--mirai-ui-content-background: #f6f6f6;
+--mirai-ui-content-border: #e4e4e4;
+--mirai-ui-content-dark: #202020;
+--mirai-ui-content-light: #999999;
+/* !TODO ------------------------------------------------------------------ */
+
+--mirai-ui-accent: #3978c5;
+--mirai-ui-accent-background: #e9f1fc;
+--mirai-ui-accent-border: #b0c9e8;
+--mirai-ui-accent-dark: #224876;
+--mirai-ui-accent-light: #88aedc;
+
+--mirai-ui-error: #d14343;
+--mirai-ui-error-background: #fdf4f4;
+--mirai-ui-error-border: #f4b6b6;
+--mirai-ui-error-dark: #7d2828;
+--mirai-ui-error-light: #ee9191;
+
+--mirai-ui-success: #52bd94;
+--mirai-ui-success-background: #f5fbf8;
+--mirai-ui-success-border: #dcf2ea;
+--mirai-ui-success-dark: #317159;
+--mirai-ui-success-light: #a3e6cd;
+
+--mirai-ui-warning: #ffb020;
+--mirai-ui-warning-background: #fffaf1;
+--mirai-ui-warning-border: #ffdfa6;
+--mirai-ui-warning-dark: #66460d;
+--mirai-ui-warning-light: #ffd079;
+
+/* spacing */
+--mirai-ui-space-XS: 8px;
+--mirai-ui-space-S: 12px;
+--mirai-ui-space-M: 16px;
+--mirai-ui-space-L: 24px;
+--mirai-ui-space-XL: 48px;
+--mirai-ui-space-XXL: 64px;
+
+/* layer */
+--mirai-ui-layer-S: 0;
+--mirai-ui-layer-M: 1;
+--mirai-ui-layer-L: 10;
+--mirai-ui-layer-XL: 100;
+
+/* motion */
+--mirai-ui-motion-collapse: 200ms;
+--mirai-ui-motion-expand: 300ms;
+--mirai-ui-motion-easing: cubic-bezier(0.1, 0.1, 0.25, 0.9);
+
+/* input */
+--mirai-ui-input-font-size: var(--mirai-ui-font-size-paragraph);
+--mirai-ui-input-min-height: var(--mirai-ui-space-XL);
+
+/* defaults */
+--mirai-ui-border-radius: 4px;
+--mirai-ui-shadow: 0 0 var(--mirai-ui-space-XS) var(--mirai-ui-content-border);
+```
+
 ## Hooks
 
 a repository of hooks which will help you create simpler solutions.
@@ -587,6 +787,7 @@ a repository of hooks which will help you create simpler solutions.
 This _hook_ can help you know what type of device your application or component is running on. Lets see the properties that this _hook_ is going to expose for you:
 
 <!-- screen -->
+
 - `height:number` height resolution of device
 - `width:number` width resolution of device
 <!-- navigator -->

package/build/components/Button/Button.js

@@ -15,7 +15,7 @@ var _primitives = require("../../primitives");
 
 var _ButtonModule = _interopRequireDefault(require("./Button.module.css"));
 
-var _excluded = ["busy", "children", "disabled", "large", "outlined", "rounded", "small", "squared", "tag", "onPress"];
+var _excluded = ["busy", "children", "disabled", "large", "outlined", "rounded", "small", "squared", "tag", "wide", "onPress"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -41,13 +41,14 @@ var Button = function Button(_ref) {
       squared = _ref$squared === void 0 ? false : _ref$squared,
       _ref$tag = _ref.tag,
       tag = _ref$tag === void 0 ? 'button' : _ref$tag,
+      wide = _ref.wide,
       onPress = _ref.onPress,
       others = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, _objectSpread(_objectSpread({}, others), {}, {
     disabled: disabled || busy,
     tag: tag,
-    className: (0, _helpers.styles)(_ButtonModule.default.button, busy && _ButtonModule.default.busy, large && _ButtonModule.default.large, small && _ButtonModule.default.small, rounded && _ButtonModule.default.rounded, squared && _ButtonModule.default.squared, outlined && _ButtonModule.default.outlined, outlined && (disabled || busy) && _ButtonModule.default.disabled, others.className),
+    className: (0, _helpers.styles)(_ButtonModule.default.button, busy && _ButtonModule.default.busy, large && _ButtonModule.default.large, small && _ButtonModule.default.small, rounded && _ButtonModule.default.rounded, squared && _ButtonModule.default.squared, outlined && _ButtonModule.default.outlined, outlined && (disabled || busy) && _ButtonModule.default.disabled, wide && _ButtonModule.default.wide, others.className),
     onPress: !disabled && !busy ? onPress : undefined
   }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, busy !== undefined && /*#__PURE__*/_react.default.createElement(_primitives.View, {
     className: (0, _helpers.styles)(_ButtonModule.default.busyProgress, busy && _ButtonModule.default.active)
@@ -66,6 +67,7 @@ Button.propTypes = {
   small: _propTypes.default.bool,
   squared: _propTypes.default.bool,
   tag: _propTypes.default.string,
+  wide: _propTypes.default.bool,
   onEnter: _propTypes.default.func,
   onLeave: _propTypes.default.func,
   onPress: _propTypes.default.func

package/build/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["Button","busy","children","disabled","large","outlined","rounded","small","squared","tag","onPress","others","React","createElement","Pressable","className","style","button","undefined","busyProgress","active","displayName","propTypes","PropTypes","bool","oneOfType","string","node","onEnter","func","onLeave"],"sources":["../../../src/components/Button/Button.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable, View } from '../../primitives';\nimport style from './Button.module.css';\n\nconst Button = ({\n  busy,\n  children,\n  disabled,\n  large,\n  outlined,\n  rounded,\n  small,\n  squared = false,\n  tag = 'button',\n  onPress,\n  ...others\n}) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled: disabled || busy,\n      tag,\n      className: styles(\n        style.button,\n        busy && style.busy,\n        large && style.large,\n        small && style.small,\n        rounded && style.rounded,\n        squared && style.squared,\n        outlined && style.outlined,\n        outlined && (disabled || busy) && style.disabled,\n        others.className,\n      ),\n      onPress: !disabled && !busy ? onPress : undefined,\n    },\n    <>\n      {busy !== undefined && <View className={styles(style.busyProgress, busy && style.active)} />}\n      {children}\n    </>,\n  );\n\nButton.displayName = 'Component:Button';\n\nButton.propTypes = {\n  busy: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  outlined: PropTypes.bool,\n  rounded: PropTypes.bool,\n  small: PropTypes.bool,\n  squared: PropTypes.bool,\n  tag: PropTypes.string,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,IACbC,IADa,QACbA,IADa;EAAA,IAEbC,QAFa,QAEbA,QAFa;EAAA,IAGbC,QAHa,QAGbA,QAHa;EAAA,IAIbC,KAJa,QAIbA,KAJa;EAAA,IAKbC,QALa,QAKbA,QALa;EAAA,IAMbC,OANa,QAMbA,OANa;EAAA,IAObC,KAPa,QAObA,KAPa;EAAA,wBAQbC,OARa;EAAA,IAQbA,OARa,6BAQH,KARG;EAAA,oBASbC,GATa;EAAA,IASbA,GATa,yBASP,QATO;EAAA,IAUbC,OAVa,QAUbA,OAVa;EAAA,IAWVC,MAXU;;EAAA,oBAabC,eAAMC,aAAN,CACEC,qBADF,kCAGOH,MAHP;IAIIR,QAAQ,EAAEA,QAAQ,IAAIF,IAJ1B;IAKIQ,GAAG,EAAHA,GALJ;IAMIM,SAAS,EAAE,qBACTC,sBAAMC,MADG,EAEThB,IAAI,IAAIe,sBAAMf,IAFL,EAGTG,KAAK,IAAIY,sBAAMZ,KAHN,EAITG,KAAK,IAAIS,sBAAMT,KAJN,EAKTD,OAAO,IAAIU,sBAAMV,OALR,EAMTE,OAAO,IAAIQ,sBAAMR,OANR,EAOTH,QAAQ,IAAIW,sBAAMX,QAPT,EAQTA,QAAQ,KAAKF,QAAQ,IAAIF,IAAjB,CAAR,IAAkCe,sBAAMb,QAR/B,EASTQ,MAAM,CAACI,SATE,CANf;IAiBIL,OAAO,EAAE,CAACP,QAAD,IAAa,CAACF,IAAd,GAAqBS,OAArB,GAA+BQ;EAjB5C,iBAmBE,4DACGjB,IAAI,KAAKiB,SAAT,iBAAsB,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOF,sBAAMG,YAAb,EAA2BlB,IAAI,IAAIe,sBAAMI,MAAzC;EAAjB,EADzB,EAEGlB,QAFH,CAnBF,CAba;AAAA,CAAf;;;AAsCAF,MAAM,CAACqB,WAAP,GAAqB,kBAArB;AAEArB,MAAM,CAACsB,SAAP,GAAmB;EACjBrB,IAAI,EAAEsB,mBAAUC,IADC;EAEjBtB,QAAQ,EAAEqB,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,IAA7B,CAApB,CAFO;EAGjBxB,QAAQ,EAAEoB,mBAAUC,IAHH;EAIjBpB,KAAK,EAAEmB,mBAAUC,IAJA;EAKjBnB,QAAQ,EAAEkB,mBAAUC,IALH;EAMjBlB,OAAO,EAAEiB,mBAAUC,IANF;EAOjBjB,KAAK,EAAEgB,mBAAUC,IAPA;EAQjBhB,OAAO,EAAEe,mBAAUC,IARF;EASjBf,GAAG,EAAEc,mBAAUG,MATE;EAUjBE,OAAO,EAAEL,mBAAUM,IAVF;EAWjBC,OAAO,EAAEP,mBAAUM,IAXF;EAYjBnB,OAAO,EAAEa,mBAAUM;AAZF,CAAnB"}
+{"version":3,"file":"Button.js","names":["Button","busy","children","disabled","large","outlined","rounded","small","squared","tag","wide","onPress","others","React","createElement","Pressable","className","style","button","undefined","busyProgress","active","displayName","propTypes","PropTypes","bool","oneOfType","string","node","onEnter","func","onLeave"],"sources":["../../../src/components/Button/Button.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable, View } from '../../primitives';\nimport style from './Button.module.css';\n\nconst Button = ({\n  busy,\n  children,\n  disabled,\n  large,\n  outlined,\n  rounded,\n  small,\n  squared = false,\n  tag = 'button',\n  wide,\n  onPress,\n  ...others\n}) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled: disabled || busy,\n      tag,\n      className: styles(\n        style.button,\n        busy && style.busy,\n        large && style.large,\n        small && style.small,\n        rounded && style.rounded,\n        squared && style.squared,\n        outlined && style.outlined,\n        outlined && (disabled || busy) && style.disabled,\n        wide && style.wide,\n        others.className,\n      ),\n      onPress: !disabled && !busy ? onPress : undefined,\n    },\n    <>\n      {busy !== undefined && <View className={styles(style.busyProgress, busy && style.active)} />}\n      {children}\n    </>,\n  );\n\nButton.displayName = 'Component:Button';\n\nButton.propTypes = {\n  busy: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  outlined: PropTypes.bool,\n  rounded: PropTypes.bool,\n  small: PropTypes.bool,\n  squared: PropTypes.bool,\n  tag: PropTypes.string,\n  wide: PropTypes.bool,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,IACbC,IADa,QACbA,IADa;EAAA,IAEbC,QAFa,QAEbA,QAFa;EAAA,IAGbC,QAHa,QAGbA,QAHa;EAAA,IAIbC,KAJa,QAIbA,KAJa;EAAA,IAKbC,QALa,QAKbA,QALa;EAAA,IAMbC,OANa,QAMbA,OANa;EAAA,IAObC,KAPa,QAObA,KAPa;EAAA,wBAQbC,OARa;EAAA,IAQbA,OARa,6BAQH,KARG;EAAA,oBASbC,GATa;EAAA,IASbA,GATa,yBASP,QATO;EAAA,IAUbC,IAVa,QAUbA,IAVa;EAAA,IAWbC,OAXa,QAWbA,OAXa;EAAA,IAYVC,MAZU;;EAAA,oBAcbC,eAAMC,aAAN,CACEC,qBADF,kCAGOH,MAHP;IAIIT,QAAQ,EAAEA,QAAQ,IAAIF,IAJ1B;IAKIQ,GAAG,EAAHA,GALJ;IAMIO,SAAS,EAAE,qBACTC,sBAAMC,MADG,EAETjB,IAAI,IAAIgB,sBAAMhB,IAFL,EAGTG,KAAK,IAAIa,sBAAMb,KAHN,EAITG,KAAK,IAAIU,sBAAMV,KAJN,EAKTD,OAAO,IAAIW,sBAAMX,OALR,EAMTE,OAAO,IAAIS,sBAAMT,OANR,EAOTH,QAAQ,IAAIY,sBAAMZ,QAPT,EAQTA,QAAQ,KAAKF,QAAQ,IAAIF,IAAjB,CAAR,IAAkCgB,sBAAMd,QAR/B,EASTO,IAAI,IAAIO,sBAAMP,IATL,EAUTE,MAAM,CAACI,SAVE,CANf;IAkBIL,OAAO,EAAE,CAACR,QAAD,IAAa,CAACF,IAAd,GAAqBU,OAArB,GAA+BQ;EAlB5C,iBAoBE,4DACGlB,IAAI,KAAKkB,SAAT,iBAAsB,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOF,sBAAMG,YAAb,EAA2BnB,IAAI,IAAIgB,sBAAMI,MAAzC;EAAjB,EADzB,EAEGnB,QAFH,CApBF,CAda;AAAA,CAAf;;;AAwCAF,MAAM,CAACsB,WAAP,GAAqB,kBAArB;AAEAtB,MAAM,CAACuB,SAAP,GAAmB;EACjBtB,IAAI,EAAEuB,mBAAUC,IADC;EAEjBvB,QAAQ,EAAEsB,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,IAA7B,CAApB,CAFO;EAGjBzB,QAAQ,EAAEqB,mBAAUC,IAHH;EAIjBrB,KAAK,EAAEoB,mBAAUC,IAJA;EAKjBpB,QAAQ,EAAEmB,mBAAUC,IALH;EAMjBnB,OAAO,EAAEkB,mBAAUC,IANF;EAOjBlB,KAAK,EAAEiB,mBAAUC,IAPA;EAQjBjB,OAAO,EAAEgB,mBAAUC,IARF;EASjBhB,GAAG,EAAEe,mBAAUG,MATE;EAUjBjB,IAAI,EAAEc,mBAAUC,IAVC;EAWjBI,OAAO,EAAEL,mBAAUM,IAXF;EAYjBC,OAAO,EAAEP,mBAAUM,IAZF;EAajBnB,OAAO,EAAEa,mBAAUM;AAbF,CAAnB"}

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

@@ -104,6 +104,10 @@
   width: var(--mirai-ui-button-squared);
 }
 
+.wide {
+  width: 100%;
+}
+
 @media only screen and (max-width: 600px) {
 }
 

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

@@ -99,6 +99,16 @@ exports[`component:<Button> prop:tag 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Button> prop:wide 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable button wide"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
 exports[`component:<Button> renders 1`] = `
 <DocumentFragment>
   <button

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

@@ -15,7 +15,7 @@ var _primitives = require("../../primitives");
 
 var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
 
-var _excluded = ["children", "disabled", "divider", "icon", "label"];
+var _excluded = ["children", "disabled", "divider", "icon", "label", "value", "onPress"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -31,16 +31,20 @@ var Option = function Option(_ref) {
       divider = _ref.divider,
       icon = _ref.icon,
       label = _ref.label,
+      value = _ref.value,
+      onPress = _ref.onPress,
       others = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, _extends({}, others, {
+    preventDefault: false,
     tag: "div",
-    className: (0, _helpers.styles)(_MenuModule.default.option, divider && _MenuModule.default.divider, disabled && _MenuModule.default.disabled)
+    className: (0, _helpers.styles)(_MenuModule.default.option, value && _MenuModule.default.value, divider && _MenuModule.default.divider, disabled && _MenuModule.default.disabled),
+    onPress: !disabled && value ? onPress : undefined
   }), 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)
+    className: _MenuModule.default.icon
+  }), label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    className: _MenuModule.default.label
   }, label), children);
 };
 

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

@@ -1 +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"}
+{"version":3,"file":"Menu.Option.js","names":["Option","children","disabled","divider","icon","label","value","onPress","others","style","option","undefined","displayName","propTypes","PropTypes","node","bool","string","oneOfType","number","isRequired","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, value, onPress, ...others }) => (\n  <Pressable\n    {...others}\n    preventDefault={false}\n    tag=\"div\"\n    className={styles(style.option, value && style.value, divider && style.divider, disabled && style.disabled)}\n    onPress={!disabled && value ? onPress : undefined}\n  >\n    {icon && <Icon name={icon} className={style.icon} />}\n    {label && <Text className={style.label}>{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,IAA6CC,KAA7C,QAA6CA,KAA7C;EAAA,IAAoDC,OAApD,QAAoDA,OAApD;EAAA,IAAgEC,MAAhE;;EAAA,oBACb,6BAAC,qBAAD,eACMA,MADN;IAEE,cAAc,EAAE,KAFlB;IAGE,GAAG,EAAC,KAHN;IAIE,SAAS,EAAE,qBAAOC,oBAAMC,MAAb,EAAqBJ,KAAK,IAAIG,oBAAMH,KAApC,EAA2CH,OAAO,IAAIM,oBAAMN,OAA5D,EAAqED,QAAQ,IAAIO,oBAAMP,QAAvF,CAJb;IAKE,OAAO,EAAE,CAACA,QAAD,IAAaI,KAAb,GAAqBC,OAArB,GAA+BI;EAL1C,IAOGP,IAAI,iBAAI,6BAAC,gBAAD;IAAM,IAAI,EAAEA,IAAZ;IAAkB,SAAS,EAAEK,oBAAML;EAAnC,EAPX,EAQGC,KAAK,iBAAI,6BAAC,gBAAD;IAAM,SAAS,EAAEI,oBAAMJ;EAAvB,GAA+BA,KAA/B,CARZ,EASGJ,QATH,CADa;AAAA,CAAf;;;AAcAD,MAAM,CAACY,WAAP,GAAqB,uBAArB;AAEAZ,MAAM,CAACa,SAAP,GAAmB;EACjBZ,QAAQ,EAAEa,mBAAUC,IADH;EAEjBb,QAAQ,EAAEY,mBAAUE,IAFH;EAGjBb,OAAO,EAAEW,mBAAUE,IAHF;EAIjBZ,IAAI,EAAEU,mBAAUG,MAJC;EAKjBZ,KAAK,EAAES,mBAAUG,MALA;EAMjBX,KAAK,EAAEQ,mBAAUI,SAAV,CAAoB,CAACJ,mBAAUG,MAAX,EAAmBH,mBAAUK,MAA7B,CAApB,EAA0DC,UANhD;EAOjBb,OAAO,EAAEO,mBAAUO;AAPF,CAAnB"}

package/build/components/Menu/Menu.js

@@ -35,7 +35,7 @@ var Menu = function Menu(_ref) {
       Template = _ref$Template === void 0 ? _Menu.Option : _ref$Template,
       visible = _ref.visible,
       _ref$onPress = _ref.onPress,
-      onPress = _ref$onPress === void 0 ? function () {} : _ref$onPress,
+      _onPress = _ref$onPress === void 0 ? function () {} : _ref$onPress,
       others = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(_primitives.Layer, _extends({
@@ -49,9 +49,9 @@ var Menu = function Menu(_ref) {
     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
+      onPress: function onPress(event) {
+        return _onPress(option.value, event);
+      }
     }));
   })));
 };

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

@@ -1 +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\n      forceRender={false}\n      {...others}\n      className={styles(style.menu, visible && style.visible, others.className)}\n      visible={visible}\n    >\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;IACE,WAAW,EAAE;EADf,GAEMA,MAFN;IAGE,SAAS,EAAE,qBAAOC,oBAAMC,IAAb,EAAmBJ,OAAO,IAAIG,oBAAMH,OAApC,EAA6CE,MAAM,CAACG,SAApD,CAHb;IAIE,OAAO,EAAEL;EAJX,IAMGJ,QANH,eAOE,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,CAPF,CADF;AAoBD,CArBD;;;AAuBAd,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"}
+{"version":3,"file":"Menu.js","names":["Menu","children","options","Template","Option","visible","onPress","others","style","menu","className","map","option","index","undefined","event","value","displayName","propTypes","PropTypes","node","arrayOf","shape","disabled","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\n      forceRender={false}\n      {...others}\n      className={styles(style.menu, visible && style.visible, others.className)}\n      visible={visible}\n    >\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={(event) => onPress(option.value, event)}\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,QAAoC,6BAA1B,YAAM,CAAE,CAAkB;EAAA,IAAbC,MAAa;;EACtG,oBACE,6BAAC,iBAAD;IACE,WAAW,EAAE;EADf,GAEMA,MAFN;IAGE,SAAS,EAAE,qBAAOC,oBAAMC,IAAb,EAAmBJ,OAAO,IAAIG,oBAAMH,OAApC,EAA6CE,MAAM,CAACG,SAApD,CAHb;IAIE,OAAO,EAAEL;EAJX,IAMGJ,QANH,eAOE,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,iBAACE,KAAD;QAAA,OAAWT,QAAO,CAACM,MAAM,CAACI,KAAR,EAAeD,KAAf,CAAlB;MAAA;IAJX,GADW;EAAA,CAAZ,CADH,CAPF,CADF;AAoBD,CArBD;;;AAuBAf,IAAI,CAACiB,WAAL,GAAmB,gBAAnB;AAEAjB,IAAI,CAACkB,SAAL,GAAiB;EACfjB,QAAQ,EAAEkB,mBAAUC,IADL;EAEflB,OAAO,EAAEiB,mBAAUE,OAAV,CACPF,mBAAUG,KAAV,CAAgB;IACdrB,QAAQ,EAAEkB,mBAAUC,IADN;IAEdG,QAAQ,EAAEJ,mBAAUK,IAFN;IAGdC,OAAO,EAAEN,mBAAUK,IAHL;IAIdE,IAAI,EAAEP,mBAAUQ,MAJF;IAKdC,KAAK,EAAET,mBAAUQ,MALH;IAMdX,KAAK,EAAEG,mBAAUU,SAAV,CAAoB,CAACV,mBAAUQ,MAAX,EAAmBR,mBAAUW,MAA7B,CAApB,EAA0DC;EANnD,CAAhB,CADO,CAFM;EAYf5B,QAAQ,EAAEgB,mBAAUC,IAZL;EAaff,OAAO,EAAEc,mBAAUK,IAbJ;EAcflB,OAAO,EAAEa,mBAAUa;AAdJ,CAAjB"}

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

@@ -1,11 +1,12 @@
 :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-min-width: 192px;
   --mirai-ui-menu-shadow: var(--mirai-ui-shadow);
-  --mirai-ui-menu-option-padding: var(--mirai-ui-space-M);
   --mirai-ui-menu-option-disabled: var(--mirai-ui-content-border);
-  --mirai-ui-menu-option-hover: var(--mirai-ui-accent-background);
+  --mirai-ui-menu-option-hover-background: var(--mirai-ui-accent);
+  --mirai-ui-menu-option-hover-color: var(--mirai-ui-base);
+  --mirai-ui-menu-option-padding: var(--mirai-ui-space-M);
 }
 
 .menu {
@@ -17,17 +18,28 @@
 }
 
 .menu .option {
+  align-items: center;
   box-sizing: border-box;
   display: flex;
+  cursor: default;
+  flex: 1;
   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 .option.value:hover:not(.disabled) {
+  background-color: var(--mirai-ui-menu-option-hover-background);
+}
+
+.menu .option.value:hover:not(.disabled) .icon,
+.menu .option.value:hover:not(.disabled) .label {
+  color: var(--mirai-ui-menu-option-hover-color);
+  cursor: pointer;
+}
+
+.menu .divider {
+  box-shadow: inset 0 -1px var(--mirai-ui-menu-option-disabled);
 }
 
 .menu .icon {
@@ -38,13 +50,13 @@
   flex: 1;
   text-align: left;
   padding-right: var(--mirai-ui-menu-option-padding);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.menu .divider {
-  box-shadow: inset 0 -1px var(--mirai-ui-menu-option-disabled);
-}
-
-.menu .disabled {
+.menu .option.disabled .icon,
+.menu .option.disabled .label {
   color: var(--mirai-ui-menu-option-disabled);
   cursor: default;
 }

package/build/components/Menu/__tests__/__snapshots__/Menu.test.jsx.snap

@@ -58,8 +58,16 @@ exports[`component:<Menu> w/ options & visible 1`] = `
     style="left: 0px; top: 0px;"
   >
     <div
-      class="pressable option"
-      value="one"
+      class="pressable option divider"
+    >
+      <span
+        class="text paragraph label"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+    <div
+      class="pressable option value"
     >
       <span
         class="icon icon"
@@ -96,11 +104,10 @@ exports[`component:<Menu> w/ options & visible 1`] = `
       </span>
     </div>
     <div
-      class="pressable option disabled"
-      value="two"
+      class="pressable option value disabled"
     >
       <span
-        class="icon icon disabled"
+        class="icon icon"
       >
         <svg
           fill="none"
@@ -128,14 +135,13 @@ exports[`component:<Menu> w/ options & visible 1`] = `
         </svg>
       </span>
       <span
-        class="text paragraph label disabled"
+        class="text paragraph label"
       >
         Item 2
       </span>
     </div>
     <div
-      class="pressable option divider"
-      value="three"
+      class="pressable option value divider"
     >
       <span
         class="icon icon"
@@ -147,8 +153,7 @@ exports[`component:<Menu> w/ options & visible 1`] = `
       </span>
     </div>
     <div
-      class="pressable option"
-      value="four"
+      class="pressable option value"
     >
       <span
         class="text paragraph label"
@@ -161,6 +166,15 @@ exports[`component:<Menu> w/ options & visible 1`] = `
         Add
       </button>
     </div>
+    <div
+      class="pressable option"
+    >
+      <button
+        class="pressable button"
+      >
+        Add
+      </button>
+    </div>
   </div>
 </DocumentFragment>
 `;

package/package.json

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