@mirai/ui 1.0.18 → 1.0.21

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

@@ -0,0 +1,351 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component:<Notification> inherit:className 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification mirai"
+  >
+    <span
+      class="icon icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0z"
+          fill="none"
+        />
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+        />
+      </svg>
+    </span>
+    <div
+      class="view text"
+    >
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> prop:error 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification error"
+  >
+    <span
+      class="icon icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0z"
+          fill="none"
+        />
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+        />
+      </svg>
+    </span>
+    <div
+      class="view text error"
+    >
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> prop:onClose 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification"
+  >
+    <span
+      class="icon icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0z"
+          fill="none"
+        />
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+        />
+      </svg>
+    </span>
+    <div
+      class="view text"
+    >
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+    <button
+      class="pressable pressable"
+    >
+      <span
+        class="icon icon"
+      >
+        <svg
+          fill="none"
+          height="1em"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <line
+            x1="18"
+            x2="6"
+            y1="6"
+            y2="18"
+          />
+          <line
+            x1="6"
+            x2="18"
+            y1="6"
+            y2="18"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> prop:success 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification success"
+  >
+    <span
+      class="icon icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0z"
+          fill="none"
+        />
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+        />
+      </svg>
+    </span>
+    <div
+      class="view text success"
+    >
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> prop:title 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification"
+  >
+    <span
+      class="icon icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0z"
+          fill="none"
+        />
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+        />
+      </svg>
+    </span>
+    <div
+      class="view text"
+    >
+      <span
+        class="text bold action"
+      >
+        Title
+      </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> prop:warning 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification warning"
+  >
+    <span
+      class="icon icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0z"
+          fill="none"
+        />
+        <path
+          d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
+        />
+      </svg>
+    </span>
+    <div
+      class="view text warning"
+    >
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> renders 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification"
+  >
+    <span
+      class="icon icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0z"
+          fill="none"
+        />
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+        />
+      </svg>
+    </span>
+    <div
+      class="view text"
+    >
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> testID 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification"
+    data-testid="mirai"
+  >
+    <span
+      class="icon icon"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0z"
+          fill="none"
+        />
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+        />
+      </svg>
+    </span>
+    <div
+      class="view text"
+    >
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/build/components/Notification/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Notification = require("./Notification");
+
+Object.keys(_Notification).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Notification[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Notification[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/build/components/Notification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Notification/index.js"],"sourcesContent":["export * from './Notification';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/components/Table/Table.module.css

@@ -1,12 +1,12 @@
 :root {
   --mirai-ui-table-base: var(--mirai-ui-base);
-  --mirai-ui-table-border-color: var(--mirai-ui-content-300);
+  --mirai-ui-table-border-color: var(--mirai-ui-content-border);
   --mirai-ui-table-content: var(--mirai-ui-content);
-  --mirai-ui-table-hover-background: var(--mirai-ui-accent-300);
-  --mirai-ui-table-head-color: var(--mirai-ui-content-400);
+  --mirai-ui-table-hover-background: var(--mirai-ui-accent-background);
+  --mirai-ui-table-head-color: var(--mirai-ui-content-light);
   --mirai-ui-table-padding-x: var(--mirai-ui-space-M);
   --mirai-ui-table-padding-y: var(--mirai-ui-space-M);
-  --mirai-ui-table-selected-background: var(--mirai-ui-accent-200);
+  --mirai-ui-table-selected-background: var(--mirai-ui-accent-background);
   --mirai-ui-table-selected-color: var(--mirai-ui-accent);
 }
 

package/build/components/index.js

@@ -121,6 +121,19 @@ Object.keys(_Modal).forEach(function (key) {
   });
 });
 
+var _Notification = require("./Notification");
+
+Object.keys(_Notification).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Notification[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Notification[key];
+    }
+  });
+});
+
 var _Table = require("./Table");
 
 Object.keys(_Table).forEach(function (key) {

package/build/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/components/index.js"],"sourcesContent":["export * from './Button';\nexport * from './Calendar';\nexport * from './Form';\nexport * from './InputNumber';\nexport * from './InputOption';\nexport * from './InputSelect';\nexport * from './InputText';\nexport * from './Menu';\nexport * from './Modal';\nexport * from './Table';\nexport * from './Tooltip';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/components/index.js"],"sourcesContent":["export * from './Button';\nexport * from './Calendar';\nexport * from './Form';\nexport * from './InputNumber';\nexport * from './InputOption';\nexport * from './InputSelect';\nexport * from './InputText';\nexport * from './Menu';\nexport * from './Modal';\nexport * from './Notification';\nexport * from './Table';\nexport * from './Tooltip';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

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

@@ -1,9 +1,9 @@
 :root {
   --mirai-ui-checkbox-base: var(--mirai-ui-base);
-  --mirai-ui-checkbox-border-color: var(--mirai-ui-content-400);
+  --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-300);
+  --mirai-ui-checkbox-disabled: var(--mirai-ui-content-border);
   --mirai-ui-checkbox-size: var(--mirai-ui-space-L);
 }
 

package/build/primitives/Icon/Icon.constants.js

@@ -7,6 +7,8 @@ exports.ICONS = void 0;
 
 var _fi = require("react-icons/fi");
 
+var _md = require("react-icons/md");
+
 var ICONS = {
   Empty: undefined,
   // directions
@@ -24,7 +26,12 @@ var ICONS = {
   EyeOpen: _fi.FiEye,
   EyeClose: _fi.FiEyeOff,
   // Check
-  Check: _fi.FiCheck
+  Check: _fi.FiCheck,
+  // Notification,
+  Error: _md.MdError,
+  Info: _md.MdInfo,
+  Success: _md.MdCheckCircle,
+  Warning: _md.MdWarning
 };
 exports.ICONS = ICONS;
 //# sourceMappingURL=Icon.constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.constants.js","names":["ICONS","Empty","undefined","Left","Right","Up","Down","Close","CloseArrow","Plus","Minus","EyeOpen","EyeClose","Check"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import {\n  FiArrowUp as Up,\n  FiArrowDown as Down,\n  FiArrowLeft as Left,\n  FiArrowRight as Right,\n  FiChevronDown as CloseArrow,\n  FiX as Close,\n  FiEye as EyeOpen,\n  FiEyeOff as EyeClose,\n  FiPlus as Plus,\n  FiMinus as Minus,\n  FiCheck as Check,\n} from 'react-icons/fi';\n\nconst ICONS = {\n  Empty: undefined,\n  // directions\n  Left,\n  Right,\n  Up,\n  Down,\n  // Close\n  Close,\n  CloseArrow,\n  // Calc\n  Plus,\n  Minus,\n  // Eye\n  EyeOpen,\n  EyeClose,\n  // Check\n  Check,\n};\n\nexport { ICONS };\n"],"mappings":";;;;;;;AAAA;;AAcA,IAAMA,KAAK,GAAG;EACZC,KAAK,EAAEC,SADK;EAEZ;EACAC,IAAI,EAAJA,eAHY;EAIZC,KAAK,EAALA,gBAJY;EAKZC,EAAE,EAAFA,aALY;EAMZC,IAAI,EAAJA,eANY;EAOZ;EACAC,KAAK,EAALA,OARY;EASZC,UAAU,EAAVA,iBATY;EAUZ;EACAC,IAAI,EAAJA,UAXY;EAYZC,KAAK,EAALA,WAZY;EAaZ;EACAC,OAAO,EAAPA,SAdY;EAeZC,QAAQ,EAARA,YAfY;EAgBZ;EACAC,KAAK,EAALA;AAjBY,CAAd"}
+{"version":3,"file":"Icon.constants.js","names":["ICONS","Empty","undefined","Left","Right","Up","Down","Close","CloseArrow","Plus","Minus","EyeOpen","EyeClose","Check","Error","Info","Success","Warning"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import {\n  // directions\n  FiArrowUp as Up,\n  FiArrowDown as Down,\n  FiArrowLeft as Left,\n  FiArrowRight as Right,\n  // Close\n  FiChevronDown as CloseArrow,\n  FiX as Close,\n  // Calc\n  FiMinus as Minus,\n  FiPlus as Plus,\n  // Eye\n  FiEye as EyeOpen,\n  FiEyeOff as EyeClose,\n  // Check\n  FiCheck as Check,\n} from 'react-icons/fi';\nimport {\n  // Notification\n  MdError as Error,\n  MdInfo as Info,\n  MdCheckCircle as Success,\n  MdWarning as Warning,\n} from 'react-icons/md';\n\nconst ICONS = {\n  Empty: undefined,\n  // directions\n  Left,\n  Right,\n  Up,\n  Down,\n  // Close\n  Close,\n  CloseArrow,\n  // Calc\n  Plus,\n  Minus,\n  // Eye\n  EyeOpen,\n  EyeClose,\n  // Check\n  Check,\n  // Notification,\n  Error,\n  Info,\n  Success,\n  Warning,\n};\n\nexport { ICONS };\n"],"mappings":";;;;;;;AAAA;;AAkBA;;AAQA,IAAMA,KAAK,GAAG;EACZC,KAAK,EAAEC,SADK;EAEZ;EACAC,IAAI,EAAJA,eAHY;EAIZC,KAAK,EAALA,gBAJY;EAKZC,EAAE,EAAFA,aALY;EAMZC,IAAI,EAAJA,eANY;EAOZ;EACAC,KAAK,EAALA,OARY;EASZC,UAAU,EAAVA,iBATY;EAUZ;EACAC,IAAI,EAAJA,UAXY;EAYZC,KAAK,EAALA,WAZY;EAaZ;EACAC,OAAO,EAAPA,SAdY;EAeZC,QAAQ,EAARA,YAfY;EAgBZ;EACAC,KAAK,EAALA,WAjBY;EAkBZ;EACAC,KAAK,EAALA,WAnBY;EAoBZC,IAAI,EAAJA,UApBY;EAqBZC,OAAO,EAAPA,iBArBY;EAsBZC,OAAO,EAAPA;AAtBY,CAAd"}

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

@@ -1,7 +1,7 @@
 :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-400);
+  --mirai-ui-input-disabled: var(--mirai-ui-content-light);
 }
 
 .input {

package/build/primitives/Radio/Radio.module.css

@@ -1,8 +1,8 @@
 :root {
   --mirai-ui-radio-base: var(--mirai-ui-base);
-  --mirai-ui-radio-border: var(--mirai-ui-content-400);
+  --mirai-ui-radio-border: var(--mirai-ui-content-light);
   --mirai-ui-radio-checked: var(--mirai-ui-accent);
-  --mirai-ui-radio-disabled: var(--mirai-ui-content-300);
+  --mirai-ui-radio-disabled: var(--mirai-ui-content-border);
   --mirai-ui-radio-size: var(--mirai-ui-space-L);
 }
 

package/build/primitives/Switch/Switch.module.css

@@ -1,10 +1,10 @@
 :root {
   --mirai-ui-switch-base: var(--mirai-ui-base);
-  --mirai-ui-switch-border-color: var(--mirai-ui-content-400);
+  --mirai-ui-switch-border-color: var(--mirai-ui-content-light);
   --mirai-ui-switch-border-size: calc(var(--mirai-ui-space-XS) / 4);
   --mirai-ui-switch-border-radius: var(--mirai-ui-space-L);
   --mirai-ui-switch-checked: var(--mirai-ui-accent);
-  --mirai-ui-switch-disabled: var(--mirai-ui-content-300);
+  --mirai-ui-switch-disabled: var(--mirai-ui-content-border);
   --mirai-ui-switch-size: var(--mirai-ui-space-L);
 }
 

package/build/primitives/Text/Text.js

@@ -13,7 +13,7 @@ var _helpers = require("../../helpers");
 
 var _TextModule = _interopRequireDefault(require("./Text.module.css"));
 
-var _excluded = ["action", "bold", "children", "headline", "small", "tag", "upperCase"];
+var _excluded = ["action", "bold", "children", "headline", "small", "subheadline", "tag", "upperCase"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -33,13 +33,14 @@ var Text = function Text(_ref) {
       children = _ref.children,
       headline = _ref.headline,
       small = _ref.small,
+      subheadline = _ref.subheadline,
       _ref$tag = _ref.tag,
       tag = _ref$tag === void 0 ? 'span' : _ref$tag,
       upperCase = _ref.upperCase,
       others = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(tag, _objectSpread(_objectSpread({}, others), {}, {
-    className: (0, _helpers.styles)(_TextModule.default.text, bold && _TextModule.default.bold, headline ? _TextModule.default.headline : action ? _TextModule.default.action : small ? _TextModule.default.small : _TextModule.default.paragraph, upperCase && _TextModule.default.upperCase, others.className)
+    className: (0, _helpers.styles)(_TextModule.default.text, bold && _TextModule.default.bold, headline ? _TextModule.default.headline : subheadline ? _TextModule.default.subheadline : action ? _TextModule.default.action : small ? _TextModule.default.small : _TextModule.default.paragraph, upperCase && _TextModule.default.upperCase, others.className)
   }), children);
 };
 
@@ -50,8 +51,9 @@ Text.propTypes = {
   bold: _propTypes.default.bool,
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
   headline: _propTypes.default.bool,
-  upperCase: _propTypes.default.bool,
   small: _propTypes.default.bool,
-  tag: _propTypes.default.string
+  subheadline: _propTypes.default.bool,
+  tag: _propTypes.default.string,
+  upperCase: _propTypes.default.bool
 };
 //# sourceMappingURL=Text.js.map

package/build/primitives/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["Text","action","bold","children","headline","small","tag","upperCase","others","React","createElement","className","style","text","paragraph","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './Text.module.css';\n\nconst Text = ({ action, bold, children, headline, small, tag = 'span', upperCase, ...others }) =>\n  React.createElement(\n    tag,\n    {\n      ...others,\n      className: styles(\n        style.text,\n        bold && style.bold,\n        headline ? style.headline : action ? style.action : small ? style.small : style.paragraph,\n        upperCase && style.upperCase,\n        others.className,\n      ),\n    },\n    children,\n  );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n  action: PropTypes.bool,\n  bold: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n  headline: PropTypes.bool,\n  upperCase: PropTypes.bool,\n  small: PropTypes.bool,\n  tag: PropTypes.string,\n};\n\nexport { Text };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO;EAAA,IAAGC,MAAH,QAAGA,MAAH;EAAA,IAAWC,IAAX,QAAWA,IAAX;EAAA,IAAiBC,QAAjB,QAAiBA,QAAjB;EAAA,IAA2BC,QAA3B,QAA2BA,QAA3B;EAAA,IAAqCC,KAArC,QAAqCA,KAArC;EAAA,oBAA4CC,GAA5C;EAAA,IAA4CA,GAA5C,yBAAkD,MAAlD;EAAA,IAA0DC,SAA1D,QAA0DA,SAA1D;EAAA,IAAwEC,MAAxE;;EAAA,oBACXC,eAAMC,aAAN,CACEJ,GADF,kCAGOE,MAHP;IAIIG,SAAS,EAAE,qBACTC,oBAAMC,IADG,EAETX,IAAI,IAAIU,oBAAMV,IAFL,EAGTE,QAAQ,GAAGQ,oBAAMR,QAAT,GAAoBH,MAAM,GAAGW,oBAAMX,MAAT,GAAkBI,KAAK,GAAGO,oBAAMP,KAAT,GAAiBO,oBAAME,SAHvE,EAITP,SAAS,IAAIK,oBAAML,SAJV,EAKTC,MAAM,CAACG,SALE;EAJf,IAYER,QAZF,CADW;AAAA,CAAb;;;AAgBAH,IAAI,CAACe,WAAL,GAAmB,gBAAnB;AAEAf,IAAI,CAACgB,SAAL,GAAiB;EACff,MAAM,EAAEgB,mBAAUC,IADH;EAEfhB,IAAI,EAAEe,mBAAUC,IAFD;EAGff,QAAQ,EAAEc,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,MAA7B,EAAqCJ,mBAAUK,KAA/C,CAApB,CAHK;EAIflB,QAAQ,EAAEa,mBAAUC,IAJL;EAKfX,SAAS,EAAEU,mBAAUC,IALN;EAMfb,KAAK,EAAEY,mBAAUC,IANF;EAOfZ,GAAG,EAAEW,mBAAUG;AAPA,CAAjB"}
+{"version":3,"file":"Text.js","names":["Text","action","bold","children","headline","small","subheadline","tag","upperCase","others","React","createElement","className","style","text","paragraph","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './Text.module.css';\n\nconst Text = ({ action, bold, children, headline, small, subheadline, tag = 'span', upperCase, ...others }) =>\n  React.createElement(\n    tag,\n    {\n      ...others,\n      className: styles(\n        style.text,\n        bold && style.bold,\n        headline\n          ? style.headline\n          : subheadline\n          ? style.subheadline\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : style.paragraph,\n        upperCase && style.upperCase,\n        others.className,\n      ),\n    },\n    children,\n  );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n  action: PropTypes.bool,\n  bold: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n  headline: PropTypes.bool,\n  small: PropTypes.bool,\n  subheadline: PropTypes.bool,\n  tag: PropTypes.string,\n  upperCase: PropTypes.bool,\n};\n\nexport { Text };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO;EAAA,IAAGC,MAAH,QAAGA,MAAH;EAAA,IAAWC,IAAX,QAAWA,IAAX;EAAA,IAAiBC,QAAjB,QAAiBA,QAAjB;EAAA,IAA2BC,QAA3B,QAA2BA,QAA3B;EAAA,IAAqCC,KAArC,QAAqCA,KAArC;EAAA,IAA4CC,WAA5C,QAA4CA,WAA5C;EAAA,oBAAyDC,GAAzD;EAAA,IAAyDA,GAAzD,yBAA+D,MAA/D;EAAA,IAAuEC,SAAvE,QAAuEA,SAAvE;EAAA,IAAqFC,MAArF;;EAAA,oBACXC,eAAMC,aAAN,CACEJ,GADF,kCAGOE,MAHP;IAIIG,SAAS,EAAE,qBACTC,oBAAMC,IADG,EAETZ,IAAI,IAAIW,oBAAMX,IAFL,EAGTE,QAAQ,GACJS,oBAAMT,QADF,GAEJE,WAAW,GACXO,oBAAMP,WADK,GAEXL,MAAM,GACNY,oBAAMZ,MADA,GAENI,KAAK,GACLQ,oBAAMR,KADD,GAELQ,oBAAME,SAXD,EAYTP,SAAS,IAAIK,oBAAML,SAZV,EAaTC,MAAM,CAACG,SAbE;EAJf,IAoBET,QApBF,CADW;AAAA,CAAb;;;AAwBAH,IAAI,CAACgB,WAAL,GAAmB,gBAAnB;AAEAhB,IAAI,CAACiB,SAAL,GAAiB;EACfhB,MAAM,EAAEiB,mBAAUC,IADH;EAEfjB,IAAI,EAAEgB,mBAAUC,IAFD;EAGfhB,QAAQ,EAAEe,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,MAA7B,EAAqCJ,mBAAUK,KAA/C,CAApB,CAHK;EAIfnB,QAAQ,EAAEc,mBAAUC,IAJL;EAKfd,KAAK,EAAEa,mBAAUC,IALF;EAMfb,WAAW,EAAEY,mBAAUC,IANR;EAOfZ,GAAG,EAAEW,mBAAUG,MAPA;EAQfb,SAAS,EAAEU,mBAAUC;AARN,CAAjB"}

package/build/primitives/Text/Text.module.css

@@ -14,10 +14,17 @@
 
 .headline {
   font-size: var(--mirai-ui-font-size-headline);
+  line-height: var(--mirai-ui-line-height);
+}
+
+.subheadline {
+  font-size: var(--mirai-ui-font-size-subheadline);
+  line-height: var(--mirai-ui-line-height);
 }
 
 .paragraph {
   font-size: var(--mirai-ui-font-size-paragraph);
+  line-height: var(--mirai-ui-line-height);
 }
 
 .action {
@@ -26,6 +33,7 @@
 
 .small {
   font-size: var(--mirai-ui-font-size-small);
+  line-height: calc(var(--mirai-ui-font-size-small) * 1.5);
 }
 
 .upperCase {

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

@@ -60,6 +60,16 @@ exports[`primitive:<Text> prop:small 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<Text> prop:subheadline 1`] = `
+<DocumentFragment>
+  <span
+    class="text subheadline"
+  >
+    Lorem Ipsum
+  </span>
+</DocumentFragment>
+`;
+
 exports[`primitive:<Text> prop:upperCase 1`] = `
 <DocumentFragment>
   <span

package/build/theme/default.theme.css

@@ -1,37 +1,61 @@
 :root {
   /* typography */
-  --mirai-ui-font: Helvetica;
-  --mirai-ui-input-font: Helvetica;
+  --mirai-ui-font: Arial, Regular;
+  --mirai-ui-input-font: Arial, Regular;
   --mirai-ui-font-weight: 400;
-  --mirai-ui-font-bold: Helvetica;
+  --mirai-ui-font-bold: Arial, Regular;
   --mirai-ui-font-bold-weight: 700;
-  --mirai-ui-font-size-headline: 24px;
-  --mirai-ui-font-size-paragraph: 16px;
-  --mirai-ui-font-size-action: 15px;
-  --mirai-ui-font-size-small: 11px;
-  --mirai-ui-input-font-size: 16px;
+  --mirai-ui-font-size-headline: 18px;
+  --mirai-ui-font-size-subheadline: 16px;
+  --mirai-ui-font-size-paragraph: 14px;
+  --mirai-ui-font-size-action: 14px;
+  --mirai-ui-font-size-small: 12px;
+  --mirai-ui-input-font-size: 14px;
+  --mirai-ui-line-height: 24px;
   --mirai-ui-text-direction: ltr;
   --mirai-ui-text-align: left;
 
   /* palette */
   --mirai-ui-base: #ffffff;
   /* !TODO: Change to -text ------------------------------------------------- */
-  --mirai-ui-content: #202020;
-  --mirai-ui-content-400: #5f6368;
-  --mirai-ui-content-300: #d3d3d3;
+  --mirai-ui-content: #484848;
+  --mirai-ui-content-background: #f6f6f6;
+  --mirai-ui-content-border: #e4e4e4;
+  --mirai-ui-content-dark: #202020;
+  --mirai-ui-content-light: #999999;
   /* !TODO ------------------------------------------------------------------ */
 
   --mirai-ui-accent: #3978c5;
-  --mirai-ui-error: #e04646;
-  --mirai-ui-success: #5fb560;
+  --mirai-ui-accent-background: #e9f1fc;
+  --mirai-ui-accent-border: #b0c9e8;
+  --mirai-ui-accent-dark: #224876;
+  --mirai-ui-accent-light: #88aedc;
+
+  --mirai-ui-error: #d14343;
+  --mirai-ui-error-background: #fdf4f4;
+  --mirai-ui-error-border: #f4b6b6;
+  --mirai-ui-error-dark: #7d2828;
+  --mirai-ui-error-light: #ee9191;
+
+  --mirai-ui-success: #52bd94;
+  --mirai-ui-success-background: #f5fbf8;
+  --mirai-ui-success-border: #dcf2ea;
+  --mirai-ui-success-dark: #317159;
+  --mirai-ui-success-light: #a3e6cd;
+
+  --mirai-ui-warning: #ffb020;
+  --mirai-ui-warning-background: #fffaf1;
+  --mirai-ui-warning-border: #ffdfa6;
+  --mirai-ui-warning-dark: #66460d;
+  --mirai-ui-warning-light: #ffd079;
 
   /* spacing */
   --mirai-ui-space-XS: 8px;
   --mirai-ui-space-S: 12px;
   --mirai-ui-space-M: 16px;
   --mirai-ui-space-L: 24px;
-  --mirai-ui-space-XL: 32px;
-  --mirai-ui-space-XXL: 56px;
+  --mirai-ui-space-XL: 48px;
+  --mirai-ui-space-XXL: 64px;
 
   /* layer */
   --mirai-ui-layer-S: 0;