@mirai/core 0.4.243 → 0.4.245

package/build/components/Chat/components/{InputRich → Header}/index.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _InputRich = require("./InputRich");
-Object.keys(_InputRich).forEach(function (key) {
+var _Header = require("./Header");
+Object.keys(_Header).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _InputRich[key]) return;
+  if (key in exports && exports[key] === _Header[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _InputRich[key];
+      return _Header[key];
     }
   });
 });

package/build/components/Chat/components/Header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Header","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../../../src/components/Chat/components/Header/index.js"],"sourcesContent":["export * from './Header';\n"],"mappings":";;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,OAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,OAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,OAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}

package/build/components/Chat/components/Input/Input.Context.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Context = void 0;
+var _locale = require("@mirai/locale");
+var _ui = require("@mirai/ui");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var style = _interopRequireWildcard(require("./Input.module.css"));
+var _helpers = require("../../../helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const ICON_PROPS = {
+  className: style.icon
+};
+const TEXT_PROPS = {
+  action: true,
+  medium: true
+};
+const Context = _ref => {
+  let {
+    dates: [checkin, checkout] = [],
+    id,
+    occupation: [occupation = []] = []
+  } = _ref;
+  const {
+    isMobile
+  } = (0, _ui.useDevice)();
+  const {
+    dateFormat
+  } = (0, _locale.useLocale)();
+  const dateFormatCompact = {
+    day: 'numeric',
+    month: 'short',
+    weekday: !isMobile ? 'short' : undefined
+  };
+  const hasDates = !!checkin;
+  const hasOccupation = occupation.length > 0;
+  return id || hasDates || hasOccupation ? /*#__PURE__*/_react.default.createElement(_ui.View, {
+    row: true,
+    className: style.context
+  }, id && /*#__PURE__*/_react.default.createElement(_ui.View, {
+    row: true,
+    className: style.field
+  }, /*#__PURE__*/_react.default.createElement(_ui.Icon, _extends({}, ICON_PROPS, {
+    value: _helpers.ICON.ASSIGNMENT
+  })), /*#__PURE__*/_react.default.createElement(_ui.Text, TEXT_PROPS, id)), hasDates && /*#__PURE__*/_react.default.createElement(_ui.View, {
+    row: true,
+    className: style.field
+  }, /*#__PURE__*/_react.default.createElement(_ui.Icon, _extends({}, ICON_PROPS, {
+    value: _helpers.ICON.CALENDAR
+  })), /*#__PURE__*/_react.default.createElement(_ui.Text, TEXT_PROPS, dateFormat((0, _locale.parseDate)(checkin), dateFormatCompact)), checkout && /*#__PURE__*/_react.default.createElement(_ui.Text, TEXT_PROPS, " \u2014 ".concat(dateFormat((0, _locale.parseDate)(checkout), dateFormatCompact)))), hasOccupation && /*#__PURE__*/_react.default.createElement(_ui.View, {
+    row: true,
+    className: style.field
+  }, /*#__PURE__*/_react.default.createElement(_ui.Icon, _extends({}, ICON_PROPS, {
+    value: _helpers.ICON.PEOPLE
+  })), /*#__PURE__*/_react.default.createElement(_ui.Text, TEXT_PROPS, occupation.map(function () {
+    let {
+      amount,
+      ages = []
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return amount || ages.length;
+  }).join(' + ')))) : null;
+};
+exports.Context = Context;
+Context.propTypes = {
+  dates: _propTypes.default.arrayOf(_propTypes.default.string),
+  id: _propTypes.default.string,
+  occupation: _propTypes.default.arrayOf(_propTypes.default.any)
+};
+//# sourceMappingURL=Input.Context.js.map

package/build/components/Chat/components/Input/Input.Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.Context.js","names":["_locale","require","_ui","_propTypes","_interopRequireDefault","_react","style","_interopRequireWildcard","_helpers","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","ICON_PROPS","className","icon","TEXT_PROPS","action","medium","Context","_ref","dates","checkin","checkout","id","occupation","isMobile","useDevice","dateFormat","useLocale","dateFormatCompact","day","month","weekday","undefined","hasDates","hasOccupation","createElement","View","row","context","field","Icon","value","ICON","ASSIGNMENT","Text","CALENDAR","parseDate","concat","PEOPLE","map","amount","ages","join","exports","propTypes","PropTypes","arrayOf","string","any"],"sources":["../../../../../src/components/Chat/components/Input/Input.Context.jsx"],"sourcesContent":["import { parseDate, useLocale } from '@mirai/locale';\nimport { Icon, Text, useDevice, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nimport * as style from './Input.module.css';\nimport { ICON } from '../../../helpers';\n\nconst ICON_PROPS = { className: style.icon };\nconst TEXT_PROPS = { action: true, medium: true };\n\nconst Context = ({ dates: [checkin, checkout] = [], id, occupation: [occupation = []] = [] }) => {\n  const { isMobile } = useDevice();\n  const { dateFormat } = useLocale();\n\n  const dateFormatCompact = { day: 'numeric', month: 'short', weekday: !isMobile ? 'short' : undefined };\n  const hasDates = !!checkin;\n  const hasOccupation = occupation.length > 0;\n\n  return id || hasDates || hasOccupation ? (\n    <View row className={style.context}>\n      {id && (\n        <View row className={style.field}>\n          <Icon {...ICON_PROPS} value={ICON.ASSIGNMENT} />\n          <Text {...TEXT_PROPS}>{id}</Text>\n        </View>\n      )}\n\n      {hasDates && (\n        <View row className={style.field}>\n          <Icon {...ICON_PROPS} value={ICON.CALENDAR} />\n          <Text {...TEXT_PROPS}>{dateFormat(parseDate(checkin), dateFormatCompact)}</Text>\n          {checkout && <Text {...TEXT_PROPS}>{` — ${dateFormat(parseDate(checkout), dateFormatCompact)}`}</Text>}\n        </View>\n      )}\n\n      {hasOccupation && (\n        <View row className={style.field}>\n          <Icon {...ICON_PROPS} value={ICON.PEOPLE} />\n          <Text {...TEXT_PROPS}>\n            {occupation.map(({ amount, ages = [] } = {}) => amount || ages.length).join(' + ')}\n          </Text>\n        </View>\n      )}\n    </View>\n  ) : null;\n};\n\nContext.propTypes = {\n  dates: PropTypes.arrayOf(PropTypes.string),\n  id: PropTypes.string,\n  occupation: PropTypes.arrayOf(PropTypes.any),\n};\n\nexport { Context };\n"],"mappings":"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"}

package/build/components/Chat/components/Input/Input.js

@@ -8,7 +8,8 @@ var _locale = require("@mirai/locale");
 var _ui = require("@mirai/ui");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-var _Input = require("./Input.l10n");
+var _Input = require("./Input.Context");
+var _Input2 = require("./Input.l10n");
 var style = _interopRequireWildcard(require("./Input.module.css"));
 var _helpers = require("../../../helpers");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -18,15 +19,29 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const Input = _ref => {
   let {
     disabled = false,
+    form = {},
+    value: propValue,
     onValue = () => {},
     ...others
   } = _ref;
+  const {
+    isDesktop
+  } = (0, _ui.useDevice)();
   const {
     translate
   } = (0, _locale.useLocale)();
-  const [value, setValue] = (0, _react.useState)();
-  const handleChange = value => {
-    setValue(value);
+  const inputRef = (0, _react.useRef)(null);
+  const [focus, setFocus] = (0, _react.useState)(false);
+  const [value, setValue] = (0, _react.useState)(propValue);
+  (0, _react.useEffect)(() => {
+    var _inputRef$current;
+    setValue(propValue);
+    if (!propValue) return;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    setFocus(true);
+  }, [propValue]);
+  const handleChange = event => {
+    setValue(event.target.value);
   };
   const handleKeyPress = function () {
     let {
@@ -35,38 +50,48 @@ const Input = _ref => {
     if (key === 'Enter') handlePress();
   };
   const handlePress = () => {
+    setValue('');
     if (isEmpty) return;
     onValue(value);
-    setValue();
   };
   const isEmpty = !value || value.trim().length === 0;
   return /*#__PURE__*/_react.default.createElement(_ui.View, _extends({}, others, {
     row: true,
-    className: style.container
-  }), /*#__PURE__*/_react.default.createElement(_ui.Input, {
-    autoResize: true,
-    multiLine: true,
+    className: (0, _ui.styles)(style.container, focus && style.focus, others.className)
+  }), /*#__PURE__*/_react.default.createElement(_ui.View, {
+    wide: true
+  }, /*#__PURE__*/_react.default.createElement(_ui.Primitive, {
+    autoFocus: isDesktop,
     name: "input",
-    placeholder: translate(_Input.L10N.LABEL_SEND_MESSAGE),
+    placeholder: translate(_Input2.L10N.LABEL_SEND_MESSAGE),
+    ref: inputRef,
+    tag: "textarea",
     value: value,
+    onBlur: () => setFocus(false),
     onChange: handleChange,
+    onFocus: () => setFocus(true),
     onKeyPress: handleKeyPress,
     className: style.input
-  }), /*#__PURE__*/_react.default.createElement(_ui.Button, {
-    disabled: disabled,
-    small: true,
+  }), /*#__PURE__*/_react.default.createElement(_Input.Context, form)), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    disabled: disabled || !value,
     squared: true,
-    tooltip: translate(_Input.L10N.ACTION_SEND),
-    transparent: true,
-    onPress: handlePress
+    tooltip: translate(_Input2.L10N.ACTION_SEND),
+    top: true,
+    onPress: handlePress,
+    className: style.button
   }, /*#__PURE__*/_react.default.createElement(_ui.Icon, {
     light: isEmpty,
-    value: _helpers.ICON.SEND
+    value: _helpers.ICON.ARROW_UP
   })));
 };
 exports.Input = Input;
 Input.propTypes = {
   disabled: _propTypes.default.bool,
+  form: _propTypes.default.shape({
+    dates: _propTypes.default.arrayOf(_propTypes.default.string),
+    occupation: _propTypes.default.arrayOf(_propTypes.default.any)
+  }),
+  value: _propTypes.default.any,
   onValue: _propTypes.default.func
 };
 //# sourceMappingURL=Input.js.map

package/build/components/Chat/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["_locale","require","_ui","_propTypes","_interopRequireDefault","_react","_interopRequireWildcard","_Input","style","_helpers","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","Input","_ref","disabled","onValue","others","translate","useLocale","value","setValue","useState","handleChange","handleKeyPress","undefined","handlePress","isEmpty","trim","createElement","View","row","className","container","autoResize","multiLine","name","placeholder","L10N","LABEL_SEND_MESSAGE","onChange","onKeyPress","input","Button","small","squared","tooltip","ACTION_SEND","transparent","onPress","Icon","light","ICON","SEND","exports","propTypes","PropTypes","bool","func"],"sources":["../../../../../src/components/Chat/components/Input/Input.jsx"],"sourcesContent":["import { useLocale } from '@mirai/locale';\nimport { Button, Icon, Input as InputBase, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { L10N } from './Input.l10n';\nimport * as style from './Input.module.css';\nimport { ICON } from '../../../helpers';\n\nconst Input = ({ disabled = false, onValue = () => {}, ...others }) => {\n  const { translate } = useLocale();\n\n  const [value, setValue] = useState();\n\n  const handleChange = (value) => {\n    setValue(value);\n  };\n\n  const handleKeyPress = ({ key } = {}) => {\n    if (key === 'Enter') handlePress();\n  };\n\n  const handlePress = () => {\n    if (isEmpty) return;\n\n    onValue(value);\n    setValue();\n  };\n\n  const isEmpty = !value || value.trim().length === 0;\n\n  return (\n    <View {...others} row className={style.container}>\n      <InputBase\n        autoResize\n        multiLine\n        name=\"input\"\n        placeholder={translate(L10N.LABEL_SEND_MESSAGE)}\n        value={value}\n        onChange={handleChange}\n        onKeyPress={handleKeyPress}\n        className={style.input}\n      />\n\n      <Button disabled={disabled} small squared tooltip={translate(L10N.ACTION_SEND)} transparent onPress={handlePress}>\n        <Icon light={isEmpty} value={ICON.SEND} />\n      </Button>\n    </View>\n  );\n};\n\nInput.propTypes = {\n  disabled: PropTypes.bool,\n  onValue: PropTypes.func,\n};\n\nexport { Input };\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["_locale","require","_ui","_propTypes","_interopRequireDefault","_react","_interopRequireWildcard","_Input","_Input2","style","_helpers","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","Input","_ref","disabled","form","value","propValue","onValue","others","isDesktop","useDevice","translate","useLocale","inputRef","useRef","focus","setFocus","useState","setValue","useEffect","_inputRef$current","current","handleChange","event","handleKeyPress","undefined","handlePress","isEmpty","trim","createElement","View","row","className","styles","container","wide","Primitive","autoFocus","name","placeholder","L10N","LABEL_SEND_MESSAGE","ref","tag","onBlur","onChange","onFocus","onKeyPress","input","Context","Button","squared","tooltip","ACTION_SEND","top","onPress","button","Icon","light","ICON","ARROW_UP","exports","propTypes","PropTypes","bool","shape","dates","arrayOf","string","occupation","any","func"],"sources":["../../../../../src/components/Chat/components/Input/Input.jsx"],"sourcesContent":["import { useLocale } from '@mirai/locale';\nimport { Button, Icon, Primitive, styles, useDevice, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { Context } from './Input.Context';\nimport { L10N } from './Input.l10n';\nimport * as style from './Input.module.css';\nimport { ICON } from '../../../helpers';\n\nconst Input = ({ disabled = false, form = {}, value: propValue, onValue = () => {}, ...others }) => {\n  const { isDesktop } = useDevice();\n  const { translate } = useLocale();\n  const inputRef = useRef(null);\n\n  const [focus, setFocus] = useState(false);\n  const [value, setValue] = useState(propValue);\n\n  useEffect(() => {\n    setValue(propValue);\n    if (!propValue) return;\n\n    inputRef.current?.focus();\n    setFocus(true);\n  }, [propValue]);\n\n  const handleChange = (event) => {\n    setValue(event.target.value);\n  };\n\n  const handleKeyPress = ({ key } = {}) => {\n    if (key === 'Enter') handlePress();\n  };\n\n  const handlePress = () => {\n    setValue('');\n    if (isEmpty) return;\n\n    onValue(value);\n  };\n\n  const isEmpty = !value || value.trim().length === 0;\n\n  return (\n    <View {...others} row className={styles(style.container, focus && style.focus, others.className)}>\n      <View wide>\n        <Primitive\n          autoFocus={isDesktop}\n          name=\"input\"\n          placeholder={translate(L10N.LABEL_SEND_MESSAGE)}\n          ref={inputRef}\n          tag=\"textarea\"\n          value={value}\n          onBlur={() => setFocus(false)}\n          onChange={handleChange}\n          onFocus={() => setFocus(true)}\n          onKeyPress={handleKeyPress}\n          className={style.input}\n        />\n        <Context {...form} />\n      </View>\n\n      <Button\n        disabled={disabled || !value}\n        squared\n        tooltip={translate(L10N.ACTION_SEND)}\n        top\n        onPress={handlePress}\n        className={style.button}\n      >\n        <Icon light={isEmpty} value={ICON.ARROW_UP} />\n      </Button>\n    </View>\n  );\n};\n\nInput.propTypes = {\n  disabled: PropTypes.bool,\n  form: PropTypes.shape({\n    dates: PropTypes.arrayOf(PropTypes.string),\n    occupation: PropTypes.arrayOf(PropTypes.any),\n  }),\n  value: PropTypes.any,\n  onValue: PropTypes.func,\n};\n\nexport { Input };\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,GAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,MAAA,GAAAC,uBAAA,CAAAL,OAAA;AAEA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AACA,IAAAQ,KAAA,GAAAH,uBAAA,CAAAL,OAAA;AACA,IAAAS,QAAA,GAAAT,OAAA;AAAwC,SAAAU,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAhB,uBAAA4B,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAhB,UAAA,GAAAgB,GAAA,KAAAf,OAAA,EAAAe,GAAA;AAAA,SAAAC,SAAA,IAAAA,QAAA,GAAAV,MAAA,CAAAW,MAAA,GAAAX,MAAA,CAAAW,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAN,CAAA,MAAAA,CAAA,GAAAO,SAAA,CAAAC,MAAA,EAAAR,CAAA,UAAAS,MAAA,GAAAF,SAAA,CAAAP,CAAA,YAAAU,GAAA,IAAAD,MAAA,QAAAhB,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAU,MAAA,EAAAC,GAAA,KAAAJ,MAAA,CAAAI,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAJ,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAJ,SAAA;AAExC,MAAMK,KAAK,GAAGC,IAAA,IAAsF;EAAA,IAArF;IAAEC,QAAQ,GAAG,KAAK;IAAEC,IAAI,GAAG,CAAC,CAAC;IAAEC,KAAK,EAAEC,SAAS;IAAEC,OAAO,GAAGA,CAAA,KAAM,CAAC,CAAC;IAAE,GAAGC;EAAO,CAAC,GAAAN,IAAA;EAC7F,MAAM;IAAEO;EAAU,CAAC,GAAG,IAAAC,aAAS,EAAC,CAAC;EACjC,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,iBAAS,EAAC,CAAC;EACjC,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EAE7B,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EACzC,MAAM,CAACZ,KAAK,EAAEa,QAAQ,CAAC,GAAG,IAAAD,eAAQ,EAACX,SAAS,CAAC;EAE7C,IAAAa,gBAAS,EAAC,MAAM;IAAA,IAAAC,iBAAA;IACdF,QAAQ,CAACZ,SAAS,CAAC;IACnB,IAAI,CAACA,SAAS,EAAE;IAEhB,CAAAc,iBAAA,GAAAP,QAAQ,CAACQ,OAAO,cAAAD,iBAAA,uBAAhBA,iBAAA,CAAkBL,KAAK,CAAC,CAAC;IACzBC,QAAQ,CAAC,IAAI,CAAC;EAChB,CAAC,EAAE,CAACV,SAAS,CAAC,CAAC;EAEf,MAAMgB,YAAY,GAAIC,KAAK,IAAK;IAC9BL,QAAQ,CAACK,KAAK,CAAC5B,MAAM,CAACU,KAAK,CAAC;EAC9B,CAAC;EAED,MAAMmB,cAAc,GAAG,SAAAA,CAAA,EAAkB;IAAA,IAAjB;MAAEzB;IAAI,CAAC,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAA6B,SAAA,GAAA7B,SAAA,MAAG,CAAC,CAAC;IAClC,IAAIG,GAAG,KAAK,OAAO,EAAE2B,WAAW,CAAC,CAAC;EACpC,CAAC;EAED,MAAMA,WAAW,GAAGA,CAAA,KAAM;IACxBR,QAAQ,CAAC,EAAE,CAAC;IACZ,IAAIS,OAAO,EAAE;IAEbpB,OAAO,CAACF,KAAK,CAAC;EAChB,CAAC;EAED,MAAMsB,OAAO,GAAG,CAACtB,KAAK,IAAIA,KAAK,CAACuB,IAAI,CAAC,CAAC,CAAC/B,MAAM,KAAK,CAAC;EAEnD,oBACEjC,MAAA,CAAAY,OAAA,CAAAqD,aAAA,CAACpE,GAAA,CAAAqE,IAAI,EAAAtC,QAAA,KAAKgB,MAAM;IAAEuB,GAAG;IAACC,SAAS,EAAE,IAAAC,UAAM,EAACjE,KAAK,CAACkE,SAAS,EAAEnB,KAAK,IAAI/C,KAAK,CAAC+C,KAAK,EAAEP,MAAM,CAACwB,SAAS;EAAE,iBAC/FpE,MAAA,CAAAY,OAAA,CAAAqD,aAAA,CAACpE,GAAA,CAAAqE,IAAI;IAACK,IAAI;EAAA,gBACRvE,MAAA,CAAAY,OAAA,CAAAqD,aAAA,CAACpE,GAAA,CAAA2E,SAAS;IACRC,SAAS,EAAE5B,SAAU;IACrB6B,IAAI,EAAC,OAAO;IACZC,WAAW,EAAE5B,SAAS,CAAC6B,YAAI,CAACC,kBAAkB,CAAE;IAChDC,GAAG,EAAE7B,QAAS;IACd8B,GAAG,EAAC,UAAU;IACdtC,KAAK,EAAEA,KAAM;IACbuC,MAAM,EAAEA,CAAA,KAAM5B,QAAQ,CAAC,KAAK,CAAE;IAC9B6B,QAAQ,EAAEvB,YAAa;IACvBwB,OAAO,EAAEA,CAAA,KAAM9B,QAAQ,CAAC,IAAI,CAAE;IAC9B+B,UAAU,EAAEvB,cAAe;IAC3BQ,SAAS,EAAEhE,KAAK,CAACgF;EAAM,CACxB,CAAC,eACFpF,MAAA,CAAAY,OAAA,CAAAqD,aAAA,CAAC/D,MAAA,CAAAmF,OAAO,EAAK7C,IAAO,CAChB,CAAC,eAEPxC,MAAA,CAAAY,OAAA,CAAAqD,aAAA,CAACpE,GAAA,CAAAyF,MAAM;IACL/C,QAAQ,EAAEA,QAAQ,IAAI,CAACE,KAAM;IAC7B8C,OAAO;IACPC,OAAO,EAAEzC,SAAS,CAAC6B,YAAI,CAACa,WAAW,CAAE;IACrCC,GAAG;IACHC,OAAO,EAAE7B,WAAY;IACrBM,SAAS,EAAEhE,KAAK,CAACwF;EAAO,gBAExB5F,MAAA,CAAAY,OAAA,CAAAqD,aAAA,CAACpE,GAAA,CAAAgG,IAAI;IAACC,KAAK,EAAE/B,OAAQ;IAACtB,KAAK,EAAEsD,aAAI,CAACC;EAAS,CAAE,CACvC,CACJ,CAAC;AAEX,CAAC;AAACC,OAAA,CAAA5D,KAAA,GAAAA,KAAA;AAEFA,KAAK,CAAC6D,SAAS,GAAG;EAChB3D,QAAQ,EAAE4D,kBAAS,CAACC,IAAI;EACxB5D,IAAI,EAAE2D,kBAAS,CAACE,KAAK,CAAC;IACpBC,KAAK,EAAEH,kBAAS,CAACI,OAAO,CAACJ,kBAAS,CAACK,MAAM,CAAC;IAC1CC,UAAU,EAAEN,kBAAS,CAACI,OAAO,CAACJ,kBAAS,CAACO,GAAG;EAC7C,CAAC,CAAC;EACFjE,KAAK,EAAE0D,kBAAS,CAACO,GAAG;EACpB/D,OAAO,EAAEwD,kBAAS,CAACQ;AACrB,CAAC"}

package/build/components/Chat/components/Input/Input.module.css

@@ -1,27 +1,64 @@
 .container {
+  align-items: flex-end;
   background-color: var(--mirai-chat-input-background);
+  border: solid var(--mirai-chat-border-size) var(--mirai-chat-input-background);
   border-radius: var(--mirai-chat-border-radius);
-  box-shadow: 0 0 0 var(--mirai-chat-border-size) var(--mirai-chat-input-border-color);
+  gap: calc(var(--mirai-chat-space) / 2);
   justify-content: center;
-  margin: calc(var(--mirai-chat-space) * -1) var(--mirai-chat-space) var(--mirai-chat-space) var(--mirai-chat-space);
-  padding-right: calc(var(--mirai-chat-space) / 2);
+  padding: calc(var(--mirai-chat-space) / 1);
   z-index: 0;
+  transition: border var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+}
+
+.container.focus {
+  border-color: var(--mirai-chat-border-color);
 }
 
 .input {
+  align-self: center;
   background-color: transparent;
-  color: var(--mirai-chat-text-color);
+  border: none;
+  box-sizing: border-box;
+  color: var(--mirai-ui-input-color);
+  font-family: var(--mirai-ui-input-font);
   font-size: var(--mirai-chat-text-font-size);
   font-weight: var(--mirai-chat-text-font-weight);
-  height: calc(var(--mirai-chat-text-line-height) + calc(var(--mirai-chat-space) * 2));
   line-height: var(--mirai-chat-text-line-height);
-  padding: var(--mirai-chat-space);
+  margin: 0;
+  outline: none;
+  text-align: var(--mirai-ui-text-align);
+  user-select: none;
+  width: 100%;
+  /* autoresize */
+  min-height: auto;
+  overflow-y: hidden;
+  resize: none;
 }
 
+.input:disabled,
 .input::placeholder {
-  color: var(--mirai-chat-text-color-light);
-  font-weight: var(--mirai-ui-font-weight);
-  opacity: 0.5;
+  color: var(--mirai-ui-input-disabled);
+  opacity: 0.66;
+}
+
+.button {
+  border-radius: 50%;
+}
+
+.context {
+  flex-wrap: wrap;
+  gap: 0 calc(var(--mirai-chat-space) / 2);
+}
+
+.context .field {
+  background-color: var(--mirai-chat-background);
+  border: solid var(--mirai-chat-border-size) var(--mirai-chat-border-color);
+  border-radius: calc(var(--mirai-chat-space) * 2);
+  padding: calc(var(--mirai-chat-space) / 2) calc(var(--mirai-chat-space) / 1);
+}
+
+.context .field .icon {
+  margin-right: calc(var(--mirai-chat-space) / 2);
 }
 
 @media screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 0) {

package/build/components/Chat/components/Message/Message.Action.js

@@ -5,76 +5,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Action = void 0;
 var _dataSources = require("@mirai/data-sources");
-var _locale = require("@mirai/locale");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _components = require("./components");
 var _helpers = require("./helpers");
-var _helpers2 = require("../../../helpers");
-var _Chat = require("../../Chat.constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const DATE_FORMAT = {
-  weekday: 'short',
-  month: 'short',
-  day: 'numeric'
-};
-
 // ! TODO: Refacto use of intent/response vs lisa.intent/response
 const Action = _ref => {
   let {
+    caption,
     disabled,
     intent,
     image,
-    requirement,
+    text,
     type,
     url,
     value,
     onPress,
-    onResponse,
-    ...props
+    onResponse
   } = _ref;
-  const {
-    dateFormat,
-    translate
-  } = (0, _locale.useLocale)();
   const {
     value: {
-      hotel: {
-        accommodationType
-      } = {},
       lisa
-    }
+    } = {}
   } = (0, _dataSources.useStore)();
   const handlePress = () => {
-    if (intent) return onPress({
-      intent,
-      context: value,
-      text
-    });else if (requirement) {
-      const {
+    if (intent) {
+      onPress({
         intent,
-        response: {
-          form = {},
-          value: context = {}
-        } = {}
-      } = lisa;
-      if (requirement.value) {
-        onResponse({
-          text,
-          value: requirement.value
-        });
-        onPress({
-          context,
-          intent,
-          form: {
-            ...form,
-            [requirement.name]: requirement.value
-          },
-          text
-        });
-      } else _dataSources.Event.publish(_Chat.EVENT.INPUT_COMPONENT, {
-        requirement,
-        onSubmit: onResponse
+        context: value,
+        text
       });
     } else if (type && value) {
       const {
@@ -106,16 +66,6 @@ const Action = _ref => {
       });
     }
   };
-  const caption = type === 'occupation' ? value.rooms.map(_ref3 => {
-    let {
-      name
-    } = _ref3;
-    return name;
-  }).join(' + ') : props.caption;
-  const text = type === 'calendar' ? "".concat(dateFormat((0, _locale.parseDate)(value.from), DATE_FORMAT), " \u2014 ").concat(dateFormat((0, _locale.parseDate)(value.to), DATE_FORMAT)) : type === 'occupation' ? "".concat(value.rooms.length, " ").concat((0, _helpers2.getAccommodationLabel)({
-    plural: value.rooms.length > 1,
-    type: accommodationType
-  }, translate)) : props.text;
   return /*#__PURE__*/_react.default.createElement(_components.Card, {
     caption,
     disabled,
@@ -133,13 +83,6 @@ Action.propTypes = {
   disabled: _propTypes.default.bool,
   image: _propTypes.default.string,
   intent: _propTypes.default.string,
-  requirement: _propTypes.default.shape({
-    name: _propTypes.default.string,
-    required: _propTypes.default.bool,
-    text: _propTypes.default.string,
-    type: _propTypes.default.oneOf(['calendar', 'list', 'occupation', 'offer', 'text']),
-    value: _propTypes.default.any
-  }),
   text: _propTypes.default.string,
   type: _propTypes.default.oneOf(['calendar', 'occupation', 'offer']),
   url: _propTypes.default.string,

package/build/components/Chat/components/Message/Message.Action.js.map

@@ -1 +1 @@
-{"version":3,"file":"Message.Action.js","names":["_dataSources","require","_locale","_propTypes","_interopRequireDefault","_react","_components","_helpers","_helpers2","_Chat","obj","__esModule","default","DATE_FORMAT","weekday","month","day","Action","_ref","disabled","intent","image","requirement","type","url","value","onPress","onResponse","props","dateFormat","translate","useLocale","hotel","accommodationType","lisa","useStore","handlePress","context","text","response","form","name","Event","publish","EVENT","INPUT_COMPONENT","onSubmit","nextForm","dates","from","to","occupation","rooms","map","_ref2","offerId","caption","_ref3","join","concat","parseDate","length","getAccommodationLabel","plural","createElement","Card","href","icon","getActionIcon","option","undefined","exports","propTypes","PropTypes","string","bool","shape","required","oneOf","any","func"],"sources":["../../../../../src/components/Chat/components/Message/Message.Action.jsx"],"sourcesContent":["import { Event, useStore } from '@mirai/data-sources';\nimport { parseDate, useLocale } from '@mirai/locale';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { Card } from './components';\nimport { getActionIcon } from './helpers';\nimport { getAccommodationLabel } from '../../../helpers';\nimport { EVENT } from '../../Chat.constants';\n\nconst DATE_FORMAT = { weekday: 'short', month: 'short', day: 'numeric' };\n\n// ! TODO: Refacto use of intent/response vs lisa.intent/response\nconst Action = ({ disabled, intent, image, requirement, type, url, value, onPress, onResponse, ...props }) => {\n  const { dateFormat, translate } = useLocale();\n  const {\n    value: { hotel: { accommodationType } = {}, lisa },\n  } = useStore();\n\n  const handlePress = () => {\n    if (intent) return onPress({ intent, context: value, text });\n    else if (requirement) {\n      const { intent, response: { form = {}, value: context = {} } = {} } = lisa;\n      if (requirement.value) {\n        onResponse({ text, value: requirement.value });\n        onPress({\n          context,\n          intent,\n          form: { ...form, [requirement.name]: requirement.value },\n          text,\n        });\n      } else Event.publish(EVENT.INPUT_COMPONENT, { requirement, onSubmit: onResponse });\n    } else if (type && value) {\n      const { intent, response: { form = {}, value: context = {} } = {} } = lisa;\n\n      const nextForm = { ...form };\n      if (type === 'calendar') nextForm.dates = [value.from, value.to];\n      else if (type === 'occupation') nextForm.occupation = value.rooms.map(({ occupation }) => occupation);\n      else if (type === 'offer') nextForm.offerId = value;\n\n      onResponse({ image, caption, text });\n      onPress({ context, intent, form: nextForm, text });\n    }\n  };\n\n  const caption = type === 'occupation' ? value.rooms.map(({ name }) => name).join(' + ') : props.caption;\n  const text =\n    type === 'calendar'\n      ? `${dateFormat(parseDate(value.from), DATE_FORMAT)} — ${dateFormat(parseDate(value.to), DATE_FORMAT)}`\n      : type === 'occupation'\n      ? `${value.rooms.length} ${getAccommodationLabel(\n          { plural: value.rooms.length > 1, type: accommodationType },\n          translate,\n        )}`\n      : props.text;\n\n  return (\n    <Card\n      {...{ caption, disabled, image, text }}\n      href={url}\n      icon={getActionIcon(url)}\n      option={!image && !disabled && !url}\n      onPress={!disabled ? handlePress : undefined}\n    />\n  );\n};\n\nAction.propTypes = {\n  caption: PropTypes.string,\n  disabled: PropTypes.bool,\n  image: PropTypes.string,\n  intent: PropTypes.string,\n  requirement: PropTypes.shape({\n    name: PropTypes.string,\n    required: PropTypes.bool,\n    text: PropTypes.string,\n    type: PropTypes.oneOf(['calendar', 'list', 'occupation', 'offer', 'text']),\n    value: PropTypes.any,\n  }),\n  text: PropTypes.string,\n  type: PropTypes.oneOf(['calendar', 'occupation', 'offer']),\n  url: PropTypes.string,\n  value: PropTypes.any,\n  onPress: PropTypes.func,\n  onResponse: PropTypes.func,\n};\n\nexport { Action };\n"],"mappings":"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"}
+{"version":3,"file":"Message.Action.js","names":["_dataSources","require","_propTypes","_interopRequireDefault","_react","_components","_helpers","obj","__esModule","default","Action","_ref","caption","disabled","intent","image","text","type","url","value","onPress","onResponse","lisa","useStore","handlePress","context","response","form","nextForm","dates","from","to","occupation","rooms","map","_ref2","offerId","createElement","Card","href","icon","getActionIcon","option","undefined","exports","propTypes","PropTypes","string","bool","oneOf","any","func"],"sources":["../../../../../src/components/Chat/components/Message/Message.Action.jsx"],"sourcesContent":["import { useStore } from '@mirai/data-sources';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { Card } from './components';\nimport { getActionIcon } from './helpers';\n\n// ! TODO: Refacto use of intent/response vs lisa.intent/response\nconst Action = ({ caption, disabled, intent, image, text, type, url, value, onPress, onResponse }) => {\n  const { value: { lisa } = {} } = useStore();\n\n  const handlePress = () => {\n    if (intent) {\n      onPress({ intent, context: value, text });\n    } else if (type && value) {\n      const { intent, response: { form = {}, value: context = {} } = {} } = lisa;\n\n      const nextForm = { ...form };\n      if (type === 'calendar') nextForm.dates = [value.from, value.to];\n      else if (type === 'occupation') nextForm.occupation = value.rooms.map(({ occupation }) => occupation);\n      else if (type === 'offer') nextForm.offerId = value;\n\n      onResponse({ image, caption, text });\n      onPress({ context, intent, form: nextForm, text });\n    }\n  };\n\n  return (\n    <Card\n      {...{ caption, disabled, image, text }}\n      href={url}\n      icon={getActionIcon(url)}\n      option={!image && !disabled && !url}\n      onPress={!disabled ? handlePress : undefined}\n    />\n  );\n};\n\nAction.propTypes = {\n  caption: PropTypes.string,\n  disabled: PropTypes.bool,\n  image: PropTypes.string,\n  intent: PropTypes.string,\n  text: PropTypes.string,\n  type: PropTypes.oneOf(['calendar', 'occupation', 'offer']),\n  url: PropTypes.string,\n  value: PropTypes.any,\n  onPress: PropTypes.func,\n  onResponse: PropTypes.func,\n};\n\nexport { Action };\n"],"mappings":"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"}

package/build/components/Chat/components/Message/Message.Requirement.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Requirement = void 0;
+var _dataSources = require("@mirai/data-sources");
+var _locale = require("@mirai/locale");
+var _ui = require("@mirai/ui");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _components = require("./components");
+var _Message = require("./Message.constants");
+var _Message2 = require("./Message.l10n");
+var style = _interopRequireWildcard(require("./Message.module.css"));
+var _helpers = require("../../../helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const Requirement = _ref => {
+  let {
+    disabled = false,
+    requirement: {
+      defaultValue,
+      name,
+      required,
+      type,
+      ...component
+    } = {},
+    onResponse = () => {},
+    onRetry = () => {},
+    onSubmit = () => {},
+    ...others
+  } = _ref;
+  const {
+    dateFormat,
+    translate
+  } = (0, _locale.useLocale)();
+  const {
+    value: {
+      lisa,
+      locale
+    } = {}
+  } = (0, _dataSources.useStore)();
+  const [value, setValue] = (0, _react.useState)();
+  const [valid, setValid] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    if (type !== 'login') return;
+    _dataSources.Event.subscribe(_helpers.EVENT.LOGGED, onRetry);
+    return () => _dataSources.Event.unsubscribe(_helpers.EVENT.LOGGED, onRetry);
+  }, [onRetry, type]);
+  const is = {
+    calendar: type === 'calendar',
+    list: type === 'list',
+    login: type === 'login',
+    occupation: type === 'occupation',
+    promocode: name === 'promocode',
+    signup: type === 'signup',
+    text: _Message.INPUT_TEXT_TYPES.includes(type)
+  };
+  const handleChange = value => {
+    let next = value;
+    if (is.calendar) {
+      const [from, to] = value || [];
+      const format = 'DD/MM/YYYY';
+      next = [from ? dateFormat(from, {
+        format
+      }) : undefined, to ? dateFormat(to, {
+        format
+      }) : undefined];
+      setValid(!!from && !!to);
+    }
+    setValue(next);
+  };
+  const handleKeyPress = event => {
+    if (event.key === _Message.KEY_ENTER) handleSubmit();
+  };
+  const handleSubmit = () => {
+    const {
+      intent,
+      response: {
+        form = {},
+        value: context = {}
+      } = {}
+    } = lisa;
+    onSubmit({
+      intent,
+      context,
+      form: {
+        ...form,
+        [name]: is.text && !required && !value ? ' ' : value
+      }
+    });
+    if (is.text) onResponse({
+      text: value
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_components.Card, _extends({}, others, {
+    disabled: disabled,
+    offset: false,
+    className: style.requirement
+  }), /*#__PURE__*/_react.default.createElement(_ui.View, {
+    className: (0, _ui.styles)(style.component, is.text && style.inputText, disabled && style.disabled)
+  }, /*#__PURE__*/_react.default.createElement(_Message.REQUIREMENT_COMPONENT[type] || _ui.InputText, {
+    ...component,
+    ...(is.calendar ? {
+      format: 'DD/MM/YYYY',
+      range: true
+    } : {}),
+    ...(is.login ? {
+      showSignup: false
+    } : {}),
+    hint: is.promocode ? translate(_Message2.L10N.LABEL_PROMOCODE_HINT) : undefined,
+    locale,
+    placeholder: is.text ? translate(_Message2.L10N.LABEL_TYPE_HERE) : undefined,
+    text: translate(_Message2.L10N.ACTION_CONTINUE),
+    value: value || defaultValue,
+    onChange: handleChange,
+    onError: errors => setValid(!errors),
+    onKeyPress: !disabled && is.text ? handleKeyPress : undefined,
+    onSubmit: !disabled ? handleSubmit : undefined,
+    onValid: () => setValid(true)
+  })), !is.occupation && !is.login && !is.signup && !disabled && /*#__PURE__*/_react.default.createElement(_ui.View, {
+    row: true,
+    wide: true,
+    className: style.footer
+  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    disabled: disabled || required && !valid,
+    onPress: handleSubmit
+  }, translate(_Message2.L10N.ACTION_CONTINUE))));
+};
+exports.Requirement = Requirement;
+Requirement.propTypes = {
+  disabled: _propTypes.default.bool,
+  requirement: _propTypes.default.shape({}),
+  onResponse: _propTypes.default.func,
+  onRetry: _propTypes.default.func,
+  onSubmit: _propTypes.default.func
+};
+//# sourceMappingURL=Message.Requirement.js.map