@mirai/ui 1.0.221 → 1.1.0-beta

package/build/components/Action/Action.js

@@ -9,8 +9,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
-var _ActionModule = _interopRequireDefault(require("./Action.module.css"));
+var style = _interopRequireWildcard(require("./Action.module.css"));
 var _excluded = ["bold", "children", "disabled", "href", "inline", "large", "small", "tag", "target", "underline", "wide", "onPress"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -28,7 +30,7 @@ var Action = function Action(_ref) {
     large = _ref.large,
     small = _ref.small,
     _ref$tag = _ref.tag,
-    tag = _ref$tag === void 0 ? 'button' : _ref$tag,
+    tag = _ref$tag === void 0 ? 'action' : _ref$tag,
     target = _ref.target,
     underline = _ref.underline,
     wide = _ref.wide,
@@ -43,7 +45,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)(style.action, bold && style.bold, disabled && style.disabled, inline && style.inline, large && style.large, small && style.small, underline && style.underline, wide && style.wide, others.className)
   }), children);
 };
 exports.Action = Action;

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","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 * as style from './Action.module.css';\n\nconst Action = ({\n  bold,\n  children,\n  disabled,\n  href,\n  inline,\n  large,\n  small,\n  tag = 'action',\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;AAA6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE7C,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,KAAK,CAACC,MAAM,EACZxB,IAAI,IAAIuB,KAAK,CAACvB,IAAI,EAClBE,QAAQ,IAAIqB,KAAK,CAACrB,QAAQ,EAC1BE,MAAM,IAAImB,KAAK,CAACnB,MAAM,EACtBC,KAAK,IAAIkB,KAAK,CAAClB,KAAK,EACpBC,KAAK,IAAIiB,KAAK,CAACjB,KAAK,EACpBG,SAAS,IAAIc,KAAK,CAACd,SAAS,EAC5BC,IAAI,IAAIa,KAAK,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"}

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

@@ -8,55 +8,54 @@
   justify-content: center;
   position: relative;
   width: fit-content;
-}
-
-.action:not(.disabled):hover {
-  color: var(--mirai-ui-content);
-}
-
-.action.bold {
-  font-family: var(--mirai-ui-font-bold);
-  font-weight: var(--mirai-ui-font-bold-weight);
-}
-
-.action.disabled,
-.action.disabled * {
-  color: var(--mirai-ui-action-color-disabled);
-}
-
-.action:not(.disabled):active {
-  color: var(--mirai-ui-action-color-active);
-}
-
-.action:not(.inline):not(.large):not(.small) {
-  padding: var(--mirai-ui-button-padding-y) 0;
-}
-
-.large {
-  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;
-}
-
-.underline,
-.underline * {
-  text-decoration: underline;
-}
-
-.wide {
-  width: 100%;
-}
 
-.action * {
-  margin-right: calc(var(--mirai-ui-space-XS) / 2);
+  &.bold {
+    font-family: var(--mirai-ui-font-bold);
+    font-weight: var(--mirai-ui-font-bold-weight);
+  }
+
+  &.disabled,
+  &.disabled * {
+    color: var(--mirai-ui-action-color-disabled);
+  }
+
+  &.large {
+    font-size: var(--mirai-ui-font-size-paragraph);
+
+    &:not(.inline) {
+      padding: var(--mirai-ui-button-padding-y) 0;
+    }
+  }
+
+  &.small {
+    font-size: var(--mirai-ui-font-size-small);
+    &:not(.inline) {
+      padding: var(--mirai-ui-button-padding-y) 0;
+    }
+  }
+
+  &.underline,
+  &.underline * {
+    text-decoration: underline;
+  }
+
+  &.wide {
+    width: 100%;
+  }
+
+  & * {
+    margin-right: calc(var(--mirai-ui-space-XS) / 2);
+  }
+
+  &:not(.disabled):active {
+    color: var(--mirai-ui-action-color-active);
+  }
+
+  &:not(.disabled):hover {
+    color: var(--mirai-ui-content);
+  }
+
+  &:not(.inline):not(.large):not(.small) {
+    padding: var(--mirai-ui-button-padding-y) 0;
+  }
 }

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

@@ -1,24 +1,27 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Story = void 0;
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 var _Action = require("./Action");
 var _Icon = require("../../primitives/Icon");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+// import React from 'react';
 var _default = {
   title: 'Components'
 };
 exports.default = _default;
 var Story = function Story(props) {
-  return /*#__PURE__*/_react.default.createElement(_Action.Action, props);
+  return /*#__PURE__*/React.createElement(_Action.Action, props);
 };
 exports.Story = Story;
 Story.storyName = 'Action';
 Story.args = {
-  children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+  children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Icon.Icon, {
     value: _Icon.ICON.INFO
   }), "children"),
   disabled: false,
@@ -27,7 +30,7 @@ Story.args = {
   inline: false,
   large: false,
   small: false,
-  tag: 'button',
+  tag: 'action',
   target: '',
   underline: false,
   wide: false,

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","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';\nimport * as 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: 'action',\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":";;;;;;;AACA;AAEA;AACA;AAAmD;AAAA;AAJnD;AAAA,eAMe;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,oBAAC,cAAM,EAAKA,KAAK,CAAI;AAAA;AAAC;AAEtDD,KAAK,CAACE,SAAS,GAAG,QAAQ;AAE1BF,KAAK,CAACG,IAAI,GAAG;EACXC,QAAQ,eACN,uDACE,oBAAC,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"}

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,6 +50,7 @@ exports[`component:<Action> prop:href 1`] = `
   <a
     class="pressable action"
     href="soyjavi.com"
+    tabindex="0"
   >
     children
   </a>
@@ -55,101 +59,111 @@ exports[`component:<Action> prop:href 1`] = `
 
 exports[`component:<Action> prop:inline & prop:large 1`] = `
 <DocumentFragment>
-  <button
+  <ui_action
     class="pressable action inline large"
+    tabindex="0"
   >
     children
-  </button>
+  </ui_action>
 </DocumentFragment>
 `;
 
 exports[`component:<Action> prop:inline & prop:small 1`] = `
 <DocumentFragment>
-  <button
+  <ui_action
     class="pressable action inline small"
+    tabindex="0"
   >
     children
-  </button>
+  </ui_action>
 </DocumentFragment>
 `;
 
 exports[`component:<Action> prop:inline default 1`] = `
 <DocumentFragment>
-  <button
+  <ui_action
     class="pressable action inline"
+    tabindex="0"
   >
     children
-  </button>
+  </ui_action>
 </DocumentFragment>
 `;
 
 exports[`component:<Action> prop:large 1`] = `
 <DocumentFragment>
-  <button
+  <ui_action
     class="pressable action large"
+    tabindex="0"
   >
     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`] = `
 <DocumentFragment>
-  <a
+  <ui_tag
     class="pressable action"
+    tabindex="0"
   >
     children
-  </a>
+  </ui_tag>
 </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> 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

@@ -10,9 +10,11 @@ var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
 var _Tooltip = require("../Tooltip");
-var _ButtonModule = _interopRequireDefault(require("./Button.module.css"));
+var style = _interopRequireWildcard(require("./Button.module.css"));
 var _excluded = ["busy", "children", "disabled", "large", "rounded", "secondary", "small", "squared", "tag", "transparent", "tooltip", "wide", "onPress"],
   _excluded2 = ["fixed", "left", "right", "top"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -55,14 +57,14 @@ var Button = function Button(_ref) {
     role: others.role || 'button',
     tag: tag,
     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)(style.button, busy && !disabled && style.busy, large && style.large, small && style.small, rounded && style.rounded, squared && style.squared, secondary && !transparent && !disabled && style.secondary, transparent && style.transparent, (disabled || busy) && style.disabled, wide && style.wide, others.className)
   }), 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)
+    className: (0, _helpers.styles)(style.busyContainer, busy && style.active)
   }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
-    className: _ButtonModule.default.spinner
+    className: style.spinner
   })), /*#__PURE__*/_react.default.createElement(_primitives.View, {
     row: true,
-    className: _ButtonModule.default.children
+    className: style.children
   }, children))));
 };
 exports.Button = Button;

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","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 * as 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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"}

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

@@ -4,6 +4,7 @@ exports[`component:<Button> inherit:className 1`] = `
 <DocumentFragment>
   <button
     class="pressable button mirai"
+    tabindex="0"
   >
     children
   </button>
@@ -16,18 +17,18 @@ exports[`component:<Button> prop:busy 1`] = `
     class="pressable disabled button busy disabled"
     disabled=""
   >
-    <div
+    <ui_view
       class="view busyContainer active"
     >
-      <div
+      <ui_view
         class="view spinner"
       />
-    </div>
-    <div
+    </ui_view>
+    <ui_view
       class="view row children"
     >
       children
-    </div>
+    </ui_view>
   </button>
 </DocumentFragment>
 `;
@@ -47,6 +48,7 @@ exports[`component:<Button> prop:large 1`] = `
 <DocumentFragment>
   <button
     class="pressable button large"
+    tabindex="0"
   >
     children
   </button>
@@ -59,18 +61,18 @@ exports[`component:<Button> prop:secondary && prop:busy 1`] = `
     class="pressable disabled button busy secondary disabled"
     disabled=""
   >
-    <div
+    <ui_view
       class="view busyContainer active"
     >
-      <div
+      <ui_view
         class="view spinner"
       />
-    </div>
-    <div
+    </ui_view>
+    <ui_view
       class="view row children"
     >
       children
-    </div>
+    </ui_view>
   </button>
 </DocumentFragment>
 `;
@@ -81,18 +83,18 @@ exports[`component:<Button> prop:secondary && prop:busy 2`] = `
     class="pressable disabled button busy transparent disabled"
     disabled=""
   >
-    <div
+    <ui_view
       class="view busyContainer active"
     >
-      <div
+      <ui_view
         class="view spinner"
       />
-    </div>
-    <div
+    </ui_view>
+    <ui_view
       class="view row children"
     >
       children
-    </div>
+    </ui_view>
   </button>
 </DocumentFragment>
 `;
@@ -101,6 +103,7 @@ exports[`component:<Button> prop:secondary 1`] = `
 <DocumentFragment>
   <button
     class="pressable button secondary"
+    tabindex="0"
   >
     children
   </button>
@@ -111,6 +114,7 @@ exports[`component:<Button> prop:small 1`] = `
 <DocumentFragment>
   <button
     class="pressable button small"
+    tabindex="0"
   >
     children
   </button>
@@ -121,6 +125,7 @@ exports[`component:<Button> prop:squared 1`] = `
 <DocumentFragment>
   <button
     class="pressable button squared"
+    tabindex="0"
   >
     children
   </button>
@@ -129,23 +134,25 @@ exports[`component:<Button> prop:squared 1`] = `
 
 exports[`component:<Button> prop:tag 1`] = `
 <DocumentFragment>
-  <a
+  <ui_tag
     class="pressable button"
+    tabindex="0"
   >
     children
-  </a>
+  </ui_tag>
 </DocumentFragment>
 `;
 
 exports[`component:<Button> prop:tooltip 1`] = `
 <DocumentFragment>
-  <span>
+  <ui_layer>
     <button
       class="pressable dispatcher button"
+      tabindex="0"
     >
       children
     </button>
-  </span>
+  </ui_layer>
 </DocumentFragment>
 `;
 
@@ -153,6 +160,7 @@ exports[`component:<Button> prop:transparent 1`] = `
 <DocumentFragment>
   <button
     class="pressable button transparent"
+    tabindex="0"
   >
     children
   </button>
@@ -163,6 +171,7 @@ exports[`component:<Button> prop:wide 1`] = `
 <DocumentFragment>
   <button
     class="pressable button wide"
+    tabindex="0"
   >
     children
   </button>
@@ -173,6 +182,7 @@ exports[`component:<Button> renders 1`] = `
 <DocumentFragment>
   <button
     class="pressable button"
+    tabindex="0"
   >
     children
   </button>
@@ -184,6 +194,7 @@ exports[`component:<Button> testId 1`] = `
   <button
     class="pressable button"
     data-testid="mirai"
+    tabindex="0"
   >
     children
   </button>