@mirai/core 0.3.249 → 0.3.251

package/build/components/__shared__/ButtonPayment/components/FormCheckout/FormCheckout.js

@@ -28,6 +28,7 @@ const FormCheckout = _ref => {
     translate
   } = (0, _locale.useLocale)();
   const [busy, setBusy] = (0, _react.useState)(false);
+  const [focus, setFocus] = (0, _react.useState)();
   const [form, setForm] = (0, _react.useState)({});
   const [formError, setFormError] = (0, _react.useState)({});
   const [ready, setReady] = (0, _react.useState)(false);
@@ -44,17 +45,35 @@ const FormCheckout = _ref => {
     const {
       Frames
     } = window || {};
-    const handleValidationChanged = _ref2 => {
+    const handleBlur = _ref2 => {
+      let {
+        element
+      } = _ref2;
+      return handleLeave(element);
+    };
+    const handleFocus = _ref3 => {
+      let {
+        element
+      } = _ref3;
+      return handleEnter(element);
+    };
+    const handleValidationChanged = _ref4 => {
       let {
         element,
+        isEmpty,
         isValid
-      } = _ref2;
-      return handleError(element, !isValid);
+      } = _ref4;
+      handleChange(element, isEmpty ? undefined : 'value');
+      handleError(element, !isValid);
     };
+    Frames.addEventHandler(Frames.Events.FRAME_BLUR, handleBlur);
+    Frames.addEventHandler(Frames.Events.FRAME_FOCUS, handleFocus);
     Frames.addEventHandler(Frames.Events.CARD_TOKENIZED, handleCardTokenized);
     Frames.addEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED, handleCardTokenizedFailed);
     Frames.addEventHandler(Frames.Events.FRAME_VALIDATION_CHANGED, handleValidationChanged);
     return () => {
+      Frames.removeEventHandler(Frames.Events.FRAME_BLUR, handleBlur);
+      Frames.removeEventHandler(Frames.Events.FRAME_FOCUS, handleFocus);
       Frames.removeEventHandler(Frames.Events.CARD_TOKENIZED, handleCardTokenized);
       Frames.removeEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED, handleCardTokenizedFailed);
       Frames.removeEventHandler(Frames.Events.FRAME_VALIDATION_CHANGED, handleValidationChanged);
@@ -75,7 +94,7 @@ const FormCheckout = _ref => {
       ..._FormCheckout.FRAME
     });
     onSuccess({
-      ...form,
+      name: form === null || form === void 0 ? void 0 : form.name,
       token
     });
   };
@@ -104,6 +123,14 @@ const FormCheckout = _ref => {
       [field]: value
     });
   };
+  const handleEnter = field => setFocus(focus => ({
+    ...focus,
+    [field]: true
+  }));
+  const handleLeave = field => setFocus(focus => ({
+    ...focus,
+    [field]: false
+  }));
   const handleLoad = () => {
     var _window$Frames3;
     (_window$Frames3 = window.Frames) === null || _window$Frames3 === void 0 ? void 0 : _window$Frames3.init({
@@ -131,16 +158,22 @@ const FormCheckout = _ref => {
   }, translate(_FormCheckout2.L10N.LABEL_SECURE_PAGE)), /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
     label: translate(_FormCheckout2.L10N.LABEL_CARD_NAME),
     error: formError.name,
-    success: formError.name === false
+    focus: focus === null || focus === void 0 ? void 0 : focus.name,
+    success: formError.name === false,
+    value: form.name
   }, /*#__PURE__*/_react.default.createElement(_ui.Input, {
     name: "name",
     value: form.name,
     onChange: value => handleChange('name', value),
+    onEnter: () => handleEnter('name'),
+    onLeave: () => handleLeave('name'),
     className: style.name
   })), /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
     label: translate(_FormCheckout2.L10N.LABEL_CARD_NUMBER),
     error: formError['card-number'],
-    success: formError['card-number'] === false
+    focus: focus === null || focus === void 0 ? void 0 : focus['card-number'],
+    success: formError['card-number'] === false,
+    value: form === null || form === void 0 ? void 0 : form['card-number']
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _ui.styles)(style.frame, 'card-number-frame')
   })), /*#__PURE__*/_react.default.createElement(_ui.View, {
@@ -148,13 +181,17 @@ const FormCheckout = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
     label: translate(_FormCheckout2.L10N.LABEL_EXPIRATION),
     error: formError['expiry-date'],
-    success: formError['expiry-date'] === false
+    focus: focus === null || focus === void 0 ? void 0 : focus['expiry-date'],
+    success: formError['expiry-date'] === false,
+    value: form === null || form === void 0 ? void 0 : form['expiry-date']
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _ui.styles)(style.frame, 'expiry-date-frame')
   })), /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
     label: translate(_FormCheckout2.L10N.LABEL_CVV),
     error: formError['cvv'],
+    focus: focus === null || focus === void 0 ? void 0 : focus['cvv'],
     success: formError['cvv'] === false,
+    value: form === null || form === void 0 ? void 0 : form['cvv'],
     className: style.inputCVV
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _ui.styles)(style.frame, 'cvv-frame')

package/build/components/__shared__/ButtonPayment/components/FormCheckout/FormCheckout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormCheckout.js","names":["_locale","require","_ui","_propTypes","_interopRequireDefault","_react","_interopRequireWildcard","_FormCheckout","_FormCheckout2","style","_helpers","_helpers2","_InputField","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","FormCheckout","_ref","publicKey","process","env","PROVIDER_CHECKOUT_PUBLICKEY","onError","onSuccess","others","translate","useLocale","busy","setBusy","useState","form","setForm","formError","setFormError","ready","setReady","responseError","setResponseError","useEffect","loadScript","id","name","onLoad","handleLoad","Frames","window","handleValidationChanged","_ref2","element","isValid","handleError","addEventHandler","Events","CARD_TOKENIZED","handleCardTokenized","CARD_TOKENIZATION_FAILED","handleCardTokenizedFailed","FRAME_VALIDATION_CHANGED","removeEventHandler","_window$Frames","token","arguments","length","undefined","init","FRAME","_window$Frames2","error","enableSubmitForm","handleChange","field","value","_window$Frames3","getStyle","handlePress","cardholder","submitCard","hasError","values","FIELDS_COUNT","some","createElement","View","Text","action","className","description","L10N","LABEL_SECURE_PAGE","InputField","label","LABEL_CARD_NAME","success","Input","onChange","LABEL_CARD_NUMBER","styles","frame","row","LABEL_EXPIRATION","LABEL_CVV","inputCVV","Notification","small","wide","NOTIFICATION_ERROR_CHECKOUT","Button","disabled","large","onPress","button","ACTION_PAY","exports","displayName","propTypes","PropTypes","string","isRequired","func"],"sources":["../../../../../../src/components/__shared__/ButtonPayment/components/FormCheckout/FormCheckout.jsx"],"sourcesContent":["import { useLocale } from '@mirai/locale';\nimport { Button, Input, Notification, styles, Text, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { FIELDS_COUNT, FRAME } from './FormCheckout.constants';\nimport { L10N } from './FormCheckout.l10n';\nimport * as style from './FormCheckout.module.css';\nimport { getStyle } from './helpers';\nimport { loadScript } from '../../helpers';\nimport { InputField } from '../InputField';\n\nexport const FormCheckout = ({\n  publicKey = process.env.PROVIDER_CHECKOUT_PUBLICKEY,\n  onError = () => {},\n  onSuccess = () => {},\n  ...others\n}) => {\n  const { translate } = useLocale();\n\n  const [busy, setBusy] = useState(false);\n  const [form, setForm] = useState({});\n  const [formError, setFormError] = useState({});\n  const [ready, setReady] = useState(false);\n  const [responseError, setResponseError] = useState();\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => loadScript({ id: 'checkoutScript', name: 'framesv2.min.js', onLoad: handleLoad }), []);\n\n  useEffect(() => {\n    if (!ready) return;\n\n    const { Frames } = window || {};\n    const handleValidationChanged = ({ element, isValid }) => handleError(element, !isValid);\n\n    Frames.addEventHandler(Frames.Events.CARD_TOKENIZED, handleCardTokenized);\n    Frames.addEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED, handleCardTokenizedFailed);\n    Frames.addEventHandler(Frames.Events.FRAME_VALIDATION_CHANGED, handleValidationChanged);\n\n    return () => {\n      Frames.removeEventHandler(Frames.Events.CARD_TOKENIZED, handleCardTokenized);\n      Frames.removeEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED, handleCardTokenizedFailed);\n      Frames.removeEventHandler(Frames.Events.FRAME_VALIDATION_CHANGED, handleValidationChanged);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [form, formError, ready]);\n\n  const handleCardTokenized = ({ token } = {}) => {\n    setBusy(false);\n    if (!token) return;\n\n    setForm({});\n    setFormError({});\n    window.Frames?.init({ publicKey, ...FRAME });\n    onSuccess({ ...form, token });\n  };\n\n  const handleCardTokenizedFailed = (error = {}) => {\n    setBusy(false);\n    setResponseError(error);\n    window.Frames?.enableSubmitForm();\n    onError(error);\n  };\n\n  const handleChange = (field, value = '') => {\n    setForm({ ...form, [field]: value });\n    setFormError({ ...formError, [field]: value.length === 0 });\n  };\n\n  const handleError = (field, value) => {\n    setFormError({ ...formError, [field]: value });\n  };\n\n  const handleLoad = () => {\n    window.Frames?.init({ publicKey, ...FRAME, ...getStyle() });\n    setReady(true);\n  };\n\n  const handlePress = () => {\n    const { Frames } = window || {};\n    setBusy(true);\n    setResponseError();\n    Frames.cardholder = {\n      name: form.name,\n    };\n    Frames.submitCard();\n  };\n\n  const hasError =\n    Object.values(formError).length < FIELDS_COUNT || Object.values(formError).some((value) => value === true);\n\n  return (\n    <View {...others}>\n      <Text action className={style.description}>\n        {translate(L10N.LABEL_SECURE_PAGE)}\n      </Text>\n\n      <InputField label={translate(L10N.LABEL_CARD_NAME)} error={formError.name} success={formError.name === false}>\n        <Input name=\"name\" value={form.name} onChange={(value) => handleChange('name', value)} className={style.name} />\n      </InputField>\n      <InputField\n        label={translate(L10N.LABEL_CARD_NUMBER)}\n        error={formError['card-number']}\n        success={formError['card-number'] === false}\n      >\n        <div className={styles(style.frame, 'card-number-frame')} />\n      </InputField>\n      <View row>\n        <InputField\n          label={translate(L10N.LABEL_EXPIRATION)}\n          error={formError['expiry-date']}\n          success={formError['expiry-date'] === false}\n        >\n          <div className={styles(style.frame, 'expiry-date-frame')} />\n        </InputField>\n\n        <InputField\n          label={translate(L10N.LABEL_CVV)}\n          error={formError['cvv']}\n          success={formError['cvv'] === false}\n          className={style.inputCVV}\n        >\n          <div className={styles(style.frame, 'cvv-frame')} />\n        </InputField>\n      </View>\n\n      {responseError && (\n        <Notification error small wide>\n          {translate(L10N.NOTIFICATION_ERROR_CHECKOUT)}\n        </Notification>\n      )}\n\n      <Button busy={busy} disabled={hasError} large wide onPress={handlePress} className={style.button}>\n        {translate(L10N.ACTION_PAY)}\n      </Button>\n    </View>\n  );\n};\n\nFormCheckout.displayName = 'Mirai:Payments:ButtonPayment:FormCheckout';\n\nFormCheckout.propTypes = {\n  publicKey: PropTypes.string.isRequired,\n  onError: PropTypes.func,\n  onSuccess: PropTypes.func,\n};\n"],"mappings":"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"}
+{"version":3,"file":"FormCheckout.js","names":["_locale","require","_ui","_propTypes","_interopRequireDefault","_react","_interopRequireWildcard","_FormCheckout","_FormCheckout2","style","_helpers","_helpers2","_InputField","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","FormCheckout","_ref","publicKey","process","env","PROVIDER_CHECKOUT_PUBLICKEY","onError","onSuccess","others","translate","useLocale","busy","setBusy","useState","focus","setFocus","form","setForm","formError","setFormError","ready","setReady","responseError","setResponseError","useEffect","loadScript","id","name","onLoad","handleLoad","Frames","window","handleBlur","_ref2","element","handleLeave","handleFocus","_ref3","handleEnter","handleValidationChanged","_ref4","isEmpty","isValid","handleChange","undefined","handleError","addEventHandler","Events","FRAME_BLUR","FRAME_FOCUS","CARD_TOKENIZED","handleCardTokenized","CARD_TOKENIZATION_FAILED","handleCardTokenizedFailed","FRAME_VALIDATION_CHANGED","removeEventHandler","_window$Frames","token","arguments","length","init","FRAME","_window$Frames2","error","enableSubmitForm","field","value","_window$Frames3","getStyle","handlePress","cardholder","submitCard","hasError","values","FIELDS_COUNT","some","createElement","View","Text","action","className","description","L10N","LABEL_SECURE_PAGE","InputField","label","LABEL_CARD_NAME","success","Input","onChange","onEnter","onLeave","LABEL_CARD_NUMBER","styles","frame","row","LABEL_EXPIRATION","LABEL_CVV","inputCVV","Notification","small","wide","NOTIFICATION_ERROR_CHECKOUT","Button","disabled","large","onPress","button","ACTION_PAY","exports","displayName","propTypes","PropTypes","string","isRequired","func"],"sources":["../../../../../../src/components/__shared__/ButtonPayment/components/FormCheckout/FormCheckout.jsx"],"sourcesContent":["import { useLocale } from '@mirai/locale';\nimport { Button, Input, Notification, styles, Text, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { FIELDS_COUNT, FRAME } from './FormCheckout.constants';\nimport { L10N } from './FormCheckout.l10n';\nimport * as style from './FormCheckout.module.css';\nimport { getStyle } from './helpers';\nimport { loadScript } from '../../helpers';\nimport { InputField } from '../InputField';\n\nexport const FormCheckout = ({\n  publicKey = process.env.PROVIDER_CHECKOUT_PUBLICKEY,\n  onError = () => {},\n  onSuccess = () => {},\n  ...others\n}) => {\n  const { translate } = useLocale();\n\n  const [busy, setBusy] = useState(false);\n  const [focus, setFocus] = useState();\n  const [form, setForm] = useState({});\n  const [formError, setFormError] = useState({});\n  const [ready, setReady] = useState(false);\n  const [responseError, setResponseError] = useState();\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => loadScript({ id: 'checkoutScript', name: 'framesv2.min.js', onLoad: handleLoad }), []);\n\n  useEffect(() => {\n    if (!ready) return;\n\n    const { Frames } = window || {};\n\n    const handleBlur = ({ element }) => handleLeave(element);\n\n    const handleFocus = ({ element }) => handleEnter(element);\n\n    const handleValidationChanged = ({ element, isEmpty, isValid }) => {\n      handleChange(element, isEmpty ? undefined : 'value');\n      handleError(element, !isValid);\n    };\n\n    Frames.addEventHandler(Frames.Events.FRAME_BLUR, handleBlur);\n    Frames.addEventHandler(Frames.Events.FRAME_FOCUS, handleFocus);\n    Frames.addEventHandler(Frames.Events.CARD_TOKENIZED, handleCardTokenized);\n    Frames.addEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED, handleCardTokenizedFailed);\n    Frames.addEventHandler(Frames.Events.FRAME_VALIDATION_CHANGED, handleValidationChanged);\n\n    return () => {\n      Frames.removeEventHandler(Frames.Events.FRAME_BLUR, handleBlur);\n      Frames.removeEventHandler(Frames.Events.FRAME_FOCUS, handleFocus);\n      Frames.removeEventHandler(Frames.Events.CARD_TOKENIZED, handleCardTokenized);\n      Frames.removeEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED, handleCardTokenizedFailed);\n      Frames.removeEventHandler(Frames.Events.FRAME_VALIDATION_CHANGED, handleValidationChanged);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [form, formError, ready]);\n\n  const handleCardTokenized = ({ token } = {}) => {\n    setBusy(false);\n    if (!token) return;\n\n    setForm({});\n    setFormError({});\n    window.Frames?.init({ publicKey, ...FRAME });\n    onSuccess({ name: form?.name, token });\n  };\n\n  const handleCardTokenizedFailed = (error = {}) => {\n    setBusy(false);\n    setResponseError(error);\n    window.Frames?.enableSubmitForm();\n    onError(error);\n  };\n\n  const handleChange = (field, value = '') => {\n    setForm({ ...form, [field]: value });\n    setFormError({ ...formError, [field]: value.length === 0 });\n  };\n\n  const handleError = (field, value) => {\n    setFormError({ ...formError, [field]: value });\n  };\n\n  const handleEnter = (field) => setFocus((focus) => ({ ...focus, [field]: true }));\n\n  const handleLeave = (field) => setFocus((focus) => ({ ...focus, [field]: false }));\n\n  const handleLoad = () => {\n    window.Frames?.init({ publicKey, ...FRAME, ...getStyle() });\n    setReady(true);\n  };\n\n  const handlePress = () => {\n    const { Frames } = window || {};\n    setBusy(true);\n    setResponseError();\n    Frames.cardholder = {\n      name: form.name,\n    };\n    Frames.submitCard();\n  };\n\n  const hasError =\n    Object.values(formError).length < FIELDS_COUNT || Object.values(formError).some((value) => value === true);\n\n  return (\n    <View {...others}>\n      <Text action className={style.description}>\n        {translate(L10N.LABEL_SECURE_PAGE)}\n      </Text>\n\n      <InputField\n        label={translate(L10N.LABEL_CARD_NAME)}\n        error={formError.name}\n        focus={focus?.name}\n        success={formError.name === false}\n        value={form.name}\n      >\n        <Input\n          name=\"name\"\n          value={form.name}\n          onChange={(value) => handleChange('name', value)}\n          onEnter={() => handleEnter('name')}\n          onLeave={() => handleLeave('name')}\n          className={style.name}\n        />\n      </InputField>\n      <InputField\n        label={translate(L10N.LABEL_CARD_NUMBER)}\n        error={formError['card-number']}\n        focus={focus?.['card-number']}\n        success={formError['card-number'] === false}\n        value={form?.['card-number']}\n      >\n        <div className={styles(style.frame, 'card-number-frame')} />\n      </InputField>\n      <View row>\n        <InputField\n          label={translate(L10N.LABEL_EXPIRATION)}\n          error={formError['expiry-date']}\n          focus={focus?.['expiry-date']}\n          success={formError['expiry-date'] === false}\n          value={form?.['expiry-date']}\n        >\n          <div className={styles(style.frame, 'expiry-date-frame')} />\n        </InputField>\n\n        <InputField\n          label={translate(L10N.LABEL_CVV)}\n          error={formError['cvv']}\n          focus={focus?.['cvv']}\n          success={formError['cvv'] === false}\n          value={form?.['cvv']}\n          className={style.inputCVV}\n        >\n          <div className={styles(style.frame, 'cvv-frame')} />\n        </InputField>\n      </View>\n\n      {responseError && (\n        <Notification error small wide>\n          {translate(L10N.NOTIFICATION_ERROR_CHECKOUT)}\n        </Notification>\n      )}\n\n      <Button busy={busy} disabled={hasError} large wide onPress={handlePress} className={style.button}>\n        {translate(L10N.ACTION_PAY)}\n      </Button>\n    </View>\n  );\n};\n\nFormCheckout.displayName = 'Mirai:Payments:ButtonPayment:FormCheckout';\n\nFormCheckout.propTypes = {\n  publicKey: PropTypes.string.isRequired,\n  onError: PropTypes.func,\n  onSuccess: PropTypes.func,\n};\n"],"mappings":"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"}

package/build/components/__shared__/ButtonPayment/components/FormCheckout/FormCheckout.module.css

@@ -16,6 +16,7 @@
   direction: var(--mirai-ui-text-direction);
   padding-top: var(--mirai-ui-space-S) !important;
   outline: 0;
+  height: calc(var(--mirai-ui-space-XS) + var(--mirai-ui-space-L));
 }
 
 .frame::placeholder {

package/build/components/__shared__/ButtonPayment/components/FormPaycomet/FormPaycomet.js

@@ -16,8 +16,7 @@ var _InputField = require("../InputField");
 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 }; }
-/* eslint-disable react/no-unknown-property */
-
+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); } /* eslint-disable react/no-unknown-property */
 const FormPaycomet = _ref => {
   let {
     currencyDecimals = 2,
@@ -101,19 +100,20 @@ const FormPaycomet = _ref => {
     const {
       inputColor,
       inputFontSize,
-      inputNumberValueWidth,
       font
     } = _ui.Theme.get();
     return {
-      cvv: "border:0px;color:".concat(inputColor, ";font-family:").concat(font, ";font-size:").concat(inputFontSize, ";height:").concat(inputNumberValueWidth, ";padding:0!important;"),
-      card_number: "border:0px;background-image:none;color:".concat(inputColor, ";font-family:").concat(font, ";font-size:").concat(inputFontSize, ";height:").concat(inputNumberValueWidth, ";outline: 0;padding:0!important;")
+      card_number: "border:0px;background-image:none;color:".concat(inputColor, ";font-family:").concat(font, ";font-size:").concat(inputFontSize, ";outline: 0;padding:0!important;"),
+      cvv: "border:0px;color:".concat(inputColor, ";font-family:").concat(font, ";font-size:").concat(inputFontSize, ";padding:0!important;")
     };
   };
   const {
     card_number,
     cvv
   } = getInlineStyle();
-  return /*#__PURE__*/_react.default.createElement(_ui.View, others, /*#__PURE__*/_react.default.createElement(_ui.Text, {
+  return /*#__PURE__*/_react.default.createElement(_ui.View, _extends({}, others, {
+    className: (0, _ui.styles)(style.container, others.className)
+  }), /*#__PURE__*/_react.default.createElement(_ui.Text, {
     action: true
   }, translate(_FormPaycomet2.L10N.LABEL_SECURE_PAGE)), /*#__PURE__*/_react.default.createElement("form", {
     ref: formRef,
@@ -135,12 +135,14 @@ const FormPaycomet = _ref => {
     name: "paytpvToken",
     value: ""
   }), /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
-    label: translate(_FormPaycomet2.L10N.LABEL_CARD_NAME)
+    label: translate(_FormPaycomet2.L10N.LABEL_CARD_NAME),
+    value: "value"
   }, /*#__PURE__*/_react.default.createElement("input", {
     "data-paycomet": "cardHolderName",
     className: style.inputName
   })), /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
-    label: translate(_FormPaycomet2.L10N.LABEL_CARD_NUMBER)
+    label: translate(_FormPaycomet2.L10N.LABEL_CARD_NUMBER),
+    value: "value"
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "paycomet-pan",
     className: style.inputName
@@ -151,7 +153,8 @@ const FormPaycomet = _ref => {
   })), /*#__PURE__*/_react.default.createElement(_ui.View, {
     row: true
   }, /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
-    label: translate(_FormPaycomet2.L10N.LABEL_EXPIRATION)
+    label: translate(_FormPaycomet2.L10N.LABEL_EXPIRATION),
+    value: "value"
   }, /*#__PURE__*/_react.default.createElement(_ui.View, {
     row: true,
     className: style.inputName
@@ -171,7 +174,8 @@ const FormPaycomet = _ref => {
     className: style.inputExpire
   }))), /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
     label: translate(_FormPaycomet2.L10N.LABEL_CVV),
-    className: style.inputCVV
+    className: style.inputCVV,
+    value: "value"
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "paycomet-cvc2",
     "data-paycomet": "cvc2",
@@ -187,8 +191,7 @@ const FormPaycomet = _ref => {
     preventDefault: false
   }, translate(_FormPaycomet2.L10N.ACTION_PAY))), error && /*#__PURE__*/_react.default.createElement(_ui.Notification, {
     error: true,
-    wide: true,
-    className: style.error
+    wide: true
   }, error), /*#__PURE__*/_react.default.createElement("div", {
     ref: errorRef,
     id: "paymentErrorMsg",

package/build/components/__shared__/ButtonPayment/components/FormPaycomet/FormPaycomet.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormPaycomet.js","names":["_locale","require","_ui","_propTypes","_interopRequireDefault","_react","_interopRequireWildcard","_FormPaycomet","_FormPaycomet2","style","_helpers","_InputField","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","FormPaycomet","_ref","currencyDecimals","info","amount","publicKey","process","env","PROVIDER_PAYCOMET_PUBLICKEY","onSuccess","others","locale","translate","useLocale","formRef","useRef","tokenRef","errorRef","useMutationObserver","current","value","nextToken","document","getElementById","length","setToken","attributes","textContent","nextError","setError","setBusy","busy","useState","token","error","expire","setExpire","useEffect","exists","SCRIPT_ID","script","createElement","id","src","concat","PROVIDER_PAYCOMET_SCRIPT","split","head","appendChild","el","parentNode","removeChild","handleExpireChange","event","name","target","replace","handleCardTokenized","preventDefault","handlePress","stopPropagation","submit","getInlineStyle","inputColor","inputFontSize","inputNumberValueWidth","font","Theme","cvv","card_number","View","Text","action","L10N","LABEL_SECURE_PAGE","ref","onSubmit","type","Math","pow","toFixed","InputField","label","LABEL_CARD_NAME","className","inputName","LABEL_CARD_NUMBER","LABEL_CARD_NUMBER_PLACEHOLDER","row","LABEL_EXPIRATION","onChange","month","maxLength","inputExpire","year","LABEL_CVV","inputCVV","Button","large","wide","onPress","ACTION_PAY","Notification","display","exports","displayName","propTypes","PropTypes","number","shape","string","isRequired","func"],"sources":["../../../../../../src/components/__shared__/ButtonPayment/components/FormPaycomet/FormPaycomet.jsx"],"sourcesContent":["/* eslint-disable react/no-unknown-property */\nimport { useLocale } from '@mirai/locale';\nimport { Button, Notification, Text, Theme, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { SCRIPT_ID } from './FormPaycomet.constants';\nimport { L10N } from './FormPaycomet.l10n';\nimport * as style from './FormPaycomet.module.css';\nimport { useMutationObserver } from './helpers';\nimport { InputField } from '../InputField';\n\nexport const FormPaycomet = ({\n  currencyDecimals = 2,\n  info: { amount } = {},\n  publicKey = process.env.PROVIDER_PAYCOMET_PUBLICKEY,\n  onSuccess = () => {},\n  ...others\n}) => {\n  const { locale, translate } = useLocale();\n\n  const formRef = useRef();\n  const tokenRef = useRef();\n  const errorRef = useRef();\n\n  useMutationObserver(\n    tokenRef.current,\n    () => {\n      const { value: nextToken = '' } = document.getElementById('paytpvToken') || {};\n      if (nextToken.length > 0) setToken(nextToken);\n    },\n    { attributes: true },\n  );\n\n  useMutationObserver(errorRef.current, () => {\n    const { textContent: nextError = '' } = document.getElementById('paymentErrorMsg') || {};\n    if (nextError?.length > 0) {\n      setError(nextError);\n      setBusy(false);\n    }\n  });\n\n  const [busy, setBusy] = useState(false);\n  const [token, setToken] = useState();\n  const [error, setError] = useState();\n  const [expire, setExpire] = useState({});\n\n  useEffect(() => {\n    const exists = document.getElementById(SCRIPT_ID);\n    if (!exists) {\n      const script = document.createElement('script');\n      script.id = SCRIPT_ID;\n      script.src = `${process.env.PROVIDER_PAYCOMET_SCRIPT}?lang=${locale.split('-')[0]}`;\n\n      document.head.appendChild(script);\n    }\n    return () => {\n      const el = document.getElementById(SCRIPT_ID);\n      if (el) el.parentNode.removeChild(el);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (!token) return;\n\n    setBusy(false);\n    setError();\n    onSuccess({ token });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [token]);\n\n  const handleExpireChange = (event) => {\n    const { name, value = '' } = event.target || {};\n    setExpire({ ...expire, [name]: value.replace(/[^\\d]/g, '') });\n  };\n\n  const handleCardTokenized = (event) => {\n    event.preventDefault();\n    setBusy(true);\n  };\n\n  const handlePress = (event) => {\n    event.stopPropagation();\n    formRef.current.submit();\n  };\n\n  const getInlineStyle = () => {\n    const { inputColor, inputFontSize, inputNumberValueWidth, font } = Theme.get();\n    return {\n      cvv: `border:0px;color:${inputColor};font-family:${font};font-size:${inputFontSize};height:${inputNumberValueWidth};padding:0!important;`,\n      card_number: `border:0px;background-image:none;color:${inputColor};font-family:${font};font-size:${inputFontSize};height:${inputNumberValueWidth};outline: 0;padding:0!important;`,\n    };\n  };\n  const { card_number, cvv } = getInlineStyle();\n\n  return (\n    <View {...others}>\n      <Text action>{translate(L10N.LABEL_SECURE_PAGE)}</Text>\n      <form ref={formRef} id=\"paycometPaymentForm\" onSubmit={handleCardTokenized} action=\"javascript:void(0)\">\n        <input type=\"hidden\" name=\"amount\" value={(amount * Math.pow(10, currencyDecimals)).toFixed()} />\n        <input type=\"hidden\" data-paycomet=\"jetID\" value={publicKey} />\n        <input ref={tokenRef} type=\"hidden\" id=\"paytpvToken\" name=\"paytpvToken\" value=\"\" />\n        <InputField label={translate(L10N.LABEL_CARD_NAME)}>\n          <input data-paycomet=\"cardHolderName\" className={style.inputName} />\n        </InputField>\n        <InputField label={translate(L10N.LABEL_CARD_NUMBER)}>\n          <div id=\"paycomet-pan\" className={style.inputName}></div>\n          <input\n            paycomet-style={card_number}\n            paycomet-name=\"pan\"\n            paycomet-placeholder={translate(L10N.LABEL_CARD_NUMBER_PLACEHOLDER)}\n          />\n        </InputField>\n        <View row>\n          <InputField label={translate(L10N.LABEL_EXPIRATION)}>\n            <View row className={style.inputName}>\n              <input\n                onChange={handleExpireChange}\n                value={expire.month}\n                name=\"month\"\n                data-paycomet=\"dateMonth\"\n                maxLength={2}\n                className={style.inputExpire}\n              />\n              /\n              <input\n                onChange={handleExpireChange}\n                value={expire.year}\n                name=\"year\"\n                data-paycomet=\"dateYear\"\n                maxLength={2}\n                className={style.inputExpire}\n              />\n            </View>\n          </InputField>\n\n          <InputField label={translate(L10N.LABEL_CVV)} className={style.inputCVV}>\n            <div id=\"paycomet-cvc2\" data-paycomet=\"cvc2\" className={style.inputName}></div>\n            <input paycomet-name=\"cvc2\" paycomet-style={cvv} />\n          </InputField>\n        </View>\n        <Button busy={busy} large wide onPress={handlePress} preventDefault={false}>\n          {translate(L10N.ACTION_PAY)}\n        </Button>\n      </form>\n      {error && (\n        <Notification error wide className={style.error}>\n          {error}\n        </Notification>\n      )}\n      <div ref={errorRef} id=\"paymentErrorMsg\" style={{ display: 'none' }}></div>\n    </View>\n  );\n};\n\nFormPaycomet.displayName = 'Mirai:Payments:ButtonPayment:FormPaycomet';\n\nFormPaycomet.propTypes = {\n  currencyDecimals: PropTypes.number,\n  info: PropTypes.shape({\n    amount: PropTypes.number,\n  }),\n  publicKey: PropTypes.string.isRequired,\n  onSuccess: PropTypes.func,\n};\n"],"mappings":"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"}
+{"version":3,"file":"FormPaycomet.js","names":["_locale","require","_ui","_propTypes","_interopRequireDefault","_react","_interopRequireWildcard","_FormPaycomet","_FormPaycomet2","style","_helpers","_InputField","_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","FormPaycomet","_ref","currencyDecimals","info","amount","publicKey","process","env","PROVIDER_PAYCOMET_PUBLICKEY","onSuccess","others","locale","translate","useLocale","formRef","useRef","tokenRef","errorRef","useMutationObserver","current","value","nextToken","document","getElementById","setToken","attributes","textContent","nextError","setError","setBusy","busy","useState","token","error","expire","setExpire","useEffect","exists","SCRIPT_ID","script","createElement","id","src","concat","PROVIDER_PAYCOMET_SCRIPT","split","head","appendChild","el","parentNode","removeChild","handleExpireChange","event","name","replace","handleCardTokenized","preventDefault","handlePress","stopPropagation","submit","getInlineStyle","inputColor","inputFontSize","font","Theme","card_number","cvv","View","className","styles","container","Text","action","L10N","LABEL_SECURE_PAGE","ref","onSubmit","type","Math","pow","toFixed","InputField","label","LABEL_CARD_NAME","inputName","LABEL_CARD_NUMBER","LABEL_CARD_NUMBER_PLACEHOLDER","row","LABEL_EXPIRATION","onChange","month","maxLength","inputExpire","year","LABEL_CVV","inputCVV","Button","large","wide","onPress","ACTION_PAY","Notification","display","exports","displayName","propTypes","PropTypes","number","shape","string","isRequired","func"],"sources":["../../../../../../src/components/__shared__/ButtonPayment/components/FormPaycomet/FormPaycomet.jsx"],"sourcesContent":["/* eslint-disable react/no-unknown-property */\nimport { useLocale } from '@mirai/locale';\nimport { Button, Notification, styles, Text, Theme, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { SCRIPT_ID } from './FormPaycomet.constants';\nimport { L10N } from './FormPaycomet.l10n';\nimport * as style from './FormPaycomet.module.css';\nimport { useMutationObserver } from './helpers';\nimport { InputField } from '../InputField';\n\nexport const FormPaycomet = ({\n  currencyDecimals = 2,\n  info: { amount } = {},\n  publicKey = process.env.PROVIDER_PAYCOMET_PUBLICKEY,\n  onSuccess = () => {},\n  ...others\n}) => {\n  const { locale, translate } = useLocale();\n\n  const formRef = useRef();\n  const tokenRef = useRef();\n  const errorRef = useRef();\n\n  useMutationObserver(\n    tokenRef.current,\n    () => {\n      const { value: nextToken = '' } = document.getElementById('paytpvToken') || {};\n      if (nextToken.length > 0) setToken(nextToken);\n    },\n    { attributes: true },\n  );\n\n  useMutationObserver(errorRef.current, () => {\n    const { textContent: nextError = '' } = document.getElementById('paymentErrorMsg') || {};\n    if (nextError?.length > 0) {\n      setError(nextError);\n      setBusy(false);\n    }\n  });\n\n  const [busy, setBusy] = useState(false);\n  const [token, setToken] = useState();\n  const [error, setError] = useState();\n  const [expire, setExpire] = useState({});\n\n  useEffect(() => {\n    const exists = document.getElementById(SCRIPT_ID);\n    if (!exists) {\n      const script = document.createElement('script');\n      script.id = SCRIPT_ID;\n      script.src = `${process.env.PROVIDER_PAYCOMET_SCRIPT}?lang=${locale.split('-')[0]}`;\n\n      document.head.appendChild(script);\n    }\n    return () => {\n      const el = document.getElementById(SCRIPT_ID);\n      if (el) el.parentNode.removeChild(el);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (!token) return;\n\n    setBusy(false);\n    setError();\n    onSuccess({ token });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [token]);\n\n  const handleExpireChange = (event) => {\n    const { name, value = '' } = event.target || {};\n    setExpire({ ...expire, [name]: value.replace(/[^\\d]/g, '') });\n  };\n\n  const handleCardTokenized = (event) => {\n    event.preventDefault();\n    setBusy(true);\n  };\n\n  const handlePress = (event) => {\n    event.stopPropagation();\n    formRef.current.submit();\n  };\n\n  const getInlineStyle = () => {\n    const { inputColor, inputFontSize, font } = Theme.get();\n\n    return {\n      card_number: `border:0px;background-image:none;color:${inputColor};font-family:${font};font-size:${inputFontSize};outline: 0;padding:0!important;`,\n      cvv: `border:0px;color:${inputColor};font-family:${font};font-size:${inputFontSize};padding:0!important;`,\n    };\n  };\n  const { card_number, cvv } = getInlineStyle();\n\n  return (\n    <View {...others} className={styles(style.container, others.className)}>\n      <Text action>{translate(L10N.LABEL_SECURE_PAGE)}</Text>\n      <form ref={formRef} id=\"paycometPaymentForm\" onSubmit={handleCardTokenized} action=\"javascript:void(0)\">\n        <input type=\"hidden\" name=\"amount\" value={(amount * Math.pow(10, currencyDecimals)).toFixed()} />\n        <input type=\"hidden\" data-paycomet=\"jetID\" value={publicKey} />\n        <input ref={tokenRef} type=\"hidden\" id=\"paytpvToken\" name=\"paytpvToken\" value=\"\" />\n        <InputField label={translate(L10N.LABEL_CARD_NAME)} value=\"value\">\n          <input data-paycomet=\"cardHolderName\" className={style.inputName} />\n        </InputField>\n        <InputField label={translate(L10N.LABEL_CARD_NUMBER)} value=\"value\">\n          <div id=\"paycomet-pan\" className={style.inputName}></div>\n          <input\n            paycomet-style={card_number}\n            paycomet-name=\"pan\"\n            paycomet-placeholder={translate(L10N.LABEL_CARD_NUMBER_PLACEHOLDER)}\n          />\n        </InputField>\n        <View row>\n          <InputField label={translate(L10N.LABEL_EXPIRATION)} value=\"value\">\n            <View row className={style.inputName}>\n              <input\n                onChange={handleExpireChange}\n                value={expire.month}\n                name=\"month\"\n                data-paycomet=\"dateMonth\"\n                maxLength={2}\n                className={style.inputExpire}\n              />\n              /\n              <input\n                onChange={handleExpireChange}\n                value={expire.year}\n                name=\"year\"\n                data-paycomet=\"dateYear\"\n                maxLength={2}\n                className={style.inputExpire}\n              />\n            </View>\n          </InputField>\n\n          <InputField label={translate(L10N.LABEL_CVV)} className={style.inputCVV} value=\"value\">\n            <div id=\"paycomet-cvc2\" data-paycomet=\"cvc2\" className={style.inputName}></div>\n            <input paycomet-name=\"cvc2\" paycomet-style={cvv} />\n          </InputField>\n        </View>\n        <Button busy={busy} large wide onPress={handlePress} preventDefault={false}>\n          {translate(L10N.ACTION_PAY)}\n        </Button>\n      </form>\n      {error && (\n        <Notification error wide>\n          {error}\n        </Notification>\n      )}\n      <div ref={errorRef} id=\"paymentErrorMsg\" style={{ display: 'none' }}></div>\n    </View>\n  );\n};\n\nFormPaycomet.displayName = 'Mirai:Payments:ButtonPayment:FormPaycomet';\n\nFormPaycomet.propTypes = {\n  currencyDecimals: PropTypes.number,\n  info: PropTypes.shape({\n    amount: PropTypes.number,\n  }),\n  publicKey: PropTypes.string.isRequired,\n  onSuccess: PropTypes.func,\n};\n"],"mappings":"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"}

package/build/components/__shared__/ButtonPayment/components/FormPaycomet/FormPaycomet.module.css

@@ -1,5 +1,5 @@
-.error {
-  margin-top: var(--mirai-ui-space-M);
+.container {
+  gap: var(--mirai-ui-space-M);
 }
 
 .inputCVV {
@@ -21,6 +21,6 @@
   color: var(--mirai-ui-input-color);
   font-family: var(--mirai-ui-input-font);
   font-size: var(--mirai-ui-input-font-size);
-  height: calc(var(--mirai-ui-input-min-height) - var(--mirai-ui-space-S)) !important;
+  height: var(--mirai-ui-space-L) !important;
   outline: 0;
-}
+}

package/build/components/__shared__/ButtonPayment/components/FormPaycomet/__tests__/__snapshots__/FormPaycomet.test.js.snap

@@ -63,7 +63,7 @@ exports[`component:<FormCheckout> renders 1`] = `
           <input
             paycomet-name="pan"
             paycomet-placeholder="payments.label.card_number_placeholder"
-            paycomet-style="border:0px;background-image:none;color:undefined;font-family:undefined;font-size:undefined;height:undefined;outline: 0;padding:0!important;"
+            paycomet-style="border:0px;background-image:none;color:undefined;font-family:undefined;font-size:undefined;outline: 0;padding:0!important;"
           />
         </div>
       </div>
@@ -117,7 +117,7 @@ exports[`component:<FormCheckout> renders 1`] = `
             />
             <input
               paycomet-name="cvc2"
-              paycomet-style="border:0px;color:undefined;font-family:undefined;font-size:undefined;height:undefined;padding:0!important;"
+              paycomet-style="border:0px;color:undefined;font-family:undefined;font-size:undefined;padding:0!important;"
             />
           </div>
         </div>

package/build/components/__shared__/ButtonPayment/components/InputField/InputField.js

@@ -16,19 +16,21 @@ const InputField = _ref => {
   let {
     children,
     error,
+    focus,
     hint,
     label,
     showRequired = false,
     success,
+    value,
     ...others
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_ui.View, _extends({}, others, {
     className: (0, _ui.styles)(style.container, others.className)
   }), /*#__PURE__*/_react.default.createElement(_ui.View, {
-    className: (0, _ui.styles)(style.border, error && style.error)
+    className: (0, _ui.styles)(style.border, error && style.error, focus && style.focus)
   }, label && /*#__PURE__*/_react.default.createElement(_ui.Text, {
     small: true,
-    className: (0, _ui.styles)(style.label)
+    className: (0, _ui.styles)(style.label, (focus || error || value !== undefined && ((value === null || value === void 0 ? void 0 : value.length) > 0 || typeof value === 'number')) && style.withValue)
   }, label, showRequired && /*#__PURE__*/_react.default.createElement("span", {
     className: style.required
   }, " *")), children, (error || success) && /*#__PURE__*/_react.default.createElement(_ui.Icon, {
@@ -36,7 +38,7 @@ const InputField = _ref => {
     className: (0, _ui.styles)(style.icon, error && style.error, success && style.success)
   })), hint && /*#__PURE__*/_react.default.createElement(_ui.Text, {
     small: true,
-    className: (0, _ui.styles)(style.text, style.hint)
+    className: style.hint
   }, hint));
 };
 exports.InputField = InputField;
@@ -44,9 +46,11 @@ InputField.displayName = 'Mirai:Payments:InputField';
 InputField.propTypes = {
   children: _propTypes.default.node.isRequired,
   error: _propTypes.default.bool,
+  focus: _propTypes.default.bool,
   hint: _propTypes.default.string,
   label: _propTypes.default.string.isRequired,
   showRequired: _propTypes.default.bool,
-  success: _propTypes.default.bool
+  success: _propTypes.default.bool,
+  value: _propTypes.default.string
 };
 //# sourceMappingURL=InputField.js.map

package/build/components/__shared__/ButtonPayment/components/InputField/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","names":["_ui","require","_propTypes","_interopRequireDefault","_react","style","_interopRequireWildcard","_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","InputField","_ref","children","error","hint","label","showRequired","success","others","createElement","View","className","styles","container","border","Text","small","required","Icon","value","ICON","ERROR","SUCCESS","icon","text","exports","displayName","propTypes","PropTypes","node","isRequired","bool","string"],"sources":["../../../../../../src/components/__shared__/ButtonPayment/components/InputField/InputField.jsx"],"sourcesContent":["import { Icon, ICON, styles, Text, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nimport * as style from './InputField.module.css';\n\nconst InputField = ({ children, error, hint, label, showRequired = false, success, ...others }) => (\n  <View {...others} className={styles(style.container, others.className)}>\n    <View className={styles(style.border, error && style.error)}>\n      {label && (\n        <Text small className={styles(style.label)}>\n          {label}\n          {showRequired && <span className={style.required}> *</span>}\n        </Text>\n      )}\n      {children}\n      {(error || success) && (\n        <Icon\n          value={error ? ICON.ERROR : ICON.SUCCESS}\n          className={styles(style.icon, error && style.error, success && style.success)}\n        />\n      )}\n    </View>\n    {hint && (\n      <Text small className={styles(style.text, style.hint)}>\n        {hint}\n      </Text>\n    )}\n  </View>\n);\n\nInputField.displayName = 'Mirai:Payments:InputField';\n\nInputField.propTypes = {\n  children: PropTypes.node.isRequired,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  label: PropTypes.string.isRequired,\n  showRequired: PropTypes.bool,\n  success: PropTypes.bool,\n};\n\nexport { InputField };\n"],"mappings":"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"}
+{"version":3,"file":"InputField.js","names":["_ui","require","_propTypes","_interopRequireDefault","_react","style","_interopRequireWildcard","_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","InputField","_ref","children","error","focus","hint","label","showRequired","success","value","others","createElement","View","className","styles","container","border","Text","small","undefined","withValue","required","Icon","ICON","ERROR","SUCCESS","icon","exports","displayName","propTypes","PropTypes","node","isRequired","bool","string"],"sources":["../../../../../../src/components/__shared__/ButtonPayment/components/InputField/InputField.jsx"],"sourcesContent":["import { Icon, ICON, styles, Text, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nimport * as style from './InputField.module.css';\n\nconst InputField = ({ children, error, focus, hint, label, showRequired = false, success, value, ...others }) => (\n  <View {...others} className={styles(style.container, others.className)}>\n    <View className={styles(style.border, error && style.error, focus && style.focus)}>\n      {label && (\n        <Text\n          small\n          className={styles(\n            style.label,\n            (focus || error || (value !== undefined && (value?.length > 0 || typeof value === 'number'))) &&\n              style.withValue,\n          )}\n        >\n          {label}\n          {showRequired && <span className={style.required}> *</span>}\n        </Text>\n      )}\n      {children}\n      {(error || success) && (\n        <Icon\n          value={error ? ICON.ERROR : ICON.SUCCESS}\n          className={styles(style.icon, error && style.error, success && style.success)}\n        />\n      )}\n    </View>\n    {hint && (\n      <Text small className={style.hint}>\n        {hint}\n      </Text>\n    )}\n  </View>\n);\n\nInputField.displayName = 'Mirai:Payments:InputField';\n\nInputField.propTypes = {\n  children: PropTypes.node.isRequired,\n  error: PropTypes.bool,\n  focus: PropTypes.bool,\n  hint: PropTypes.string,\n  label: PropTypes.string.isRequired,\n  showRequired: PropTypes.bool,\n  success: PropTypes.bool,\n  value: PropTypes.string,\n};\n\nexport { InputField };\n"],"mappings":"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"}

package/build/components/__shared__/ButtonPayment/components/InputField/InputField.module.css

@@ -1,11 +1,15 @@
 .container {
   margin-bottom: var(--mirai-ui-space-M);
   width: 100%;
+  min-height: var(--mirai-ui-input-min-height);
 }
 
 .border {
   border: var(--mirai-ui-input-text-border);
   border-radius: var(--mirai-ui-input-text-radius);
+  padding-left: calc(var(--mirai-ui-input-text-padding-x) / 2);
+  padding-right: calc(var(--mirai-ui-input-text-padding-x) / 2);
+  transition: box-shadow var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
   position: relative;
 }
 
@@ -13,14 +17,24 @@
   border-color: var(--mirai-ui-input-text-error);
 }
 
+.border.focus:not(.error) {
+  border-color: var(--mirai-ui-input-text-focus);
+  box-shadow: var(--mirai-ui-focus-shadow);
+}
+
+.border.focus.error {
+  box-shadow: var(--mirai-ui-focus-shadow-error);
+}
+
 .border > *:not(.label):not(.icon) {
-  border-radius: var(--mirai-ui-input-text-radius);
-  height: var(--mirai-ui-input-min-height);
-  padding: var(--mirai-ui-space-S) var(--mirai-ui-input-text-padding-x) 0 var(--mirai-ui-input-text-padding-x);
+  padding: calc(var(--mirai-ui-input-text-padding-y) + var(--mirai-ui-space-S))
+    calc(var(--mirai-ui-input-text-padding-x) / 2) calc(var(--mirai-ui-input-text-padding-x) / 2)
+    calc(var(--mirai-ui-input-text-padding-x) / 2);
 }
 
 .hint {
   color: var(--mirai-ui-content-light);
+  margin: calc(var(--mirai-ui-input-text-padding-y) / 4) var(--mirai-ui-input-text-padding-x);
 }
 
 .icon {
@@ -43,18 +57,39 @@
   color: var(--mirai-ui-success);
 }
 
+.withLabel {
+  padding-top: calc(var(--mirai-ui-input-text-padding-y) + var(--mirai-ui-space-S));
+}
+
+.focus .label {
+  color: var(--mirai-ui-input-text-focus);
+}
+
 .label {
-  color: var(--mirai-ui-content-light);
+  color: var(--mirai-ui-input-disabled);
+  background-color: var(--mirai-ui-input-background);
+  font-size: var(--mirai-ui-input-font-size);
   left: var(--mirai-ui-input-text-padding-x);
+  line-height: calc(var(--mirai-ui-input-min-height) - var(--mirai-ui-border-width));
+  overflow: hidden;
   pointer-events: none;
   position: absolute;
-  top: var(--mirai-ui-space-XS);
+  right: calc(var(--mirai-ui-input-text-padding-x) / 2);
+  text-overflow: ellipsis;
+  top: var(--mirai-ui-border-width);
+  transition: font-size var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
+    line-height var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
+    right var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
+    top var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+  white-space: nowrap;
 }
 
-.text {
-  margin: calc(var(--mirai-ui-input-text-padding-y) / 4) var(--mirai-ui-input-text-padding-x);
+.label.withValue {
+  font-size: var(--mirai-ui-font-size-small);
+  line-height: var(--mirai-ui-line-height-small);
+  top: calc(var(--mirai-ui-space-XXS) + var(--mirai-ui-border-width));
 }
 
-.text .required {
+.label .required {
   color: var(--mirai-ui-error);
-}
+}

package/build/components/__shared__/Card/Card.js

@@ -14,16 +14,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 Card = _ref => {
   let {
+    disabled,
+    focus,
+    rowMode,
     ...others
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_ui.View, _extends({}, others, {
-    className: (0, _ui.styles)(style.card, others.className)
+    className: (0, _ui.styles)(style.card, disabled && style.disabled, !disabled && focus && style.focus, rowMode && style.rowMode, others.className)
   }));
 };
 exports.Card = Card;
 Card.displayName = 'Mirai:Core:Card';
 Card.propTypes = {
   children: _propTypes.default.node,
-  className: _propTypes.default.any
+  className: _propTypes.default.any,
+  disabled: _propTypes.default.bool,
+  focus: _propTypes.default.bool,
+  rowMode: _propTypes.default.bool
 };
 //# sourceMappingURL=Card.js.map