@wireapp/react-ui-kit 8.14.0 → 8.14.1

package/src/Form/Checkbox.js

@@ -1,146 +1,91 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CheckboxLabel = exports.Checkbox = void 0;
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = require("@emotion/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _Text = require("../Text");
-
-var _util = require("../util");
-
-var _Input = require("./Input");
-
-var _excluded = ["id", "children", "style", "disabled", "wrapperCSS"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var filterStyledLabelProps = function filterStyledLabelProps(props) {
-  return (0, _util.filterProps)(props, ['markInvalid']);
+/*
+ * Wire
+ * Copyright (C) 2018 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
-
-var StyledLabel = function StyledLabel(props) {
-  var disabled = props.disabled,
-      markInvalid = props.markInvalid,
-      _props$aligncenter = props.aligncenter,
-      aligncenter = _props$aligncenter === void 0 ? false : _props$aligncenter;
-  return (0, _react.jsx)("label", (0, _extends2["default"])({
-    css: function css(theme) {
-      var _objectSpread2, _objectSpread3;
-
-      return _objectSpread(_objectSpread((_objectSpread2 = {}, (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME, ":checked + &::before"), {
-        background: "".concat(disabled ? theme.Checkbox.disablecheckedBgColor : theme.general.primaryColor),
-        borderColor: theme.general.primaryColor
-      }), (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME, ":checked + & > svg"), {
-        fill: theme.general.backgroundColor
-      }), (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME, " + & > svg"), {
-        fill: 'none',
-        position: 'absolute',
-        left: '0.25rem',
-        top: '0.25rem'
-      }), _objectSpread2), !disabled && (0, _defineProperty2["default"])({}, ".".concat(_Input.INPUT_CLASSNAME, ":hover + &::before"), {
-        borderColor: theme.general.primaryColor
-      })), {}, (_objectSpread3 = {}, (0, _defineProperty2["default"])(_objectSpread3, ".".concat(_Input.INPUT_CLASSNAME, " + &::before"), _objectSpread(_objectSpread({
-        background: disabled ? theme.Checkbox.disableBgColor : theme.Checkbox.background
-      }, !disabled ? {
-        border: markInvalid ? "2px solid ".concat(theme.Checkbox.invalidBorderColor) : "2px solid ".concat(theme.Checkbox.border)
-      } : {
-        border: "2px solid ".concat(theme.Checkbox.disableBorderColor)
-      }), {}, {
-        borderRadius: '3px',
-        boxSizing: 'border-box',
-        content: '""',
-        display: 'inline-block',
-        width: '22px',
-        height: '22px',
-        lineHeight: 1.4,
-        margin: '0 8px 0 0px',
-        color: theme.general.color
-      })), (0, _defineProperty2["default"])(_objectSpread3, "position", 'relative'), (0, _defineProperty2["default"])(_objectSpread3, "margin", '0 0 0 -16px'), (0, _defineProperty2["default"])(_objectSpread3, "width", aligncenter ? 'auto' : '100%'), (0, _defineProperty2["default"])(_objectSpread3, "lineHeight", 1.4), (0, _defineProperty2["default"])(_objectSpread3, "display", 'flex'), (0, _defineProperty2["default"])(_objectSpread3, "opacity", disabled ? 0.56 : 1), (0, _defineProperty2["default"])(_objectSpread3, "cursor", disabled ? 'not-allowed' : 'pointer'), (0, _defineProperty2["default"])(_objectSpread3, "borderRadius", '4px'), _objectSpread3));
-    }
-  }, filterStyledLabelProps(props)), props.children, (0, _react.jsx)("svg", {
-    width: "15",
-    height: "13",
-    viewBox: "0 0 16 13",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, (0, _react.jsx)("path", {
-    d: "M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z"
-  })));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxLabel = exports.Checkbox = void 0;
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const Text_1 = require("../Text");
+const util_1 = require("../util");
+const Input_1 = require("./Input");
+const filterStyledLabelProps = (props) => (0, util_1.filterProps)(props, ['markInvalid']);
+const StyledLabel = (props) => {
+    const { disabled, markInvalid, aligncenter = false } = props;
+    return ((0, react_1.jsx)("label", Object.assign({ css: (theme) => (Object.assign(Object.assign({ [`.${Input_1.INPUT_CLASSNAME}:checked + &::before`]: {
+                background: `${disabled ? theme.Checkbox.disablecheckedBgColor : theme.general.primaryColor}`,
+                borderColor: theme.general.primaryColor,
+            }, [`.${Input_1.INPUT_CLASSNAME}:checked + & > svg`]: {
+                fill: theme.general.backgroundColor,
+            }, [`.${Input_1.INPUT_CLASSNAME} + & > svg`]: {
+                fill: 'none',
+                position: 'absolute',
+                left: '0.25rem',
+                top: '0.25rem',
+            } }, (!disabled && {
+            [`.${Input_1.INPUT_CLASSNAME}:hover + &::before`]: {
+                borderColor: theme.general.primaryColor,
+            },
+        })), { [`.${Input_1.INPUT_CLASSNAME} + &::before`]: Object.assign(Object.assign({ background: disabled ? theme.Checkbox.disableBgColor : theme.Checkbox.background }, (!disabled
+                ? {
+                    border: markInvalid
+                        ? `2px solid ${theme.Checkbox.invalidBorderColor}`
+                        : `2px solid ${theme.Checkbox.border}`,
+                }
+                : {
+                    border: `2px solid ${theme.Checkbox.disableBorderColor}`,
+                })), { borderRadius: '3px', boxSizing: 'border-box', content: '""', display: 'inline-block', width: '22px', height: '22px', lineHeight: 1.4, margin: '0 8px 0 0px', color: theme.general.color }), position: 'relative', margin: '0 0 0 -16px', width: aligncenter ? 'auto' : '100%', lineHeight: 1.4, display: 'flex', opacity: disabled ? 0.56 : 1, cursor: disabled ? 'not-allowed' : 'pointer', borderRadius: '4px' })) }, filterStyledLabelProps(props)),
+        props.children,
+        (0, react_1.jsx)("svg", { width: "15", height: "13", viewBox: "0 0 16 13", xmlns: "http://www.w3.org/2000/svg" },
+            (0, react_1.jsx)("path", { d: "M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z" }))));
 };
-
-var filterCheckboxProps = function filterCheckboxProps(props) {
-  return (0, _util.filterProps)(props, ['markInvalid']);
-}; // We use Math.random..., because some of apps doesn't migrated to newest version of React.
-
-
-var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref) {
-  var _ref2$id = _ref2.id,
-      id = _ref2$id === void 0 ? Math.random().toString() : _ref2$id,
-      children = _ref2.children,
-      style = _ref2.style,
-      disabled = _ref2.disabled,
-      _ref2$wrapperCSS = _ref2.wrapperCSS,
-      wrapperCSS = _ref2$wrapperCSS === void 0 ? {} : _ref2$wrapperCSS,
-      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
-  return (0, _react.jsx)("div", {
-    css: function css(theme) {
-      return _objectSpread((0, _defineProperty2["default"])({
-        alignItems: 'center',
-        display: 'flex',
-        justifyContent: 'flex-start',
-        position: 'relative',
-        left: '-0.3rem'
-      }, ".".concat(_Input.INPUT_CLASSNAME, ":focus-visible + label"), {
-        outline: "1px solid ".concat(theme.general.primaryColor),
-        outlineOffset: '0.4rem'
-      }), wrapperCSS);
-    },
-    style: style
-  }, (0, _react.jsx)("input", (0, _extends2["default"])({
-    type: "checkbox",
-    id: id,
-    style: {
-      height: '22px',
-      marginBottom: '0',
-      opacity: 0,
-      width: '22px',
-      cursor: disabled ? 'not-allowed' : 'pointer'
-    },
-    disabled: disabled,
-    ref: ref,
-    className: _Input.INPUT_CLASSNAME
-  }, filterCheckboxProps(props))), (0, _react.jsx)(StyledLabel, {
-    htmlFor: id,
-    disabled: disabled,
-    markInvalid: props.markInvalid,
-    aligncenter: props.aligncenter
-  }, children));
+const filterCheckboxProps = (props) => (0, util_1.filterProps)(props, ['markInvalid']);
+// We use Math.random..., because some of apps doesn't migrated to newest version of React.
+exports.Checkbox = react_2.default.forwardRef((_a, ref) => {
+    var { id = Math.random().toString(), children, style, disabled, wrapperCSS = {} } = _a, props = __rest(_a, ["id", "children", "style", "disabled", "wrapperCSS"]);
+    return ((0, react_1.jsx)("div", { css: (theme) => (Object.assign({ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', position: 'relative', left: '-0.3rem', [`.${Input_1.INPUT_CLASSNAME}:focus-visible + label`]: {
+                outline: `1px solid ${theme.general.primaryColor}`,
+                outlineOffset: '0.4rem',
+            } }, wrapperCSS)), style: style },
+        (0, react_1.jsx)("input", Object.assign({ type: "checkbox", id: id, style: {
+                height: '22px',
+                marginBottom: '0',
+                opacity: 0,
+                width: '22px',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+            }, disabled: disabled, ref: ref, className: Input_1.INPUT_CLASSNAME }, filterCheckboxProps(props))),
+        (0, react_1.jsx)(StyledLabel, { htmlFor: id, disabled: disabled, markInvalid: props.markInvalid, aligncenter: props.aligncenter }, children)));
 });
-
-exports.Checkbox = Checkbox;
-
-var CheckboxLabel = function CheckboxLabel(_ref3) {
-  var props = (0, _extends2["default"])({}, _ref3);
-  return (0, _react.jsx)(_Text.Text, (0, _extends2["default"])({
-    css: function css(theme) {
-      return _objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({}, props)));
-    }
-  }, props));
+const CheckboxLabel = (_a) => {
+    var props = __rest(_a, []);
+    return ((0, react_1.jsx)(Text_1.Text, Object.assign({ css: (theme) => (Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({}, props)))) }, props)));
 };
-
 exports.CheckboxLabel = CheckboxLabel;
 //# sourceMappingURL=Checkbox.js.map

package/src/Form/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Checkbox.tsx"],"names":["filterStyledLabelProps","props","StyledLabel","disabled","markInvalid","aligncenter","theme","INPUT_CLASSNAME","background","Checkbox","disablecheckedBgColor","general","primaryColor","borderColor","fill","backgroundColor","position","left","top","disableBgColor","border","invalidBorderColor","disableBorderColor","borderRadius","boxSizing","content","display","width","height","lineHeight","margin","color","children","filterCheckboxProps","React","forwardRef","ref","id","Math","random","toString","style","wrapperCSS","alignItems","justifyContent","outline","outlineOffset","marginBottom","opacity","cursor","CheckboxLabel"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {Theme} from '../Layout';\nimport {Text, TextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\nimport {INPUT_CLASSNAME, InputProps} from './Input';\n\nexport interface StyledLabelProps<T = HTMLLabelElement> extends React.HTMLProps<T> {\n  disabled?: boolean;\n  markInvalid?: boolean;\n  aligncenter?: boolean;\n}\n\nconst filterStyledLabelProps = (props: StyledLabelProps) => filterProps(props, ['markInvalid']);\n\nconst StyledLabel = (props: StyledLabelProps) => {\n  const {disabled, markInvalid, aligncenter = false} = props;\n  return (\n    <label\n      css={(theme: Theme) => ({\n        [`.${INPUT_CLASSNAME}:checked + &::before`]: {\n          background: `${disabled ? theme.Checkbox.disablecheckedBgColor : theme.general.primaryColor}`,\n          borderColor: theme.general.primaryColor,\n        },\n        [`.${INPUT_CLASSNAME}:checked + & > svg`]: {\n          fill: theme.general.backgroundColor,\n        },\n        [`.${INPUT_CLASSNAME} + & > svg`]: {\n          fill: 'none',\n          position: 'absolute',\n          left: '0.25rem',\n          top: '0.25rem',\n        },\n        ...(!disabled && {\n          [`.${INPUT_CLASSNAME}:hover + &::before`]: {\n            borderColor: theme.general.primaryColor,\n          },\n        }),\n        [`.${INPUT_CLASSNAME} + &::before`]: {\n          background: disabled ? theme.Checkbox.disableBgColor : theme.Checkbox.background,\n          ...(!disabled\n            ? {\n                border: markInvalid\n                  ? `2px solid ${theme.Checkbox.invalidBorderColor}`\n                  : `2px solid ${theme.Checkbox.border}`,\n              }\n            : {\n                border: `2px solid ${theme.Checkbox.disableBorderColor}`,\n              }),\n          borderRadius: '3px',\n          boxSizing: 'border-box',\n          content: '\"\"',\n          display: 'inline-block',\n          width: '22px',\n          height: '22px',\n          lineHeight: 1.4,\n          margin: '0 8px 0 0px',\n          color: theme.general.color,\n        },\n        position: 'relative',\n        margin: '0 0 0 -16px',\n        width: aligncenter ? 'auto' : '100%',\n        lineHeight: 1.4,\n        display: 'flex',\n        opacity: disabled ? 0.56 : 1,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        borderRadius: '4px',\n      })}\n      {...filterStyledLabelProps(props)}\n    >\n      {props.children}\n      <svg width=\"15\" height=\"13\" viewBox=\"0 0 16 13\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z\" />\n      </svg>\n    </label>\n  );\n};\n\ninterface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {\n  id?: string;\n  aligncenter?: boolean;\n}\n\nconst filterCheckboxProps = (props: CheckboxProps) => filterProps(props, ['markInvalid']);\n\n// We use Math.random..., because some of apps doesn't migrated to newest version of React.\nexport const Checkbox: React.FC<CheckboxProps<HTMLInputElement>> = React.forwardRef<\n  HTMLInputElement,\n  CheckboxProps<HTMLInputElement>\n>(({id = Math.random().toString(), children, style, disabled, wrapperCSS = {}, ...props}, ref) => (\n  <div\n    css={(theme: Theme) => ({\n      alignItems: 'center',\n      display: 'flex',\n      justifyContent: 'flex-start',\n      position: 'relative',\n      left: '-0.3rem',\n      [`.${INPUT_CLASSNAME}:focus-visible + label`]: {\n        outline: `1px solid ${theme.general.primaryColor}`,\n        outlineOffset: '0.4rem',\n      },\n      ...wrapperCSS,\n    })}\n    style={style}\n  >\n    <input\n      type=\"checkbox\"\n      id={id}\n      style={{\n        height: '22px',\n        marginBottom: '0',\n        opacity: 0,\n        width: '22px',\n        cursor: disabled ? 'not-allowed' : 'pointer',\n      }}\n      disabled={disabled}\n      ref={ref}\n      className={INPUT_CLASSNAME}\n      {...filterCheckboxProps(props)}\n    />\n\n    <StyledLabel htmlFor={id} disabled={disabled} markInvalid={props.markInvalid} aligncenter={props.aligncenter}>\n      {children}\n    </StyledLabel>\n  </div>\n));\n\nexport type CheckboxLabelProps<T = HTMLSpanElement> = TextProps<T>;\n\nexport const CheckboxLabel = ({...props}: CheckboxLabelProps) => (\n  <Text\n    css={(theme: Theme) => ({\n      ...textStyle(theme, {\n        ...props,\n      }),\n    })}\n    {...props}\n  />\n);\n"],"file":"Checkbox.js"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["Checkbox.tsx"],"names":[],"mappings":"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"}

package/src/Form/CodeInput.js

@@ -1,206 +1,103 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+/*
+ * Wire
+ * Copyright (C) 2018 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeInput = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = require("@emotion/react");
-
-var _react2 = _interopRequireWildcard(require("react"));
-
-var _util = require("../util");
-
-var _Input = require("./Input");
-
-var _Identity = require("../Identity");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "zl1inp",
-  styles: "display:flex;justify-content:center"
-} : {
-  name: "tvpiqi-CodeInputWrapper",
-  styles: "display:flex;justify-content:center;label:CodeInputWrapper;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvZGVJbnB1dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEJJIiwiZmlsZSI6IkNvZGVJbnB1dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgUmVhY3QsIHt1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7VGhlbWV9IGZyb20gJy4uL0xheW91dCc7XG5pbXBvcnQge25vb3B9IGZyb20gJy4uL3V0aWwnO1xuaW1wb3J0IHtJbnB1dFByb3BzLCBpbnB1dFN0eWxlfSBmcm9tICcuL0lucHV0JztcbmltcG9ydCB7Q09MT1JfVjJ9IGZyb20gJy4uL0lkZW50aXR5JztcblxuY29uc3QgQ29kZUlucHV0V3JhcHBlciA9IChwcm9wczogUmVhY3QuSFRNTFByb3BzPEhUTUxEaXZFbGVtZW50PikgPT4gKFxuICA8ZGl2XG4gICAgY3NzPXt7XG4gICAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgICBqdXN0aWZ5Q29udGVudDogJ2NlbnRlcicsXG4gICAgfX1cbiAgICB7Li4ucHJvcHN9XG4gIC8+XG4pO1xuXG50eXBlIERpZ2l0SW5wdXRQcm9wczxUID0gSFRNTElucHV0RWxlbWVudD4gPSBJbnB1dFByb3BzPFQ+O1xuXG5jb25zdCBkaWdpdElucHV0U3R5bGU6IDxUPih0aGVtZTogVGhlbWUsIHByb3BzOiBEaWdpdElucHV0UHJvcHM8VD4pID0+IENTU09iamVjdCA9ICh0aGVtZSwgcHJvcHMpID0+ICh7XG4gIC4uLmlucHV0U3R5bGUodGhlbWUsIHByb3BzKSxcbiAgJyYgKyAmJzoge1xuICAgIG1hcmdpbkxlZnQ6ICdtaW4oMTlweCwgMnZ3KScsXG4gIH0sXG4gICcmOmhvdmVyJzoge1xuICAgIGJveFNoYWRvdzogYDAgMCAwIDFweCAke0NPTE9SX1YyLkdSQVlfNjB9YCxcbiAgfSxcbiAgZm9udFNpemU6ICcyNHB4JyxcbiAgbGluZUhlaWdodDogJzI4cHgnLFxuICBib3JkZXJSYWRpdXM6ICcxMnB4JyxcbiAgcGFkZGluZzogMCxcbiAgdGV4dEFsaWduOiAnY2VudGVyJyxcbiAgd2lkdGg6ICdtaW4oNDhweCwgMTN2dyknLFxuICBoZWlnaHQ6ICc1NnB4Jyxcbn0pO1xuXG5jb25zdCBEaWdpdElucHV0OiBSZWFjdC5GQzxEaWdpdElucHV0UHJvcHM8SFRNTElucHV0RWxlbWVudD4+ID0gUmVhY3QuZm9yd2FyZFJlZjxcbiAgSFRNTElucHV0RWxlbWVudCxcbiAgRGlnaXRJbnB1dFByb3BzPEhUTUxJbnB1dEVsZW1lbnQ+XG4+KChwcm9wcywgcmVmKSA9PiA8aW5wdXQgcmVmPXtyZWZ9IGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gZGlnaXRJbnB1dFN0eWxlKHRoZW1lLCBwcm9wcyl9IHsuLi5wcm9wc30gdHlwZT1cInRlbFwiIC8+KTtcblxuZXhwb3J0IGludGVyZmFjZSBDb2RlSW5wdXRQcm9wczxUID0gSFRNTElucHV0RWxlbWVudD4gZXh0ZW5kcyBJbnB1dFByb3BzPFQ+IHtcbiAgYXV0b0ZvY3VzPzogYm9vbGVhbjtcbiAgZGlnaXRzPzogbnVtYmVyO1xuICBtYXJrSW52YWxpZD86IGJvb2xlYW47XG4gIG9uQ29kZUNvbXBsZXRlPzogKGNvbXBsZXRlQ29kZT86IHN0cmluZykgPT4gdm9pZDtcbn1cblxuZXhwb3J0IGNvbnN0IENvZGVJbnB1dCA9ICh7XG4gIHN0eWxlLFxuICBkaWdpdHMgPSA2LFxuICBhdXRvRm9jdXMgPSBmYWxzZSxcbiAgbWFya0ludmFsaWQsXG4gIG9uQ29kZUNvbXBsZXRlID0gbm9vcCxcbiAgZGlzYWJsZWQsXG59OiBDb2RlSW5wdXRQcm9wcykgPT4ge1xuICBjb25zdCBbdmFsdWVzLCBzZXRWYWx1ZXNdID0gdXNlU3RhdGUoQXJyYXkoZGlnaXRzKS5maWxsKCcnKSk7XG4gIGNvbnN0IGlucHV0cyA9IEFycmF5KGRpZ2l0cyk7XG5cbiAgY29uc3QgZm9yY2VTZWxlY3Rpb24gPSAoXG4gICAgZXZlbnQ6XG4gICAgICB8IFJlYWN0Lk1vdXNlRXZlbnQ8SFRNTElucHV0RWxlbWVudD5cbiAgICAgIHwgUmVhY3QuVG91Y2hFdmVudDxIVE1MSW5wdXRFbGVtZW50PlxuICAgICAgfCBSZWFjdC5LZXlib2FyZEV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+XG4gICAgICB8IFJlYWN0LkZvY3VzRXZlbnQ8SFRNTElucHV0RWxlbWVudD4sXG4gICkgPT4ge1xuICAgIGNvbnN0IHRhcmdldCA9IGV2ZW50LnRhcmdldCBhcyBIVE1MSW5wdXRFbGVtZW50O1xuICAgIHRhcmdldC5zZWxlY3QoKTtcbiAgfTtcblxuICBjb25zdCBmb3JjZVNlbGVjdGlvblByZXZlbnREZWZhdWx0ID0gKFxuICAgIGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+IHwgUmVhY3QuVG91Y2hFdmVudDxIVE1MSW5wdXRFbGVtZW50PixcbiAgKSA9PiB7XG4gICAgZm9yY2VTZWxlY3Rpb24oZXZlbnQpO1xuICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gIH07XG5cbiAgY29uc3QgbmV4dEZpZWxkID0gKGN1cnJlbnRGaWVsZEluZGV4OiBudW1iZXIpID0+IHtcbiAgICBjb25zdCBuZXh0RmllbGRJbmRleCA9IGN1cnJlbnRGaWVsZEluZGV4ICsgMTtcbiAgICBpZiAobmV4dEZpZWxkSW5kZXggPCBkaWdpdHMpIHtcbiAgICAgIGlucHV0c1tuZXh0RmllbGRJbmRleF0uZm9jdXMoKTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgcHJldmlvdXNGaWVsZCA9IChjdXJyZW50RmllbGRJbmRleDogbnVtYmVyKSA9PiB7XG4gICAgaWYgKGN1cnJlbnRGaWVsZEluZGV4ID4gMCkge1xuICAgICAgaW5wdXRzW2N1cnJlbnRGaWVsZEluZGV4IC0gMV0uZm9jdXMoKTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3Qgc2V0VmFsdWUgPSAoZmllbGRJbmRleDogbnVtYmVyLCB2YWx1ZTogc3RyaW5nKSA9PiB7XG4gICAgaWYgKC9eWzAtOV0/JC8udGVzdCh2YWx1ZSkpIHtcbiAgICAgIGNvbnN0IHZhbHVlc0NvcHkgPSB2YWx1ZXMuc2xpY2UoKTtcbiAgICAgIHZhbHVlc0NvcHlbZmllbGRJbmRleF0gPSB2YWx1ZTtcbiAgICAgIHNldFZhbHVlcyh2YWx1ZXNDb3B5KTtcbiAgICAgIGlmICh2YWx1ZS5sZW5ndGgpIHtcbiAgICAgICAgbmV4dEZpZWxkKGZpZWxkSW5kZXgpO1xuICAgICAgfVxuICAgIH1cbiAgfTtcblxuICBjb25zdCBoYW5kbGVLZXlEb3duID0gKGZpZWxkSW5kZXg6IG51bWJlciwge2tleX06IFJlYWN0LktleWJvYXJkRXZlbnQ8SFRNTElucHV0RWxlbWVudD4pID0+IHtcbiAgICBzd2l0Y2ggKGtleSkge1xuICAgICAgY2FzZSAnQmFja3NwYWNlJzpcbiAgICAgICAgc2V0VmFsdWUoZmllbGRJbmRleCwgJycpO1xuICAgICAgICBwcmV2aW91c0ZpZWxkKGZpZWxkSW5kZXgpO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ0Fycm93TGVmdCc6XG4gICAgICAgIHByZXZpb3VzRmllbGQoZmllbGRJbmRleCk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnQXJyb3dSaWdodCc6XG4gICAgICAgIG5leHRGaWVsZChmaWVsZEluZGV4KTtcbiAgICAgICAgYnJlYWs7XG4gICAgfVxuICAgIGlmICgvXlswLTldJC8udGVzdChrZXkpKSB7XG4gICAgICBzZXRWYWx1ZShmaWVsZEluZGV4LCBrZXkpO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBoYW5kbGVQYXN0ZSA9IChmaWVsZEluZGV4OiBudW1iZXIsIGV2ZW50OiBSZWFjdC5DbGlwYm9hcmRFdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4ge1xuICAgIGNvbnN0IHBhc3RlZFZhbHVlID0gZXZlbnQuY2xpcGJvYXJkRGF0YS5nZXREYXRhKCdUZXh0Jyk7XG4gICAgY29uc3QgY2xlYW5lZFBhc3RlID0gcGFzdGVkVmFsdWUucmVwbGFjZSgvW14wLTldL2csICcnKTtcbiAgICBpZiAoL15bMC05XSskLy50ZXN0KGNsZWFuZWRQYXN0ZSkpIHtcbiAgICAgIHNldFZhbHVlcyh2YWx1ZXMuc2xpY2UoMCwgZmllbGRJbmRleCkuY29uY2F0KGNsZWFuZWRQYXN0ZS5zcGxpdCgnJykpLnNsaWNlKDAsIGRpZ2l0cykpO1xuICAgIH1cbiAgfTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IGNvbXBsZXRlQ29kZSA9IHZhbHVlcy5qb2luKCcnKTtcbiAgICBpZiAoY29tcGxldGVDb2RlLmxlbmd0aCA9PT0gZGlnaXRzKSB7XG4gICAgICBvbkNvZGVDb21wbGV0ZShjb21wbGV0ZUNvZGUpO1xuICAgIH1cbiAgfSwgW3ZhbHVlc10pO1xuXG4gIHJldHVybiAoXG4gICAgPENvZGVJbnB1dFdyYXBwZXIgc3R5bGU9e3N0eWxlfT5cbiAgICAgIHtBcnJheS5mcm9tKHtsZW5ndGg6IGRpZ2l0c30sIChfLCBpbmRleCkgPT4gKFxuICAgICAgICA8RGlnaXRJbnB1dFxuICAgICAgICAgIGF1dG9Gb2N1cz17aW5kZXggPT09IDAgJiYgYXV0b0ZvY3VzfVxuICAgICAgICAgIGtleT17aW5kZXh9XG4gICAgICAgICAgb25QYXN0ZT17ZXZlbnQgPT4gaGFuZGxlUGFzdGUoaW5kZXgsIGV2ZW50KX1cbiAgICAgICAgICBvbkZvY3VzPXtmb3JjZVNlbGVjdGlvbn1cbiAgICAgICAgICBvbk1vdXNlRG93bj17Zm9yY2VTZWxlY3Rpb25QcmV2ZW50RGVmYXVsdH1cbiAgICAgICAgICBvblRvdWNoU3RhcnQ9e2ZvcmNlU2VsZWN0aW9uUHJldmVudERlZmF1bHR9XG4gICAgICAgICAgb25LZXlEb3duPXtldmVudCA9PiBoYW5kbGVLZXlEb3duKGluZGV4LCBldmVudCl9XG4gICAgICAgICAgb25LZXlVcD17Zm9yY2VTZWxlY3Rpb259XG4gICAgICAgICAgbWFya0ludmFsaWQ9e21hcmtJbnZhbGlkfVxuICAgICAgICAgIHJlZj17bm9kZSA9PiAoaW5wdXRzW2luZGV4XSA9IG5vZGUpfVxuICAgICAgICAgIHZhbHVlPXt2YWx1ZXNbaW5kZXhdfVxuICAgICAgICAgIG9uQ2hhbmdlPXsoKSA9PiB7fX1cbiAgICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgIC8+XG4gICAgICApKX1cbiAgICA8L0NvZGVJbnB1dFdyYXBwZXI+XG4gICk7XG59O1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+/** @jsx jsx */
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const util_1 = require("../util");
+const Input_1 = require("./Input");
+const Identity_1 = require("../Identity");
+const CodeInputWrapper = (props) => ((0, react_1.jsx)("div", Object.assign({ css: {
+        display: 'flex',
+        justifyContent: 'center',
+    } }, props)));
+const digitInputStyle = (theme, props) => (Object.assign(Object.assign({}, (0, Input_1.inputStyle)(theme, props)), { '& + &': {
+        marginLeft: 'min(19px, 2vw)',
+    }, '&:hover': {
+        boxShadow: `0 0 0 1px ${Identity_1.COLOR_V2.GRAY_60}`,
+    }, fontSize: '24px', lineHeight: '28px', borderRadius: '12px', padding: 0, textAlign: 'center', width: 'min(48px, 13vw)', height: '56px' }));
+const DigitInput = react_2.default.forwardRef((props, ref) => (0, react_1.jsx)("input", Object.assign({ ref: ref, css: (theme) => digitInputStyle(theme, props) }, props, { type: "tel" })));
+const CodeInput = ({ style, digits = 6, autoFocus = false, markInvalid, onCodeComplete = util_1.noop, disabled, }) => {
+    const [values, setValues] = (0, react_2.useState)(Array(digits).fill(''));
+    const inputs = Array(digits);
+    const forceSelection = (event) => {
+        const target = event.target;
+        target.select();
+    };
+    const forceSelectionPreventDefault = (event) => {
+        forceSelection(event);
+        event.preventDefault();
+    };
+    const nextField = (currentFieldIndex) => {
+        const nextFieldIndex = currentFieldIndex + 1;
+        if (nextFieldIndex < digits) {
+            inputs[nextFieldIndex].focus();
+        }
+    };
+    const previousField = (currentFieldIndex) => {
+        if (currentFieldIndex > 0) {
+            inputs[currentFieldIndex - 1].focus();
+        }
+    };
+    const setValue = (fieldIndex, value) => {
+        if (/^[0-9]?$/.test(value)) {
+            const valuesCopy = values.slice();
+            valuesCopy[fieldIndex] = value;
+            setValues(valuesCopy);
+            if (value.length) {
+                nextField(fieldIndex);
+            }
+        }
+    };
+    const handleKeyDown = (fieldIndex, { key }) => {
+        switch (key) {
+            case 'Backspace':
+                setValue(fieldIndex, '');
+                previousField(fieldIndex);
+                break;
+            case 'ArrowLeft':
+                previousField(fieldIndex);
+                break;
+            case 'ArrowRight':
+                nextField(fieldIndex);
+                break;
+        }
+        if (/^[0-9]$/.test(key)) {
+            setValue(fieldIndex, key);
+        }
+    };
+    const handlePaste = (fieldIndex, event) => {
+        const pastedValue = event.clipboardData.getData('Text');
+        const cleanedPaste = pastedValue.replace(/[^0-9]/g, '');
+        if (/^[0-9]+$/.test(cleanedPaste)) {
+            setValues(values.slice(0, fieldIndex).concat(cleanedPaste.split('')).slice(0, digits));
+        }
+    };
+    (0, react_2.useEffect)(() => {
+        const completeCode = values.join('');
+        if (completeCode.length === digits) {
+            onCodeComplete(completeCode);
+        }
+    }, [values]);
+    return ((0, react_1.jsx)(CodeInputWrapper, { style: style }, Array.from({ length: digits }, (_, index) => ((0, react_1.jsx)(DigitInput, { autoFocus: index === 0 && autoFocus, key: index, onPaste: event => handlePaste(index, event), onFocus: forceSelection, onMouseDown: forceSelectionPreventDefault, onTouchStart: forceSelectionPreventDefault, onKeyDown: event => handleKeyDown(index, event), onKeyUp: forceSelection, markInvalid: markInvalid, ref: node => (inputs[index] = node), value: values[index], onChange: () => { }, disabled: disabled })))));
 };
-
-var CodeInputWrapper = function CodeInputWrapper(props) {
-  return (0, _react.jsx)("div", (0, _extends2["default"])({
-    css: _ref
-  }, props));
-};
-
-var digitInputStyle = function digitInputStyle(theme, props) {
-  return _objectSpread(_objectSpread({}, (0, _Input.inputStyle)(theme, props)), {}, {
-    '& + &': {
-      marginLeft: 'min(19px, 2vw)'
-    },
-    '&:hover': {
-      boxShadow: "0 0 0 1px ".concat(_Identity.COLOR_V2.GRAY_60)
-    },
-    fontSize: '24px',
-    lineHeight: '28px',
-    borderRadius: '12px',
-    padding: 0,
-    textAlign: 'center',
-    width: 'min(48px, 13vw)',
-    height: '56px'
-  });
-};
-
-var DigitInput = /*#__PURE__*/_react2["default"].forwardRef(function (props, ref) {
-  return (0, _react.jsx)("input", (0, _extends2["default"])({
-    ref: ref,
-    css: function css(theme) {
-      return digitInputStyle(theme, props);
-    }
-  }, props, {
-    type: "tel"
-  }));
-});
-
-var CodeInput = function CodeInput(_ref2) {
-  var style = _ref2.style,
-      _ref2$digits = _ref2.digits,
-      digits = _ref2$digits === void 0 ? 6 : _ref2$digits,
-      _ref2$autoFocus = _ref2.autoFocus,
-      autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
-      markInvalid = _ref2.markInvalid,
-      _ref2$onCodeComplete = _ref2.onCodeComplete,
-      onCodeComplete = _ref2$onCodeComplete === void 0 ? _util.noop : _ref2$onCodeComplete,
-      disabled = _ref2.disabled;
-
-  var _useState = (0, _react2.useState)(Array(digits).fill('')),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      values = _useState2[0],
-      setValues = _useState2[1];
-
-  var inputs = Array(digits);
-
-  var forceSelection = function forceSelection(event) {
-    var target = event.target;
-    target.select();
-  };
-
-  var forceSelectionPreventDefault = function forceSelectionPreventDefault(event) {
-    forceSelection(event);
-    event.preventDefault();
-  };
-
-  var nextField = function nextField(currentFieldIndex) {
-    var nextFieldIndex = currentFieldIndex + 1;
-
-    if (nextFieldIndex < digits) {
-      inputs[nextFieldIndex].focus();
-    }
-  };
-
-  var previousField = function previousField(currentFieldIndex) {
-    if (currentFieldIndex > 0) {
-      inputs[currentFieldIndex - 1].focus();
-    }
-  };
-
-  var setValue = function setValue(fieldIndex, value) {
-    if (/^[0-9]?$/.test(value)) {
-      var valuesCopy = values.slice();
-      valuesCopy[fieldIndex] = value;
-      setValues(valuesCopy);
-
-      if (value.length) {
-        nextField(fieldIndex);
-      }
-    }
-  };
-
-  var handleKeyDown = function handleKeyDown(fieldIndex, _ref3) {
-    var key = _ref3.key;
-
-    switch (key) {
-      case 'Backspace':
-        setValue(fieldIndex, '');
-        previousField(fieldIndex);
-        break;
-
-      case 'ArrowLeft':
-        previousField(fieldIndex);
-        break;
-
-      case 'ArrowRight':
-        nextField(fieldIndex);
-        break;
-    }
-
-    if (/^[0-9]$/.test(key)) {
-      setValue(fieldIndex, key);
-    }
-  };
-
-  var handlePaste = function handlePaste(fieldIndex, event) {
-    var pastedValue = event.clipboardData.getData('Text');
-    var cleanedPaste = pastedValue.replace(/[^0-9]/g, '');
-
-    if (/^[0-9]+$/.test(cleanedPaste)) {
-      setValues(values.slice(0, fieldIndex).concat(cleanedPaste.split('')).slice(0, digits));
-    }
-  };
-
-  (0, _react2.useEffect)(function () {
-    var completeCode = values.join('');
-
-    if (completeCode.length === digits) {
-      onCodeComplete(completeCode);
-    }
-  }, [values]);
-  return (0, _react.jsx)(CodeInputWrapper, {
-    style: style
-  }, Array.from({
-    length: digits
-  }, function (_, index) {
-    return (0, _react.jsx)(DigitInput, {
-      autoFocus: index === 0 && autoFocus,
-      key: index,
-      onPaste: function onPaste(event) {
-        return handlePaste(index, event);
-      },
-      onFocus: forceSelection,
-      onMouseDown: forceSelectionPreventDefault,
-      onTouchStart: forceSelectionPreventDefault,
-      onKeyDown: function onKeyDown(event) {
-        return handleKeyDown(index, event);
-      },
-      onKeyUp: forceSelection,
-      markInvalid: markInvalid,
-      ref: function ref(node) {
-        return inputs[index] = node;
-      },
-      value: values[index],
-      onChange: function onChange() {},
-      disabled: disabled
-    });
-  }));
-};
-
 exports.CodeInput = CodeInput;
 //# sourceMappingURL=CodeInput.js.map