@mirai/ui 1.0.0

package/build/components/InputText/InputText.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputText = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _primitives = require("../../primitives");
+
+var _InputTextModule = _interopRequireDefault(require("./InputText.module.css"));
+
+var _excluded = ["disabled", "error", "hint", "label", "type", "onChange", "onEnter", "onLeave"];
+
+var InputText = function InputText(_ref) {
+  var _others$value;
+
+  var disabled = _ref.disabled,
+      error = _ref.error,
+      hint = _ref.hint,
+      label = _ref.label,
+      type = _ref.type,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      _ref$onEnter = _ref.onEnter,
+      onEnter = _ref$onEnter === void 0 ? function () {} : _ref$onEnter,
+      _ref$onLeave = _ref.onLeave,
+      onLeave = _ref$onLeave === void 0 ? function () {} : _ref$onLeave,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      focus = _useState2[0],
+      setFocus = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      password = _useState4[0],
+      setPassword = _useState4[1];
+
+  var handleChange = function handleChange(value, event) {
+    onChange(value, event);
+  };
+
+  var handleEnter = function handleEnter(event) {
+    setFocus(true);
+    onEnter(event);
+  };
+
+  var handleLeave = function handleLeave() {
+    setFocus(false);
+    onLeave(event);
+  };
+
+  var has = {
+    value: others.value !== undefined && ((_others$value = others.value) === null || _others$value === void 0 ? void 0 : _others$value.length) > 0
+  };
+  var is = {
+    password: type === 'password'
+  };
+  return /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    className: (0, _helpers.styles)(_InputTextModule.default.inputText, others.className)
+  }, label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.label, focus && _InputTextModule.default.focus, error && _InputTextModule.default.error, (focus || error || has.value) && _InputTextModule.default.value)
+  }, label), /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    className: (0, _helpers.styles)(_InputTextModule.default.content)
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Input, Object.assign({}, others, {
+    disabled: disabled,
+    type: !is.password || password ? type : 'text',
+    value: others.value || '',
+    className: (0, _helpers.styles)(_InputTextModule.default.input, error && _InputTextModule.default.error),
+    onChange: handleChange,
+    onEnter: handleEnter,
+    onLeave: handleLeave
+  })), is.password && !disabled && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    className: _InputTextModule.default.pressable,
+    onPress: function onPress() {
+      return setPassword(!password);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    name: password ? 'EyeClose' : 'EyeOpen'
+  }))), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    small: true,
+    className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.hint, error && _InputTextModule.default.error)
+  }, hint));
+};
+
+exports.InputText = InputText;
+//# sourceMappingURL=InputText.js.map

package/build/components/InputText/InputText.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/InputText/InputText.jsx"],"names":["InputText","disabled","error","hint","label","type","onChange","onEnter","onLeave","others","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","has","undefined","length","is","style","inputText","className","text","content","input","pressable"],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Input, Pressable, Text, View } from '../../primitives';\nimport style from './InputText.module.css';\n\nconst InputText = ({\n  disabled,\n  error,\n  hint,\n  label,\n  type,\n  onChange = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n  const [password, setPassword] = useState(true);\n\n  const handleChange = (value, event) => {\n    onChange(value, event);\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = () => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const has = {\n    value: others.value !== undefined && others.value?.length > 0,\n  };\n  const is = { password: type === 'password' };\n\n  return (\n    <View className={styles(style.inputText, others.className)}>\n      {label && (\n        <Text\n          className={styles(\n            style.text,\n            style.label,\n            focus && style.focus,\n            error && style.error,\n            (focus || error || has.value) && style.value,\n          )}\n        >\n          {label}\n        </Text>\n      )}\n\n      <View className={styles(style.content)}>\n        <Input\n          {...others}\n          disabled={disabled}\n          type={!is.password || password ? type : 'text'}\n          value={others.value || ''}\n          className={styles(style.input, error && style.error)}\n          onChange={handleChange}\n          onEnter={handleEnter}\n          onLeave={handleLeave}\n        />\n        {is.password && !disabled && (\n          <Pressable className={style.pressable} onPress={() => setPassword(!password)}>\n            <Icon name={password ? 'EyeClose' : 'EyeOpen'} />\n          </Pressable>\n        )}\n      </View>\n\n      {hint && (\n        <Text small className={styles(style.text, style.hint, error && style.error)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nInputText.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  label: PropTypes.string,\n  multiLine: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  type: PropTypes.string,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputText };\n"],"file":"InputText.js"}

package/build/components/InputText/InputText.module.css

@@ -0,0 +1,68 @@
+:root {
+  --mirai-ui-input-field-border: solid 1px var(--mirai-ui-lighten);
+  --mirai-ui-input-field-focus: var(--mirai-ui-accent);
+  --mirai-ui-input-field-padding-x: var(--mirai-ui-space-S);
+  --mirai-ui-input-field-padding-y: var(--mirai-ui-space-M);
+  --mirai-ui-input-field-radius: var(--mirai-ui-border-radius);
+}
+
+.inputText {
+  position: relative;
+  margin-bottom: var(--mirai-ui-input-field-padding-y);
+}
+
+.input {
+  border: var(--mirai-ui-input-field-border);
+  border-radius: var(--mirai-ui-input-field-radius);
+  padding: var(--mirai-ui-input-field-padding-y) var(--mirai-ui-input-field-padding-x);
+}
+
+.input::placeholder {
+  color: var(--mirai-ui-base);
+}
+
+.input.error {
+  border-color: var(--mirai-ui-error);
+}
+
+.input:not(.error):focus {
+  border-color: var(--mirai-ui-input-field-focus);
+}
+
+.text {
+  color: var(--mirai-ui-lighten);
+}
+
+.text.focus {
+  color: var(--mirai-ui-input-field-focus);
+}
+
+.text.error {
+  color: var(--mirai-ui-error);
+}
+
+.label {
+  background-color: var(--mirai-ui-base);
+  font-size: var(--mirai-ui-input-font-size);
+  margin: 0 calc(var(--mirai-ui-input-field-padding-x) / 2);
+  padding: 0 calc(var(--mirai-ui-input-field-padding-x) / 2);
+  pointer-events: none;
+  position: absolute;
+  top: var(--mirai-ui-input-field-padding-y);
+  transition: all var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+}
+
+.label.value {
+  font-size: var(--mirai-ui-font-size-small);
+  top: calc(calc(var(--mirai-ui-input-field-padding-y) * -1) + calc(var(--mirai-ui-input-field-padding-y) / 2));
+}
+
+.pressable {
+  position: absolute;
+  right: var(--mirai-ui-input-field-padding-x);
+  top: var(--mirai-ui-input-field-padding-y);
+}
+
+.hint {
+  margin: calc(var(--mirai-ui-input-field-padding-x) / 4) var(--mirai-ui-input-field-padding-x);
+}

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

@@ -0,0 +1,212 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component:<InputText> inherit:className 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputText mirai"
+  >
+    <div
+      class="view content"
+    >
+      <input
+        class="input input"
+        name="name"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<InputText> prop:disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputText"
+  >
+    <div
+      class="view content"
+    >
+      <input
+        class="input input"
+        disabled=""
+        name="name"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<InputText> prop:error 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputText"
+  >
+    <div
+      class="view content"
+    >
+      <input
+        class="input input error"
+        name="name"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<InputText> prop:hint 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputText"
+  >
+    <div
+      class="view content"
+    >
+      <input
+        class="input input"
+        name="name"
+        type="text"
+        value=""
+      />
+    </div>
+    <span
+      class="text small text hint"
+    >
+      hint
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<InputText> prop:label 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputText"
+  >
+    <span
+      class="text paragraph text label"
+    >
+      label
+    </span>
+    <div
+      class="view content"
+    >
+      <input
+        class="input input"
+        name="name"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<InputText> prop:multiLine 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputText"
+  >
+    <div
+      class="view content"
+    >
+      <textarea
+        class="input input"
+        name="name"
+        type="text"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<InputText> prop:type 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputText"
+  >
+    <div
+      class="view content"
+    >
+      <input
+        class="input input"
+        name="name"
+        type="password"
+        value=""
+      />
+      <button
+        class="pressable pressable"
+      >
+        <span
+          class="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"
+          >
+            <path
+              d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
+            />
+            <line
+              x1="1"
+              x2="23"
+              y1="1"
+              y2="23"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<InputText> renders 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputText"
+  >
+    <div
+      class="view content"
+    >
+      <input
+        class="input input"
+        name="name"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<InputText> testID 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputText"
+  >
+    <div
+      class="view content"
+    >
+      <input
+        class="input input"
+        data-testid="mirai"
+        name="name"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/build/components/InputText/index.js

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

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

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

package/build/components/Modal/Modal.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Modal = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _hooks = require("../../hooks");
+
+var _primitives = require("../../primitives");
+
+var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
+
+var _excluded = ["children", "visible", "onClose"];
+
+var Modal = function Modal(_ref) {
+  var children = _ref.children,
+      visible = _ref.visible,
+      onClose = _ref.onClose,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useDevice = (0, _hooks.useDevice)(),
+      isDesktop = _useDevice.isDesktop;
+
+  return /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    row: true,
+    className: (0, _helpers.styles)(_ModalModule.default.overflow, visible && _ModalModule.default.visible)
+  }, /*#__PURE__*/_react.default.createElement(_primitives.View, Object.assign({}, others, {
+    fit: true,
+    className: (0, _helpers.styles)(_ModalModule.default.modal, visible && _ModalModule.default.visible, others.className)
+  }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    className: _ModalModule.default.pressable,
+    onPress: onClose
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    name: isDesktop ? 'Close' : 'CloseArrow',
+    className: _ModalModule.default.icon
+  })), children)));
+};
+
+exports.Modal = Modal;
+Modal.displayName = 'Component:Modal';
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Modal/Modal.jsx"],"names":["Modal","children","visible","onClose","others","isDesktop","style","overflow","modal","className","pressable","icon","displayName"],"mappings":";;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAA+C;AAAA,MAA5CC,QAA4C,QAA5CA,QAA4C;AAAA,MAAlCC,OAAkC,QAAlCA,OAAkC;AAAA,MAAzBC,OAAyB,QAAzBA,OAAyB;AAAA,MAAbC,MAAa;;AAC3D,mBAAsB,uBAAtB;AAAA,MAAQC,SAAR,cAAQA,SAAR;;AAEA,sBACE,6BAAC,gBAAD;AAAM,IAAA,GAAG,MAAT;AAAU,IAAA,SAAS,EAAE,qBAAOC,qBAAMC,QAAb,EAAuBL,OAAO,IAAII,qBAAMJ,OAAxC;AAArB,kBACE,6BAAC,gBAAD,oBAAUE,MAAV;AAAkB,IAAA,GAAG,MAArB;AAAsB,IAAA,SAAS,EAAE,qBAAOE,qBAAME,KAAb,EAAoBN,OAAO,IAAII,qBAAMJ,OAArC,EAA8CE,MAAM,CAACK,SAArD;AAAjC,mBACE,4DACGN,OAAO,iBACN,6BAAC,qBAAD;AAAW,IAAA,SAAS,EAAEG,qBAAMI,SAA5B;AAAuC,IAAA,OAAO,EAAEP;AAAhD,kBACE,6BAAC,gBAAD;AAAM,IAAA,IAAI,EAAEE,SAAS,GAAG,OAAH,GAAa,YAAlC;AAAgD,IAAA,SAAS,EAAEC,qBAAMK;AAAjE,IADF,CAFJ,EAMGV,QANH,CADF,CADF,CADF;AAcD,CAjBD;;;AAmBAD,KAAK,CAACY,WAAN,GAAoB,iBAApB","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, Pressable, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({ children, visible, onClose, ...others }) => {\n  const { isDesktop } = useDevice();\n\n  return (\n    <View row className={styles(style.overflow, visible && style.visible)}>\n      <View {...others} fit className={styles(style.modal, visible && style.visible, others.className)}>\n        <>\n          {onClose && (\n            <Pressable className={style.pressable} onPress={onClose}>\n              <Icon name={isDesktop ? 'Close' : 'CloseArrow'} className={style.icon} />\n            </Pressable>\n          )}\n          {children}\n        </>\n      </View>\n    </View>\n  );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n  children: PropTypes.node,\n  visible: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Modal };\n"],"file":"Modal.js"}

package/build/components/Modal/Modal.module.css

@@ -0,0 +1,70 @@
+:root {
+  --mirai-ui-modal-background: var(--mirai-ui-base);
+  --mirai-ui-modal-overflow: rgba(0, 0, 0, 0.2);
+  --mirai-ui-modal-icon: var(--mirai-ui-space-L);
+}
+
+.modal {
+  background-color: var(--mirai-ui-modal-background);
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.9);
+  transition: all var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+}
+
+.modal.visible {
+  opacity: 1;
+  pointer-events: all;
+  transform: scale(1);
+}
+
+.overflow {
+  align-items: center;
+  background-color: var(--mirai-ui-modal-overflow);
+  height: 100vh;
+  justify-content: center;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  transition: opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+  top: 0;
+  width: 100vw;
+  z-index: 1000;
+}
+
+.overflow.visible {
+  opacity: 1;
+}
+
+.pressable {
+  align-self: flex-end;
+  padding: var(--mirai-ui-space-XS);
+}
+
+.icon {
+  font-size: var(--mirai-ui-modal-icon);
+  line-height: var(--mirai-ui-modal-icon);
+  height: var(--mirai-ui-modal-icon);
+  width: var(--mirai-ui-modal-icon);
+}
+
+@media only screen and (max-width: 600px) {
+  .overflow {
+    align-items: flex-end;
+    align-content: flex-end;
+  }
+
+  .modal {
+    opacity: 1;
+    transform: translateY(110%);
+  }
+
+  .modal.visible {
+    transform: translateY(0%);
+  }
+
+  .pressable {
+    align-self: center;
+  }
+}

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

@@ -0,0 +1,150 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component:<Modal> Mobile environment prop:onClose 1`] = `
+<DocumentFragment>
+  <div
+    class="view row overflow visible"
+  >
+    <div
+      class="view fit modal visible"
+    >
+      <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"
+          >
+            <polyline
+              points="6 9 12 15 18 9"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Modal> Mobile environment prop:visible 1`] = `
+<DocumentFragment>
+  <div
+    class="view row overflow visible"
+  >
+    <div
+      class="view fit modal visible"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Modal> inherit:className 1`] = `
+<DocumentFragment>
+  <div
+    class="view row overflow"
+  >
+    <div
+      class="view fit modal mirai"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Modal> prop:children 1`] = `
+<DocumentFragment>
+  <div
+    class="view row overflow"
+  >
+    <div
+      class="view fit modal"
+    >
+      <span>
+        children
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Modal> prop:onClose 1`] = `
+<DocumentFragment>
+  <div
+    class="view row overflow visible"
+  >
+    <div
+      class="view fit modal visible"
+    >
+      <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"
+          >
+            <polyline
+              points="6 9 12 15 18 9"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Modal> prop:visible 1`] = `
+<DocumentFragment>
+  <div
+    class="view row overflow visible"
+  >
+    <div
+      class="view fit modal visible"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Modal> renders 1`] = `
+<DocumentFragment>
+  <div
+    class="view row overflow"
+  >
+    <div
+      class="view fit modal"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Modal> testID 1`] = `
+<DocumentFragment>
+  <div
+    class="view row overflow"
+  >
+    <div
+      class="view fit modal"
+      data-testid="mirai"
+    />
+  </div>
+</DocumentFragment>
+`;