@mirai/ui 1.1.15 → 2.0.1

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", "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,10 @@ 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,
@@ -38,12 +36,12 @@ var Action = function Action(_ref) {
     disabled: disabled,
     href: href,
     role: others.role || 'action',
-    tag: href ? 'a' : tag,
+    tag: href ? 'a' : others.tag || 'action',
     onPress: function onPress(event) {
       _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 +51,10 @@ 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","target","tiny","underline","wide","onPress","others","React","createElement","Pressable","role","tag","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  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' : others.tag || 'action',\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  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;IACLC,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;IACTT,QAAQ,EAARA,QAAQ;IACRC,IAAI,EAAJA,IAAI;IACJY,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,QAAQ;IAC7BC,GAAG,EAAEb,IAAI,GAAG,GAAG,GAAGQ,MAAM,CAACK,GAAG,IAAI,QAAQ;IACxCN,OAAO,EAAE,iBAACO,KAAK,EAAK;MAClBP,QAAO,IAAIA,QAAO,CAACO,KAAK,CAAC;MACzB,IAAId,IAAI,IAAIG,MAAM,EAAEY,MAAM,CAACC,IAAI,CAAChB,IAAI,EAAEG,MAAM,CAAC,CAAC,KACzC,IAAIH,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,GAAGE,IAAI,GAAGgB,qBAAK,CAAChB,IAAI,GAAGkB,SAAS,EACjFjB,SAAS,IAAIe,qBAAK,CAACf,SAAS,EAC5BC,IAAI,IAAIc,qBAAK,CAACd,IAAI,EAClBE,MAAM,CAACU,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,MAAM,EAAEsB,kBAAS,CAACG,MAAM;EACxBxB,IAAI,EAAEqB,kBAAS,CAACC,IAAI;EACpBrB,SAAS,EAAEoB,kBAAS,CAACC,IAAI;EACzBpB,IAAI,EAAEmB,kBAAS,CAACC,IAAI;EACpBI,OAAO,EAAEL,kBAAS,CAACM,IAAI;EACvBC,OAAO,EAAEP,kBAAS,CAACM,IAAI;EACvBxB,OAAO,EAAEkB,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',
+  tag: 'action',
   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: 'action',\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

@@ -2,32 +2,34 @@
 
 exports[`component:<Action> inherit:className 1`] = `
 <DocumentFragment>
-  <button
+  <ui_action
     class="pressable action mirai"
+    tabindex="0"
   >
     children
-  </button>
+  </ui_action>
 </DocumentFragment>
 `;
 
 exports[`component:<Action> prop:bold 1`] = `
 <DocumentFragment>
-  <button
+  <ui_action
     class="pressable action bold"
+    tabindex="0"
   >
     children
-  </button>
+  </ui_action>
 </DocumentFragment>
 `;
 
 exports[`component:<Action> prop:disabled 1`] = `
 <DocumentFragment>
-  <button
+  <ui_action
     class="pressable disabled action disabled"
     disabled=""
   >
     children
-  </button>
+  </ui_action>
 </DocumentFragment>
 `;
 
@@ -36,6 +38,7 @@ exports[`component:<Action> prop:href + prop:target 1`] = `
   <a
     class="pressable action"
     href="soyjavi.com"
+    tabindex="0"
   >
     children
   </a>
@@ -47,109 +50,98 @@ exports[`component:<Action> prop:href 1`] = `
   <a
     class="pressable action"
     href="soyjavi.com"
+    tabindex="0"
   >
     children
   </a>
 </DocumentFragment>
 `;
 
-exports[`component:<Action> prop:inline & prop:large 1`] = `
+exports[`component:<Action> prop:paragraph 1`] = `
 <DocumentFragment>
-  <button
-    class="pressable action inline large"
+  <ui_action
+    class="pressable action paragraph"
+    tabindex="0"
   >
     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`] = `
-<DocumentFragment>
-  <button
-    class="pressable action inline"
-  >
-    children
-  </button>
-</DocumentFragment>
-`;
-
-exports[`component:<Action> prop:large 1`] = `
-<DocumentFragment>
-  <button
-    class="pressable action large"
-  >
-    children
-  </button>
+  </ui_action>
 </DocumentFragment>
 `;
 
 exports[`component:<Action> prop:small 1`] = `
 <DocumentFragment>
-  <button
+  <ui_action
     class="pressable action small"
+    tabindex="0"
   >
     children
-  </button>
+  </ui_action>
 </DocumentFragment>
 `;
 
-exports[`component:<Action> prop:tag 1`] = `
+exports[`component:<Action> prop:tiny 1`] = `
 <DocumentFragment>
-  <a
-    class="pressable action"
+  <ui_action
+    class="pressable action tiny"
+    tabindex="0"
   >
     children
-  </a>
+  </ui_action>
 </DocumentFragment>
 `;
 
 exports[`component:<Action> prop:underline 1`] = `
 <DocumentFragment>
-  <button
+  <ui_action
     class="pressable action underline"
+    tabindex="0"
   >
     children
-  </button>
+  </ui_action>
 </DocumentFragment>
 `;
 
 exports[`component:<Action> prop:wide 1`] = `
 <DocumentFragment>
-  <button
+  <ui_action
     class="pressable action wide"
+    tabindex="0"
   >
     children
-  </button>
+  </ui_action>
 </DocumentFragment>
 `;
 
 exports[`component:<Action> renders 1`] = `
 <DocumentFragment>
-  <button
+  <ui_action
     class="pressable action"
+    tabindex="0"
   >
     children
-  </button>
+  </ui_action>
+</DocumentFragment>
+`;
+
+exports[`component:<Action> tag 1`] = `
+<DocumentFragment>
+  <a
+    class="pressable action"
+    tabindex="0"
+  >
+    children
+  </a>
 </DocumentFragment>
 `;
 
 exports[`component:<Action> testId 1`] = `
 <DocumentFragment>
-  <button
+  <ui_action
     class="pressable action"
     data-testid="mirai"
+    tabindex="0"
   >
     children
-  </button>
+  </ui_action>
 </DocumentFragment>
 `;

package/build/components/Button/Button.js

@@ -11,7 +11,7 @@ var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
 var _Tooltip = require("../Tooltip");
 var _ButtonModule = _interopRequireDefault(require("./Button.module.css"));
-var _excluded = ["busy", "children", "disabled", "large", "rounded", "secondary", "small", "squared", "tag", "transparent", "tooltip", "wide", "onPress"],
+var _excluded = ["busy", "children", "disabled", "large", "rounded", "secondary", "small", "squared", "transparent", "tooltip", "wide", "onPress"],
   _excluded2 = ["fixed", "left", "right", "top"];
 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; }
@@ -31,8 +31,6 @@ var Button = function Button(_ref) {
     small = _ref.small,
     _ref$squared = _ref.squared,
     squared = _ref$squared === void 0 ? false : _ref$squared,
-    _ref$tag = _ref.tag,
-    tag = _ref$tag === void 0 ? 'button' : _ref$tag,
     _ref$transparent = _ref.transparent,
     transparent = _ref$transparent === void 0 ? false : _ref$transparent,
     tooltip = _ref.tooltip,
@@ -53,9 +51,10 @@ var Button = function Button(_ref) {
   } : undefined, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, _objectSpread(_objectSpread({}, others), {}, {
     disabled: disabled || busy,
     role: others.role || 'button',
-    tag: tag,
+    tag: others.tag || 'button',
     onPress: onPress,
-    className: (0, _helpers.styles)(_ButtonModule.default.button, busy && !disabled && _ButtonModule.default.busy, large && _ButtonModule.default.large, small && _ButtonModule.default.small, rounded && _ButtonModule.default.rounded, squared && _ButtonModule.default.squared, secondary && !transparent && !disabled && _ButtonModule.default.secondary, transparent && _ButtonModule.default.transparent, (disabled || busy) && _ButtonModule.default.disabled, wide && _ButtonModule.default.wide, others.className)
+    className: (0, _helpers.styles)(_ButtonModule.default.button, busy && !disabled && _ButtonModule.default.busy, large && _ButtonModule.default.large, small && _ButtonModule.default.small, rounded && _ButtonModule.default.rounded, squared && _ButtonModule.default.squared, secondary && !transparent && !disabled && _ButtonModule.default.secondary, transparent && _ButtonModule.default.transparent, (disabled || busy) && _ButtonModule.default.disabled, wide && _ButtonModule.default.wide, others.className),
+    'aria-label': inherit['aria-label'] || (typeof tooltip === 'string' ? tooltip : undefined)
   }), busy === undefined ? children : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.View, {
     className: (0, _helpers.styles)(_ButtonModule.default.busyContainer, busy && _ButtonModule.default.active)
   }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
@@ -76,7 +75,6 @@ Button.propTypes = {
   secondary: _propTypes.default.bool,
   small: _propTypes.default.bool,
   squared: _propTypes.default.bool,
-  tag: _propTypes.default.string,
   tooltip: _propTypes.default.string,
   transparent: _propTypes.default.bool,
   wide: _propTypes.default.bool,

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["Button","busy","children","disabled","large","rounded","secondary","small","squared","tag","transparent","tooltip","wide","onPress","inherit","fixed","left","right","top","others","React","createElement","Tooltip","Fragment","text","undefined","Pressable","role","className","styles","style","button","busyContainer","active","spinner","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 { Tooltip } from '../Tooltip';\nimport style from './Button.module.css';\n\nconst Button = ({\n  busy,\n  children,\n  disabled,\n  large,\n  rounded,\n  secondary,\n  small,\n  squared = false,\n  tag = 'button',\n  transparent = false,\n  tooltip,\n  wide,\n  onPress,\n  ...inherit\n}) => {\n  const { fixed, left, right, top, ...others } = inherit;\n\n  return React.createElement(\n    tooltip ? Tooltip : React.Fragment,\n    tooltip ? { fixed, left, right, text: tooltip, top } : undefined,\n    React.createElement(\n      Pressable,\n      {\n        ...others,\n        disabled: disabled || busy,\n        role: others.role || 'button',\n        tag,\n        onPress,\n        className: styles(\n          style.button,\n          busy && !disabled && style.busy,\n          large && style.large,\n          small && style.small,\n          rounded && style.rounded,\n          squared && style.squared,\n          secondary && !transparent && !disabled && style.secondary,\n          transparent && style.transparent,\n          (disabled || busy) && style.disabled,\n          wide && style.wide,\n          others.className,\n        ),\n      },\n      busy === undefined ? (\n        children\n      ) : (\n        <>\n          <View className={styles(style.busyContainer, busy && style.active)}>\n            <View className={style.spinner} />\n          </View>\n          <View row className={style.children}>\n            {children}\n          </View>\n        </>\n      ),\n    ),\n  );\n};\n\nButton.displayName = 'Component:Button';\nButton.propTypes = {\n  busy: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  rounded: PropTypes.bool,\n  secondary: PropTypes.bool,\n  small: PropTypes.bool,\n  squared: PropTypes.bool,\n  tag: PropTypes.string,\n  tooltip: PropTypes.string,\n  transparent: PropTypes.bool,\n  wide: PropTypes.bool,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":["Button","busy","children","disabled","large","rounded","secondary","small","squared","transparent","tooltip","wide","onPress","inherit","fixed","left","right","top","others","React","createElement","Tooltip","Fragment","text","undefined","Pressable","role","tag","className","styles","style","button","busyContainer","active","spinner","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 { Tooltip } from '../Tooltip';\nimport style from './Button.module.css';\n\nconst Button = ({\n  busy,\n  children,\n  disabled,\n  large,\n  rounded,\n  secondary,\n  small,\n  squared = false,\n  transparent = false,\n  tooltip,\n  wide,\n  onPress,\n  ...inherit\n}) => {\n  const { fixed, left, right, top, ...others } = inherit;\n\n  return React.createElement(\n    tooltip ? Tooltip : React.Fragment,\n    tooltip ? { fixed, left, right, text: tooltip, top } : undefined,\n    React.createElement(\n      Pressable,\n      {\n        ...others,\n        disabled: disabled || busy,\n        role: others.role || 'button',\n        tag: others.tag || 'button',\n        onPress,\n        className: styles(\n          style.button,\n          busy && !disabled && style.busy,\n          large && style.large,\n          small && style.small,\n          rounded && style.rounded,\n          squared && style.squared,\n          secondary && !transparent && !disabled && style.secondary,\n          transparent && style.transparent,\n          (disabled || busy) && style.disabled,\n          wide && style.wide,\n          others.className,\n        ),\n        'aria-label': inherit['aria-label'] || (typeof tooltip === 'string' ? tooltip : undefined),\n      },\n      busy === undefined ? (\n        children\n      ) : (\n        <>\n          <View className={styles(style.busyContainer, busy && style.active)}>\n            <View className={style.spinner} />\n          </View>\n          <View row className={style.children}>\n            {children}\n          </View>\n        </>\n      ),\n    ),\n  );\n};\n\nButton.displayName = 'Component:Button';\nButton.propTypes = {\n  busy: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  rounded: PropTypes.bool,\n  secondary: PropTypes.bool,\n  small: PropTypes.bool,\n  squared: PropTypes.bool,\n  tooltip: PropTypes.string,\n  transparent: PropTypes.bool,\n  wide: PropTypes.bool,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"mappings":"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"}

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"}