@alfalab/core-components 47.0.0-beta.0 → 47.0.0-beta.1

package/pass-code/cssm/Component.d.ts

@@ -1,33 +1,34 @@
 /// <reference types="react" />
 import React from 'react';
 import { ReactNode } from "react";
+import { PassCodeProps } from "./typings";
 type BasePassCodeProps = {
     /**
-     * Код.
+     * Код
      */
     value: string;
     /**
-     * Обработчик изменения кода.
+     * Обработчик изменения кода
      */
     onChange: (code: string) => void;
     /**
-     * Дополнительный класс.
+     * Дополнительный класс
      */
     className?: string;
     /**
-     * Отображение ошибки
+     * Отображение ошибки ввода
      */
-    error?: ReactNode;
+    error?: boolean;
     /**
-     *  Сообщение над клавиатурой
+     * Отображение успешного ввода
      */
-    message?: ReactNode;
+    success?: boolean;
     /**
-     * Слот слева.
+     * Слот слева
      */
     leftAddons?: ReactNode;
     /**
-     * Слот справа.
+     * Слот справа
      */
     rightAddons?: ReactNode;
     /**
@@ -37,22 +38,17 @@ type BasePassCodeProps = {
      * блока с цифрами -keypad
      */
     dataTestId?: string;
-};
-type PropsWithUnknownLen = {
-    codeLength?: never;
     /**
-     * Максимально возможная длина кода.
-     * @default 10
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
      */
-    maxCodeLength?: number;
-};
-type PropsWithLen = {
-    maxCodeLength?: never;
+    breakpoint?: number;
     /**
-     * Длина кода.
+     * Стили компонента
      */
-    codeLength?: number;
+    styles?: {
+        [key: string]: string;
+    };
 };
-type PassCodeProps = BasePassCodeProps & (PropsWithLen | PropsWithUnknownLen);
 declare const PassCode: React.ForwardRefExoticComponent<PassCodeProps & React.RefAttributes<HTMLDivElement>>;
 export { BasePassCodeProps, PassCode };

package/pass-code/cssm/Component.js

@@ -6,16 +6,16 @@ var coreComponentsGap = require('../../gap/cssm');
 var coreComponentsShared = require('../../shared/cssm');
 var components_InputProgress_Component = require('./components/InputProgress/Component.js');
 var components_KeyPad_Component = require('./components/KeyPad/Component.js');
-var styles = require('./index.module.css');
+var commonStyles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var commonStyles__default = /*#__PURE__*/_interopDefaultCompat(commonStyles);
 
 var PassCode = React.forwardRef(function (_a, ref) {
-    var _b = _a.value, value = _b === void 0 ? '' : _b, dataTestId = _a.dataTestId, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, error = _a.error, message = _a.message, onChange = _a.onChange, _c = _a.maxCodeLength, maxCodeLength = _c === void 0 ? 10 : _c, codeLength = _a.codeLength;
+    var _b = _a.value, value = _b === void 0 ? '' : _b, dataTestId = _a.dataTestId, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, error = _a.error, success = _a.success, onChange = _a.onChange, _c = _a.maxCodeLength, maxCodeLength = _c === void 0 ? 10 : _c, codeLength = _a.codeLength, _d = _a.styles, styles = _d === void 0 ? {} : _d;
     var passwordLen = codeLength || maxCodeLength;
     var handleChange = function (digit) {
         var newValue = value.concat(digit.toString());
@@ -28,13 +28,11 @@ var PassCode = React.forwardRef(function (_a, ref) {
             onChange === null || onChange === void 0 ? void 0 : onChange(value === null || value === void 0 ? void 0 : value.slice(0, -1));
         }
     };
-    var renderError = function () { return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.message, styles__default.default.error), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'error') }, error)); };
-    var renderMessage = function () { return (React__default.default.createElement("div", { className: styles__default.default.message, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'message') }, message)); };
-    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), ref: ref, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'wrapper') },
-        error ? renderError() : renderMessage(),
-        React__default.default.createElement(coreComponentsGap.Gap, { size: 'm' }),
-        React__default.default.createElement(components_InputProgress_Component.InputProgress, { dataTestId: dataTestId, value: value, maxCodeLength: maxCodeLength, codeLength: codeLength, error: Boolean(error) }),
-        React__default.default.createElement(coreComponentsGap.Gap, { size: '4xl' }),
+    return (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.component, styles.component, className), ref: ref, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'wrapper') },
+        React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.inputProgressContainer) },
+            React__default.default.createElement(coreComponentsGap.Gap, { size: 16 }),
+            React__default.default.createElement(components_InputProgress_Component.InputProgress, { dataTestId: dataTestId, value: value, maxCodeLength: maxCodeLength, codeLength: codeLength, error: Boolean(error), success: success }),
+            React__default.default.createElement(coreComponentsGap.Gap, { size: 26 })),
         React__default.default.createElement(components_KeyPad_Component.KeyPad, { dataTestId: dataTestId, leftAddons: leftAddons, rightAddons: rightAddons, onClick: handleChange, onClear: handleClear, showClear: Boolean(value) })));
 });
 

package/pass-code/cssm/Component.responsive.d.ts

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

package/pass-code/cssm/Component.responsive.js

@@ -0,0 +1,21 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsMq = require('../../mq/cssm');
+var desktop_PassCodeDesktop = require('./desktop/PassCodeDesktop.js');
+var mobile_PassCodeMobile = require('./mobile/PassCodeMobile.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var PassCode = React.forwardRef(function (_a, ref) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var query = "(min-width: ".concat(breakpoint, "px)");
+    var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
+    var Component = isDesktop ? desktop_PassCodeDesktop.PassCodeDesktop : mobile_PassCodeMobile.PassCodeMobile;
+    return React__default.default.createElement(Component, tslib.__assign({ ref: ref }, restProps));
+});
+
+exports.PassCode = PassCode;

package/pass-code/cssm/components/InputProgress/Component.d.ts

@@ -6,6 +6,7 @@ type InputProgressProps = {
     error: boolean;
     value?: string;
     dataTestId?: string;
+    success?: boolean;
 };
 declare const InputProgress: React.FC<InputProgressProps>;
 export { InputProgressProps, InputProgress };

package/pass-code/cssm/components/InputProgress/Component.js

@@ -4,6 +4,7 @@ var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
 var cn = require('classnames');
 var coreComponentsShared = require('../../../../shared/cssm');
+var components_InputProgress_useInputProgress = require('./useInputProgress.js');
 var styles = require('./index.module.css');
 var transitions = require('./transitions.module.css');
 
@@ -18,20 +19,27 @@ var transitions__default = /*#__PURE__*/_interopDefaultCompat(transitions);
 var TRANSITION_DURATION = 150;
 var InputProgress = function (_a) {
     var _b;
-    var _c = _a.value, value = _c === void 0 ? '' : _c, maxCodeLength = _a.maxCodeLength, codeLength = _a.codeLength, error = _a.error, dataTestId = _a.dataTestId;
+    var _c = _a.value, value = _c === void 0 ? '' : _c, maxCodeLength = _a.maxCodeLength, codeLength = _a.codeLength, error = _a.error, dataTestId = _a.dataTestId, success = _a.success;
+    var _d = components_InputProgress_useInputProgress.useInputProgress(success), rawSuccess = _d.rawSuccess, resetSuccessAnimation = _d.resetSuccessAnimation;
     return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, (_b = {}, _b[transitions__default.default.shake] = error, _b)), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'input-progress') }, codeLength
         ? new Array(codeLength).fill(null).map(function (_, i) {
             var _a;
             var filled = Boolean(value[i]);
-            return (React__default.default.createElement("div", { key: i, className: cn__default.default(styles__default.default.dot, (_a = {},
-                    _a[styles__default.default.error] = filled && error,
-                    _a[styles__default.default.filled] = filled,
-                    _a)) }));
+            return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.dotWrapper), key: i },
+                React__default.default.createElement("div", { className: cn__default.default(styles__default.default.dot, (_a = {},
+                        _a[styles__default.default.error] = filled && error,
+                        _a[styles__default.default.animatedFill] = filled,
+                        _a[styles__default.default.success] = success,
+                        _a)) })));
         })
         : new Array(maxCodeLength).fill(null).map(function (_, i) {
             var _a;
             return (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: i, in: Boolean(value[i]), timeout: TRANSITION_DURATION, classNames: transitions__default.default, unmountOnExit: true },
-                React__default.default.createElement("div", { className: cn__default.default(styles__default.default.dot, styles__default.default.filled, (_a = {}, _a[styles__default.default.error] = error, _a)) })));
+                React__default.default.createElement("div", { className: cn__default.default(styles__default.default.dot, styles__default.default.filled, (_a = {},
+                        _a[styles__default.default.error] = error,
+                        _a[styles__default.default.success] = success && !rawSuccess,
+                        _a[styles__default.default.rawSuccess] = success && rawSuccess,
+                        _a)), onAnimationEnd: resetSuccessAnimation })));
         })));
 };
 

package/pass-code/cssm/components/InputProgress/animations.module.css

@@ -0,0 +1,15 @@
+@keyframes dotFilled {
+    50% {
+        width: var(--pass-code-dot-container-width);
+        height: var(--pass-code-dot-container-height);
+        animation-timing-function: ease-out;
+    }
+}
+
+@keyframes dotSuccessFilled {
+    50% {
+        width: var(--pass-code-dot-container-width);
+        height: var(--pass-code-dot-container-height);
+        animation-timing-function: ease-out;
+    }
+}

package/pass-code/cssm/components/InputProgress/index.module.css

@@ -1,8 +1,9 @@
 :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 */ /* 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 */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
-    --color-light-neutral-1500: #121213;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
-    --color-light-status-negative: #ff4837; /* 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 */
+    --color-light-status-negative: #ff4837;
+    --color-light-status-positive: #0cc44d; /* 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 {
@@ -17,24 +18,63 @@
 } :root {
 } :root {
 } :root {
+} :root {
+    --pass-code-dot-width: 12px;
+    --pass-code-dot-height: 12px;
+    --pass-code-dot-container-width: 14px;
+    --pass-code-dot-container-height: 14px;
+    --pass-code-progress-container-min-height: 14px;
+} @keyframes dotFilled {
+    50% {
+        width: var(--pass-code-dot-container-width);
+        height: var(--pass-code-dot-container-height);
+        animation-timing-function: ease-out;
+    }
+} @keyframes dotSuccessFilled {
+    50% {
+        width: var(--pass-code-dot-container-width);
+        height: var(--pass-code-dot-container-height);
+        animation-timing-function: ease-out;
+    }
 } .component {
-    height: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
-    overflow: hidden;
-} .dot {
+    min-height: var(--pass-code-progress-container-min-height);
+} .dotWrapper {
+    width: var(--pass-code-dot-container-width);
+    height: var(--pass-code-dot-container-height);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 5px
+} .dotWrapper .dot {
+        margin: unset;
+    } .dot {
     margin: 0 6px;
-    width: 12px;
-    height: 12px;
+    width: var(--pass-code-dot-width);
+    height: var(--pass-code-dot-height);
     background: var(--color-light-neutral-translucent-300);
     border-radius: var(--border-radius-circle);
-    flex-shrink: 0;
-    transition: background 75ms ease-in;
-    will-change: transform, opacity
-} .dot.error {
+    flex-shrink: 0
+
+    /* for unknown password length */
+} .dot.filled {
+        background: var(--color-light-neutral-translucent-1300);
+    } .dot {
+
+    /* for a known passcode length */
+} .dot.animatedFill {
+        background: var(--color-light-neutral-translucent-1300);
+        animation: dotFilled 200ms ease-in forwards;
+    } .dot.error {
         background: var(--color-light-status-negative);
-        transition: none;
-    } .filled {
-    background: var(--color-light-neutral-1500);
-}
+    } .dot.success {
+        background: var(--color-light-status-positive);
+        animation: dotSuccessFilled 200ms ease-in forwards;
+    } .dot {
+
+    /* without animation */
+} .dot.rawSuccess {
+        background: var(--color-light-status-positive);
+    }

package/pass-code/cssm/components/InputProgress/useInputProgress.d.ts

@@ -0,0 +1,5 @@
+declare const useInputProgress: (success?: boolean) => {
+    rawSuccess: boolean;
+    resetSuccessAnimation: () => void;
+};
+export { useInputProgress };

package/pass-code/cssm/components/InputProgress/useInputProgress.js

@@ -0,0 +1,20 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var useInputProgress = function (success) {
+    var _a = React.useState(false), rawSuccess = _a[0], setRawSuccess = _a[1];
+    // костыль для корректной работы анимации исчезновения точек
+    var resetSuccessAnimation = React.useCallback(function () {
+        // компонент использует CSSTransition и нативную анимацию это приводит к конфликтам transition и animation
+        if (success) {
+            setRawSuccess(true);
+            setTimeout(function () {
+                setRawSuccess(false);
+            }, 1000);
+        }
+    }, [success]);
+    return { rawSuccess: rawSuccess, resetSuccessAnimation: resetSuccessAnimation };
+};
+
+exports.useInputProgress = useInputProgress;

package/pass-code/cssm/components/KeyPad/index.module.css

@@ -11,34 +11,24 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-s: 12px;
-    --gap-m: 16px;
-    --gap-xl: 24px;
-    --gap-2xl: 32px;
+    --gap-2s: 14px;
+    --gap-3xl: 40px;
 } :root {
 } :root {
+    --size-l-height: 64px;
+} :root {
+    --pass-code-min-width: 304px;
 } .component {
-    width: 240px;
-    height: 292px;
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, var(--size-l-height));
     grid-template-rows: repeat(4, 1fr);
-    grid-column-gap: var(--gap-xl);
-    grid-row-gap: var(--gap-s);
-    margin: 0 auto
+    grid-column-gap: var(--gap-3xl);
+    grid-row-gap: var(--gap-2s);
+    justify-content: center;
+
+    margin: 0 auto;
+    min-width: var(--pass-code-min-width)
 } .component .digit.digit {
         font-size: 36px;
         line-height: 1;
-    } @media screen and (min-width: 360px) {
-    .component {
-        width: 292px;
-        height: 352px;
-        grid-column-gap: var(--gap-2xl);
-        grid-row-gap: var(--gap-m);
-    }
-} @media screen and (min-width: 390px) {
-    .component {
-        width: 322px;
-        height: 392px;
     }
-}

package/pass-code/cssm/components/KeyPadButton/Component.d.ts

@@ -4,29 +4,29 @@ import { ReactNode } from "react";
 import { ButtonMobileProps } from "../../../../button/mobile";
 type KeyPadButtonProps<T> = {
     /**
-     * Вид кнопки.
+     * Вид кнопки
      */
     view: ButtonMobileProps['view'];
     /**
-     * Значение.
+     * Значение
      */
     children: T;
     /**
-     * Дополнительный класс.
+     * Дополнительный класс
      */
     className?: string;
     /**
-     * Дополнительный класс кнопки.
+     * Дополнительный класс кнопки
      */
     buttonClassName?: string;
     /**
-     * Коллбэк нажатия на кнопку.
+     * Коллбэк нажатия на кнопку
      */
     onClick?: (payload: T) => void;
     /**
-     * Идентификатор для систем автоматизированного тестирования.
+     * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
 };
-declare function KeyPadButton<T extends ReactNode>({ children, onClick, className, view, buttonClassName, dataTestId, }: KeyPadButtonProps<T>): React.JSX.Element;
+declare function KeyPadButton<T extends ReactNode>({ children, onClick, view, buttonClassName, dataTestId, }: KeyPadButtonProps<T>): React.JSX.Element;
 export { KeyPadButtonProps, KeyPadButton };

package/pass-code/cssm/components/KeyPadButton/Component.js

@@ -12,9 +12,8 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 function KeyPadButton(_a) {
-    var children = _a.children, onClick = _a.onClick, className = _a.className, _b = _a.view, view = _b === void 0 ? 'secondary' : _b, buttonClassName = _a.buttonClassName, dataTestId = _a.dataTestId;
-    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className) },
-        React__default.default.createElement(mobile.ButtonMobile, { className: cn__default.default(styles__default.default.button, styles__default.default[view], buttonClassName), view: view, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(children); }, dataTestId: dataTestId }, children)));
+    var children = _a.children, onClick = _a.onClick, _b = _a.view, view = _b === void 0 ? 'secondary' : _b, buttonClassName = _a.buttonClassName, dataTestId = _a.dataTestId;
+    return (React__default.default.createElement(mobile.ButtonMobile, { className: cn__default.default(styles__default.default.button, styles__default.default[view], buttonClassName), view: view, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(children); }, dataTestId: dataTestId }, children));
 }
 
 exports.KeyPadButton = KeyPadButton;

package/pass-code/cssm/components/KeyPadButton/index.module.css

@@ -1,8 +1,9 @@
 :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 */ /* 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 */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
-    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
-    --color-light-neutral-translucent-200-press: rgba(5, 12, 41, 0.14);
-    --color-light-text-primary: rgba(3, 3, 6, 0.88); /* 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 */
+    --color-light-text-primary: rgba(3, 3, 6, 0.88);
+    --color-light-transparent-default: rgba(255, 255, 255, 0);
+    --color-light-transparent-default-hover: rgba(38, 55, 88, 0.06);
+    --color-light-transparent-default-press: rgba(30, 43, 68, 0.08); /* 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 {
@@ -17,14 +18,11 @@
 } :root {
 } :root {
 } :root {
+    --size-l-height: 64px;
 } :root {
-    --button-bg-color: var(--color-light-neutral-translucent-200);
-    --button-bg-color-active: var(--color-light-neutral-translucent-200-press);
-} .component {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
+    --pass-code-button-width: var(--size-l-height);
+    --pass-code-button-min-width: var(--size-l-height);
+    --pass-code-button-height: var(--size-l-height);
 } .button.button {
     font-size: 14px;
     line-height: 18px;
@@ -32,37 +30,21 @@
 
     border-radius: var(--border-radius-circle);
     padding: 0;
-    min-width: 64px;
-    width: 64px;
-    height: 64px;
+    min-width: var(--pass-code-button-min-width);
+    width: var(--pass-code-button-width);
+    height: var(--pass-code-button-height);
+
     text-align: center
 } .button.button > span {
         vertical-align: middle
     } .button.button > span > * {
             vertical-align: middle;
-        } .secondary.secondary {
+        } .secondary.secondary,
+.button.button {
     color: var(--color-light-text-primary);
-    background: var(--button-bg-color)
-} .secondary.secondary:hover {
-        color: var(--color-light-text-primary);
-    } .secondary.secondary:active {
-        background: var(--button-bg-color-active);
-    } .ghost.ghost {
-    color: var(--color-light-text-primary)
-} .ghost.ghost:hover {
-        color: var(--color-light-text-primary);
-    } .ghost.ghost:active {
-        background: var(--button-bg-color-active);
-    } @media screen and (min-width: 360px) {
-    .button.button {
-        min-width: 76px;
-        height: 76px;
-        width: 76px;
-    }
-} @media screen and (min-width: 390px) {
-    .button.button {
-        min-width: 86px;
-        width: 86px;
-        height: 86px;
+    background-color: var(--color-light-transparent-default)
+} .secondary.secondary:hover, .button.button:hover {
+        background-color: var(--color-light-transparent-default-hover);
+    } .secondary.secondary:active, .button.button:active {
+        background-color: var(--color-light-transparent-default-press);
     }
-}

package/pass-code/cssm/desktop/PassCodeDesktop.d.ts

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

package/pass-code/cssm/desktop/PassCodeDesktop.js

@@ -0,0 +1,15 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var Component = require('../Component.js');
+var styles = require('./desktop.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var PassCodeDesktop = React.forwardRef(function (restProps, ref) { return (React__default.default.createElement(Component.PassCode, tslib.__assign({}, restProps, { ref: ref, styles: styles__default.default }))); });
+
+exports.PassCodeDesktop = PassCodeDesktop;

package/pass-code/cssm/desktop/desktop.module.css

@@ -0,0 +1,16 @@
+: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 */ /* 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 */ /* 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 */ /* 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 {
+}

package/pass-code/cssm/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./Component";
+export * from "./Component.responsive";
 export * from "./components/KeyPadButton/index";

package/pass-code/cssm/index.js

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component = require('./Component.js');
+var Component_responsive = require('./Component.responsive.js');
 var components_KeyPadButton_Component = require('./components/KeyPadButton/Component.js');
 
 
 
-exports.PassCode = Component.PassCode;
+exports.PassCode = Component_responsive.PassCode;
 exports.KeyPadButton = components_KeyPadButton_Component.KeyPadButton;

package/pass-code/cssm/index.module.css

@@ -1,6 +1,5 @@
 :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 */ /* 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 */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
-    --color-light-text-negative: #ec2d20;
     --color-light-text-primary: rgba(3, 3, 6, 0.88); /* 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 {
@@ -13,14 +12,15 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-xs: 8px;
 } :root {
 } :root {
 } :root {
-    --pass-code-max-width: 500px;
+    --pass-code-min-height: 378px;
 } .component {
-    max-width: var(--pass-code-max-width);
-    margin: var(--gap-xs) 0;
+    min-height: var(--pass-code-min-height);
+} .inputProgressContainer {
+    position: relative;
+    flex: 1 0 auto;
 } .message {
     font-size: 16px;
     line-height: 24px;
@@ -32,6 +32,4 @@
     overflow: hidden;
     text-overflow: ellipsis;
     color: var(--color-light-text-primary);
-} .error {
-    color: var(--color-light-text-negative);
 }

package/pass-code/cssm/mobile/PassCodeMobile.d.ts

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