@alfalab/core-components 46.0.0-beta.5 → 46.0.0-beta.6

package/list/modern/components/item/index.js

@@ -1,4 +1,4 @@
-export { I as Item } from '../../Component-ec34e05a.js';
+export { I as Item } from '../../Component-a046ddbb.js';
 import 'react';
 import 'classnames';
 import '../../../../typography/modern';

package/list/modern/index.js

@@ -1,4 +1,4 @@
-export { a as List, L as ListContext } from './Component-ec34e05a.js';
+export { a as List, L as ListContext } from './Component-a046ddbb.js';
 export { listPresets } from './presets.js';
 import 'react';
 import 'classnames';

package/markdown/Component.js

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var ReactMarkdown = require('react-markdown');
 var cn = require('classnames');
-var hooks_useOverrides = require('./use-overrides-86d99dd7.js');
+var hooks_useOverrides = require('./use-overrides-822accd9.js');
 var remarkPlugins_strikethrough = require('./remark-plugins/strikethrough.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

package/markdown/esm/Component.desktop.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Markdown } from './Component.js';
 import 'react-markdown';
 import 'classnames';
-import './use-overrides-1ff68396.js';
+import './use-overrides-07b626db.js';
 import '../../link/esm';
 import '../../list/esm';
 import '../../typography/esm';

package/markdown/esm/Component.js

@@ -2,7 +2,7 @@ import { __assign } from 'tslib';
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import cn from 'classnames';
-import { u as useOverrides, s as styles } from './use-overrides-1ff68396.js';
+import { u as useOverrides, s as styles } from './use-overrides-07b626db.js';
 import { strikethroughRemarkPlugin } from './remark-plugins/strikethrough.js';
 import '../../link/esm';
 import '../../list/esm';

package/markdown/esm/Component.mobile.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Markdown } from './Component.js';
 import 'react-markdown';
 import 'classnames';
-import './use-overrides-1ff68396.js';
+import './use-overrides-07b626db.js';
 import '../../link/esm';
 import '../../list/esm';
 import '../../typography/esm';

package/markdown/esm/Component.responsive.js

@@ -5,7 +5,7 @@ import { isClient } from '../../shared/esm';
 import { Markdown } from './Component.js';
 import 'react-markdown';
 import 'classnames';
-import './use-overrides-1ff68396.js';
+import './use-overrides-07b626db.js';
 import '../../link/esm';
 import '../../list/esm';
 import '../../typography/esm';

package/markdown/esm/desktop/index.js

@@ -4,7 +4,7 @@ import 'react';
 import '../Component.js';
 import 'react-markdown';
 import 'classnames';
-import '../use-overrides-1ff68396.js';
+import '../use-overrides-07b626db.js';
 import '../../../link/esm';
 import '../../../list/esm';
 import '../../../typography/esm';

package/markdown/esm/hooks/use-overrides.js

@@ -3,4 +3,4 @@ import 'classnames';
 import '../../../link/esm';
 import '../../../list/esm';
 import '../../../typography/esm';
-export { u as useOverrides } from '../use-overrides-1ff68396.js';
+export { u as useOverrides } from '../use-overrides-07b626db.js';

package/markdown/esm/index.js

@@ -6,7 +6,7 @@ import '../../shared/esm';
 import './Component.js';
 import 'react-markdown';
 import 'classnames';
-import './use-overrides-1ff68396.js';
+import './use-overrides-07b626db.js';
 import '../../link/esm';
 import '../../list/esm';
 import '../../typography/esm';

package/markdown/esm/mobile/index.js

@@ -4,7 +4,7 @@ import 'react';
 import '../Component.js';
 import 'react-markdown';
 import 'classnames';
-import '../use-overrides-1ff68396.js';
+import '../use-overrides-07b626db.js';
 import '../../../link/esm';
 import '../../../list/esm';
 import '../../../typography/esm';

package/markdown/hooks/use-overrides.js

@@ -5,7 +5,7 @@ require('classnames');
 require('../../link');
 require('../../list');
 require('../../typography');
-var hooks_useOverrides = require('../use-overrides-86d99dd7.js');
+var hooks_useOverrides = require('../use-overrides-822accd9.js');
 
 
 

package/markdown/modern/Component.desktop.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Markdown } from './Component.js';
 import 'react-markdown';
 import 'classnames';
-import './use-overrides-7e45f101.js';
+import './use-overrides-b5b09003.js';
 import '../../link/modern';
 import '../../list/modern';
 import '../../typography/modern';

package/markdown/modern/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import cn from 'classnames';
-import { u as useOverrides, s as styles } from './use-overrides-7e45f101.js';
+import { u as useOverrides, s as styles } from './use-overrides-b5b09003.js';
 import { strikethroughRemarkPlugin } from './remark-plugins/strikethrough.js';
 import '../../link/modern';
 import '../../list/modern';

package/markdown/modern/Component.mobile.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Markdown } from './Component.js';
 import 'react-markdown';
 import 'classnames';
-import './use-overrides-7e45f101.js';
+import './use-overrides-b5b09003.js';
 import '../../link/modern';
 import '../../list/modern';
 import '../../typography/modern';

package/markdown/modern/Component.responsive.js

@@ -4,7 +4,7 @@ import { isClient } from '../../shared/modern';
 import { Markdown } from './Component.js';
 import 'react-markdown';
 import 'classnames';
-import './use-overrides-7e45f101.js';
+import './use-overrides-b5b09003.js';
 import '../../link/modern';
 import '../../list/modern';
 import '../../typography/modern';

package/markdown/modern/desktop/index.js

@@ -3,7 +3,7 @@ import 'react';
 import '../Component.js';
 import 'react-markdown';
 import 'classnames';
-import '../use-overrides-7e45f101.js';
+import '../use-overrides-b5b09003.js';
 import '../../../link/modern';
 import '../../../list/modern';
 import '../../../typography/modern';

package/markdown/modern/hooks/use-overrides.js

@@ -3,4 +3,4 @@ import 'classnames';
 import '../../../link/modern';
 import '../../../list/modern';
 import '../../../typography/modern';
-export { u as useOverrides } from '../use-overrides-7e45f101.js';
+export { u as useOverrides } from '../use-overrides-b5b09003.js';

package/markdown/modern/index.js

@@ -5,7 +5,7 @@ import '../../shared/modern';
 import './Component.js';
 import 'react-markdown';
 import 'classnames';
-import './use-overrides-7e45f101.js';
+import './use-overrides-b5b09003.js';
 import '../../link/modern';
 import '../../list/modern';
 import '../../typography/modern';

package/markdown/modern/mobile/index.js

@@ -3,7 +3,7 @@ import 'react';
 import '../Component.js';
 import 'react-markdown';
 import 'classnames';
-import '../use-overrides-7e45f101.js';
+import '../use-overrides-b5b09003.js';
 import '../../../link/modern';
 import '../../../list/modern';
 import '../../../typography/modern';

package/modal/components/controls/Component.js

@@ -4,7 +4,7 @@ var React = require('react');
 var cn = require('classnames');
 var coreComponentsShared = require('../../../shared');
 var ResponsiveContext = require('../../ResponsiveContext.js');
-var layout_module = require('../../layout.module-74d56d9e.js');
+var layout_module = require('../../layout.module-dbae8fb5.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/modal/components/footer/Component.js

@@ -6,7 +6,7 @@ var coreComponentsShared = require('../../../shared');
 var consts = require('../../consts.js');
 var Context = require('../../Context.js');
 var ResponsiveContext = require('../../ResponsiveContext.js');
-var layout_module = require('../../layout.module-74d56d9e.js');
+var layout_module = require('../../layout.module-dbae8fb5.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/modal/esm/Component.responsive.js

@@ -12,7 +12,7 @@ import './consts.js';
 import './Context.js';
 import '../../base-modal/esm';
 import './ResponsiveContext.js';
-import './layout.module-ed84e654.js';
+import './layout.module-8a8d6fa8.js';
 import '../../navigation-bar-private/esm';
 import 'react-merge-refs';
 

package/modal/esm/components/controls/Component.js

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/esm';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-ed84e654.js';
+import { l as layoutStyles } from '../../layout.module-8a8d6fa8.js';
 
 var styles = {"component":"modal__component_6629a"};
 require('./index.css');

package/modal/esm/components/controls/index.js

@@ -3,4 +3,4 @@ import 'react';
 import 'classnames';
 import '../../../../shared/esm';
 import '../../ResponsiveContext.js';
-import '../../layout.module-ed84e654.js';
+import '../../layout.module-8a8d6fa8.js';

package/modal/esm/components/footer/Component.js

@@ -4,7 +4,7 @@ import { getDataTestId } from '../../../../shared/esm';
 import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
 import { ModalContext } from '../../Context.js';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-ed84e654.js';
+import { l as layoutStyles } from '../../layout.module-8a8d6fa8.js';
 import '../../../../base-modal/esm';
 
 var desktopStyles = {"footer":"modal__footer_e5vdf","sticky":"modal__sticky_e5vdf","fullscreen":"modal__fullscreen_e5vdf","size-500":"modal__size-500_e5vdf","size-600":"modal__size-600_e5vdf","size-800":"modal__size-800_e5vdf","size-1140":"modal__size-1140_e5vdf"};

package/modal/esm/desktop/Component.desktop.js

@@ -12,7 +12,7 @@ import '../consts.js';
 import '../ResponsiveContext.js';
 import '../../../shared/esm';
 import '../Context.js';
-import '../layout.module-ed84e654.js';
+import '../layout.module-8a8d6fa8.js';
 import '../../../navigation-bar-private/esm';
 
 var ModalDesktopComponent = forwardRef(function (props, ref) { return (React.createElement(Modal, __assign({}, props, { ref: ref, view: 'desktop' }))); });

package/modal/esm/desktop/index.js

@@ -11,7 +11,7 @@ import '../components/content/Component.js';
 import '../../../shared/esm';
 import '../Context.js';
 import '../components/controls/Component.js';
-import '../layout.module-ed84e654.js';
+import '../layout.module-8a8d6fa8.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';
 import '../../../navigation-bar-private/esm';

package/modal/esm/index.js

@@ -10,7 +10,7 @@ import './Context.js';
 import '../../base-modal/esm';
 import './ResponsiveContext.js';
 import './components/controls/Component.js';
-import './layout.module-ed84e654.js';
+import './layout.module-8a8d6fa8.js';
 import './components/footer/Component.js';
 import './components/header/Component.js';
 import '../../navigation-bar-private/esm';

package/modal/esm/mobile/Component.mobile.js

@@ -12,7 +12,7 @@ import '../consts.js';
 import '../ResponsiveContext.js';
 import '../../../shared/esm';
 import '../Context.js';
-import '../layout.module-ed84e654.js';
+import '../layout.module-8a8d6fa8.js';
 import '../../../navigation-bar-private/esm';
 
 var ModalMobileComponent = forwardRef(function (props, ref) { return (React.createElement(Modal, __assign({}, props, { ref: ref, view: 'mobile' }))); });

package/modal/esm/mobile/index.js

@@ -11,7 +11,7 @@ import '../components/content/Component.js';
 import '../../../shared/esm';
 import '../Context.js';
 import '../components/controls/Component.js';
-import '../layout.module-ed84e654.js';
+import '../layout.module-8a8d6fa8.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';
 import '../../../navigation-bar-private/esm';

package/modal/modern/Component.responsive.js

@@ -11,7 +11,7 @@ import './consts.js';
 import './Context.js';
 import '../../base-modal/modern';
 import './ResponsiveContext.js';
-import './layout.module-169c9cd4.js';
+import './layout.module-2a1bae54.js';
 import '../../navigation-bar-private/modern';
 import 'react-merge-refs';
 

package/modal/modern/components/controls/Component.js

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/modern';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-169c9cd4.js';
+import { l as layoutStyles } from '../../layout.module-2a1bae54.js';
 
 const styles = {"component":"modal__component_6629a"};
 require('./index.css');

package/modal/modern/components/controls/index.js

@@ -3,4 +3,4 @@ import 'react';
 import 'classnames';
 import '../../../../shared/modern';
 import '../../ResponsiveContext.js';
-import '../../layout.module-169c9cd4.js';
+import '../../layout.module-2a1bae54.js';

package/modal/modern/components/footer/Component.js

@@ -4,7 +4,7 @@ import { getDataTestId } from '../../../../shared/modern';
 import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
 import { ModalContext } from '../../Context.js';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-169c9cd4.js';
+import { l as layoutStyles } from '../../layout.module-2a1bae54.js';
 import '../../../../base-modal/modern';
 
 const desktopStyles = {"footer":"modal__footer_e5vdf","sticky":"modal__sticky_e5vdf","fullscreen":"modal__fullscreen_e5vdf","size-500":"modal__size-500_e5vdf","size-600":"modal__size-600_e5vdf","size-800":"modal__size-800_e5vdf","size-1140":"modal__size-1140_e5vdf"};

package/modal/modern/desktop/Component.desktop.js

@@ -11,7 +11,7 @@ import '../consts.js';
 import '../ResponsiveContext.js';
 import '../../../shared/modern';
 import '../Context.js';
-import '../layout.module-169c9cd4.js';
+import '../layout.module-2a1bae54.js';
 import '../../../navigation-bar-private/modern';
 
 const ModalDesktopComponent = forwardRef((props, ref) => (React.createElement(Modal, { ...props, ref: ref, view: 'desktop' })));

package/modal/modern/desktop/index.js

@@ -10,7 +10,7 @@ import '../components/content/Component.js';
 import '../../../shared/modern';
 import '../Context.js';
 import '../components/controls/Component.js';
-import '../layout.module-169c9cd4.js';
+import '../layout.module-2a1bae54.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';
 import '../../../navigation-bar-private/modern';

package/modal/modern/index.js

@@ -9,7 +9,7 @@ import './Context.js';
 import '../../base-modal/modern';
 import './ResponsiveContext.js';
 import './components/controls/Component.js';
-import './layout.module-169c9cd4.js';
+import './layout.module-2a1bae54.js';
 import './components/footer/Component.js';
 import './components/header/Component.js';
 import '../../navigation-bar-private/modern';

package/modal/modern/mobile/Component.mobile.js

@@ -11,7 +11,7 @@ import '../consts.js';
 import '../ResponsiveContext.js';
 import '../../../shared/modern';
 import '../Context.js';
-import '../layout.module-169c9cd4.js';
+import '../layout.module-2a1bae54.js';
 import '../../../navigation-bar-private/modern';
 
 const ModalMobileComponent = forwardRef((props, ref) => (React.createElement(Modal, { ...props, ref: ref, view: 'mobile' })));

package/modal/modern/mobile/index.js

@@ -10,7 +10,7 @@ import '../components/content/Component.js';
 import '../../../shared/modern';
 import '../Context.js';
 import '../components/controls/Component.js';
-import '../layout.module-169c9cd4.js';
+import '../layout.module-2a1bae54.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';
 import '../../../navigation-bar-private/modern';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfalab/core-components",
-  "version": "46.0.0-beta.5",
+  "version": "46.0.0-beta.6",
   "license": "MIT",
   "repository": {
     "type": "git",

package/pass-code/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/Component.js

@@ -12,11 +12,11 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"pass-code__component_13oks","message":"pass-code__message_13oks","error":"pass-code__error_13oks"};
+var commonStyles = {"component":"pass-code__component_13oks","inputProgressContainer":"pass-code__inputProgressContainer_13oks","message":"pass-code__message_13oks"};
 require('./index.css');
 
 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());
@@ -29,13 +29,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.message, styles.error), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'error') }, error)); };
-    var renderMessage = function () { return (React__default.default.createElement("div", { className: styles.message, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'message') }, message)); };
-    return (React__default.default.createElement("div", { className: cn__default.default(styles.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.component, styles.component, className), ref: ref, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'wrapper') },
+        React__default.default.createElement("div", { className: cn__default.default(commonStyles.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/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/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');
+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/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/components/InputProgress/Component.js

@@ -4,13 +4,14 @@ var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
 var cn = require('classnames');
 var coreComponentsShared = require('../../../shared');
+var components_InputProgress_useInputProgress = require('./useInputProgress.js');
 
 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 = {"component":"pass-code__component_ar2ke","dot":"pass-code__dot_ar2ke","error":"pass-code__error_ar2ke","filled":"pass-code__filled_ar2ke"};
+var styles = {"component":"pass-code__component_ar2ke","dotWrapper":"pass-code__dotWrapper_ar2ke","dot":"pass-code__dot_ar2ke","filled":"pass-code__filled_ar2ke","animatedFill":"pass-code__animatedFill_ar2ke","dotFilled":"pass-code__dotFilled_ar2ke","error":"pass-code__error_ar2ke","success":"pass-code__success_ar2ke","dotSuccessFilled":"pass-code__dotSuccessFilled_ar2ke","rawSuccess":"pass-code__rawSuccess_ar2ke"};
 require('./index.css');
 
 var transitions = {"enter":"pass-code__enter_oif5e","enterActive":"pass-code__enterActive_oif5e","exit":"pass-code__exit_oif5e","exitActive":"pass-code__exitActive_oif5e","shake":"pass-code__shake_oif5e"};
@@ -20,20 +21,27 @@ require('./transitions.css');
 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.component, (_b = {}, _b[transitions.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.dot, (_a = {},
-                    _a[styles.error] = filled && error,
-                    _a[styles.filled] = filled,
-                    _a)) }));
+            return (React__default.default.createElement("div", { className: cn__default.default(styles.dotWrapper), key: i },
+                React__default.default.createElement("div", { className: cn__default.default(styles.dot, (_a = {},
+                        _a[styles.error] = filled && error,
+                        _a[styles.animatedFill] = filled,
+                        _a[styles.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, unmountOnExit: true },
-                React__default.default.createElement("div", { className: cn__default.default(styles.dot, styles.filled, (_a = {}, _a[styles.error] = error, _a)) })));
+                React__default.default.createElement("div", { className: cn__default.default(styles.dot, styles.filled, (_a = {},
+                        _a[styles.error] = error,
+                        _a[styles.success] = success && !rawSuccess,
+                        _a[styles.rawSuccess] = success && rawSuccess,
+                        _a)), onAnimationEnd: resetSuccessAnimation })));
         })));
 };