@salutejs/plasma-new-hope 0.336.0-canary.2210.17491654160.0 → 0.336.0-canary.2211.17492872934.0

package/es/index.css

@@ -1056,13 +1056,12 @@
 
 .base_vkh53h_b1vzcfqx__e0f9eeea.base_vkh53h_b1vzcfqx__e0f9eeea[disabled]{opacity:var(--plasma-codeinput-disabled-opacity);cursor:not-allowed;}.base_vkh53h_b1vzcfqx__e0f9eeea.base_vkh53h_b1vzcfqx__e0f9eeea[disabled] > *{pointer-events:none;}
 
-.CodeField_styles_7tebk_b1xx9skx__ab75953b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:-webkit-min-content;width:-moz-min-content;width:min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.CodeField_styles_7tebk_b1xx9skx__ab75953b.CodeField_styles_7tebk_codefieldCaptionAlignLeft__ab75953b{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
-.CodeField_styles_7tebk_c1wzspax__ab75953b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
-.CodeField_styles_7tebk_c7swj1z__ab75953b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
-.CodeField_styles_7tebk_s13uxcg8__ab75953b{width:var(--plasma-codefield-separator-width);}
-.CodeField_styles_7tebk_ig5h1kg__ab75953b{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;outline:none;pointer-events:none;text-align:center;}
-.CodeField_styles_7tebk_c1jpzjak__ab75953b{text-align:var(--c1jpzjak-0);-webkit-align-self:var(--c1jpzjak-0);-ms-flex-item-align:var(--c1jpzjak-0);align-self:var(--c1jpzjak-0);width:var(--c1jpzjak-1);white-space:pre-line;}
-
+.CodeField_styles_ebdpd0_b1xx9skx__3407b383{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:-webkit-min-content;width:-moz-min-content;width:min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.CodeField_styles_ebdpd0_b1xx9skx__3407b383.CodeField_styles_ebdpd0_codefieldCaptionAlignLeft__3407b383{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
+.CodeField_styles_ebdpd0_c1wzspax__3407b383{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.CodeField_styles_ebdpd0_c7swj1z__3407b383{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.CodeField_styles_ebdpd0_s13uxcg8__3407b383{width:var(--plasma-codefield-separator-width);}
+.CodeField_styles_ebdpd0_ig5h1kg__3407b383{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;outline:none;pointer-events:none;text-align:center;}
+.CodeField_styles_ebdpd0_c1jpzjak__3407b383{text-align:var(--c1jpzjak-0);-webkit-align-self:var(--c1jpzjak-0);-ms-flex-item-align:var(--c1jpzjak-0);align-self:var(--c1jpzjak-0);width:var(--c1jpzjak-1);white-space:pre-line;}
 
 .base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_c1jpzjak__e66aaab8{color:var(--plasma-codefield-caption-color);}.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_c1jpzjak__e66aaab8.base_9a5yza_codefieldCaptionError__e66aaab8{color:var(--plasma-codefield-caption-color-error);}.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_ig5h1kg__e66aaab8{color:var(--plasma-codefield-code-color);caret-color:var(--plasma-codefield-caret-color);background-color:var(--plasma-codefield-background-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color);}.base_9a5yza_b1g41h91__e66aaab8:hover .base_9a5yza_codefieldItemHoverEnabled__e66aaab8{background-color:var(--plasma-codefield-background-color-hover);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-hover);}.base_9a5yza_b1g41h91__e66aaab8:focus-within .base_9a5yza_ig5h1kg__e66aaab8:focus-within{background-color:var(--plasma-codefield-background-color-focus);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-color-focus);}.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldCodeErrorAnimation__e66aaab8{-webkit-animation:base_9a5yza_shakingErrorB1g41h91__e66aaab8 0.3s forwards;animation:base_9a5yza_shakingErrorB1g41h91__e66aaab8 0.3s forwards;}.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldCodeError__e66aaab8 .base_9a5yza_ig5h1kg__e66aaab8{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldCodeError__e66aaab8:focus-within .base_9a5yza_ig5h1kg__e66aaab8{background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldCodeError__e66aaab8.base_9a5yza_codefieldCodeErrorFade__e66aaab8 .base_9a5yza_ig5h1kg__e66aaab8{-webkit-animation:base_9a5yza_fadeErrorB1g41h91__e66aaab8 0.3s forwards;animation:base_9a5yza_fadeErrorB1g41h91__e66aaab8 0.3s forwards;}.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldItemErrorAnimation__e66aaab8{-webkit-animation:base_9a5yza_shakingErrorB1g41h91__e66aaab8 0.3s forwards;animation:base_9a5yza_shakingErrorB1g41h91__e66aaab8 0.3s forwards;}.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldItemError__e66aaab8,.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldItemError__e66aaab8:focus-within{color:var(--plasma-codefield-code-color-error);background-color:var(--plasma-codefield-background-error-color);box-shadow:inset 0 0 0 var(--plasma-codefield-border-width) var(--plasma-codefield-border-error-color);}.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldItemError__e66aaab8.base_9a5yza_codefieldCodeErrorFade__e66aaab8,.base_9a5yza_b1g41h91__e66aaab8.base_9a5yza_b1g41h91__e66aaab8 .base_9a5yza_codefieldItemError__e66aaab8:focus-within.base_9a5yza_codefieldCodeErrorFade__e66aaab8{-webkit-animation:base_9a5yza_shakingErrorB1g41h91__e66aaab8 0.3s forwards :local(fadeError-b1g41h91) 0.3s :local(forwards);animation:base_9a5yza_shakingErrorB1g41h91__e66aaab8 0.3s forwards :local(fadeError-b1g41h91) 0.3s :local(forwards);}@-webkit-keyframes base_9a5yza_shakingErrorB1g41h91__e66aaab8{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@keyframes base_9a5yza_shakingErrorB1g41h91__e66aaab8{14%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}28%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}42%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}57%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}71%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}85%{-webkit-transform:translateX(0.125rem);-ms-transform:translateX(0.125rem);transform:translateX(0.125rem);}100%{-webkit-transform:translateX(-0.125rem);-ms-transform:translateX(-0.125rem);transform:translateX(-0.125rem);}}@-webkit-keyframes base_9a5yza_fadeErrorB1g41h91__e66aaab8{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}@keyframes base_9a5yza_fadeErrorB1g41h91__e66aaab8{50%{color:var(--plasma-codefield-code-color-error);}100%{color:transparent;}}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.336.0-canary.2210.17491654160.0",
+  "version": "0.336.0-canary.2211.17492872934.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -137,5 +137,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "98ba0164fef9ffa0a1fc289cf58088abf7ef181b"
+  "gitHead": "d10c3f93e69f9518b99db737558f1be8a975c152"
 }

package/styled-components/cjs/components/CodeField/CodeField.js

@@ -29,7 +29,6 @@ var _base = require("./variations/_view/base");
 var _base1 = require("./variations/_size/base");
 var _base2 = require("./variations/_shape/base");
 var _base3 = require("./variations/_disabled/base");
-var _useWebOTP = require("./hooks/useWebOTP");
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -213,10 +212,8 @@ var codeFieldRoot = function(Root) {
             "onChange",
             "onFullCodeEnter"
         ]);
-        var _useState = _sliced_to_array((0, _react.useState)((0, _utils1.getCodeValue)(codeLength, '')), 2), innerValue = _useState[0], setInnerValue = _useState[1];
-        var code = (outerValue === null || outerValue === void 0 ? void 0 : outerValue.length) ? (0, _utils1.getCodeValue)(codeLength, outerValue) : innerValue;
+        var _useState = _sliced_to_array((0, _react.useState)((0, _utils1.getCodeValue)(codeLength, outerValue || '')), 2), code = _useState[0], setCode = _useState[1];
         var _useState1 = _sliced_to_array((0, _react.useState)(code.join('')), 2), originalValue = _useState1[0], setOriginalValue = _useState1[1];
-        var _useState2 = _sliced_to_array((0, _react.useState)(null), 2), otpVal = _useState2[0], setOtpVal = _useState2[1];
         var inputRefs = (0, _react.useRef)([]);
         var inputContainerRef = (0, _react.useRef)(null);
         var captionRef = (0, _react.useRef)(null);
@@ -224,7 +221,6 @@ var codeFieldRoot = function(Root) {
         var placeholderValue = (0, _utils1.getPlaceholderValue)(codeLength, placeholder);
         var parts = codeLength === 6 ? 2 : 1;
         var widthValue = width ? (0, _utils.getSizeValueFromProp)(width, 'rem') : undefined;
-        var isWebOTPEnabled = autoComplete === 'one-time-code' && !disabled && (0, _utils1.isWebOTPSupported)();
         var getLastActiveIndex = function() {
             if (code.length && code.length < codeLength) {
                 return code.length;
@@ -234,26 +230,6 @@ var codeFieldRoot = function(Root) {
             });
             return lastEmptyIndex >= 0 ? lastEmptyIndex : codeLength - 1;
         };
-        var codeSetter = function(newCode) {
-            setInnerValue(newCode);
-            var originalCode = newCode.join('');
-            setOriginalValue(originalCode);
-            if (onChange) {
-                onChange(originalCode);
-            }
-            if (originalCode.length > 0) {
-                stopWebOTPListener();
-            }
-        };
-        var _useWebOTP1 = (0, _useWebOTP.useWebOTP)({
-            codeString: originalValue,
-            enableSMSAutoRead: autoComplete === 'one-time-code',
-            disabled: Boolean(disabled),
-            codeLength: codeLength,
-            codeSetter: codeSetter,
-            onFullCodeEnter: onFullCodeEnter,
-            setOtpVal: setOtpVal
-        }), startWebOTPListener = _useWebOTP1.startWebOTPListener, stopWebOTPListener = _useWebOTP1.stopWebOTPListener;
         var handleClick = function() {
             if (disabled) {
                 return;
@@ -273,24 +249,19 @@ var codeFieldRoot = function(Root) {
                 return;
             }
             if (key === _constants.BACKSPACE_KEY) {
-                if (index > 0) {
-                    var _inputRefs_current_index;
-                    var newCode = _to_consumable_array(code);
-                    newCode[index] = '';
-                    if (index >= codeLength - 1 && code[index]) {
-                        codeSetter(newCode);
-                        return;
-                    }
-                    if (!code[index]) {
-                        var _inputRefs_current_;
-                        newCode[index - 1] = '';
-                        (_inputRefs_current_ = inputRefs.current[index - 1]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
-                    }
-                    (_inputRefs_current_index = inputRefs.current[index]) === null || _inputRefs_current_index === void 0 ? void 0 : _inputRefs_current_index.classList.remove(_CodeFieldtokens.classes.itemError);
-                    codeSetter(newCode);
+                if (index > 0 && code[index] === '') {
+                    var _inputRefs_current_;
+                    (_inputRefs_current_ = inputRefs.current[index - 1]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
                 }
             }
         };
+        var codeSetter = function(newCode) {
+            setCode(newCode);
+            setOriginalValue(newCode.join(''));
+            if (onChange) {
+                onChange(newCode.join(''));
+            }
+        };
         var handleChange = function(event, index) {
             var _inputRefs_current_index;
             if (disabled) {
@@ -321,6 +292,8 @@ var codeFieldRoot = function(Root) {
                 return;
             }
             if (!symbol) {
+                newCode[index] = '';
+                codeSetter(newCode);
                 return;
             }
             if (fieldPattern.test(symbol)) {
@@ -338,9 +311,8 @@ var codeFieldRoot = function(Root) {
                     index: index,
                     newCode: newCode,
                     inputRefs: inputRefs,
-                    setInnerValue: setInnerValue,
-                    codeSetter: codeSetter,
-                    onChange: onChange
+                    setCode: setCode,
+                    codeSetter: codeSetter
                 });
             }
         };
@@ -367,7 +339,6 @@ var codeFieldRoot = function(Root) {
             if (onFullCodeEnter) {
                 onFullCodeEnter(fullCode);
             }
-            startWebOTPListener();
         }, []);
         (0, _hooks1.useCodeHook)({
             inputRefs: inputRefs,
@@ -387,14 +358,14 @@ var codeFieldRoot = function(Root) {
                     inputRefs: inputRefs,
                     inputContainerRef: inputContainerRef,
                     captionRef: captionRef,
-                    setInnerValue: setInnerValue,
+                    setCode: setCode,
                     codeSetter: codeSetter
                 });
             }
         }, [
             isError
         ]);
-        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(Root, _object_spread({
+        return /*#__PURE__*/ _react.default.createElement(Root, _object_spread({
             ref: ref,
             view: view,
             size: size,
@@ -402,7 +373,7 @@ var codeFieldRoot = function(Root) {
             disabled: disabled,
             onClick: handleClick,
             className: (0, _classnames.default)(className, _define_property({}, _CodeFieldtokens.classes.captionAlignLeft, captionAlign === 'left'))
-        }, !isWebOTPEnabled && _object_spread({}, rest)), /*#__PURE__*/ _react.default.createElement(_CodeFieldstyles.CodeWrapper, {
+        }, rest), /*#__PURE__*/ _react.default.createElement(_CodeFieldstyles.CodeWrapper, {
             ref: inputContainerRef
         }, _to_consumable_array(Array(parts)).map(function(_, partIndex) {
             return /*#__PURE__*/ _react.default.createElement(_react.Fragment, {
@@ -419,6 +390,7 @@ var codeFieldRoot = function(Root) {
                     },
                     className: (0, _classnames.default)((_obj = {}, _define_property(_obj, _CodeFieldtokens.classes.segmented, shape === 'segmented'), _define_property(_obj, _CodeFieldtokens.classes.hoverEnabled, !disabled && inputCorrectIndex >= originalValue.length), _obj)),
                     value: code[inputCorrectIndex] || '',
+                    autoComplete: autoComplete,
                     onChange: function(e) {
                         handleChange(e, inputCorrectIndex);
                     },
@@ -435,10 +407,7 @@ var codeFieldRoot = function(Root) {
             ref: captionRef,
             captionAlign: captionAlign,
             widthValue: widthValue
-        }, caption), isWebOTPEnabled && /*#__PURE__*/ _react.default.createElement(_CodeFieldstyles.HiddenInput, _object_spread({
-            autoComplete: autoComplete,
-            tabIndex: -1
-        }, rest))), /*#__PURE__*/ _react.default.createElement("div", null, JSON.stringify(otpVal)));
+        }, caption));
     });
 };
 var codeFieldConfig = {

package/styled-components/cjs/components/CodeField/CodeField.styles.js

@@ -18,9 +18,6 @@ _export(exports, {
     get CodeWrapper () {
         return CodeWrapper;
     },
-    get HiddenInput () {
-        return HiddenInput;
-    },
     get ItemInput () {
         return ItemInput;
     },
@@ -80,32 +77,32 @@ var base = (0, _styledcomponents.css)([
 ], _CodeFieldtokens.classes.captionAlignLeft);
 var CodeWrapper = _styledcomponents.default.div.withConfig({
     displayName: "CodeField.styles__CodeWrapper",
-    componentId: "sc-ae648a72-0"
+    componentId: "sc-88b863b6-0"
 })([
     "display:flex;align-items:center;"
 ]);
 var CodeGroup = _styledcomponents.default.div.withConfig({
     displayName: "CodeField.styles__CodeGroup",
-    componentId: "sc-ae648a72-1"
+    componentId: "sc-88b863b6-1"
 })([
     "display:flex;align-items:center;"
 ]);
 var Separator = _styledcomponents.default.div.withConfig({
     displayName: "CodeField.styles__Separator",
-    componentId: "sc-ae648a72-2"
+    componentId: "sc-88b863b6-2"
 })([
     "width:var(",
     ");"
 ], _CodeFieldtokens.tokens.separatorWidth);
 var ItemInput = _styledcomponents.default.input.withConfig({
     displayName: "CodeField.styles__ItemInput",
-    componentId: "sc-ae648a72-3"
+    componentId: "sc-88b863b6-3"
 })([
     "box-sizing:border-box;appearance:none;border:0;padding:0;outline:none;pointer-events:none;text-align:center;"
 ]);
 var CaptionWrapper = _styledcomponents.default.div.withConfig({
     displayName: "CodeField.styles__CaptionWrapper",
-    componentId: "sc-ae648a72-4"
+    componentId: "sc-88b863b6-4"
 })([
     "text-align:",
     ";align-self:",
@@ -121,9 +118,3 @@ var CaptionWrapper = _styledcomponents.default.div.withConfig({
     var widthValue = param.widthValue;
     return widthValue || 'auto';
 });
-var HiddenInput = _styledcomponents.default.input.withConfig({
-    displayName: "CodeField.styles__HiddenInput",
-    componentId: "sc-ae648a72-5"
-})([
-    ""
-]);

package/styled-components/cjs/components/CodeField/utils/handleCodeError.js

@@ -37,7 +37,7 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 var handleCodeError = function(param) {
-    var codeLength = param.codeLength, codeErrorBehavior = param.codeErrorBehavior, currentCode = param.currentCode, inputRefs = param.inputRefs, inputContainerRef = param.inputContainerRef, captionRef = param.captionRef, setInnerValue = param.setInnerValue, codeSetter = param.codeSetter;
+    var codeLength = param.codeLength, codeErrorBehavior = param.codeErrorBehavior, currentCode = param.currentCode, inputRefs = param.inputRefs, inputContainerRef = param.inputContainerRef, captionRef = param.captionRef, setCode = param.setCode, codeSetter = param.codeSetter;
     if (!inputContainerRef.current) {
         return;
     }
@@ -51,7 +51,7 @@ var handleCodeError = function(param) {
                 var newCode = _to_consumable_array(currentCode);
                 newCode.pop();
                 codeSetter(newCode);
-                setInnerValue(currentCode);
+                setCode(currentCode);
                 (_inputContainerRef_current = inputContainerRef.current) === null || _inputContainerRef_current === void 0 ? void 0 : _inputContainerRef_current.classList.remove(_CodeFieldtokens.classes.codeErrorAnimation);
                 setTimeout(function() {
                     var _inputRefs_current_, _inputRefs_current_1;

package/styled-components/cjs/components/CodeField/utils/handleItemError.js

@@ -36,17 +36,14 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 var handleItemError = function(param) {
-    var currentSymbol = param.currentSymbol, itemErrorBehavior = param.itemErrorBehavior, index = param.index, newCode = param.newCode, inputRefs = param.inputRefs, setInnerValue = param.setInnerValue, codeSetter = param.codeSetter, onChange = param.onChange;
+    var currentSymbol = param.currentSymbol, itemErrorBehavior = param.itemErrorBehavior, index = param.index, newCode = param.newCode, inputRefs = param.inputRefs, setCode = param.setCode, codeSetter = param.codeSetter;
     if (!inputRefs.current[index] || currentSymbol === ' ') {
         return;
     }
     switch(itemErrorBehavior){
         case 'keep':
             var _inputRefs_current_index;
-            setInnerValue(newCode);
-            if (onChange) {
-                onChange(newCode.join(''));
-            }
+            setCode(newCode);
             (_inputRefs_current_index = inputRefs.current[index]) === null || _inputRefs_current_index === void 0 ? void 0 : _inputRefs_current_index.classList.add(_CodeFieldtokens.classes.itemError, _CodeFieldtokens.classes.itemErrorAnimation);
             setTimeout(function() {
                 var _inputRefs_current_index;
@@ -60,17 +57,11 @@ var handleItemError = function(param) {
         case 'forbid-enter':
             newCode[index] = '';
             codeSetter(newCode);
-            if (onChange) {
-                onChange(newCode.join(''));
-            }
             break;
         case 'remove-symbol':
         default:
             var _inputRefs_current_index1;
-            setInnerValue(newCode);
-            if (onChange) {
-                onChange(newCode.join(''));
-            }
+            setCode(newCode);
             (_inputRefs_current_index1 = inputRefs.current[index]) === null || _inputRefs_current_index1 === void 0 ? void 0 : _inputRefs_current_index1.classList.add(_CodeFieldtokens.classes.itemError, _CodeFieldtokens.classes.itemErrorFade, _CodeFieldtokens.classes.itemErrorAnimation);
             setTimeout(function() {
                 var _inputRefs_current_index;

package/styled-components/cjs/components/CodeField/utils/index.js

@@ -23,12 +23,8 @@ _export(exports, {
     },
     get handleItemError () {
         return _handleItemError.handleItemError;
-    },
-    get isWebOTPSupported () {
-        return _isWebOTPSupported.isWebOTPSupported;
     }
 });
 var _initialValuesHelper = require("./initialValuesHelper");
 var _handleItemError = require("./handleItemError");
 var _handleCodeError = require("./handleCodeError");
-var _isWebOTPSupported = require("./isWebOTPSupported");

package/styled-components/es/components/CodeField/CodeField.js

@@ -117,14 +117,13 @@ import { useDidMountEffect } from "../../hooks";
 import { getSizeValueFromProp } from "../../utils";
 import { useCodeHook } from "../../hooks";
 import { BACKSPACE_KEY, FORBIDDEN_KEYS, ONLY_DIGITS_PATTERN } from "./utils/constants";
-import { getCodeValue, getFieldPattern, getPlaceholderValue, handleCodeError, handleItemError, isWebOTPSupported } from "./utils";
+import { getCodeValue, getFieldPattern, getPlaceholderValue, handleCodeError, handleItemError } from "./utils";
 import { classes } from "./CodeField.tokens";
-import { base, CaptionWrapper, CodeGroup, CodeWrapper, HiddenInput, ItemInput, Separator } from "./CodeField.styles";
+import { base, CaptionWrapper, CodeGroup, CodeWrapper, ItemInput, Separator } from "./CodeField.styles";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as shapeCSS } from "./variations/_shape/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
-import { useWebOTP } from "./hooks/useWebOTP";
 export var codeFieldRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(_param, ref) {
         var className = _param.className, outerValue = _param.value, placeholder = _param.placeholder, autoFocus = _param.autoFocus, _param_codeLength = _param.codeLength, codeLength = _param_codeLength === void 0 ? 6 : _param_codeLength, caption = _param.caption, _param_captionAlign = _param.captionAlign, captionAlign = _param_captionAlign === void 0 ? 'left' : _param_captionAlign, width = _param.width, _param_shape = _param.shape, shape = _param_shape === void 0 ? 'default' : _param_shape, view = _param.view, size = _param.size, disabled = _param.disabled, isError = _param.isError, _param_allowedSymbols = _param.allowedSymbols, allowedSymbols = _param_allowedSymbols === void 0 ? ONLY_DIGITS_PATTERN : _param_allowedSymbols, _param_itemErrorBehavior = _param.itemErrorBehavior, itemErrorBehavior = _param_itemErrorBehavior === void 0 ? 'remove-symbol' : _param_itemErrorBehavior, _param_codeErrorBehavior = _param.codeErrorBehavior, codeErrorBehavior = _param_codeErrorBehavior === void 0 ? 'remove-code' : _param_codeErrorBehavior, _param_autoComplete = _param.autoComplete, autoComplete = _param_autoComplete === void 0 ? 'one-time-code' : _param_autoComplete, setIsError = _param.setIsError, onChange = _param.onChange, onFullCodeEnter = _param.onFullCodeEnter, rest = _object_without_properties(_param, [
@@ -149,10 +148,8 @@ export var codeFieldRoot = function(Root) {
             "onChange",
             "onFullCodeEnter"
         ]);
-        var _useState = _sliced_to_array(useState(getCodeValue(codeLength, '')), 2), innerValue = _useState[0], setInnerValue = _useState[1];
-        var code = (outerValue === null || outerValue === void 0 ? void 0 : outerValue.length) ? getCodeValue(codeLength, outerValue) : innerValue;
+        var _useState = _sliced_to_array(useState(getCodeValue(codeLength, outerValue || '')), 2), code = _useState[0], setCode = _useState[1];
         var _useState1 = _sliced_to_array(useState(code.join('')), 2), originalValue = _useState1[0], setOriginalValue = _useState1[1];
-        var _useState2 = _sliced_to_array(useState(null), 2), otpVal = _useState2[0], setOtpVal = _useState2[1];
         var inputRefs = useRef([]);
         var inputContainerRef = useRef(null);
         var captionRef = useRef(null);
@@ -160,7 +157,6 @@ export var codeFieldRoot = function(Root) {
         var placeholderValue = getPlaceholderValue(codeLength, placeholder);
         var parts = codeLength === 6 ? 2 : 1;
         var widthValue = width ? getSizeValueFromProp(width, 'rem') : undefined;
-        var isWebOTPEnabled = autoComplete === 'one-time-code' && !disabled && isWebOTPSupported();
         var getLastActiveIndex = function() {
             if (code.length && code.length < codeLength) {
                 return code.length;
@@ -170,26 +166,6 @@ export var codeFieldRoot = function(Root) {
             });
             return lastEmptyIndex >= 0 ? lastEmptyIndex : codeLength - 1;
         };
-        var codeSetter = function(newCode) {
-            setInnerValue(newCode);
-            var originalCode = newCode.join('');
-            setOriginalValue(originalCode);
-            if (onChange) {
-                onChange(originalCode);
-            }
-            if (originalCode.length > 0) {
-                stopWebOTPListener();
-            }
-        };
-        var _useWebOTP = useWebOTP({
-            codeString: originalValue,
-            enableSMSAutoRead: autoComplete === 'one-time-code',
-            disabled: Boolean(disabled),
-            codeLength: codeLength,
-            codeSetter: codeSetter,
-            onFullCodeEnter: onFullCodeEnter,
-            setOtpVal: setOtpVal
-        }), startWebOTPListener = _useWebOTP.startWebOTPListener, stopWebOTPListener = _useWebOTP.stopWebOTPListener;
         var handleClick = function() {
             if (disabled) {
                 return;
@@ -209,24 +185,19 @@ export var codeFieldRoot = function(Root) {
                 return;
             }
             if (key === BACKSPACE_KEY) {
-                if (index > 0) {
-                    var _inputRefs_current_index;
-                    var newCode = _to_consumable_array(code);
-                    newCode[index] = '';
-                    if (index >= codeLength - 1 && code[index]) {
-                        codeSetter(newCode);
-                        return;
-                    }
-                    if (!code[index]) {
-                        var _inputRefs_current_;
-                        newCode[index - 1] = '';
-                        (_inputRefs_current_ = inputRefs.current[index - 1]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
-                    }
-                    (_inputRefs_current_index = inputRefs.current[index]) === null || _inputRefs_current_index === void 0 ? void 0 : _inputRefs_current_index.classList.remove(classes.itemError);
-                    codeSetter(newCode);
+                if (index > 0 && code[index] === '') {
+                    var _inputRefs_current_;
+                    (_inputRefs_current_ = inputRefs.current[index - 1]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
                 }
             }
         };
+        var codeSetter = function(newCode) {
+            setCode(newCode);
+            setOriginalValue(newCode.join(''));
+            if (onChange) {
+                onChange(newCode.join(''));
+            }
+        };
         var handleChange = function(event, index) {
             var _inputRefs_current_index;
             if (disabled) {
@@ -257,6 +228,8 @@ export var codeFieldRoot = function(Root) {
                 return;
             }
             if (!symbol) {
+                newCode[index] = '';
+                codeSetter(newCode);
                 return;
             }
             if (fieldPattern.test(symbol)) {
@@ -274,9 +247,8 @@ export var codeFieldRoot = function(Root) {
                     index: index,
                     newCode: newCode,
                     inputRefs: inputRefs,
-                    setInnerValue: setInnerValue,
-                    codeSetter: codeSetter,
-                    onChange: onChange
+                    setCode: setCode,
+                    codeSetter: codeSetter
                 });
             }
         };
@@ -303,7 +275,6 @@ export var codeFieldRoot = function(Root) {
             if (onFullCodeEnter) {
                 onFullCodeEnter(fullCode);
             }
-            startWebOTPListener();
         }, []);
         useCodeHook({
             inputRefs: inputRefs,
@@ -323,14 +294,14 @@ export var codeFieldRoot = function(Root) {
                     inputRefs: inputRefs,
                     inputContainerRef: inputContainerRef,
                     captionRef: captionRef,
-                    setInnerValue: setInnerValue,
+                    setCode: setCode,
                     codeSetter: codeSetter
                 });
             }
         }, [
             isError
         ]);
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Root, _object_spread({
+        return /*#__PURE__*/ React.createElement(Root, _object_spread({
             ref: ref,
             view: view,
             size: size,
@@ -338,7 +309,7 @@ export var codeFieldRoot = function(Root) {
             disabled: disabled,
             onClick: handleClick,
             className: cls(className, _define_property({}, classes.captionAlignLeft, captionAlign === 'left'))
-        }, !isWebOTPEnabled && _object_spread({}, rest)), /*#__PURE__*/ React.createElement(CodeWrapper, {
+        }, rest), /*#__PURE__*/ React.createElement(CodeWrapper, {
             ref: inputContainerRef
         }, _to_consumable_array(Array(parts)).map(function(_, partIndex) {
             return /*#__PURE__*/ React.createElement(Fragment, {
@@ -355,6 +326,7 @@ export var codeFieldRoot = function(Root) {
                     },
                     className: cls((_obj = {}, _define_property(_obj, classes.segmented, shape === 'segmented'), _define_property(_obj, classes.hoverEnabled, !disabled && inputCorrectIndex >= originalValue.length), _obj)),
                     value: code[inputCorrectIndex] || '',
+                    autoComplete: autoComplete,
                     onChange: function(e) {
                         handleChange(e, inputCorrectIndex);
                     },
@@ -371,10 +343,7 @@ export var codeFieldRoot = function(Root) {
             ref: captionRef,
             captionAlign: captionAlign,
             widthValue: widthValue
-        }, caption), isWebOTPEnabled && /*#__PURE__*/ React.createElement(HiddenInput, _object_spread({
-            autoComplete: autoComplete,
-            tabIndex: -1
-        }, rest))), /*#__PURE__*/ React.createElement("div", null, JSON.stringify(otpVal)));
+        }, caption));
     });
 };
 export var codeFieldConfig = {

package/styled-components/es/components/CodeField/CodeField.styles.js

@@ -7,32 +7,32 @@ export var base = css([
 ], classes.captionAlignLeft);
 export var CodeWrapper = styled.div.withConfig({
     displayName: "CodeField.styles__CodeWrapper",
-    componentId: "sc-ae648a72-0"
+    componentId: "sc-88b863b6-0"
 })([
     "display:flex;align-items:center;"
 ]);
 export var CodeGroup = styled.div.withConfig({
     displayName: "CodeField.styles__CodeGroup",
-    componentId: "sc-ae648a72-1"
+    componentId: "sc-88b863b6-1"
 })([
     "display:flex;align-items:center;"
 ]);
 export var Separator = styled.div.withConfig({
     displayName: "CodeField.styles__Separator",
-    componentId: "sc-ae648a72-2"
+    componentId: "sc-88b863b6-2"
 })([
     "width:var(",
     ");"
 ], tokens.separatorWidth);
 export var ItemInput = styled.input.withConfig({
     displayName: "CodeField.styles__ItemInput",
-    componentId: "sc-ae648a72-3"
+    componentId: "sc-88b863b6-3"
 })([
     "box-sizing:border-box;appearance:none;border:0;padding:0;outline:none;pointer-events:none;text-align:center;"
 ]);
 export var CaptionWrapper = styled.div.withConfig({
     displayName: "CodeField.styles__CaptionWrapper",
-    componentId: "sc-ae648a72-4"
+    componentId: "sc-88b863b6-4"
 })([
     "text-align:",
     ";align-self:",
@@ -48,9 +48,3 @@ export var CaptionWrapper = styled.div.withConfig({
     var widthValue = param.widthValue;
     return widthValue || 'auto';
 });
-export var HiddenInput = styled.input.withConfig({
-    displayName: "CodeField.styles__HiddenInput",
-    componentId: "sc-ae648a72-5"
-})([
-    ""
-]);

package/styled-components/es/components/CodeField/utils/handleCodeError.js

@@ -27,7 +27,7 @@ import { classes } from "../CodeField.tokens";
 import { ANIMATION_TIMEOUT } from "./constants";
 import { getCodeValue } from "./initialValuesHelper";
 export var handleCodeError = function(param) {
-    var codeLength = param.codeLength, codeErrorBehavior = param.codeErrorBehavior, currentCode = param.currentCode, inputRefs = param.inputRefs, inputContainerRef = param.inputContainerRef, captionRef = param.captionRef, setInnerValue = param.setInnerValue, codeSetter = param.codeSetter;
+    var codeLength = param.codeLength, codeErrorBehavior = param.codeErrorBehavior, currentCode = param.currentCode, inputRefs = param.inputRefs, inputContainerRef = param.inputContainerRef, captionRef = param.captionRef, setCode = param.setCode, codeSetter = param.codeSetter;
     if (!inputContainerRef.current) {
         return;
     }
@@ -41,7 +41,7 @@ export var handleCodeError = function(param) {
                 var newCode = _to_consumable_array(currentCode);
                 newCode.pop();
                 codeSetter(newCode);
-                setInnerValue(currentCode);
+                setCode(currentCode);
                 (_inputContainerRef_current = inputContainerRef.current) === null || _inputContainerRef_current === void 0 ? void 0 : _inputContainerRef_current.classList.remove(classes.codeErrorAnimation);
                 setTimeout(function() {
                     var _inputRefs_current_, _inputRefs_current_1;

package/styled-components/es/components/CodeField/utils/handleItemError.js

@@ -26,17 +26,14 @@ function _unsupported_iterable_to_array(o, minLen) {
 import { classes } from "../CodeField.tokens";
 import { ANIMATION_TIMEOUT } from "./constants";
 export var handleItemError = function(param) {
-    var currentSymbol = param.currentSymbol, itemErrorBehavior = param.itemErrorBehavior, index = param.index, newCode = param.newCode, inputRefs = param.inputRefs, setInnerValue = param.setInnerValue, codeSetter = param.codeSetter, onChange = param.onChange;
+    var currentSymbol = param.currentSymbol, itemErrorBehavior = param.itemErrorBehavior, index = param.index, newCode = param.newCode, inputRefs = param.inputRefs, setCode = param.setCode, codeSetter = param.codeSetter;
     if (!inputRefs.current[index] || currentSymbol === ' ') {
         return;
     }
     switch(itemErrorBehavior){
         case 'keep':
             var _inputRefs_current_index;
-            setInnerValue(newCode);
-            if (onChange) {
-                onChange(newCode.join(''));
-            }
+            setCode(newCode);
             (_inputRefs_current_index = inputRefs.current[index]) === null || _inputRefs_current_index === void 0 ? void 0 : _inputRefs_current_index.classList.add(classes.itemError, classes.itemErrorAnimation);
             setTimeout(function() {
                 var _inputRefs_current_index;
@@ -50,17 +47,11 @@ export var handleItemError = function(param) {
         case 'forbid-enter':
             newCode[index] = '';
             codeSetter(newCode);
-            if (onChange) {
-                onChange(newCode.join(''));
-            }
             break;
         case 'remove-symbol':
         default:
             var _inputRefs_current_index1;
-            setInnerValue(newCode);
-            if (onChange) {
-                onChange(newCode.join(''));
-            }
+            setCode(newCode);
             (_inputRefs_current_index1 = inputRefs.current[index]) === null || _inputRefs_current_index1 === void 0 ? void 0 : _inputRefs_current_index1.classList.add(classes.itemError, classes.itemErrorFade, classes.itemErrorAnimation);
             setTimeout(function() {
                 var _inputRefs_current_index;

package/styled-components/es/components/CodeField/utils/index.js

@@ -1,4 +1,3 @@
 export { getFieldPattern, getPlaceholderValue, getCodeValue } from "./initialValuesHelper";
 export { handleItemError } from "./handleItemError";
 export { handleCodeError } from "./handleCodeError";
-export { isWebOTPSupported } from "./isWebOTPSupported";

package/styled-components/es/examples/components/Combobox/Combobox.js

@@ -1,7 +0,0 @@
-import { component, mergeConfig } from "../../../engines";
-import { comboboxNewConfig } from "../../..";
-import { config } from "./Combobox.config";
-var mergedConfig = mergeConfig(comboboxNewConfig, config);
-var ComboboxComponent = component(mergedConfig);
-var Combobox = ComboboxComponent;
-export { Combobox };