@mirai/ui 1.0.54 → 1.0.56

package/build/components/Table/Table.stories.js

@@ -0,0 +1,95 @@
+"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 = _interopRequireWildcard(require("react"));
+
+var _ = require("../");
+
+var _Table = require("./Table");
+
+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; }
+
+var _default = {
+  title: 'Components'
+};
+exports.default = _default;
+
+var Story = function Story(props) {
+  return /*#__PURE__*/React.createElement(_Table.Table, props);
+};
+
+exports.Story = Story;
+Story.storyName = 'Table';
+Story.args = {
+  dataSource: [{
+    username: 'jose',
+    email: 'jose@mirai.com',
+    year: 2012
+  }, {
+    username: 'mario/1',
+    email: 'mario.1@mirai.com',
+    year: 2005
+  }, {
+    username: 'carlos',
+    email: 'carlos@mirai.com',
+    year: 2012
+  }, {
+    username: 'svet',
+    email: 'svet@mirai.com',
+    year: 2021,
+    twitter: undefined,
+    action: /*#__PURE__*/React.createElement(_.Button, {
+      small: true
+    }, "Click Me")
+  }, {
+    username: 'javi',
+    email: 'hi@soyjavi.com',
+    year: 2022,
+    twitter: 'soyjavi'
+  }, {
+    username: 'victor',
+    email: 'victor@mirai.com',
+    year: 2021
+  }, {
+    username: 'mario/2',
+    email: 'mario.2@mirai.com',
+    year: 2022
+  }],
+  schema: {
+    username: {
+      label: 'User Name',
+      type: 'text'
+    },
+    email: {
+      label: 'Email'
+    },
+    year: {
+      label: 'Year',
+      type: 'number'
+    },
+    twitter: {
+      label: 'Twitter'
+    },
+    action: {
+      label: 'Action'
+    }
+  },
+  search: ''
+};
+Story.argTypes = {
+  onPress: {
+    action: 'onPress'
+  },
+  onSelect: {
+    action: 'onSelect'
+  }
+};
+//# sourceMappingURL=Table.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.stories.js","names":["title","Story","props","storyName","args","dataSource","username","email","year","twitter","undefined","action","schema","label","type","search","argTypes","onPress","onSelect"],"sources":["../../../src/components/Table/Table.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button } from '../';\nimport { Table } from './Table';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Table {...props} />;\n\nStory.storyName = 'Table';\n\nStory.args = {\n  dataSource: [\n    { username: 'jose', email: 'jose@mirai.com', year: 2012 },\n    { username: 'mario/1', email: 'mario.1@mirai.com', year: 2005 },\n    { username: 'carlos', email: 'carlos@mirai.com', year: 2012 },\n    {\n      username: 'svet',\n      email: 'svet@mirai.com',\n      year: 2021,\n      twitter: undefined,\n      action: <Button small>Click Me</Button>,\n    },\n    { username: 'javi', email: 'hi@soyjavi.com', year: 2022, twitter: 'soyjavi' },\n    { username: 'victor', email: 'victor@mirai.com', year: 2021 },\n    { username: 'mario/2', email: 'mario.2@mirai.com', year: 2022 },\n  ],\n  schema: {\n    username: { label: 'User Name', type: 'text' },\n    email: { label: 'Email' },\n    year: { label: 'Year', type: 'number' },\n    twitter: { label: 'Twitter' },\n    action: { label: 'Action' },\n  },\n  search: '',\n};\n\nStory.argTypes = {\n  onPress: { action: 'onPress' },\n  onSelect: { action: 'onSelect' },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBAAW,oBAAC,YAAD,EAAWA,KAAX,CAAX;AAAA,CAAd;;;AAEPD,KAAK,CAACE,SAAN,GAAkB,OAAlB;AAEAF,KAAK,CAACG,IAAN,GAAa;EACXC,UAAU,EAAE,CACV;IAAEC,QAAQ,EAAE,MAAZ;IAAoBC,KAAK,EAAE,gBAA3B;IAA6CC,IAAI,EAAE;EAAnD,CADU,EAEV;IAAEF,QAAQ,EAAE,SAAZ;IAAuBC,KAAK,EAAE,mBAA9B;IAAmDC,IAAI,EAAE;EAAzD,CAFU,EAGV;IAAEF,QAAQ,EAAE,QAAZ;IAAsBC,KAAK,EAAE,kBAA7B;IAAiDC,IAAI,EAAE;EAAvD,CAHU,EAIV;IACEF,QAAQ,EAAE,MADZ;IAEEC,KAAK,EAAE,gBAFT;IAGEC,IAAI,EAAE,IAHR;IAIEC,OAAO,EAAEC,SAJX;IAKEC,MAAM,eAAE,oBAAC,QAAD;MAAQ,KAAK;IAAb;EALV,CAJU,EAWV;IAAEL,QAAQ,EAAE,MAAZ;IAAoBC,KAAK,EAAE,gBAA3B;IAA6CC,IAAI,EAAE,IAAnD;IAAyDC,OAAO,EAAE;EAAlE,CAXU,EAYV;IAAEH,QAAQ,EAAE,QAAZ;IAAsBC,KAAK,EAAE,kBAA7B;IAAiDC,IAAI,EAAE;EAAvD,CAZU,EAaV;IAAEF,QAAQ,EAAE,SAAZ;IAAuBC,KAAK,EAAE,mBAA9B;IAAmDC,IAAI,EAAE;EAAzD,CAbU,CADD;EAgBXI,MAAM,EAAE;IACNN,QAAQ,EAAE;MAAEO,KAAK,EAAE,WAAT;MAAsBC,IAAI,EAAE;IAA5B,CADJ;IAENP,KAAK,EAAE;MAAEM,KAAK,EAAE;IAAT,CAFD;IAGNL,IAAI,EAAE;MAAEK,KAAK,EAAE,MAAT;MAAiBC,IAAI,EAAE;IAAvB,CAHA;IAINL,OAAO,EAAE;MAAEI,KAAK,EAAE;IAAT,CAJH;IAKNF,MAAM,EAAE;MAAEE,KAAK,EAAE;IAAT;EALF,CAhBG;EAuBXE,MAAM,EAAE;AAvBG,CAAb;AA0BAd,KAAK,CAACe,QAAN,GAAiB;EACfC,OAAO,EAAE;IAAEN,MAAM,EAAE;EAAV,CADM;EAEfO,QAAQ,EAAE;IAAEP,MAAM,EAAE;EAAV;AAFK,CAAjB"}

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

@@ -16,7 +16,7 @@ exports[`component:<Table> inherit:className 1`] = `
           >
             User Name
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -48,7 +48,7 @@ exports[`component:<Table> inherit:className 1`] = `
           >
             Email
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -80,7 +80,7 @@ exports[`component:<Table> inherit:className 1`] = `
           >
             Year
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -112,7 +112,7 @@ exports[`component:<Table> inherit:className 1`] = `
           >
             Twitter
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -144,7 +144,7 @@ exports[`component:<Table> inherit:className 1`] = `
           >
             Action
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -460,7 +460,7 @@ exports[`component:<Table> prop:onSelect 1`] = `
           >
             User Name
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -492,7 +492,7 @@ exports[`component:<Table> prop:onSelect 1`] = `
           >
             Email
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -524,7 +524,7 @@ exports[`component:<Table> prop:onSelect 1`] = `
           >
             Year
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -556,7 +556,7 @@ exports[`component:<Table> prop:onSelect 1`] = `
           >
             Twitter
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -588,7 +588,7 @@ exports[`component:<Table> prop:onSelect 1`] = `
           >
             Action
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -1141,7 +1141,7 @@ exports[`component:<Table> prop:search 1`] = `
           >
             User Name
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -1173,7 +1173,7 @@ exports[`component:<Table> prop:search 1`] = `
           >
             Email
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -1205,7 +1205,7 @@ exports[`component:<Table> prop:search 1`] = `
           >
             Year
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -1237,7 +1237,7 @@ exports[`component:<Table> prop:search 1`] = `
           >
             Twitter
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -1269,7 +1269,7 @@ exports[`component:<Table> prop:search 1`] = `
           >
             Action
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -1357,7 +1357,7 @@ exports[`component:<Table> renders 1`] = `
           >
             User Name
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -1389,7 +1389,7 @@ exports[`component:<Table> renders 1`] = `
           >
             Email
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -1421,7 +1421,7 @@ exports[`component:<Table> renders 1`] = `
           >
             Year
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -1453,7 +1453,7 @@ exports[`component:<Table> renders 1`] = `
           >
             Twitter
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -1485,7 +1485,7 @@ exports[`component:<Table> renders 1`] = `
           >
             Action
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -1794,7 +1794,7 @@ exports[`component:<Table> testID 1`] = `
           >
             User Name
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -1826,7 +1826,7 @@ exports[`component:<Table> testID 1`] = `
           >
             Email
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -1858,7 +1858,7 @@ exports[`component:<Table> testID 1`] = `
           >
             Year
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -1890,7 +1890,7 @@ exports[`component:<Table> testID 1`] = `
           >
             Twitter
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"
@@ -1922,7 +1922,7 @@ exports[`component:<Table> testID 1`] = `
           >
             Action
             <span
-              class="icon hideIcon"
+              class="icon paragraph hideIcon"
             >
               <svg
                 fill="none"

package/build/components/Tooltip/Tooltip.module.css

@@ -1,11 +1,3 @@
-:root {
-  --mirai-ui-tooltip-background: rgba(0, 0, 0, 0.8);
-  --mirai-ui-tooltip-border-radius: var(--mirai-ui-border-radius);
-  --mirai-ui-tooltip-color: var(--mirai-ui-base);
-  --mirai-ui-tooltip-space: var(--mirai-ui-space-XS);
-  --mirai-ui-tooltip-max-width: calc(var(--mirai-ui-space-XXL) * 4);
-}
-
 .dispatcher {
   cursor: pointer;
 }

package/build/components/Tooltip/Tooltip.stories.js

@@ -0,0 +1,38 @@
+"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 = _interopRequireWildcard(require("react"));
+
+var _Tooltip = require("./Tooltip");
+
+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; }
+
+var _default = {
+  title: 'Components'
+};
+exports.default = _default;
+
+var Story = function Story(props) {
+  return /*#__PURE__*/React.createElement(_Tooltip.Tooltip, props, /*#__PURE__*/React.createElement("span", null, "hover me (prop:text)"));
+};
+
+exports.Story = Story;
+Story.storyName = 'Tooltip';
+Story.args = {
+  text: 'children',
+  visible: false
+};
+Story.argTypes = {
+  onClose: {
+    action: 'onClose'
+  }
+};
+//# sourceMappingURL=Tooltip.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.js","names":["title","Story","props","storyName","args","text","visible","argTypes","onClose","action"],"sources":["../../../src/components/Tooltip/Tooltip.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Tooltip } from './Tooltip';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <Tooltip {...props}>\n    <span>hover me (prop:text)</span>\n  </Tooltip>\n);\n\nStory.storyName = 'Tooltip';\n\nStory.args = {\n  text: 'children',\n  visible: false,\n};\n\nStory.argTypes = {\n  onClose: { action: 'onClose' },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBACnB,oBAAC,gBAAD,EAAaA,KAAb,eACE,yDADF,CADmB;AAAA,CAAd;;;AAMPD,KAAK,CAACE,SAAN,GAAkB,SAAlB;AAEAF,KAAK,CAACG,IAAN,GAAa;EACXC,IAAI,EAAE,UADK;EAEXC,OAAO,EAAE;AAFE,CAAb;AAKAL,KAAK,CAACM,QAAN,GAAiB;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAV;AADM,CAAjB"}

package/build/hooks/useDevice.stories.js

@@ -0,0 +1,57 @@
+"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 = _interopRequireWildcard(require("react"));
+
+var _ = require("..");
+
+var _useDevice = require("./useDevice");
+
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var _default = {
+  title: 'Hooks'
+};
+exports.default = _default;
+
+var Story = function Story() {
+  var device = (0, _useDevice.useDevice)();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, Object.entries(device).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    return /*#__PURE__*/React.createElement(_.View, {
+      row: true,
+      key: key
+    }, /*#__PURE__*/React.createElement(_.Text, null, key, ":"), /*#__PURE__*/React.createElement(_.Text, {
+      bold: true
+    }, value.toString()));
+  }));
+};
+
+exports.Story = Story;
+Story.storyName = 'useDevice';
+Story.args = {};
+Story.argTypes = {};
+//# sourceMappingURL=useDevice.stories.js.map

package/build/hooks/useDevice.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDevice.stories.js","names":["title","Story","device","Object","entries","map","key","value","toString","storyName","args","argTypes"],"sources":["../../src/hooks/useDevice.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Text, View } from '..';\nimport { useDevice } from './useDevice';\n\nexport default { title: 'Hooks' };\n\nexport const Story = () => {\n  const device = useDevice();\n\n  return (\n    <>\n      {Object.entries(device).map(([key, value]) => (\n        <View row key={key}>\n          <Text>{key}:</Text>\n          <Text bold>{value.toString()}</Text>\n        </View>\n      ))}\n    </>\n  );\n};\n\nStory.storyName = 'useDevice';\n\nStory.args = {};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,GAAM;EACzB,IAAMC,MAAM,GAAG,2BAAf;EAEA,oBACE,0CACGC,MAAM,CAACC,OAAP,CAAeF,MAAf,EAAuBG,GAAvB,CAA2B;IAAA;IAAA,IAAEC,GAAF;IAAA,IAAOC,KAAP;;IAAA,oBAC1B,oBAAC,MAAD;MAAM,GAAG,MAAT;MAAU,GAAG,EAAED;IAAf,gBACE,oBAAC,MAAD,QAAOA,GAAP,MADF,eAEE,oBAAC,MAAD;MAAM,IAAI;IAAV,GAAYC,KAAK,CAACC,QAAN,EAAZ,CAFF,CAD0B;EAAA,CAA3B,CADH,CADF;AAUD,CAbM;;;AAePP,KAAK,CAACQ,SAAN,GAAkB,WAAlB;AAEAR,KAAK,CAACS,IAAN,GAAa,EAAb;AAEAT,KAAK,CAACU,QAAN,GAAiB,EAAjB"}

package/build/primitives/Checkbox/Checkbox.module.css

@@ -1,12 +1,3 @@
-:root {
-  --mirai-ui-checkbox-base: var(--mirai-ui-base);
-  --mirai-ui-checkbox-border-color: var(--mirai-ui-content-light);
-  --mirai-ui-checkbox-border-radius: var(--mirai-ui-border-radius);
-  --mirai-ui-checkbox-checked: var(--mirai-ui-accent);
-  --mirai-ui-checkbox-disabled: var(--mirai-ui-content-border);
-  --mirai-ui-checkbox-size: var(--mirai-ui-space-L);
-}
-
 .checkbox {
   cursor: pointer;
   height: var(--mirai-ui-checkbox-size);

package/build/primitives/Icon/Icon.js

@@ -15,7 +15,7 @@ var _Icon = require("./Icon.constants");
 
 var _IconModule = _interopRequireDefault(require("./Icon.module.css"));
 
-var _excluded = ["name"];
+var _excluded = ["action", "headline", "level", "name", "small"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -30,17 +30,26 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var Icon = function Icon(_ref) {
-  var name = _ref.name,
+  var action = _ref.action,
+      headline = _ref.headline,
+      _ref$level = _ref.level,
+      level = _ref$level === void 0 ? 3 : _ref$level,
+      name = _ref.name,
+      small = _ref.small,
       others = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement('span', _objectSpread(_objectSpread({}, others), {}, {
-    className: (0, _helpers.styles)(_IconModule.default.icon, others.className)
+    className: (0, _helpers.styles)(_IconModule.default.icon, headline ? _IconModule.default["headline-".concat(level)] : action ? _IconModule.default.action : small ? _IconModule.default.small : _IconModule.default.paragraph, others.className)
   }), _Icon.ICONS[name] ? /*#__PURE__*/_react.default.createElement(_Icon.ICONS[name]) : undefined);
 };
 
 exports.Icon = Icon;
 Icon.displayName = 'Primitive:Icon';
 Icon.propTypes = {
-  name: _propTypes.default.oneOf(Object.keys(_Icon.ICONS)).isRequired
+  action: _propTypes.default.bool,
+  headline: _propTypes.default.bool,
+  level: _propTypes.default.number,
+  name: _propTypes.default.oneOf(Object.keys(_Icon.ICONS)).isRequired,
+  small: _propTypes.default.bool
 };
 //# sourceMappingURL=Icon.js.map

package/build/primitives/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["Icon","name","others","React","createElement","className","style","icon","ICONS","undefined","displayName","propTypes","PropTypes","oneOf","Object","keys","isRequired"],"sources":["../../../src/primitives/Icon/Icon.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { ICONS } from './Icon.constants';\nimport style from './Icon.module.css';\n\nconst Icon = ({ name, ...others }) =>\n  React.createElement(\n    'span',\n    {\n      ...others,\n      className: styles(style.icon, others.className),\n    },\n    ICONS[name] ? React.createElement(ICONS[name]) : undefined,\n  );\n\nIcon.displayName = 'Primitive:Icon';\n\nIcon.propTypes = {\n  name: PropTypes.oneOf(Object.keys(ICONS)).isRequired,\n};\n\nexport { Icon };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO;EAAA,IAAGC,IAAH,QAAGA,IAAH;EAAA,IAAYC,MAAZ;;EAAA,oBACXC,eAAMC,aAAN,CACE,MADF,kCAGOF,MAHP;IAIIG,SAAS,EAAE,qBAAOC,oBAAMC,IAAb,EAAmBL,MAAM,CAACG,SAA1B;EAJf,IAMEG,YAAMP,IAAN,iBAAcE,eAAMC,aAAN,CAAoBI,YAAMP,IAAN,CAApB,CAAd,GAAiDQ,SANnD,CADW;AAAA,CAAb;;;AAUAT,IAAI,CAACU,WAAL,GAAmB,gBAAnB;AAEAV,IAAI,CAACW,SAAL,GAAiB;EACfV,IAAI,EAAEW,mBAAUC,KAAV,CAAgBC,MAAM,CAACC,IAAP,CAAYP,WAAZ,CAAhB,EAAoCQ;AAD3B,CAAjB"}
+{"version":3,"file":"Icon.js","names":["Icon","action","headline","level","name","small","others","React","createElement","className","style","icon","paragraph","ICONS","undefined","displayName","propTypes","PropTypes","bool","number","oneOf","Object","keys","isRequired"],"sources":["../../../src/primitives/Icon/Icon.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { ICONS } from './Icon.constants';\nimport style from './Icon.module.css';\n\nconst Icon = ({ action, headline, level = 3, name, small, ...others }) =>\n  React.createElement(\n    'span',\n    {\n      ...others,\n      className: styles(\n        style.icon,\n        headline ? style[`headline-${level}`] : action ? style.action : small ? style.small : style.paragraph,\n        others.className,\n      ),\n    },\n    ICONS[name] ? React.createElement(ICONS[name]) : undefined,\n  );\n\nIcon.displayName = 'Primitive:Icon';\n\nIcon.propTypes = {\n  action: PropTypes.bool,\n  headline: PropTypes.bool,\n  level: PropTypes.number,\n  name: PropTypes.oneOf(Object.keys(ICONS)).isRequired,\n  small: PropTypes.bool,\n};\n\nexport { Icon };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO;EAAA,IAAGC,MAAH,QAAGA,MAAH;EAAA,IAAWC,QAAX,QAAWA,QAAX;EAAA,sBAAqBC,KAArB;EAAA,IAAqBA,KAArB,2BAA6B,CAA7B;EAAA,IAAgCC,IAAhC,QAAgCA,IAAhC;EAAA,IAAsCC,KAAtC,QAAsCA,KAAtC;EAAA,IAAgDC,MAAhD;;EAAA,oBACXC,eAAMC,aAAN,CACE,MADF,kCAGOF,MAHP;IAIIG,SAAS,EAAE,qBACTC,oBAAMC,IADG,EAETT,QAAQ,GAAGQ,uCAAkBP,KAAlB,EAAH,GAAgCF,MAAM,GAAGS,oBAAMT,MAAT,GAAkBI,KAAK,GAAGK,oBAAML,KAAT,GAAiBK,oBAAME,SAFnF,EAGTN,MAAM,CAACG,SAHE;EAJf,IAUEI,YAAMT,IAAN,iBAAcG,eAAMC,aAAN,CAAoBK,YAAMT,IAAN,CAApB,CAAd,GAAiDU,SAVnD,CADW;AAAA,CAAb;;;AAcAd,IAAI,CAACe,WAAL,GAAmB,gBAAnB;AAEAf,IAAI,CAACgB,SAAL,GAAiB;EACff,MAAM,EAAEgB,mBAAUC,IADH;EAEfhB,QAAQ,EAAEe,mBAAUC,IAFL;EAGff,KAAK,EAAEc,mBAAUE,MAHF;EAIff,IAAI,EAAEa,mBAAUG,KAAV,CAAgBC,MAAM,CAACC,IAAP,CAAYT,WAAZ,CAAhB,EAAoCU,UAJ3B;EAKflB,KAAK,EAAEY,mBAAUC;AALF,CAAjB"}

package/build/primitives/Icon/Icon.module.css

@@ -1,11 +1,52 @@
-:root {
-  --mirai-ui-icon: var(--mirai-ui-font-size-subheadline);
-}
-
 .icon {
   display: block;
-  line-height: var(--mirai-ui-icon);
-  height: var(--mirai-ui-icon);
-  width: var(--mirai-ui-icon);
-  font-size: var(--mirai-ui-icon);
+}
+
+.headline-1 {
+  font-size: var(--mirai-ui-font-size-headline-1);
+  height: var(--mirai-ui-font-size-headline-1);
+  line-height: var(--mirai-ui-font-size-headline-1);
+  width: var(--mirai-ui-font-size-headline-1);
+}
+
+.headline-2 {
+  font-size: var(--mirai-ui-font-size-headline-2);
+  height: var(--mirai-ui-font-size-headline-2);
+  line-height: var(--mirai-ui-font-size-headline-2);
+  width: var(--mirai-ui-font-size-headline-2);
+}
+
+.headline-3 {
+  font-size: var(--mirai-ui-font-size-headline-3);
+  height: var(--mirai-ui-font-size-headline-3);
+  line-height: var(--mirai-ui-font-size-headline-3);
+  width: var(--mirai-ui-font-size-headline-3);
+}
+
+.headline-4 {
+  font-size: var(--mirai-ui-font-size-headline-4);
+  height: var(--mirai-ui-font-size-headline-4);
+  line-height: var(--mirai-ui-font-size-headline-4);
+  width: var(--mirai-ui-font-size-headline-4);
+}
+
+.paragraph {
+  font-size: var(--mirai-ui-font-size-paragraph);
+  height: var(--mirai-ui-font-size-paragraph);
+  line-height: var(--mirai-ui-font-size-paragraph);
+  width: var(--mirai-ui-font-size-paragraph);
+}
+
+.action {
+  font-size: var(--mirai-ui-font-size-action);
+  height: var(--mirai-ui-font-size-action);
+  line-height: var(--mirai-ui-font-size-action);
+  width: var(--mirai-ui-font-size-action);
+}
+
+.small {
+  font-size: var(--mirai-ui-font-size-small);
+  height: var(--mirai-ui-font-size-small);
+  line-height: var(--mirai-ui-font-size-small);
+  width: var(--mirai-ui-font-size-small);
 }

package/build/primitives/Icon/Icon.stories.js

@@ -27,7 +27,11 @@ var Story = function Story(props) {
 exports.Story = Story;
 Story.storyName = 'Icon';
 Story.args = {
-  name: 'EyeOpen'
+  action: false,
+  headline: false,
+  level: 3,
+  name: 'EyeOpen',
+  small: false
 };
 Story.argTypes = {
   name: {

package/build/primitives/Icon/Icon.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.js","names":["title","Story","props","storyName","args","name","argTypes","options","Object","keys","ICONS","control","type","defaultValue"],"sources":["../../../src/primitives/Icon/Icon.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Icon, ICONS } from './';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => <Icon {...props} />;\n\nStory.storyName = 'Icon';\n\nStory.args = {\n  name: 'EyeOpen',\n};\n\nStory.argTypes = {\n  name: {\n    options: Object.keys(ICONS),\n    control: { type: 'select' },\n    defaultValue: 'EyeOpen',\n  },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBAAW,oBAAC,MAAD,EAAUA,KAAV,CAAX;AAAA,CAAd;;;AAEPD,KAAK,CAACE,SAAN,GAAkB,MAAlB;AAEAF,KAAK,CAACG,IAAN,GAAa;EACXC,IAAI,EAAE;AADK,CAAb;AAIAJ,KAAK,CAACK,QAAN,GAAiB;EACfD,IAAI,EAAE;IACJE,OAAO,EAAEC,MAAM,CAACC,IAAP,CAAYC,OAAZ,CADL;IAEJC,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAR,CAFL;IAGJC,YAAY,EAAE;EAHV;AADS,CAAjB"}
+{"version":3,"file":"Icon.stories.js","names":["title","Story","props","storyName","args","action","headline","level","name","small","argTypes","options","Object","keys","ICONS","control","type","defaultValue"],"sources":["../../../src/primitives/Icon/Icon.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Icon, ICONS } from './';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => <Icon {...props} />;\n\nStory.storyName = 'Icon';\n\nStory.args = {\n  action: false,\n  headline: false,\n  level: 3,\n  name: 'EyeOpen',\n  small: false,\n};\n\nStory.argTypes = {\n  name: {\n    options: Object.keys(ICONS),\n    control: { type: 'select' },\n    defaultValue: 'EyeOpen',\n  },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBAAW,oBAAC,MAAD,EAAUA,KAAV,CAAX;AAAA,CAAd;;;AAEPD,KAAK,CAACE,SAAN,GAAkB,MAAlB;AAEAF,KAAK,CAACG,IAAN,GAAa;EACXC,MAAM,EAAE,KADG;EAEXC,QAAQ,EAAE,KAFC;EAGXC,KAAK,EAAE,CAHI;EAIXC,IAAI,EAAE,SAJK;EAKXC,KAAK,EAAE;AALI,CAAb;AAQAR,KAAK,CAACS,QAAN,GAAiB;EACfF,IAAI,EAAE;IACJG,OAAO,EAAEC,MAAM,CAACC,IAAP,CAAYC,OAAZ,CADL;IAEJC,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAR,CAFL;IAGJC,YAAY,EAAE;EAHV;AADS,CAAjB"}

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

@@ -3,7 +3,7 @@
 exports[`primitive:<Icon> inherit:className 1`] = `
 <DocumentFragment>
   <span
-    class="icon mirai"
+    class="icon paragraph mirai"
   >
     <svg
       fill="none"
@@ -33,7 +33,7 @@ exports[`primitive:<Icon> inherit:className 1`] = `
 exports[`primitive:<Icon> prop:name (invalid) 1`] = `
 <DocumentFragment>
   <span
-    class="icon"
+    class="icon paragraph"
   />
 </DocumentFragment>
 `;
@@ -41,7 +41,7 @@ exports[`primitive:<Icon> prop:name (invalid) 1`] = `
 exports[`primitive:<Icon> prop:name 1`] = `
 <DocumentFragment>
   <span
-    class="icon"
+    class="icon paragraph"
   >
     <svg
       fill="none"
@@ -74,7 +74,7 @@ exports[`primitive:<Icon> prop:name 1`] = `
 exports[`primitive:<Icon> renders 1`] = `
 <DocumentFragment>
   <span
-    class="icon"
+    class="icon paragraph"
   >
     <svg
       fill="none"
@@ -104,7 +104,7 @@ exports[`primitive:<Icon> renders 1`] = `
 exports[`primitive:<Icon> testID 1`] = `
 <DocumentFragment>
   <span
-    class="icon"
+    class="icon paragraph"
     data-testid="mirai"
   >
     <svg

package/build/primitives/Input/Input.module.css

@@ -1,9 +1,3 @@
-:root {
-  --mirai-ui-input-background: var(--mirai-ui-base);
-  --mirai-ui-input-color: var(--mirai-ui-content);
-  --mirai-ui-input-disabled: var(--mirai-ui-content-light);
-}
-
 .input {
   background-color: var(--mirai-ui-input-background);
   border: none;