@alfalab/core-components 42.0.0-beta.1 → 42.0.0-beta.2

package/code-input/desktop.css

@@ -0,0 +1,58 @@
+/* hash: 1lhxr */
+:root {
+} /* deprecated */ :root {
+    --color-light-specialbg-tertiary-transparent: rgba(11, 31, 53, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
+    --form-control-bg-color: var(--color-light-specialbg-tertiary-transparent);
+
+    /* disabled */
+
+    /* focus */
+
+    /* hover */
+
+    /* error */
+
+    /* height */
+
+    /* paddings */
+
+    /* disabled */
+
+    /* font */
+
+    /* border-radius */
+
+    /* paddings mobile */
+
+    /* border-radius mobile */
+
+    /* color mobile */
+
+    /* disabled mobile */
+
+    /* hover mobile */
+
+    /* focus mobile */
+
+    /* error mobile */
+
+    /* border-bottom mobile */
+} :root {
+    --code-input-bg-color: var(--form-control-bg-color);
+} .code-input__component_g1215 {
+    background-color: var(--code-input-bg-color);
+}

package/code-input/desktop.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop";
+export {};

package/code-input/desktop.js

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_desktop = require('./Component.desktop.js');
+require('tslib');
+require('react');
+require('./components/base-code-input/component.js');
+require('classnames');
+require('./components/input/component.js');
+
+
+
+exports.CodeInputDesktop = Component_desktop.CodeInputDesktop;

package/code-input/esm/Component.desktop.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseCodeInputProps, CustomInputRef } from "./typings";
+type CodeInputDesktopProps = Omit<BaseCodeInputProps, 'inputClassName'>;
+declare const CodeInputDesktop: React.ForwardRefExoticComponent<CodeInputDesktopProps & React.RefAttributes<CustomInputRef>>;
+export { CodeInputDesktopProps, CodeInputDesktop };

package/code-input/esm/Component.desktop.js

@@ -0,0 +1,12 @@
+import { __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { BaseCodeInput } from './components/base-code-input/component.js';
+import 'classnames';
+import './components/input/component.js';
+
+var styles = {"component":"code-input__component_g1215"};
+require('./desktop.css');
+
+var CodeInputDesktop = forwardRef(function (restProps, ref) { return React.createElement(BaseCodeInput, __assign({}, restProps, { ref: ref, stylesInput: styles })); });
+
+export { CodeInputDesktop };

package/code-input/esm/Component.mobile.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseCodeInputProps, CustomInputRef } from "./typings";
+type CodeInputMobileProps = Omit<BaseCodeInputProps, 'inputClassName'>;
+declare const CodeInputMobile: React.ForwardRefExoticComponent<CodeInputMobileProps & React.RefAttributes<CustomInputRef>>;
+export { CodeInputMobileProps, CodeInputMobile };

package/code-input/esm/Component.mobile.js

@@ -0,0 +1,12 @@
+import { __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { BaseCodeInput } from './components/base-code-input/component.js';
+import 'classnames';
+import './components/input/component.js';
+
+var styles = {"component":"code-input__component_1kzxy","compact":"code-input__compact_1kzxy"};
+require('./mobile.css');
+
+var CodeInputMobile = forwardRef(function (restProps, ref) { return React.createElement(BaseCodeInput, __assign({}, restProps, { ref: ref, stylesInput: styles })); });
+
+export { CodeInputMobile };

package/code-input/esm/Component.responsive.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseCodeInputProps, CustomInputRef } from "./typings";
+type CodeInputProps = Omit<BaseCodeInputProps, 'inputClassName'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+declare const CodeInput: React.ForwardRefExoticComponent<Omit<BaseCodeInputProps, "inputClassName"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+} & React.RefAttributes<CustomInputRef>>;
+export { CodeInputProps, CodeInput };

package/code-input/esm/Component.responsive.js

@@ -0,0 +1,18 @@
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { useMatchMedia } from '../../mq/esm';
+import { CodeInputDesktop } from './Component.desktop.js';
+import { CodeInputMobile } from './Component.mobile.js';
+import './components/base-code-input/component.js';
+import 'classnames';
+import './components/input/component.js';
+
+var CodeInput = forwardRef(function (_a, ref) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);
+    var query = "(min-width: ".concat(breakpoint, "px)");
+    var isDesktop = useMatchMedia(query)[0];
+    var Component = isDesktop ? CodeInputDesktop : CodeInputMobile;
+    return React.createElement(Component, __assign({ ref: ref }, restProps));
+});
+
+export { CodeInput };

package/code-input/esm/components/base-code-input/component.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseCodeInputProps, CustomInputRef } from "../../typings";
+declare const BaseCodeInput: React.ForwardRefExoticComponent<BaseCodeInputProps & React.RefAttributes<CustomInputRef>>;
+export { BaseCodeInput };

package/code-input/esm/components/base-code-input/component.js

@@ -0,0 +1,201 @@
+import { __spreadArray } from 'tslib';
+import React, { forwardRef, useMemo, createRef, useState, useRef, useImperativeHandle, useEffect } from 'react';
+import cn from 'classnames';
+import { Input } from '../input/component.js';
+
+var styles = {"component":"code-input__component_nfgcp","error":"code-input__error_nfgcp","shake":"code-input__shake_nfgcp"};
+require('./index.css');
+
+/** После истечения этого времени код очищается */
+var CODE_ERROR_HINT_VISIBLE_DURATION = 300;
+var BaseCodeInput = forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, disabled = _a.disabled, error = _a.error, _c = _a.fields, fields = _c === void 0 ? 4 : _c, _d = _a.initialValues, initialValues = _d === void 0 ? '' : _d, dataTestId = _a.dataTestId, _e = _a.clearCodeOnError, clearCodeOnError = _e === void 0 ? true : _e, onErrorAnimationEnd = _a.onErrorAnimationEnd, onChange = _a.onChange, onComplete = _a.onComplete, _f = _a.stylesInput, stylesInput = _f === void 0 ? {} : _f;
+    var inputRefs = useMemo(function () {
+        return Array(fields)
+            .fill({})
+            .map(function () { return createRef(); });
+    }, [fields]);
+    var _g = useState(initialValues.split('')), values = _g[0], setValues = _g[1];
+    var clearErrorTimerId = useRef();
+    var focusOnInput = function (inputRef) {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
+    var focus = function (index) {
+        if (index === void 0) { index = 0; }
+        focusOnInput(inputRefs[index]);
+    };
+    var blur = function () {
+        var input = document.activeElement;
+        if ((input === null || input === void 0 ? void 0 : input.tagName) === 'INPUT') {
+            input.blur();
+        }
+    };
+    var unselect = function () {
+        var input = document.activeElement;
+        if ((input === null || input === void 0 ? void 0 : input.tagName) === 'INPUT') {
+            input.setSelectionRange(0, 0);
+        }
+    };
+    var reset = function () {
+        setValues([]);
+    };
+    useImperativeHandle(ref, function () { return ({ focus: focus, blur: blur, reset: reset, unselect: unselect }); });
+    var triggerChange = function (argumentValues) {
+        var newValue = (argumentValues || values).join('');
+        if (onChange) {
+            onChange(newValue);
+        }
+        if (onComplete && newValue.length >= fields) {
+            onComplete(newValue);
+        }
+    };
+    var handleChange = function (value, index, valid) {
+        var newValue = value.replace(/\D/g, '');
+        if (newValue === '' || !valid) {
+            return;
+        }
+        var nextRef;
+        var newValues = __spreadArray([], values, true);
+        if (newValue.length > 1) {
+            var nextIndex = newValue.length + index - 1;
+            if (nextIndex >= fields) {
+                nextIndex = fields - 1;
+            }
+            nextRef = inputRefs[nextIndex];
+            newValue.split('').forEach(function (item, i) {
+                var cursor = index + i;
+                if (cursor < fields) {
+                    newValues[cursor] = item;
+                }
+            });
+        }
+        else {
+            nextRef = inputRefs[index + 1];
+            newValues[index] = newValue;
+        }
+        setValues(newValues);
+        if (nextRef && nextRef.current) {
+            nextRef.current.focus();
+            nextRef.current.select();
+        }
+        triggerChange(newValues);
+    };
+    var handleChangeFromEvent = function (event, _a) {
+        var index = _a.index;
+        var _b = event.target, value = _b.value, valid = _b.validity.valid;
+        handleChange(value, index, valid);
+    };
+    var handleKeyDown = function (event, _a) {
+        var index = _a.index;
+        var prevIndex = index - 1;
+        var nextIndex = index + 1;
+        var prevRef = inputRefs[prevIndex];
+        var nextRef = inputRefs[nextIndex];
+        var curtRef = inputRefs[index];
+        var newValues = __spreadArray([], values, true);
+        switch (event.key) {
+            case 'Backspace':
+                event.preventDefault();
+                if (values[index]) {
+                    newValues[index] = '';
+                }
+                else if (prevRef) {
+                    newValues[prevIndex] = '';
+                    focusOnInput(prevRef);
+                }
+                setValues(newValues);
+                triggerChange(newValues);
+                break;
+            case 'Delete':
+                event.preventDefault();
+                newValues[index] = '';
+                if (!values[nextIndex]) {
+                    focusOnInput(curtRef);
+                }
+                if (nextRef) {
+                    focusOnInput(nextRef);
+                }
+                setValues(newValues);
+                triggerChange(newValues);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (prevRef) {
+                    focusOnInput(prevRef);
+                }
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (nextRef) {
+                    focusOnInput(nextRef);
+                }
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                event.preventDefault();
+                break;
+        }
+    };
+    var handleFocus = function (event) {
+        var target = event.target;
+        /**
+         * В сафари выделение корректно работает только с асинхронным вызовом
+         */
+        requestAnimationFrame(function () {
+            target.select();
+        });
+    };
+    var handleErrorAnimationEnd = function () {
+        clearErrorTimerId.current = setTimeout(function () {
+            if (clearCodeOnError) {
+                focus();
+                /** Очищаем только в случае, если код не изменился */
+                setValues(function (prevState) { return (values === prevState ? [] : prevState); });
+            }
+            onErrorAnimationEnd === null || onErrorAnimationEnd === void 0 ? void 0 : onErrorAnimationEnd();
+        }, CODE_ERROR_HINT_VISIBLE_DURATION);
+    };
+    useEffect(function () { return function () {
+        if (clearErrorTimerId.current) {
+            clearTimeout(clearErrorTimerId.current);
+            clearErrorTimerId.current = undefined;
+        }
+    }; }, [error]);
+    useEffect(function () {
+        var _a;
+        var ac = null;
+        var unMountReason = 'component unMount';
+        if ('OTPCredential' in window && ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.credentials) === null || _a === void 0 ? void 0 : _a.get)) {
+            ac = new AbortController();
+            var options = {
+                otp: { transport: ['sms'] },
+                signal: ac.signal,
+            };
+            navigator.credentials
+                .get(options)
+                .then(function (res) {
+                if (res === null || res === void 0 ? void 0 : res.code)
+                    handleChange(res.code, 0, true);
+            })
+                .catch(function (err) {
+                if (err !== unMountReason) {
+                    // eslint-disable-next-line no-console
+                    console.error(err);
+                }
+            });
+        }
+        return function () {
+            if (ac)
+                ac.abort(unMountReason);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId, onAnimationEnd: handleErrorAnimationEnd },
+        React.createElement("div", { className: cn((_b = {}, _b[styles.shake] = Boolean(error), _b)) }, new Array(fields).fill('').map(function (_, index) { return (React.createElement(Input, { ref: inputRefs[index], key: index.toString(), index: index, value: values[index], disabled: disabled, error: !!error, onChange: handleChangeFromEvent, onFocus: handleFocus, onKeyDown: handleKeyDown, stylesInput: stylesInput, compact: fields > 6 })); })),
+        error && (React.createElement("div", { className: styles.error, role: 'alert' }, error))));
+});
+
+export { BaseCodeInput };

package/code-input/esm/components/base-code-input/index.css

@@ -0,0 +1,47 @@
+/* hash: 1y1c3 */
+:root {
+} /* deprecated */ :root {
+    --color-light-text-negative: #d91d0b; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xs: 8px;
+} :root {
+} :root {
+} .code-input__component_nfgcp {
+    display: flex;
+    flex-direction: column;
+} .code-input__error_nfgcp {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+
+    margin-top: var(--gap-xs);
+    color: var(--color-light-text-negative);
+} @keyframes code-input__shake_nfgcp {
+    0% {
+        transform: translateX(0);
+    }
+
+    25% {
+        transform: translateX(-2px);
+    }
+
+    75% {
+        transform: translateX(2px);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+} .code-input__shake_nfgcp {
+    animation: code-input__shake_nfgcp 0.15s linear 0s 3;
+}

package/code-input/esm/components/base-code-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./component";

package/code-input/esm/components/base-code-input/index.js

@@ -0,0 +1,5 @@
+export { BaseCodeInput } from './component.js';
+import 'tslib';
+import 'react';
+import 'classnames';
+import '../input/component.js';

package/code-input/esm/components/input/component.d.ts

@@ -12,6 +12,9 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChang
     onKeyDown: (event: KeyboardEvent<HTMLInputElement>, payload: {
         index: number;
     }) => void;
+    stylesInput?: {
+        [key: string]: string;
+    };
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "onKeyDown" | "enterKeyHint"> & {
     index: number;
@@ -24,5 +27,8 @@ declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttribu
     onKeyDown: (event: KeyboardEvent<HTMLInputElement>, payload: {
         index: number;
     }) => void;
+    stylesInput?: {
+        [key: string]: string;
+    } | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export { InputProps, Input };

package/code-input/esm/components/input/component.js

@@ -1,12 +1,12 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"code-input__component_hw8ev","input":"code-input__input_hw8ev","hasError":"code-input__hasError_hw8ev","disabled":"code-input__disabled_hw8ev","compact":"code-input__compact_hw8ev"};
+var styles = {"component":"code-input__component_swjl1","input":"code-input__input_swjl1","hasError":"code-input__hasError_swjl1","disabled":"code-input__disabled_swjl1","compact":"code-input__compact_swjl1"};
 require('./index.css');
 
 var Input = forwardRef(function (_a, ref) {
     var _b;
-    var index = _a.index, error = _a.error, disabled = _a.disabled, _c = _a.value, value = _c === void 0 ? '' : _c, _d = _a.compact, compact = _d === void 0 ? false : _d, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus;
+    var index = _a.index, error = _a.error, disabled = _a.disabled, _c = _a.value, value = _c === void 0 ? '' : _c, _d = _a.compact, compact = _d === void 0 ? false : _d, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, _e = _a.stylesInput, stylesInput = _e === void 0 ? {} : _e;
     var handleChange = function (event) {
         onChange(event, { index: index });
     };
@@ -22,10 +22,11 @@ var Input = forwardRef(function (_a, ref) {
             target.select();
         });
     };
-    return (React.createElement("input", { ref: ref, className: cn(styles.input, (_b = {},
+    return (React.createElement("input", { ref: ref, className: cn(styles.input, stylesInput.component, (_b = {},
             _b[styles.hasError] = error,
             _b[styles.disabled] = disabled,
             _b[styles.compact] = compact,
+            _b[stylesInput.compact] = Boolean(stylesInput.compact) && compact,
             _b)), disabled: disabled, value: value, autoComplete: index === 0 ? 'one-time-code' : '', inputMode: 'numeric', pattern: '[0-9]*', onChange: handleChange, onKeyDown: handleKeyDown, onFocus: onFocus, onClick: handleClick }));
 });
 

package/code-input/esm/components/input/index.css

@@ -2,7 +2,6 @@
 :root {
 } /* deprecated */ :root {
     --color-light-bg-negative-muted: #fbe8e7;
-    --color-light-specialbg-tertiary-transparent: rgba(11, 31, 53, 0.1);
     --color-light-text-negative: #d91d0b;
     --color-light-text-primary: #0e0e0e;
     --color-light-text-tertiary: rgba(60, 60, 67, 0.4); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -18,14 +17,12 @@
 } :root {
     --border-radius-s: 4px;
 } :root {
-    --gap-2xs: 4px;
     --gap-xs: 8px;
 } :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
 } :root {
 } :root {
-    --form-control-bg-color: var(--color-light-specialbg-tertiary-transparent);
 
     /* disabled */
 
@@ -44,22 +41,36 @@
     /* font */
 
     /* border-radius */
+
+    /* paddings mobile */
+
+    /* border-radius mobile */
+
+    /* color mobile */
+
+    /* disabled mobile */
+
+    /* hover mobile */
+
+    /* focus mobile */
+
+    /* error mobile */
+
+    /* border-bottom mobile */
 } :root {
     --code-input-font-size: 30px;
     --code-input-font-weight: 700;
     --code-input-font-family: var(--font-family-system);
     --code-input-text-color: var(--color-light-text-primary);
-    --code-input-bg-color: var(--form-control-bg-color);
     --code-input-error-bg-color: var(--color-light-bg-negative-muted);
-} .code-input__component_hw8ev {
+} .code-input__component_swjl1 {
     display: flex;
-} .code-input__input_hw8ev {
+} .code-input__input_swjl1 {
     flex-shrink: 0;
     width: 36px;
     height: 48px;
     margin-right: var(--gap-xs);
     padding: 0;
-    background-color: var(--code-input-bg-color);
     border: none;
     border-radius: var(--border-radius-s);
     box-sizing: border-box;
@@ -69,26 +80,25 @@
     font-size: var(--code-input-font-size);
     font-weight: var(--code-input-font-weight);
     font-family: var(--code-input-font-family)
-} .code-input__input_hw8ev:last-child {
+} .code-input__input_swjl1:last-child {
         margin-right: 0;
-    } .code-input__input_hw8ev.code-input__hasError_hw8ev {
+    } .code-input__input_swjl1.code-input__hasError_swjl1 {
         color: var(--color-light-text-negative);
         caret-color: var(--code-input-text-color);
         background-color: var(--code-input-error-bg-color);
-    } .code-input__input_hw8ev.code-input__disabled_hw8ev {
+    } .code-input__input_swjl1.code-input__disabled_swjl1 {
         color: var(--color-light-text-tertiary);
         opacity: 1;
-    } .code-input__input_hw8ev:-webkit-autofill {
+    } .code-input__input_swjl1:-webkit-autofill {
         -webkit-text-fill-color: var(--code-input-text-color);
-    } .code-input__input_hw8ev:-webkit-autofill,
-    .code-input__input_hw8ev:-webkit-autofill:hover,
-    .code-input__input_hw8ev:-webkit-autofill:focus,
-    .code-input__input_hw8ev:-webkit-autofill:active {
+    } .code-input__input_swjl1:-webkit-autofill,
+    .code-input__input_swjl1:-webkit-autofill:hover,
+    .code-input__input_swjl1:-webkit-autofill:focus,
+    .code-input__input_swjl1:-webkit-autofill:active {
         /* Hack from http://stackoverflow.com/a/29350537 */
         -webkit-transition: background-color 999999s ease-in-out 0s;
         transition: background-color 999999s ease-in-out 0s;
-    } .code-input__compact_hw8ev {
+    } .code-input__compact_swjl1 {
     width: 32px;
     height: 48px;
-    margin-right: var(--gap-2xs);
 }

package/code-input/esm/desktop.css

@@ -0,0 +1,58 @@
+/* hash: 1lhxr */
+:root {
+} /* deprecated */ :root {
+    --color-light-specialbg-tertiary-transparent: rgba(11, 31, 53, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
+    --form-control-bg-color: var(--color-light-specialbg-tertiary-transparent);
+
+    /* disabled */
+
+    /* focus */
+
+    /* hover */
+
+    /* error */
+
+    /* height */
+
+    /* paddings */
+
+    /* disabled */
+
+    /* font */
+
+    /* border-radius */
+
+    /* paddings mobile */
+
+    /* border-radius mobile */
+
+    /* color mobile */
+
+    /* disabled mobile */
+
+    /* hover mobile */
+
+    /* focus mobile */
+
+    /* error mobile */
+
+    /* border-bottom mobile */
+} :root {
+    --code-input-bg-color: var(--form-control-bg-color);
+} .code-input__component_g1215 {
+    background-color: var(--code-input-bg-color);
+}

package/code-input/esm/desktop.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop";
+export {};

package/code-input/esm/desktop.js

@@ -0,0 +1,6 @@
+export { CodeInputDesktop } from './Component.desktop.js';
+import 'tslib';
+import 'react';
+import './components/base-code-input/component.js';
+import 'classnames';
+import './components/input/component.js';

package/code-input/esm/index.d.ts

@@ -1 +1,2 @@
-export * from "./component";
+export * from "./Component.responsive";
+export {};

package/code-input/esm/index.js

@@ -1,5 +1,9 @@
-export { CodeInput } from './component.js';
+export { CodeInput } from './Component.responsive.js';
 import 'tslib';
 import 'react';
+import '../../mq/esm';
+import './Component.desktop.js';
+import './components/base-code-input/component.js';
 import 'classnames';
 import './components/input/component.js';
+import './Component.mobile.js';