@mirai/ui 1.1.14 → 1.1.16

package/README.md

@@ -486,16 +486,17 @@ const MyComponent = (props) => {
 --mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
 --mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
 --mirai-ui-button-focus-color: var(--mirai-ui-focus-color);
---mirai-ui-button-focus-color-shadow: var(--mirai-ui-focus-color-shadow);
---mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
+--mirai-ui-button-font-weight: var(--mirai-ui-font-medium-weight);
 --mirai-ui-button-padding-x: var(--mirai-ui-space-L);
---mirai-ui-button-padding-y: var(--mirai-ui-space-S);
+--mirai-ui-button-height: calc(var(--mirai-ui-space-XL) - var(--mirai-ui-space-XXS));
+--mirai-ui-button-large-height: var(--mirai-ui-space-XL);
+--mirai-ui-button-small-height: calc(var(--mirai-ui-space-XL) - var(--mirai-ui-space-M));
 --mirai-ui-button-radius: var(--mirai-ui-border-radius);
 --mirai-ui-button-secondary-background: var(--mirai-ui-base);
+--mirai-ui-button-secondary-background-active: var(--mirai-ui-accent-background);
 --mirai-ui-button-secondary-color: var(--mirai-ui-button-background);
 --mirai-ui-button-secondary-focus-color: var(--mirai-ui-button-focus-color);
 --mirai-ui-button-secondary-focus-color-shadow: var(--mirai-ui-focus-color-shadow);
---mirai-ui-button-squared: calc(var(--mirai-ui-space-M) * 2);
 --mirai-ui-button-transparent-background-active: var(--mirai-ui-accent-background);
 --mirai-ui-button-transparent-color: var(--mirai-ui-content);
 ```

package/build/components/Action/Action.js

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
 var _ActionModule = _interopRequireDefault(require("./Action.module.css"));
-var _excluded = ["bold", "children", "disabled", "href", "inline", "large", "small", "tag", "target", "underline", "wide", "onPress"];
+var _excluded = ["bold", "children", "disabled", "href", "paragraph", "small", "tag", "target", "tiny", "underline", "wide", "onPress"];
 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; }
@@ -24,12 +24,12 @@ var Action = function Action(_ref) {
     children = _ref.children,
     disabled = _ref.disabled,
     href = _ref.href,
-    inline = _ref.inline,
-    large = _ref.large,
+    paragraph = _ref.paragraph,
     small = _ref.small,
     _ref$tag = _ref.tag,
     tag = _ref$tag === void 0 ? 'button' : _ref$tag,
     target = _ref.target,
+    tiny = _ref.tiny,
     underline = _ref.underline,
     wide = _ref.wide,
     _onPress = _ref.onPress,
@@ -43,7 +43,7 @@ var Action = function Action(_ref) {
       _onPress && _onPress(event);
       if (href && target) window.open(href, target);else if (href) window.location = href;
     },
-    className: (0, _helpers.styles)(_ActionModule.default.action, bold && _ActionModule.default.bold, disabled && _ActionModule.default.disabled, inline && _ActionModule.default.inline, large && _ActionModule.default.large, small && _ActionModule.default.small, underline && _ActionModule.default.underline, wide && _ActionModule.default.wide, others.className)
+    className: (0, _helpers.styles)(_ActionModule.default.action, bold && _ActionModule.default.bold, disabled && _ActionModule.default.disabled, paragraph ? _ActionModule.default.paragraph : small ? _ActionModule.default.small : tiny ? _ActionModule.default.tiny : undefined, underline && _ActionModule.default.underline, wide && _ActionModule.default.wide, others.className)
   }), children);
 };
 exports.Action = Action;
@@ -53,11 +53,11 @@ Action.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   disabled: _propTypes.default.bool,
   href: _propTypes.default.string,
-  inline: _propTypes.default.bool,
-  large: _propTypes.default.bool,
+  paragraph: _propTypes.default.bool,
   small: _propTypes.default.bool,
   tag: _propTypes.default.string,
   target: _propTypes.default.string,
+  tiny: _propTypes.default.bool,
   underline: _propTypes.default.bool,
   wide: _propTypes.default.bool,
   onEnter: _propTypes.default.func,

package/build/components/Action/Action.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.js","names":["Action","bold","children","disabled","href","inline","large","small","tag","target","underline","wide","onPress","others","React","createElement","Pressable","role","event","window","open","location","className","styles","style","action","displayName","propTypes","PropTypes","bool","oneOfType","string","node","onEnter","func","onLeave"],"sources":["../../../src/components/Action/Action.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable } from '../../primitives';\nimport style from './Action.module.css';\n\nconst Action = ({\n  bold,\n  children,\n  disabled,\n  href,\n  inline,\n  large,\n  small,\n  tag = 'button',\n  target,\n  underline,\n  wide,\n  onPress,\n  ...others\n}) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled,\n      href,\n      role: others.role || 'action',\n      tag: href ? 'a' : tag,\n      onPress: (event) => {\n        onPress && onPress(event);\n        if (href && target) window.open(href, target);\n        else if (href) window.location = href;\n      },\n      className: styles(\n        style.action,\n        bold && style.bold,\n        disabled && style.disabled,\n        inline && style.inline,\n        large && style.large,\n        small && style.small,\n        underline && style.underline,\n        wide && style.wide,\n        others.className,\n      ),\n    },\n    children,\n  );\n\nAction.displayName = 'Component:Action';\n\nAction.propTypes = {\n  bold: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  href: PropTypes.string,\n  inline: PropTypes.bool,\n  large: PropTypes.bool,\n  small: PropTypes.bool,\n  tag: PropTypes.string,\n  target: PropTypes.string,\n  underline: PropTypes.bool,\n  wide: PropTypes.bool,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Action };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,MAAM,GAAG,SAATA,MAAM;EAAA,IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IAAA,gBACLC,GAAG;IAAHA,GAAG,yBAAG,QAAQ;IACdC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,QAAO,QAAPA,OAAO;IACJC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,qBAAS,kCAEJH,MAAM;IACTV,QAAQ,EAARA,QAAQ;IACRC,IAAI,EAAJA,IAAI;IACJa,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,QAAQ;IAC7BT,GAAG,EAAEJ,IAAI,GAAG,GAAG,GAAGI,GAAG;IACrBI,OAAO,EAAE,iBAACM,KAAK,EAAK;MAClBN,QAAO,IAAIA,QAAO,CAACM,KAAK,CAAC;MACzB,IAAId,IAAI,IAAIK,MAAM,EAAEU,MAAM,CAACC,IAAI,CAAChB,IAAI,EAAEK,MAAM,CAAC,CAAC,KACzC,IAAIL,IAAI,EAAEe,MAAM,CAACE,QAAQ,GAAGjB,IAAI;IACvC,CAAC;IACDkB,SAAS,EAAE,IAAAC,eAAM,EACfC,qBAAK,CAACC,MAAM,EACZxB,IAAI,IAAIuB,qBAAK,CAACvB,IAAI,EAClBE,QAAQ,IAAIqB,qBAAK,CAACrB,QAAQ,EAC1BE,MAAM,IAAImB,qBAAK,CAACnB,MAAM,EACtBC,KAAK,IAAIkB,qBAAK,CAAClB,KAAK,EACpBC,KAAK,IAAIiB,qBAAK,CAACjB,KAAK,EACpBG,SAAS,IAAIc,qBAAK,CAACd,SAAS,EAC5BC,IAAI,IAAIa,qBAAK,CAACb,IAAI,EAClBE,MAAM,CAACS,SAAS;EACjB,IAEHpB,QAAQ,CACT;AAAA;AAAC;AAEJF,MAAM,CAAC0B,WAAW,GAAG,kBAAkB;AAEvC1B,MAAM,CAAC2B,SAAS,GAAG;EACjB1B,IAAI,EAAE2B,kBAAS,CAACC,IAAI;EACpB3B,QAAQ,EAAE0B,kBAAS,CAACE,SAAS,CAAC,CAACF,kBAAS,CAACG,MAAM,EAAEH,kBAAS,CAACI,IAAI,CAAC,CAAC;EACjE7B,QAAQ,EAAEyB,kBAAS,CAACC,IAAI;EACxBzB,IAAI,EAAEwB,kBAAS,CAACG,MAAM;EACtB1B,MAAM,EAAEuB,kBAAS,CAACC,IAAI;EACtBvB,KAAK,EAAEsB,kBAAS,CAACC,IAAI;EACrBtB,KAAK,EAAEqB,kBAAS,CAACC,IAAI;EACrBrB,GAAG,EAAEoB,kBAAS,CAACG,MAAM;EACrBtB,MAAM,EAAEmB,kBAAS,CAACG,MAAM;EACxBrB,SAAS,EAAEkB,kBAAS,CAACC,IAAI;EACzBlB,IAAI,EAAEiB,kBAAS,CAACC,IAAI;EACpBI,OAAO,EAAEL,kBAAS,CAACM,IAAI;EACvBC,OAAO,EAAEP,kBAAS,CAACM,IAAI;EACvBtB,OAAO,EAAEgB,kBAAS,CAACM;AACrB,CAAC"}
+{"version":3,"file":"Action.js","names":["Action","bold","children","disabled","href","paragraph","small","tag","target","tiny","underline","wide","onPress","others","React","createElement","Pressable","role","event","window","open","location","className","styles","style","action","undefined","displayName","propTypes","PropTypes","bool","oneOfType","string","node","onEnter","func","onLeave"],"sources":["../../../src/components/Action/Action.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable } from '../../primitives';\nimport style from './Action.module.css';\n\nconst Action = ({\n  bold,\n  children,\n  disabled,\n  href,\n  paragraph,\n  small,\n  tag = 'button',\n  target,\n  tiny,\n  underline,\n  wide,\n  onPress,\n  ...others\n}) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled,\n      href,\n      role: others.role || 'action',\n      tag: href ? 'a' : tag,\n      onPress: (event) => {\n        onPress && onPress(event);\n        if (href && target) window.open(href, target);\n        else if (href) window.location = href;\n      },\n      className: styles(\n        style.action,\n        bold && style.bold,\n        disabled && style.disabled,\n        paragraph ? style.paragraph : small ? style.small : tiny ? style.tiny : undefined,\n        underline && style.underline,\n        wide && style.wide,\n        others.className,\n      ),\n    },\n    children,\n  );\n\nAction.displayName = 'Component:Action';\n\nAction.propTypes = {\n  bold: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  href: PropTypes.string,\n  paragraph: PropTypes.bool,\n  small: PropTypes.bool,\n  tag: PropTypes.string,\n  target: PropTypes.string,\n  tiny: PropTypes.bool,\n  underline: PropTypes.bool,\n  wide: PropTypes.bool,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Action };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,MAAM,GAAG,SAATA,MAAM;EAAA,IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IAAA,gBACLC,GAAG;IAAHA,GAAG,yBAAG,QAAQ;IACdC,MAAM,QAANA,MAAM;IACNC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,QAAO,QAAPA,OAAO;IACJC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,qBAAS,kCAEJH,MAAM;IACTV,QAAQ,EAARA,QAAQ;IACRC,IAAI,EAAJA,IAAI;IACJa,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,QAAQ;IAC7BV,GAAG,EAAEH,IAAI,GAAG,GAAG,GAAGG,GAAG;IACrBK,OAAO,EAAE,iBAACM,KAAK,EAAK;MAClBN,QAAO,IAAIA,QAAO,CAACM,KAAK,CAAC;MACzB,IAAId,IAAI,IAAII,MAAM,EAAEW,MAAM,CAACC,IAAI,CAAChB,IAAI,EAAEI,MAAM,CAAC,CAAC,KACzC,IAAIJ,IAAI,EAAEe,MAAM,CAACE,QAAQ,GAAGjB,IAAI;IACvC,CAAC;IACDkB,SAAS,EAAE,IAAAC,eAAM,EACfC,qBAAK,CAACC,MAAM,EACZxB,IAAI,IAAIuB,qBAAK,CAACvB,IAAI,EAClBE,QAAQ,IAAIqB,qBAAK,CAACrB,QAAQ,EAC1BE,SAAS,GAAGmB,qBAAK,CAACnB,SAAS,GAAGC,KAAK,GAAGkB,qBAAK,CAAClB,KAAK,GAAGG,IAAI,GAAGe,qBAAK,CAACf,IAAI,GAAGiB,SAAS,EACjFhB,SAAS,IAAIc,qBAAK,CAACd,SAAS,EAC5BC,IAAI,IAAIa,qBAAK,CAACb,IAAI,EAClBE,MAAM,CAACS,SAAS;EACjB,IAEHpB,QAAQ,CACT;AAAA;AAAC;AAEJF,MAAM,CAAC2B,WAAW,GAAG,kBAAkB;AAEvC3B,MAAM,CAAC4B,SAAS,GAAG;EACjB3B,IAAI,EAAE4B,kBAAS,CAACC,IAAI;EACpB5B,QAAQ,EAAE2B,kBAAS,CAACE,SAAS,CAAC,CAACF,kBAAS,CAACG,MAAM,EAAEH,kBAAS,CAACI,IAAI,CAAC,CAAC;EACjE9B,QAAQ,EAAE0B,kBAAS,CAACC,IAAI;EACxB1B,IAAI,EAAEyB,kBAAS,CAACG,MAAM;EACtB3B,SAAS,EAAEwB,kBAAS,CAACC,IAAI;EACzBxB,KAAK,EAAEuB,kBAAS,CAACC,IAAI;EACrBvB,GAAG,EAAEsB,kBAAS,CAACG,MAAM;EACrBxB,MAAM,EAAEqB,kBAAS,CAACG,MAAM;EACxBvB,IAAI,EAAEoB,kBAAS,CAACC,IAAI;EACpBpB,SAAS,EAAEmB,kBAAS,CAACC,IAAI;EACzBnB,IAAI,EAAEkB,kBAAS,CAACC,IAAI;EACpBI,OAAO,EAAEL,kBAAS,CAACM,IAAI;EACvBC,OAAO,EAAEP,kBAAS,CAACM,IAAI;EACvBvB,OAAO,EAAEiB,kBAAS,CAACM;AACrB,CAAC"}

package/build/components/Action/Action.module.css

@@ -25,24 +25,16 @@
   color: var(--mirai-ui-focus-color);
 }
 
-.action:not(.inline):not(.large):not(.small) {
-  padding: var(--mirai-ui-button-padding-y) 0;
-}
-
-.large {
+.paragraph {
   font-size: var(--mirai-ui-font-size-paragraph);
 }
 
-.large:not(.inline) {
-  padding: var(--mirai-ui-button-padding-y) 0;
-}
-
 .small {
   font-size: var(--mirai-ui-font-size-small);
 }
 
-.small:not(.inline) {
-  padding: var(--mirai-ui-button-padding-y) 0;
+.tiny {
+  font-size: var(--mirai-ui-font-size-tiny);
 }
 
 .underline,

package/build/components/Action/Action.stories.js

@@ -24,11 +24,11 @@ Story.args = {
   disabled: false,
   href: '',
   icon: '',
-  inline: false,
-  large: false,
+  paragraph: false,
   small: false,
   tag: 'button',
   target: '',
+  tiny: false,
   underline: false,
   wide: false,
   // inherited properties

package/build/components/Action/Action.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.stories.js","names":["title","Story","props","storyName","args","children","ICON","INFO","disabled","href","icon","inline","large","small","tag","target","underline","wide","testId","style","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Action/Action.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Action } from './Action';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Action {...props} />;\n\nStory.storyName = 'Action';\n\nStory.args = {\n  children: (\n    <>\n      <Icon value={ICON.INFO} />\n      children\n    </>\n  ),\n  disabled: false,\n  href: '',\n  icon: '',\n  inline: false,\n  large: false,\n  small: false,\n  tag: 'button',\n  target: '',\n  underline: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAmD;AAAA,eAEpC;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,6BAAC,cAAM,EAAKA,KAAK,CAAI;AAAA;AAAC;AAEtDD,KAAK,CAACE,SAAS,GAAG,QAAQ;AAE1BF,KAAK,CAACG,IAAI,GAAG;EACXC,QAAQ,eACN,yEACE,6BAAC,UAAI;IAAC,KAAK,EAAEC,UAAI,CAACC;EAAK,EAAG,aAG7B;EACDC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,EAAE;EACRC,IAAI,EAAE,EAAE;EACRC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,QAAQ;EACbC,MAAM,EAAE,EAAE;EACVC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDlB,KAAK,CAACmB,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}
+{"version":3,"file":"Action.stories.js","names":["title","Story","props","storyName","args","children","ICON","INFO","disabled","href","icon","paragraph","small","tag","target","tiny","underline","wide","testId","style","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Action/Action.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Action } from './Action';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Action {...props} />;\n\nStory.storyName = 'Action';\n\nStory.args = {\n  children: (\n    <>\n      <Icon value={ICON.INFO} />\n      children\n    </>\n  ),\n  disabled: false,\n  href: '',\n  icon: '',\n  paragraph: false,\n  small: false,\n  tag: 'button',\n  target: '',\n  tiny: false,\n  underline: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAmD;AAAA,eAEpC;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,6BAAC,cAAM,EAAKA,KAAK,CAAI;AAAA;AAAC;AAEtDD,KAAK,CAACE,SAAS,GAAG,QAAQ;AAE1BF,KAAK,CAACG,IAAI,GAAG;EACXC,QAAQ,eACN,yEACE,6BAAC,UAAI;IAAC,KAAK,EAAEC,UAAI,CAACC;EAAK,EAAG,aAG7B;EACDC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,EAAE;EACRC,IAAI,EAAE,EAAE;EACRC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,QAAQ;EACbC,MAAM,EAAE,EAAE;EACVC,IAAI,EAAE,KAAK;EACXC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDlB,KAAK,CAACmB,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}

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

@@ -53,66 +53,46 @@ exports[`component:<Action> prop:href 1`] = `
 </DocumentFragment>
 `;
 
-exports[`component:<Action> prop:inline & prop:large 1`] = `
+exports[`component:<Action> prop:paragraph 1`] = `
 <DocumentFragment>
   <button
-    class="pressable action inline large"
+    class="pressable action paragraph"
   >
     children
   </button>
 </DocumentFragment>
 `;
 
-exports[`component:<Action> prop:inline & prop:small 1`] = `
-<DocumentFragment>
-  <button
-    class="pressable action inline small"
-  >
-    children
-  </button>
-</DocumentFragment>
-`;
-
-exports[`component:<Action> prop:inline default 1`] = `
+exports[`component:<Action> prop:small 1`] = `
 <DocumentFragment>
   <button
-    class="pressable action inline"
+    class="pressable action small"
   >
     children
   </button>
 </DocumentFragment>
 `;
 
-exports[`component:<Action> prop:large 1`] = `
+exports[`component:<Action> prop:tag 1`] = `
 <DocumentFragment>
-  <button
-    class="pressable action large"
+  <a
+    class="pressable action"
   >
     children
-  </button>
+  </a>
 </DocumentFragment>
 `;
 
-exports[`component:<Action> prop:small 1`] = `
+exports[`component:<Action> prop:tiny 1`] = `
 <DocumentFragment>
   <button
-    class="pressable action small"
+    class="pressable action tiny"
   >
     children
   </button>
 </DocumentFragment>
 `;
 
-exports[`component:<Action> prop:tag 1`] = `
-<DocumentFragment>
-  <a
-    class="pressable action"
-  >
-    children
-  </a>
-</DocumentFragment>
-`;
-
 exports[`component:<Action> prop:underline 1`] = `
 <DocumentFragment>
   <button

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

@@ -8,9 +8,11 @@ button.button {
   font-size: var(--mirai-ui-font-size-action);
   font-weight: var(--mirai-ui-button-font-weight);
   justify-content: center;
+  max-height: var(--mirai-ui-button-height);
+  min-height: var(--mirai-ui-button-height);
   outline: none;
   overflow: hidden;
-  padding: var(--mirai-ui-button-padding-y) var(--mirai-ui-button-padding-x);
+  padding: 0 var(--mirai-ui-button-padding-x);
   position: relative;
   transition: background-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing),
     box-shadow var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing),
@@ -18,6 +20,11 @@ button.button {
   width: fit-content;
 }
 
+button.button,
+button.button .children {
+  gap: var(--mirai-ui-space-XXS);
+}
+
 /* -- variants */
 button.button:disabled:not(.busy) {
   background-color: var(--mirai-ui-button-disabled-background);
@@ -32,8 +39,8 @@ button.secondary {
 
 button.button:not(:disabled).secondary:active,
 button.button:not(:disabled).secondary:hover {
-  box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-secondary-focus-color),
-    0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-button-secondary-focus-color-shadow);
+  background-color: var(--mirai-ui-button-secondary-background-active);
+  box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-secondary-focus-color);
   color: var(--mirai-ui-button-secondary-focus-color);
 }
 
@@ -50,31 +57,41 @@ button.transparent:not(:disabled):hover {
 
 button.button:not(:disabled):not(.secondary):not(.transparent):active,
 button.button:not(:disabled):not(.secondary):not(.transparent):hover {
-  box-shadow: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-button-focus-color-shadow);
   background-color: var(--mirai-ui-button-focus-color);
 }
 
 /* -- sizing */
-button.large:not(.squared) {
+button.large {
   font-size: var(--mirai-ui-font-size-paragraph);
-  padding: var(--mirai-ui-button-padding-y)
-    calc(var(--mirai-ui-button-padding-x) + calc(var(--mirai-ui-button-padding-y) / 2));
+  max-height: var(--mirai-ui-button-large-height);
+  min-height: var(--mirai-ui-button-large-height);
 }
 
 button.rounded {
   border-radius: var(--mirai-ui-space-XXL);
 }
 
-button.small:not(.squared) {
+button.small {
   font-size: var(--mirai-ui-font-size-small);
-  padding: var(--mirai-ui-button-padding-y) calc(var(--mirai-ui-button-padding-x) / 2);
+  max-height: var(--mirai-ui-button-small-height);
+  min-height: var(--mirai-ui-button-small-height);
+  padding: 0 calc(var(--mirai-ui-button-padding-x) / 2);
 }
 
 button.squared {
-  height: var(--mirai-ui-button-squared);
   padding: 0;
-  min-width: var(--mirai-ui-button-squared);
-  width: var(--mirai-ui-button-squared);
+  min-width: var(--mirai-ui-button-height);
+  max-width: var(--mirai-ui-button-height);
+}
+
+button.large.squared {
+  min-width: var(--mirai-ui-button-large-height);
+  max-width: var(--mirai-ui-button-large-height);
+}
+
+button.small.squared {
+  min-width: var(--mirai-ui-button-small-height);
+  max-width: var(--mirai-ui-button-small-height);
 }
 
 button.wide {

package/build/components/Button/Button.stories.js

@@ -8,9 +8,13 @@ exports.default = exports.Story = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _ = require("../../");
 var _Button = require("./Button");
-var _excluded = ["busy", "icon"];
+var _excluded = ["busy"];
 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 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; }
@@ -31,27 +35,31 @@ var _default = {
 exports.default = _default;
 var Story = function Story(_ref) {
   var busyProp = _ref.busy,
-    icon = _ref.icon,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useState = (0, _react.useState)(busyProp),
     _useState2 = _slicedToArray(_useState, 2),
     busy = _useState2[0],
     setBusy = _useState2[1];
+  var renderChildren = function renderChildren(_ref2) {
+    var children = _ref2.children,
+      icon = _ref2.icon;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.createElement(_.Icon, {
+      value: _.ICON[icon]
+    }), children);
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.Button, _objectSpread(_objectSpread({}, props), {}, {
     busy: busy
-  })), /*#__PURE__*/_react.default.createElement(_Button.Button, _extends({}, _objectSpread(_objectSpread({}, props), {}, {
+  }), renderChildren(props)), /*#__PURE__*/_react.default.createElement(_Button.Button, _extends({}, _objectSpread(_objectSpread({}, props), {}, {
     busy: busy
   }), {
     secondary: true
-  })), /*#__PURE__*/_react.default.createElement(_Button.Button, _extends({}, _objectSpread(_objectSpread({}, props), {}, {
+  }), renderChildren(props)), /*#__PURE__*/_react.default.createElement(_Button.Button, _extends({}, _objectSpread(_objectSpread({}, props), {}, {
     busy: busy
   }), {
     transparent: true
-  })), /*#__PURE__*/_react.default.createElement(_Button.Button, _objectSpread(_objectSpread({}, props), {}, {
+  }), renderChildren(props)), /*#__PURE__*/_react.default.createElement(_Button.Button, _objectSpread(_objectSpread({}, props), {}, {
     busy: busy
-  }), /*#__PURE__*/_react.default.createElement(_.Icon, {
-    value: _.ICON[icon]
-  })), /*#__PURE__*/_react.default.createElement(_.View, {
+  }), renderChildren(props)), /*#__PURE__*/_react.default.createElement(_.View, {
     onClick: function onClick() {
       return setBusy(!busy);
     }
@@ -81,7 +89,7 @@ Story.args = {
 };
 Story.argTypes = {
   icon: {
-    options: Object.keys(_.ICON),
+    options: [undefined].concat(_toConsumableArray(Object.keys(_.ICON))),
     control: {
       type: 'select'
     },

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.js","names":["title","Story","busyProp","busy","icon","props","useState","setBusy","ICON","storyName","args","children","disabled","undefined","large","rounded","secondary","small","squared","tag","tooltip","transparent","wide","testId","style","marginBottom","argTypes","options","Object","keys","control","type","defaultValue","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Button/Button.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useState } from 'react';\n\nimport { Icon, ICON, View } from '../../';\nimport { Button } from './Button';\n\nexport default { title: 'Components' };\n\nexport const Story = ({ busy: busyProp, icon, ...props }) => {\n  const [busy, setBusy] = useState(busyProp);\n\n  return (\n    <>\n      <Button {...{ ...props, busy }} />\n      <Button {...{ ...props, busy }} secondary />\n      <Button {...{ ...props, busy }} transparent />\n      <Button {...{ ...props, busy }}>\n        <Icon value={ICON[icon]} />\n      </Button>\n\n      <View onClick={() => setBusy(!busy)}>Switch busy</View>\n    </>\n  );\n};\n\nStory.storyName = 'Button';\n\nStory.args = {\n  busy: false,\n  children: 'children',\n  disabled: false,\n  icon: undefined,\n  large: false,\n  rounded: false,\n  secondary: false,\n  small: false,\n  squared: false,\n  tag: 'button',\n  tooltip: 'tooltip',\n  transparent: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: { marginBottom: 'var(--mirai-ui-space-M)' },\n};\n\nStory.argTypes = {\n  icon: {\n    options: Object.keys(ICON),\n    control: { type: 'select' },\n    defaultValue: Object.keys(ICON)[0],\n  },\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;;AACA;AAEA;AACA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAA2C;EAAA,IAA/BC,QAAQ,QAAdC,IAAI;IAAYC,IAAI,QAAJA,IAAI;IAAKC,KAAK;EACpD,gBAAwB,IAAAC,eAAQ,EAACJ,QAAQ,CAAC;IAAA;IAAnCC,IAAI;IAAEI,OAAO;EAEpB,oBACE,yEACE,6BAAC,cAAM,kCAAUF,KAAK;IAAEF,IAAI,EAAJA;EAAI,GAAM,eAClC,6BAAC,cAAM,+CAAUE,KAAK;IAAEF,IAAI,EAAJA;EAAI;IAAI,SAAS;EAAA,GAAG,eAC5C,6BAAC,cAAM,+CAAUE,KAAK;IAAEF,IAAI,EAAJA;EAAI;IAAI,WAAW;EAAA,GAAG,eAC9C,6BAAC,cAAM,kCAAUE,KAAK;IAAEF,IAAI,EAAJA;EAAI,iBAC1B,6BAAC,MAAI;IAAC,KAAK,EAAEK,MAAI,CAACJ,IAAI;EAAE,EAAG,CACpB,eAET,6BAAC,MAAI;IAAC,OAAO,EAAE;MAAA,OAAMG,OAAO,CAAC,CAACJ,IAAI,CAAC;IAAA;EAAC,iBAAmB,CACtD;AAEP,CAAC;AAAC;AAEFF,KAAK,CAACQ,SAAS,GAAG,QAAQ;AAE1BR,KAAK,CAACS,IAAI,GAAG;EACXP,IAAI,EAAE,KAAK;EACXQ,QAAQ,EAAE,UAAU;EACpBC,QAAQ,EAAE,KAAK;EACfR,IAAI,EAAES,SAAS;EACfC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,GAAG,EAAE,QAAQ;EACbC,OAAO,EAAE,SAAS;EAClBC,WAAW,EAAE,KAAK;EAClBC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE;IAAEC,YAAY,EAAE;EAA0B;AACnD,CAAC;AAEDxB,KAAK,CAACyB,QAAQ,GAAG;EACftB,IAAI,EAAE;IACJuB,OAAO,EAAEC,MAAM,CAACC,IAAI,CAACrB,MAAI,CAAC;IAC1BsB,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAEJ,MAAM,CAACC,IAAI,CAACrB,MAAI,CAAC,CAAC,CAAC;EACnC,CAAC;EACDyB,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}
+{"version":3,"file":"Button.stories.js","names":["title","Story","busyProp","busy","props","useState","setBusy","renderChildren","children","icon","ICON","storyName","args","disabled","undefined","large","rounded","secondary","small","squared","tag","tooltip","transparent","wide","testId","style","marginBottom","argTypes","options","Object","keys","control","type","defaultValue","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Button/Button.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useState } from 'react';\n\nimport { Icon, ICON, View } from '../../';\nimport { Button } from './Button';\n\nexport default { title: 'Components' };\n\nexport const Story = ({ busy: busyProp, ...props }) => {\n  const [busy, setBusy] = useState(busyProp);\n\n  const renderChildren = ({ children, icon }) => (\n    <>\n      {icon && <Icon value={ICON[icon]} />}\n      {children}\n    </>\n  );\n\n  return (\n    <>\n      <Button {...{ ...props, busy }}>{renderChildren(props)}</Button>\n      <Button {...{ ...props, busy }} secondary>\n        {renderChildren(props)}\n      </Button>\n      <Button {...{ ...props, busy }} transparent>\n        {renderChildren(props)}\n      </Button>\n      <Button {...{ ...props, busy }}>{renderChildren(props)}</Button>\n\n      <View onClick={() => setBusy(!busy)}>Switch busy</View>\n    </>\n  );\n};\n\nStory.storyName = 'Button';\n\nStory.args = {\n  busy: false,\n  children: 'children',\n  disabled: false,\n  icon: undefined,\n  large: false,\n  rounded: false,\n  secondary: false,\n  small: false,\n  squared: false,\n  tag: 'button',\n  tooltip: 'tooltip',\n  transparent: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: { marginBottom: 'var(--mirai-ui-space-M)' },\n};\n\nStory.argTypes = {\n  icon: {\n    options: [undefined, ...Object.keys(ICON)],\n    control: { type: 'select' },\n    defaultValue: Object.keys(ICON)[0],\n  },\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;;AACA;AAEA;AACA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAAqC;EAAA,IAAzBC,QAAQ,QAAdC,IAAI;IAAeC,KAAK;EAC9C,gBAAwB,IAAAC,eAAQ,EAACH,QAAQ,CAAC;IAAA;IAAnCC,IAAI;IAAEG,OAAO;EAEpB,IAAMC,cAAc,GAAG,SAAjBA,cAAc;IAAA,IAAMC,QAAQ,SAARA,QAAQ;MAAEC,IAAI,SAAJA,IAAI;IAAA,oBACtC,4DACGA,IAAI,iBAAI,6BAAC,MAAI;MAAC,KAAK,EAAEC,MAAI,CAACD,IAAI;IAAE,EAAG,EACnCD,QAAQ,CACR;EAAA,CACJ;EAED,oBACE,yEACE,6BAAC,cAAM,kCAAUJ,KAAK;IAAED,IAAI,EAAJA;EAAI,IAAKI,cAAc,CAACH,KAAK,CAAC,CAAU,eAChE,6BAAC,cAAM,+CAAUA,KAAK;IAAED,IAAI,EAAJA;EAAI;IAAI,SAAS;EAAA,IACtCI,cAAc,CAACH,KAAK,CAAC,CACf,eACT,6BAAC,cAAM,+CAAUA,KAAK;IAAED,IAAI,EAAJA;EAAI;IAAI,WAAW;EAAA,IACxCI,cAAc,CAACH,KAAK,CAAC,CACf,eACT,6BAAC,cAAM,kCAAUA,KAAK;IAAED,IAAI,EAAJA;EAAI,IAAKI,cAAc,CAACH,KAAK,CAAC,CAAU,eAEhE,6BAAC,MAAI;IAAC,OAAO,EAAE;MAAA,OAAME,OAAO,CAAC,CAACH,IAAI,CAAC;IAAA;EAAC,iBAAmB,CACtD;AAEP,CAAC;AAAC;AAEFF,KAAK,CAACU,SAAS,GAAG,QAAQ;AAE1BV,KAAK,CAACW,IAAI,GAAG;EACXT,IAAI,EAAE,KAAK;EACXK,QAAQ,EAAE,UAAU;EACpBK,QAAQ,EAAE,KAAK;EACfJ,IAAI,EAAEK,SAAS;EACfC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,GAAG,EAAE,QAAQ;EACbC,OAAO,EAAE,SAAS;EAClBC,WAAW,EAAE,KAAK;EAClBC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE;IAAEC,YAAY,EAAE;EAA0B;AACnD,CAAC;AAEDzB,KAAK,CAAC0B,QAAQ,GAAG;EACflB,IAAI,EAAE;IACJmB,OAAO,GAAGd,SAAS,4BAAKe,MAAM,CAACC,IAAI,CAACpB,MAAI,CAAC,EAAC;IAC1CqB,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAEJ,MAAM,CAACC,IAAI,CAACpB,MAAI,CAAC,CAAC,CAAC;EACnC,CAAC;EACDwB,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}

package/build/components/InputNumber/InputNumber.js

@@ -55,6 +55,7 @@ var InputNumber = function InputNumber(_ref) {
     disabled: disabled || value <= min,
     rounded: rounded,
     secondary: true,
+    small: true,
     squared: true,
     onPress: function onPress() {
       return onChange(value - step, name);
@@ -67,6 +68,7 @@ var InputNumber = function InputNumber(_ref) {
     disabled: disabled || value >= max,
     rounded: rounded,
     secondary: true,
+    small: true,
     squared: true,
     onPress: function onPress() {
       return onChange(value + step, name);

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

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.js","names":["InputNumber","disabled","hint","label","max","min","name","required","rounded","showRequired","step","value","onChange","others","role","styles","style","inputNumber","className","texts","ICON","REMOVE","ADD","displayName","propTypes","PropTypes","bool","oneOfType","string","array","number","isRequired","func"],"sources":["../../../src/components/InputNumber/InputNumber.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport { Hint, Label } from '../InputText/partials';\nimport style from './InputNumber.module.css';\n\nconst InputNumber = ({\n  disabled,\n  hint,\n  label,\n  max,\n  min = 0,\n  name,\n  required,\n  rounded = true,\n  showRequired = false,\n  step = 1,\n  value = 0,\n  onChange = () => {},\n  ...others\n}) => (\n  <View {...others} role={others.role || 'input-number'} row className={styles(style.inputNumber, others.className)}>\n    <View className={style.texts}>\n      {label && <Label {...{ disabled, label, required: showRequired && required }} className={style.label} />}\n      {hint && <Hint {...{ disabled, hint }} className={style.hint} />}\n    </View>\n    <Button\n      disabled={disabled || value <= min}\n      rounded={rounded}\n      secondary\n      squared\n      onPress={() => onChange(value - step, name)}\n    >\n      <Icon value={ICON.REMOVE} />\n    </Button>\n    <Text className={styles(style.value, disabled && style.disabled)}>{typeof value === 'number' ? value : min}</Text>\n    <Button\n      disabled={disabled || value >= max}\n      rounded={rounded}\n      secondary\n      squared\n      onPress={() => onChange(value + step, name)}\n    >\n      <Icon value={ICON.ADD} />\n    </Button>\n  </View>\n);\n\nInputNumber.displayName = 'Component:InputNumber';\n\nInputNumber.propTypes = {\n  disabled: PropTypes.bool,\n  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n  label: PropTypes.string,\n  max: PropTypes.number,\n  min: PropTypes.number,\n  name: PropTypes.string.isRequired,\n  required: PropTypes.bool,\n  rounded: PropTypes.bool,\n  showRequired: PropTypes.bool,\n  step: PropTypes.number,\n  value: PropTypes.number,\n  onChange: PropTypes.func,\n};\n\nexport { InputNumber };\n"],"mappings":"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"}
+{"version":3,"file":"InputNumber.js","names":["InputNumber","disabled","hint","label","max","min","name","required","rounded","showRequired","step","value","onChange","others","role","styles","style","inputNumber","className","texts","ICON","REMOVE","ADD","displayName","propTypes","PropTypes","bool","oneOfType","string","array","number","isRequired","func"],"sources":["../../../src/components/InputNumber/InputNumber.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport { Hint, Label } from '../InputText/partials';\nimport style from './InputNumber.module.css';\n\nconst InputNumber = ({\n  disabled,\n  hint,\n  label,\n  max,\n  min = 0,\n  name,\n  required,\n  rounded = true,\n  showRequired = false,\n  step = 1,\n  value = 0,\n  onChange = () => {},\n  ...others\n}) => (\n  <View {...others} role={others.role || 'input-number'} row className={styles(style.inputNumber, others.className)}>\n    <View className={style.texts}>\n      {label && <Label {...{ disabled, label, required: showRequired && required }} className={style.label} />}\n      {hint && <Hint {...{ disabled, hint }} className={style.hint} />}\n    </View>\n    <Button\n      disabled={disabled || value <= min}\n      rounded={rounded}\n      secondary\n      small\n      squared\n      onPress={() => onChange(value - step, name)}\n    >\n      <Icon value={ICON.REMOVE} />\n    </Button>\n    <Text className={styles(style.value, disabled && style.disabled)}>{typeof value === 'number' ? value : min}</Text>\n    <Button\n      disabled={disabled || value >= max}\n      rounded={rounded}\n      secondary\n      small\n      squared\n      onPress={() => onChange(value + step, name)}\n    >\n      <Icon value={ICON.ADD} />\n    </Button>\n  </View>\n);\n\nInputNumber.displayName = 'Component:InputNumber';\n\nInputNumber.propTypes = {\n  disabled: PropTypes.bool,\n  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n  label: PropTypes.string,\n  max: PropTypes.number,\n  min: PropTypes.number,\n  name: PropTypes.string.isRequired,\n  required: PropTypes.bool,\n  rounded: PropTypes.bool,\n  showRequired: PropTypes.bool,\n  step: PropTypes.number,\n  value: PropTypes.number,\n  onChange: PropTypes.func,\n};\n\nexport { InputNumber };\n"],"mappings":"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"}

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

@@ -9,7 +9,7 @@ exports[`component:<InputNumber> inherit:className 1`] = `
       class="view texts"
     />
     <button
-      class="pressable disabled button rounded squared disabled"
+      class="pressable disabled button small rounded squared disabled"
       disabled=""
     >
       <span
@@ -40,7 +40,7 @@ exports[`component:<InputNumber> inherit:className 1`] = `
       0
     </span>
     <button
-      class="pressable button rounded squared secondary"
+      class="pressable button small rounded squared secondary"
     >
       <span
         class="icon headline-3"
@@ -77,7 +77,7 @@ exports[`component:<InputNumber> prop:disabled 1`] = `
       class="view texts"
     />
     <button
-      class="pressable disabled button rounded squared disabled"
+      class="pressable disabled button small rounded squared disabled"
       disabled=""
     >
       <span
@@ -108,7 +108,7 @@ exports[`component:<InputNumber> prop:disabled 1`] = `
       0
     </span>
     <button
-      class="pressable disabled button rounded squared disabled"
+      class="pressable disabled button small rounded squared disabled"
       disabled=""
     >
       <span
@@ -152,7 +152,7 @@ exports[`component:<InputNumber> prop:hint 1`] = `
       </span>
     </div>
     <button
-      class="pressable disabled button rounded squared disabled"
+      class="pressable disabled button small rounded squared disabled"
       disabled=""
     >
       <span
@@ -183,7 +183,7 @@ exports[`component:<InputNumber> prop:hint 1`] = `
       0
     </span>
     <button
-      class="pressable button rounded squared secondary"
+      class="pressable button small rounded squared secondary"
     >
       <span
         class="icon headline-3"
@@ -226,7 +226,7 @@ exports[`component:<InputNumber> prop:label 1`] = `
       </span>
     </div>
     <button
-      class="pressable disabled button rounded squared disabled"
+      class="pressable disabled button small rounded squared disabled"
       disabled=""
     >
       <span
@@ -257,7 +257,7 @@ exports[`component:<InputNumber> prop:label 1`] = `
       0
     </span>
     <button
-      class="pressable button rounded squared secondary"
+      class="pressable button small rounded squared secondary"
     >
       <span
         class="icon headline-3"
@@ -294,7 +294,7 @@ exports[`component:<InputNumber> prop:max 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button rounded squared secondary"
+      class="pressable button small rounded squared secondary"
     >
       <span
         class="icon headline-3"
@@ -324,7 +324,7 @@ exports[`component:<InputNumber> prop:max 1`] = `
       10
     </span>
     <button
-      class="pressable disabled button rounded squared disabled"
+      class="pressable disabled button small rounded squared disabled"
       disabled=""
     >
       <span
@@ -362,7 +362,7 @@ exports[`component:<InputNumber> prop:min 1`] = `
       class="view texts"
     />
     <button
-      class="pressable disabled button rounded squared disabled"
+      class="pressable disabled button small rounded squared disabled"
       disabled=""
     >
       <span
@@ -393,7 +393,7 @@ exports[`component:<InputNumber> prop:min 1`] = `
       10
     </span>
     <button
-      class="pressable button rounded squared secondary"
+      class="pressable button small rounded squared secondary"
     >
       <span
         class="icon headline-3"
@@ -430,7 +430,7 @@ exports[`component:<InputNumber> prop:required & prop:showRequired (true) 1`] =
       class="view texts"
     />
     <button
-      class="pressable button rounded squared secondary"
+      class="pressable button small rounded squared secondary"
     >
       <span
         class="icon headline-3"
@@ -460,7 +460,7 @@ exports[`component:<InputNumber> prop:required & prop:showRequired (true) 1`] =
       10
     </span>
     <button
-      class="pressable button rounded squared secondary"
+      class="pressable button small rounded squared secondary"
     >
       <span
         class="icon headline-3"
@@ -497,7 +497,7 @@ exports[`component:<InputNumber> prop:required 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button rounded squared secondary"
+      class="pressable button small rounded squared secondary"
     >
       <span
         class="icon headline-3"
@@ -527,7 +527,7 @@ exports[`component:<InputNumber> prop:required 1`] = `
       10
     </span>
     <button
-      class="pressable button rounded squared secondary"
+      class="pressable button small rounded squared secondary"
     >
       <span
         class="icon headline-3"
@@ -564,7 +564,7 @@ exports[`component:<InputNumber> prop:rounded 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button rounded squared secondary"
+      class="pressable button small rounded squared secondary"
     >
       <span
         class="icon headline-3"
@@ -594,7 +594,7 @@ exports[`component:<InputNumber> prop:rounded 1`] = `
       10
     </span>
     <button
-      class="pressable button rounded squared secondary"
+      class="pressable button small rounded squared secondary"
     >
       <span
         class="icon headline-3"
@@ -631,7 +631,7 @@ exports[`component:<InputNumber> prop:value 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button rounded squared secondary"
+      class="pressable button small rounded squared secondary"
     >
       <span
         class="icon headline-3"
@@ -661,7 +661,7 @@ exports[`component:<InputNumber> prop:value 1`] = `
       10
     </span>
     <button
-      class="pressable button rounded squared secondary"
+      class="pressable button small rounded squared secondary"
     >
       <span
         class="icon headline-3"
@@ -698,7 +698,7 @@ exports[`component:<InputNumber> renders 1`] = `
       class="view texts"
     />
     <button
-      class="pressable disabled button rounded squared disabled"
+      class="pressable disabled button small rounded squared disabled"
       disabled=""
     >
       <span
@@ -729,7 +729,7 @@ exports[`component:<InputNumber> renders 1`] = `
       0
     </span>
     <button
-      class="pressable button rounded squared secondary"
+      class="pressable button small rounded squared secondary"
     >
       <span
         class="icon headline-3"
@@ -767,7 +767,7 @@ exports[`component:<InputNumber> testId 1`] = `
       class="view texts"
     />
     <button
-      class="pressable disabled button rounded squared disabled"
+      class="pressable disabled button small rounded squared disabled"
       disabled=""
     >
       <span
@@ -798,7 +798,7 @@ exports[`component:<InputNumber> testId 1`] = `
       0
     </span>
     <button
-      class="pressable button rounded squared secondary"
+      class="pressable button small rounded squared secondary"
     >
       <span
         class="icon headline-3"

package/build/components/Modal/Modal.js

@@ -65,13 +65,13 @@ var Modal = function Modal(_ref) {
     dataset = _useState2[0],
     setDataset = _useState2[1];
   (0, _react.useEffect)(function () {
+    if (!visible || !onClose) return;
     _dataSources.Event.publish(_Modal.EVENT_VISIBLE, {
       visible: visible,
       displayName: displayName
     });
-    if (!visible || !onClose) return;
     var handleKeydown = function handleKeydown(event) {
-      return event.key === 'Escape' && onClose();
+      return event.key === 'Escape' && handleClose();
     };
     document.addEventListener('keydown', handleKeydown);
     return function () {
@@ -94,7 +94,20 @@ var Modal = function Modal(_ref) {
   var handleOverflow = function handleOverflow(event) {
     var _ref$current;
     var target = event.target;
-    onOverflow && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) && onOverflow(event);
+    if (onOverflow && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target))) {
+      _dataSources.Event.publish(_Modal.EVENT_VISIBLE, {
+        visible: false,
+        displayName: displayName
+      });
+      onOverflow(event);
+    }
+  };
+  var handleClose = function handleClose(event) {
+    _dataSources.Event.publish(_Modal.EVENT_VISIBLE, {
+      visible: false,
+      displayName: displayName
+    });
+    onClose(event);
   };
   var defaultDirection = _theme.Theme.getDirection() === _theme.DIRECTION_TYPE.LEFT;
   var renderer = _helpers.IS_JEST || !portal ? function (jsx) {
@@ -134,7 +147,7 @@ var Modal = function Modal(_ref) {
     small: true,
     squared: true,
     transparent: true,
-    onPress: onClose,
+    onPress: handleClose,
     testId: testId ? "".concat(testId, "-button-close") : undefined,
     className: _ModalModule.default.button
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {

package/build/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","blur","children","displayName","fit","mobileBehavior","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","isMobile","height","ref","useRef","useState","dataset","setDataset","useEffect","Event","publish","EVENT_VISIBLE","handleKeydown","event","key","document","addEventListener","removeEventListener","body","miraiModal","undefined","handleOverflow","target","current","contains","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","role","styles","style","container","modal","calcWidth","className","header","reverse","hideBack","hideClose","ICON","icon","button","CLOSE","EXPAND_MORE","React","Children","map","child","index","cloneElement","props","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import { Event } from '@mirai/data-sources';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components';\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { EVENT_VISIBLE } from './Modal.constants';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  displayName,\n  fit = false,\n  mobileBehavior = false,\n  overflow = true,\n  portal = false,\n  preventDefault = true,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  ...others\n}) => {\n  const { isDesktop, isMobile, height } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    Event.publish(EVENT_VISIBLE, { visible, displayName });\n    if (!visible || !onClose) return;\n\n    const handleKeydown = (event) => event.key === 'Escape' && onClose();\n\n    document.addEventListener('keydown', handleKeydown);\n    return () => document.removeEventListener('keydown', handleKeydown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible]);\n\n  useEffect(() => {\n    if (visible && !dataset) {\n      setDataset(true);\n      document.body.dataset.miraiModal = true;\n    }\n\n    return () => {\n      if (visible && dataset) {\n        setDataset(undefined);\n        delete document.body.dataset.miraiModal;\n      }\n    };\n  }, [dataset, visible]);\n\n  const handleOverflow = (event) => {\n    const { target } = event;\n    onOverflow && !ref.current?.contains(target) && onOverflow(event);\n  };\n\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n  const { testId } = others;\n\n  return renderer(\n    <Pressable\n      preventDefault={preventDefault}\n      role={others.role ? `${others.role}-overflow` : 'modal-overflow'}\n      onPress={visible && overflow ? handleOverflow : undefined}\n      className={styles(\n        style.container,\n        isDesktop && mobileBehavior && style.mobileBehavior,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      style={{ height }}\n      testId={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        ref={ref}\n        role={others.role || 'modal'}\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View\n            row\n            className={styles(\n              style.header,\n              !defaultDirection && style.reverse,\n              !onBack && style.hideBack,\n              !onClose && style.hideClose,\n            )}\n          >\n            {onBack && (\n              <Button small squared transparent onPress={onBack} testId={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Button>\n            )}\n            {title && (\n              <Text headline={!isMobile} className={style.title}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Button\n                small\n                squared\n                transparent\n                onPress={onClose}\n                testId={testId ? `${testId}-button-close` : undefined}\n                className={style.button}\n              >\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Button>\n            )}\n          </View>\n        )}\n\n        {React.Children.map(children, (child, index) =>\n          !child || child === null\n            ? null\n            : React.cloneElement(child, { key: child.key || index, ...child.props, role: 'modal-content' }),\n        )}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  displayName: PropTypes.string,\n  fit: PropTypes.bool,\n  mobileBehavior: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n  onOverflow: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["Modal","blur","children","displayName","fit","mobileBehavior","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","isMobile","height","ref","useRef","useState","dataset","setDataset","useEffect","Event","publish","EVENT_VISIBLE","handleKeydown","event","key","handleClose","document","addEventListener","removeEventListener","body","miraiModal","undefined","handleOverflow","target","current","contains","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","role","styles","style","container","modal","calcWidth","className","header","reverse","hideBack","hideClose","ICON","icon","button","CLOSE","EXPAND_MORE","React","Children","map","child","index","cloneElement","props","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import { Event } from '@mirai/data-sources';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components';\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { EVENT_VISIBLE } from './Modal.constants';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  displayName,\n  fit = false,\n  mobileBehavior = false,\n  overflow = true,\n  portal = false,\n  preventDefault = true,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  ...others\n}) => {\n  const { isDesktop, isMobile, height } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (!visible || !onClose) return;\n    Event.publish(EVENT_VISIBLE, { visible, displayName });\n\n    const handleKeydown = (event) => event.key === 'Escape' && handleClose();\n\n    document.addEventListener('keydown', handleKeydown);\n    return () => document.removeEventListener('keydown', handleKeydown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible]);\n\n  useEffect(() => {\n    if (visible && !dataset) {\n      setDataset(true);\n      document.body.dataset.miraiModal = true;\n    }\n\n    return () => {\n      if (visible && dataset) {\n        setDataset(undefined);\n        delete document.body.dataset.miraiModal;\n      }\n    };\n  }, [dataset, visible]);\n\n  const handleOverflow = (event) => {\n    const { target } = event;\n\n    if (onOverflow && !ref.current?.contains(target)) {\n      Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n      onOverflow(event);\n    }\n  };\n\n  const handleClose = (event) => {\n    Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n    onClose(event);\n  };\n\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n  const { testId } = others;\n\n  return renderer(\n    <Pressable\n      preventDefault={preventDefault}\n      role={others.role ? `${others.role}-overflow` : 'modal-overflow'}\n      onPress={visible && overflow ? handleOverflow : undefined}\n      className={styles(\n        style.container,\n        isDesktop && mobileBehavior && style.mobileBehavior,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      style={{ height }}\n      testId={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        ref={ref}\n        role={others.role || 'modal'}\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View\n            row\n            className={styles(\n              style.header,\n              !defaultDirection && style.reverse,\n              !onBack && style.hideBack,\n              !onClose && style.hideClose,\n            )}\n          >\n            {onBack && (\n              <Button small squared transparent onPress={onBack} testId={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Button>\n            )}\n            {title && (\n              <Text headline={!isMobile} className={style.title}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Button\n                small\n                squared\n                transparent\n                onPress={handleClose}\n                testId={testId ? `${testId}-button-close` : undefined}\n                className={style.button}\n              >\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Button>\n            )}\n          </View>\n        )}\n\n        {React.Children.map(children, (child, index) =>\n          !child || child === null\n            ? null\n            : React.cloneElement(child, { key: child.key || index, ...child.props, role: 'modal-content' }),\n        )}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  displayName: PropTypes.string,\n  fit: PropTypes.bool,\n  mobileBehavior: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n  onOverflow: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}

package/build/components/Slider/Slider.module.css

@@ -11,12 +11,12 @@
   border-radius: 50%;
   box-shadow: var(--mirai-ui-modal-shadow);
   display: flex;
-  height: var(--mirai-ui-button-squared);
+  height: var(--mirai-ui-button-small-height);
   justify-content: center;
   position: absolute;
-  top: calc(50% - calc(var(--mirai-ui-button-squared) / 2));
+  top: calc(50% - calc(var(--mirai-ui-button-small-height) / 2));
   transition: transform var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
-  width: var(--mirai-ui-button-squared);
+  width: var(--mirai-ui-button-small-height);
   z-index: var(--mirai-ui-layer-M);
 }
 

package/build/primitives/Input/Input.js

@@ -11,7 +11,7 @@ var _helpers = require("../../helpers");
 var _Primitive = require("../Primitive");
 var _helpers2 = require("./helpers");
 var _InputModule = _interopRequireDefault(require("./Input.module.css"));
-var _excluded = ["autoResize", "disabled", "max", "min", "multiLine", "type", "onChange", "onEnter", "onError", "onLeave"];
+var _excluded = ["autoResize", "disabled", "multiLine", "type", "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 }; }
@@ -31,10 +31,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Input = function Input(_ref) {
   var autoResize = _ref.autoResize,
     disabled = _ref.disabled,
-    _ref$max = _ref.max,
-    max = _ref$max === void 0 ? 0 : _ref$max,
-    _ref$min = _ref.min,
-    min = _ref$min === void 0 ? 0 : _ref$min,
     multiLine = _ref.multiLine,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type,
@@ -62,6 +58,8 @@ var Input = function Input(_ref) {
   var handleChange = function handleChange() {
     var next = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     var event = arguments.length > 1 ? arguments[1] : undefined;
+    var max = others.max,
+      min = others.min;
     if (type === 'number' && isNaN(next)) return;
     var value = (0, _helpers2.parseValue)(next, type, others);
     onError && onError((0, _helpers.getInputErrors)(_objectSpread(_objectSpread({}, others), {}, {

package/build/primitives/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["Input","autoResize","disabled","max","min","multiLine","type","onChange","onEnter","onError","onLeave","others","ref","useRef","useState","height","setHeight","useEffect","errors","getInputErrors","current","clientHeight","resize","value","handleChange","next","event","isNaN","parseValue","undefined","Math","style","scrollHeight","React","createElement","Primitive","role","tag","test","target","onFocus","onBlur","className","styles","input","displayName","propTypes","PropTypes","bool","number","name","string","isRequired","func"],"sources":["../../../src/primitives/Input/Input.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { getInputErrors, styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { parseValue } from './helpers';\nimport style from './Input.module.css';\n\nconst Input = ({\n  autoResize,\n  disabled,\n  max = 0,\n  min = 0,\n  multiLine,\n  type = 'text',\n  onChange,\n  onEnter,\n  onError,\n  onLeave,\n  ...others\n}) => {\n  const ref = useRef(null);\n\n  const [height, setHeight] = useState();\n\n  useEffect(() => {\n    const errors = getInputErrors({ ...others, type });\n    if (errors && onError) onError(errors);\n\n    if (autoResize && multiLine) {\n      setHeight(ref.current.clientHeight);\n      resize(others.value);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleChange = (next = '', event) => {\n    if (type === 'number' && isNaN(next)) return;\n    const value = parseValue(next, type, others);\n\n    onError && onError(getInputErrors({ ...others, type, value }));\n    onChange &&\n      onChange(\n        value !== undefined\n          ? type === 'number' && (max || min)\n            ? Math.min(Math.max(value, min ? min : value), max ? max : value)\n            : value\n          : '',\n        event,\n      );\n    if (autoResize && multiLine) resize(value);\n  };\n\n  const resize = (value) => {\n    if (!ref?.current) return;\n    ref.current.style.height = `${value ? ref.current.scrollHeight : height}px`;\n  };\n\n  return React.createElement(Primitive, {\n    ...others,\n    disabled,\n    ref: autoResize ? ref : undefined,\n    role: others.role || 'input',\n    tag: multiLine ? 'textarea' : 'input',\n    test: undefined,\n    type: !multiLine ? type : undefined,\n    value: others.value !== undefined ? others.value : '',\n    ...(!disabled\n      ? {\n          onChange: (event) => handleChange(event.target.value, event),\n          onFocus: onEnter,\n          onBlur: onLeave,\n        }\n      : {}),\n    className: styles(style.input, autoResize && multiLine && style.autoResize, others.className),\n  });\n};\n\nInput.displayName = 'Primitive:Input';\n\nInput.propTypes = {\n  autoResize: PropTypes.bool,\n  disabled: PropTypes.bool,\n  max: PropTypes.number,\n  min: PropTypes.number,\n  multiLine: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  type: PropTypes.string,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onError: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { Input };\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["Input","autoResize","disabled","multiLine","type","onChange","onEnter","onError","onLeave","others","ref","useRef","useState","height","setHeight","useEffect","errors","getInputErrors","current","clientHeight","resize","value","handleChange","next","event","max","min","isNaN","parseValue","undefined","Math","style","scrollHeight","React","createElement","Primitive","role","tag","test","target","onFocus","onBlur","className","styles","input","displayName","propTypes","PropTypes","bool","number","name","string","isRequired","func"],"sources":["../../../src/primitives/Input/Input.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { getInputErrors, styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { parseValue } from './helpers';\nimport style from './Input.module.css';\n\nconst Input = ({ autoResize, disabled, multiLine, type = 'text', onChange, onEnter, onError, onLeave, ...others }) => {\n  const ref = useRef(null);\n\n  const [height, setHeight] = useState();\n\n  useEffect(() => {\n    const errors = getInputErrors({ ...others, type });\n    if (errors && onError) onError(errors);\n\n    if (autoResize && multiLine) {\n      setHeight(ref.current.clientHeight);\n      resize(others.value);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleChange = (next = '', event) => {\n    const { max, min } = others;\n    if (type === 'number' && isNaN(next)) return;\n    const value = parseValue(next, type, others);\n\n    onError && onError(getInputErrors({ ...others, type, value }));\n    onChange &&\n      onChange(\n        value !== undefined\n          ? type === 'number' && (max || min)\n            ? Math.min(Math.max(value, min ? min : value), max ? max : value)\n            : value\n          : '',\n        event,\n      );\n    if (autoResize && multiLine) resize(value);\n  };\n\n  const resize = (value) => {\n    if (!ref?.current) return;\n    ref.current.style.height = `${value ? ref.current.scrollHeight : height}px`;\n  };\n\n  return React.createElement(Primitive, {\n    ...others,\n    disabled,\n    ref: autoResize ? ref : undefined,\n    role: others.role || 'input',\n    tag: multiLine ? 'textarea' : 'input',\n    test: undefined,\n    type: !multiLine ? type : undefined,\n    value: others.value !== undefined ? others.value : '',\n    ...(!disabled\n      ? {\n          onChange: (event) => handleChange(event.target.value, event),\n          onFocus: onEnter,\n          onBlur: onLeave,\n        }\n      : {}),\n    className: styles(style.input, autoResize && multiLine && style.autoResize, others.className),\n  });\n};\n\nInput.displayName = 'Primitive:Input';\n\nInput.propTypes = {\n  autoResize: PropTypes.bool,\n  disabled: PropTypes.bool,\n  max: PropTypes.number,\n  min: PropTypes.number,\n  multiLine: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  type: PropTypes.string,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onError: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { Input };\n"],"mappings":"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"}

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

@@ -38,6 +38,7 @@ exports[`primitive:<Input> prop:max 1`] = `
 <DocumentFragment>
   <input
     class="input"
+    max="100"
     name="name"
     type="number"
     value=""
@@ -49,6 +50,7 @@ exports[`primitive:<Input> prop:min 1`] = `
 <DocumentFragment>
   <input
     class="input"
+    min="1"
     name="name"
     type="number"
     value=""

package/build/theme/default.theme.css

@@ -3,6 +3,8 @@
   --mirai-ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --mirai-ui-font-weight: 400;
+  --mirai-ui-font-medium: var(--mirai-ui-font);
+  --mirai-ui-font-medium-weight: 500;
   --mirai-ui-font-bold: var(--mirai-ui-font);
   --mirai-ui-font-bold-weight: 700;
 
@@ -87,11 +89,12 @@
   --mirai-ui-input-min-height: var(--mirai-ui-space-XL);
 
   /* border */
-  --mirai-ui-border-radius: 4px;
+  --mirai-ui-border-radius: var(--mirai-ui-space-XXS);
   --mirai-ui-border-width: 1px;
 
   /* shadow */
   --mirai-ui-shadow: 0 0 var(--mirai-ui-space-S) rgba(0, 0, 0, 0.1);
+  --mirai-ui-shadow: 0 0 var(--mirai-ui-space-S) rgba(0, 0, 0, 0.15);
 
   /* focus */
   --mirai-ui-focus-color: var(--mirai-ui-accent-dark);
@@ -172,7 +175,7 @@
   /* Action */
   --mirai-ui-action-color: var(--mirai-ui-accent);
   --mirai-ui-action-color-disabled: var(--mirai-ui-content-light);
-  --mirai-ui-action-font-weight: var(--mirai-ui-font-weight);
+  --mirai-ui-action-font-weight: var(--mirai-ui-font-medium-weight);
 
   /* Button */
   --mirai-ui-button-background: var(--mirai-ui-accent);
@@ -183,16 +186,17 @@
   --mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
   --mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
   --mirai-ui-button-focus-color: var(--mirai-ui-focus-color);
-  --mirai-ui-button-focus-color-shadow: var(--mirai-ui-focus-color-shadow);
-  --mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
+  --mirai-ui-button-font-weight: var(--mirai-ui-font-medium-weight);
   --mirai-ui-button-padding-x: var(--mirai-ui-space-L);
-  --mirai-ui-button-padding-y: var(--mirai-ui-space-S);
+  --mirai-ui-button-height: calc(var(--mirai-ui-space-XL) - var(--mirai-ui-space-XXS));
+  --mirai-ui-button-large-height: var(--mirai-ui-space-XL);
+  --mirai-ui-button-small-height: calc(var(--mirai-ui-space-XL) - var(--mirai-ui-space-M));
   --mirai-ui-button-radius: var(--mirai-ui-border-radius);
   --mirai-ui-button-secondary-background: var(--mirai-ui-base);
+  --mirai-ui-button-secondary-background-active: var(--mirai-ui-accent-background);
   --mirai-ui-button-secondary-color: var(--mirai-ui-button-background);
   --mirai-ui-button-secondary-focus-color: var(--mirai-ui-button-focus-color);
   --mirai-ui-button-secondary-focus-color-shadow: var(--mirai-ui-focus-color-shadow);
-  --mirai-ui-button-squared: calc(var(--mirai-ui-space-M) * 2);
   --mirai-ui-button-transparent-background-active: var(--mirai-ui-accent-background);
   --mirai-ui-button-transparent-color: var(--mirai-ui-content);
 

package/package.json

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