@alfalab/core-components 32.1.1 → 32.2.0-beta.0

package/confirmation/components/screens/initial/index.css

@@ -1,6 +1,7 @@
 /* hash: kyey6 */
 :root {
     --color-light-text-primary: #0b1f35;
+    --color-light-text-secondary: #546272;
 }
 :root {
 
@@ -12,7 +13,9 @@
 }
 :root {
     --gap-2xs: 4px;
+    --gap-s: 12px;
     --gap-m: 16px;
+    --gap-l: 20px;
     --gap-xl: 24px;
     --gap-2xl: 32px;
     --gap-2xs-neg: -4px;
@@ -22,41 +25,32 @@
         sans-serif;
 }
 :root {
-    /* title */
-    --confirmation-title-font-size: 22px;
-    --confirmation-title-line-height: 26px;
-    --confirmation-title-font-weight: 700;
-    --confirmation-title-font-family: var(--font-family-system);
-    --confirmation-title-color: var(--color-light-text-primary);
-    --confirmation-title-font-feature-settings: normal;
+    /* desktop */
 
-    /* text */
+    /* mobile */
 
-    /* error */
+    /* text */
+    --confirmation-text-font-size: 16px;
+    --confirmation-text-line-height: 24px;
+    --confirmation-text-font-weight: 400;
+    --confirmation-text-font-family: var(--font-family-system);
+    --confirmation-text-color: var(--color-light-text-primary)
 
-    /* input */
+    /* header */
 }
 .confirmation__component_66h8v {
     display: flex;
     flex-direction: column;
 }
-.confirmation__header_66h8v {
-    margin: 0;
-    margin-bottom: var(--gap-xl);
-    font-size: var(--confirmation-title-font-size);
-    line-height: var(--confirmation-title-line-height);
-    font-weight: var(--confirmation-title-font-weight);
-    font-family: var(--confirmation-title-font-family);
-    color: var(--confirmation-title-color);
-    font-feature-settings: var(--confirmation-title-font-feature-settings);
+.confirmation__typographyTheme_66h8v {
+    font-size: var(--confirmation-text-font-size);
+    line-height: var(--confirmation-text-line-height);
+    font-weight: var(--confirmation-text-font-weight);
+    font-family: var(--confirmation-text-font-family);
+    color: var(--confirmation-text-color);
 }
 .confirmation__phone_66h8v {
-    margin-bottom: var(--gap-2xl);
     color: var(--color-light-text-primary);
-}
-.confirmation__inputContainer_66h8v {
-    display: flex;
-    flex-direction: column;
     margin-bottom: var(--gap-2xl);
 }
 .confirmation__compact_66h8v {
@@ -66,36 +60,45 @@
     display: flex;
     align-items: center;
 }
+.confirmation__left_66h8v {
+    align-items: flex-start;
+}
 .confirmation__center_66h8v {
     align-items: center;
     text-align: center
 }
-.confirmation__center_66h8v .confirmation__codeInput_66h8v,
-    .confirmation__center_66h8v .confirmation__loaderWrap_66h8v {
+.confirmation__center_66h8v .confirmation__loaderWrap_66h8v {
         justify-content: center;
     }
 .confirmation__center_66h8v input {
         margin: 0 var(--gap-2xs);
     }
+.confirmation__codeInput_66h8v {
+    margin-bottom: var(--gap-s);
+}
 .confirmation__smsComeLink_66h8v {
     font-size: 14px;
     line-height: 20px;
-    font-weight: 400;
+    font-weight: 500;
 }
 .confirmation__countdownContainer_66h8v {
+    color: var(--color-light-text-secondary);
     margin-bottom: var(--gap-xl);
 }
+.confirmation__countdownMobile_66h8v {
+    margin-bottom: var(--gap-l);
+}
+.confirmation__countdownLoaderMobile_66h8v {
+    margin-bottom: var(--gap-m);
+}
 .confirmation__getCodeButton_66h8v {
     position: relative;
     top: var(--gap-2xs-neg);
     margin-bottom: var(--gap-m);
 }
-.confirmation__countdown_66h8v {
-    display: flex;
+.confirmation__getCodeButtonMobile_66h8v {
+    margin-bottom: 0;
 }
-.confirmation__countdownTimer_66h8v {
-    display: flex;
-    justify-content: flex-start;
-    min-width: 45px;
-    margin-left: var(--gap-2xs);
+.confirmation__containerInput_66h8v {
+    min-height: 80px;
 }

package/confirmation/components/screens/initial/index.js

@@ -7,9 +7,11 @@ require('../../../utils.js');
 require('../../../context.js');
 require('../../../../code-input');
 require('../../../../link');
-require('../../../countdown-section-44184a06.js');
-require('../../../../loader');
+require('../../../../typography');
 require('../../../../button');
+require('../../header/component.js');
+require('../../../../loader');
+require('../../../countdown-section-6f3b9bf2.js');
 var components_screens_initial_component = require('./component.js');
 
 

package/confirmation/components/screens/temp-block/component.d.ts

@@ -1,3 +1,9 @@
-/// <reference types="react" />
-declare const TempBlock: () => JSX.Element;
-export { TempBlock };
+import { FC } from 'react';
+type TempBlockProps = {
+    /**
+     * Отображать в мобильной версии экран компонента
+     */
+    mobile?: boolean;
+};
+declare const TempBlock: FC<TempBlockProps>;
+export { TempBlockProps, TempBlock };

package/confirmation/components/screens/temp-block/component.js

@@ -1,20 +1,26 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var cn = require('classnames');
 var utils = require('../../../utils.js');
 var context = require('../../../context.js');
+var coreComponentsTypography = require('../../../../typography');
+var components_header_component = require('../../header/component.js');
 var components_countdownLoader_component = require('../../countdown-loader/component.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"header":"confirmation__header_1j0oe","description":"confirmation__description_1j0oe","countdownWrap":"confirmation__countdownWrap_1j0oe","loader":"confirmation__loader_1j0oe"};
+var styles = {"typographyTheme":"confirmation__typographyTheme_1j0oe","description":"confirmation__description_1j0oe","countdownWrap":"confirmation__countdownWrap_1j0oe","loader":"confirmation__loader_1j0oe"};
 require('./index.css');
 
-var TempBlock = function () {
-    var _a = React.useContext(context.ConfirmationContext), texts = _a.texts, tempBlockDuration = _a.tempBlockDuration, onChangeScreen = _a.onChangeScreen, onTempBlockFinished = _a.onTempBlockFinished;
-    var _b = utils.useCountdown(tempBlockDuration), timeLeft = _b[0], startTimer = _b[1];
+var TempBlock = function (_a) {
+    var _b, _c;
+    var mobile = _a.mobile;
+    var _d = React.useContext(context.ConfirmationContext), texts = _d.texts, tempBlockDuration = _d.tempBlockDuration, onChangeScreen = _d.onChangeScreen, onTempBlockFinished = _d.onTempBlockFinished;
+    var _e = utils.useCountdown(tempBlockDuration), timeLeft = _e[0], startTimer = _e[1];
     React.useEffect(function () {
         startTimer();
     }, [startTimer]);
@@ -24,9 +30,9 @@ var TempBlock = function () {
         }
     }, [timeLeft, onChangeScreen, onTempBlockFinished]);
     return (React__default['default'].createElement(React.Fragment, null,
-        React__default['default'].createElement("h3", { className: styles.header }, texts.tempBlockTitle),
-        React__default['default'].createElement("div", { className: styles.description }, texts.tempBlockDescription),
-        React__default['default'].createElement("div", { className: styles.countdownWrap },
+        React__default['default'].createElement(components_header_component.Header, { mobile: mobile }, texts.tempBlockTitle),
+        React__default['default'].createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', color: 'primary', className: cn__default['default'](styles.description, (_b = {}, _b[styles.typographyTheme] = !mobile, _b)) }, texts.tempBlockDescription),
+        React__default['default'].createElement("div", { className: cn__default['default'](styles.countdownWrap, (_c = {}, _c[styles.typographyTheme] = !mobile, _c)) },
             React__default['default'].createElement(components_countdownLoader_component.CountdownLoader, { progress: 1 - timeLeft / tempBlockDuration, className: styles.loader }),
             utils.formatMsAsMinutes(timeLeft))));
 };

package/confirmation/components/screens/temp-block/index.css

@@ -1,7 +1,6 @@
 /* hash: 8p0gi */
 :root {
     --color-light-text-primary: #0b1f35;
-    --color-light-text-secondary: #546272;
 }
 :root {
 
@@ -13,51 +12,34 @@
 }
 :root {
     --gap-xs: 8px;
-    --gap-xl: 24px;
-    --gap-2xl: 32px;
 }
 :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
 }
 :root {
-    /* title */
-    --confirmation-title-font-size: 22px;
-    --confirmation-title-line-height: 26px;
-    --confirmation-title-font-weight: 700;
-    --confirmation-title-font-family: var(--font-family-system);
-    --confirmation-title-color: var(--color-light-text-primary);
-    --confirmation-title-font-feature-settings: normal;
+    /* desktop */
+
+    /* mobile */
 
     /* text */
     --confirmation-text-font-size: 16px;
     --confirmation-text-line-height: 24px;
     --confirmation-text-font-weight: 400;
     --confirmation-text-font-family: var(--font-family-system);
-    --confirmation-text-color: var(--color-light-text-secondary);
-
-    /* error */
+    --confirmation-text-color: var(--color-light-text-primary)
 
-    /* input */
+    /* header */
 }
-.confirmation__header_1j0oe {
-    margin: 0;
-    margin-bottom: var(--gap-xl);
-    font-size: var(--confirmation-title-font-size);
-    line-height: var(--confirmation-title-line-height);
-    font-weight: var(--confirmation-title-font-weight);
-    font-family: var(--confirmation-title-font-family);
-    color: var(--confirmation-title-color);
-    font-feature-settings: var(--confirmation-title-font-feature-settings);
-}
-.confirmation__description_1j0oe {
+.confirmation__typographyTheme_1j0oe {
     font-size: var(--confirmation-text-font-size);
     line-height: var(--confirmation-text-line-height);
     font-weight: var(--confirmation-text-font-weight);
     font-family: var(--confirmation-text-font-family);
     color: var(--confirmation-text-color);
-
-    margin-bottom: var(--gap-2xl);
+}
+.confirmation__description_1j0oe {
+    margin-bottom: var(--gap-xs);
 }
 .confirmation__countdownWrap_1j0oe {
     display: flex;

package/confirmation/components/screens/temp-block/index.js

@@ -1,8 +1,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
+require('classnames');
 require('../../../utils.js');
 require('../../../context.js');
+require('../../../../typography');
+require('../../header/component.js');
 require('../../countdown-loader/component.js');
 var components_screens_tempBlock_component = require('./component.js');
 

package/confirmation/{esm/countdown-section-3aba82dd.d.ts → countdown-section-6f3b9bf2.d.ts}

@@ -3,6 +3,7 @@ type CountdownSectionProps = {
     codeSendHintVisible: boolean;
     timePassed: boolean;
     processing: boolean;
+    mobile?: boolean;
     handleSmsRetryClick: () => void;
 };
 declare const CountdownSection: FC<CountdownSectionProps>;

package/confirmation/countdown-section-6f3b9bf2.js

@@ -0,0 +1,54 @@
+var React = require('react');
+var cn = require('classnames');
+var utils = require('./utils.js');
+var context = require('./context.js');
+var coreComponentsTypography = require('../typography');
+var coreComponentsButton = require('../button');
+var coreComponentsLoader = require('../loader');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var styles = {"component":"confirmation__component_66h8v","typographyTheme":"confirmation__typographyTheme_66h8v","phone":"confirmation__phone_66h8v","compact":"confirmation__compact_66h8v","loaderWrap":"confirmation__loaderWrap_66h8v","left":"confirmation__left_66h8v","center":"confirmation__center_66h8v","codeInput":"confirmation__codeInput_66h8v","smsComeLink":"confirmation__smsComeLink_66h8v","countdownContainer":"confirmation__countdownContainer_66h8v","countdownMobile":"confirmation__countdownMobile_66h8v","countdownLoaderMobile":"confirmation__countdownLoaderMobile_66h8v","getCodeButton":"confirmation__getCodeButton_66h8v","getCodeButtonMobile":"confirmation__getCodeButtonMobile_66h8v","containerInput":"confirmation__containerInput_66h8v"};
+require('./components/screens/initial/index.css');
+
+var CountdownSection = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var codeSendHintVisible = _a.codeSendHintVisible, timePassed = _a.timePassed, processing = _a.processing, mobile = _a.mobile, handleSmsRetryClick = _a.handleSmsRetryClick;
+    var _g = React.useContext(context.ConfirmationContext), state = _g.state, texts = _g.texts, timeLeft = _g.timeLeft, blockSmsRetry = _g.blockSmsRetry;
+    if (codeSendHintVisible) {
+        return (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { className: cn__default['default'](styles.countdownContainer, (_b = {},
+                _b[styles.countdownMobile] = mobile,
+                _b[styles.typographyTheme] = !mobile,
+                _b)), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, texts.codeSended));
+    }
+    if (processing) {
+        return (React__default['default'].createElement("div", { className: cn__default['default'](styles.loaderWrap, styles.countdownContainer, (_c = {},
+                _c[styles.countdownLoaderMobile] = mobile,
+                _c[styles.typographyTheme] = !mobile,
+                _c)) },
+            React__default['default'].createElement(coreComponentsLoader.Loader, null),
+            React__default['default'].createElement("span", { className: styles.loaderText }, state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending)));
+    }
+    if (blockSmsRetry) {
+        return (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { className: cn__default['default'](styles.countdownContainer, (_d = {},
+                _d[styles.countdownMobile] = mobile,
+                _d[styles.typographyTheme] = !mobile,
+                _d)), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, texts.noAttemptsLeft));
+    }
+    if (timePassed) {
+        return (React__default['default'].createElement(coreComponentsButton.Button, { size: mobile ? 'xs' : 'xxs', view: 'secondary', onClick: handleSmsRetryClick, className: cn__default['default'](styles.getCodeButton, (_e = {}, _e[styles.getCodeButtonMobile] = mobile, _e)) }, texts.buttonRetry));
+    }
+    return (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { className: cn__default['default'](styles.countdown, styles.countdownContainer, (_f = {},
+            _f[styles.countdownMobile] = mobile,
+            _f[styles.typographyTheme] = !mobile,
+            _f)), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' },
+        texts.countdown,
+        " ",
+        utils.formatMsAsMinutes(timeLeft)));
+};
+
+exports.CountdownSection = CountdownSection;
+exports.styles = styles;

package/confirmation/cssm/component-5c5b24ae.d.ts

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { ConfirmationProps } from "./types";
+declare function __extends(d: any, b: any): void;
+declare function __rest(s: any, e: any): {};
+declare function __decorate(decorators: any, target: any, key: any, desc: any, ...args: any[]): any;
+declare function __param(paramIndex: any, decorator: any): (target: any, key: any) => void;
+declare function __metadata(metadataKey: any, metadataValue: any): any;
+declare function __awaiter(thisArg: any, _arguments: any, P: any, generator: any): any;
+declare function __generator(thisArg: any, body: any): {
+    next: (v: any) => any;
+    throw: (v: any) => any;
+    return: (v: any) => any;
+};
+declare function __exportStar(m: any, o: any): void;
+declare function __values(o: any): any;
+declare function __read(o: any, n: any): any;
+declare function __spread(...args: any[]): any[];
+declare function __spreadArrays(...args: any[]): any[];
+declare function __await(v: any): any;
+declare class __await {
+    constructor(v: any);
+    v: any;
+}
+declare function __asyncGenerator(thisArg: any, _arguments: any, generator: any): {};
+declare function __asyncDelegator(o: any): {};
+declare function __asyncValues(o: any): any;
+declare function __makeTemplateObject(cooked: any, raw: any): any;
+declare function __importStar(mod: any): any;
+declare function __importDefault(mod: any): any;
+declare function __classPrivateFieldGet(receiver: any, privateMap: any): any;
+declare function __classPrivateFieldSet(receiver: any, privateMap: any, value: any): any;
+declare function __assign(...args: any[]): any;
+declare function __createBinding(o: any, m: any, k: any, k2: any): void;
+declare const BaseConfirmation: FC<ConfirmationProps>;
+export { __extends, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __assign, __createBinding, BaseConfirmation };

package/confirmation/cssm/{component.js → component-5c5b24ae.js}

@@ -1,27 +1,14 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
 var utils = require('./utils.js');
 var context = require('./context.js');
 var types = require('./types.js');
-require('../../code-input/cssm');
-require('../../link/cssm');
-require('./components/screens/initial/index.module.css');
-require('../../loader/cssm');
-require('../../button/cssm');
-require('./components/screens/initial/countdown-section.js');
 var components_screens_initial_component = require('./components/screens/initial/component.js');
-require('./components/screens/hint/index.module.css');
 var components_screens_hint_component = require('./components/screens/hint/component.js');
-require('./components/screens/fatal-error/index.module.css');
 var components_screens_fatalError_component = require('./components/screens/fatal-error/component.js');
-require('./components/countdown-loader/index.module.css');
-require('./components/countdown-loader/component.js');
-require('./components/screens/temp-block/index.module.css');
 var components_screens_tempBlock_component = require('./components/screens/temp-block/component.js');
-var styles = require('./index.module.css');
+var styles = require('./components/base-confirmation/index.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -43,8 +30,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
+exports.__assign = function () {
+    exports.__assign = Object.assign || function __assign(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s)
@@ -53,7 +40,7 @@ var __assign = function () {
         }
         return t;
     };
-    return __assign.apply(this, arguments);
+    return exports.__assign.apply(this, arguments);
 };
 function __rest(s, e) {
     var t = {};
@@ -74,8 +61,8 @@ var confirmationScreens = {
     FATAL_ERROR: components_screens_fatalError_component.FatalError,
     TEMP_BLOCK: components_screens_tempBlock_component.TempBlock,
 };
-var Confirmation = function (_a) {
-    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b, children = _a.children, _c = _a.requiredCharAmount, requiredCharAmount = _c === void 0 ? 5 : _c, _d = _a.countdownDuration, countdownDuration = _d === void 0 ? utils.ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? utils.ONE_DAY : _e, phone = _a.phone, blockSmsRetry = _a.blockSmsRetry, dataTestId = _a.dataTestId, className = _a.className, getScreensMap = _a.getScreensMap, onInputFinished = _a.onInputFinished, onChangeState = _a.onChangeState, onSmsRetryClick = _a.onSmsRetryClick, onChangeScreen = _a.onChangeScreen, onFatalErrorOkButtonClick = _a.onFatalErrorOkButtonClick, onTempBlockFinished = _a.onTempBlockFinished, restProps = __rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished"]);
+var BaseConfirmation = function (_a) {
+    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b, children = _a.children, _c = _a.requiredCharAmount, requiredCharAmount = _c === void 0 ? 5 : _c, _d = _a.countdownDuration, countdownDuration = _d === void 0 ? utils.ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? utils.ONE_DAY : _e, phone = _a.phone, blockSmsRetry = _a.blockSmsRetry, dataTestId = _a.dataTestId, className = _a.className, getScreensMap = _a.getScreensMap, onInputFinished = _a.onInputFinished, onChangeState = _a.onChangeState, onSmsRetryClick = _a.onSmsRetryClick, onChangeScreen = _a.onChangeScreen, onFatalErrorOkButtonClick = _a.onFatalErrorOkButtonClick, onTempBlockFinished = _a.onTempBlockFinished, mobile = _a.mobile, restProps = __rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished", "mobile"]);
     var _f = utils.useCountdown(countdownDuration), timeLeft = _f[0], startTimer = _f[1], stopTimer = _f[2];
     var prevState = hooks.usePrevious(state);
     React.useEffect(function () {
@@ -112,7 +99,7 @@ var Confirmation = function (_a) {
     };
     var contextValue = {
         alignContent: alignContent,
-        texts: __assign(__assign({}, types.defaultTexts), restProps.texts),
+        texts: exports.__assign(exports.__assign({}, types.defaultTexts), restProps.texts),
         state: state,
         screen: screen,
         requiredCharAmount: requiredCharAmount,
@@ -131,7 +118,8 @@ var Confirmation = function (_a) {
     var screensMap = getScreensMap ? getScreensMap(confirmationScreens) : confirmationScreens;
     var CurrentScreen = screensMap[screen];
     return (React__default['default'].createElement(context.ConfirmationContext.Provider, { value: contextValue },
-        React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][alignContent], className), "data-test-id": dataTestId }, CurrentScreen && React__default['default'].createElement(CurrentScreen, null))));
+        React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][alignContent], className), "data-test-id": dataTestId }, CurrentScreen && React__default['default'].createElement(CurrentScreen, { mobile: mobile }))));
 };
 
-exports.Confirmation = Confirmation;
+exports.BaseConfirmation = BaseConfirmation;
+exports.__rest = __rest;

package/confirmation/cssm/component.desktop.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ConfirmationProps } from "./types";
+type DesktopConfirmationProps = Omit<ConfirmationProps, 'mobile'>;
+declare const ConfirmationDesktop: FC<DesktopConfirmationProps>;
+export { DesktopConfirmationProps, ConfirmationDesktop };

package/confirmation/cssm/component.desktop.js

@@ -0,0 +1,36 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseConfirmation_component = require('./component-5c5b24ae.js');
+var React = require('react');
+require('classnames');
+require('@alfalab/hooks');
+require('./utils.js');
+require('./context.js');
+require('./types.js');
+require('../../code-input/cssm');
+require('../../link/cssm');
+require('../../typography/cssm');
+require('../../button/cssm');
+require('./components/header/index.module.css');
+require('./components/header/component.js');
+require('../../loader/cssm');
+require('./components/screens/initial/index.module.css');
+require('./components/screens/initial/countdown-section.js');
+require('./components/screens/initial/component.js');
+require('./components/screens/hint/index.module.css');
+require('./components/screens/hint/component.js');
+require('./components/screens/fatal-error/index.module.css');
+require('./components/screens/fatal-error/component.js');
+require('./components/countdown-loader/index.module.css');
+require('./components/countdown-loader/component.js');
+require('./components/screens/temp-block/index.module.css');
+require('./components/screens/temp-block/component.js');
+require('./components/base-confirmation/index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ConfirmationDesktop = function (props) { return (React__default['default'].createElement(components_baseConfirmation_component.BaseConfirmation, components_baseConfirmation_component.__assign({}, props))); };
+
+exports.ConfirmationDesktop = ConfirmationDesktop;

package/confirmation/cssm/component.mobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ConfirmationProps } from "./types";
+type MobileConfirmationProps = Omit<ConfirmationProps, 'mobile'>;
+declare const ConfirmationMobile: FC<MobileConfirmationProps>;
+export { MobileConfirmationProps, ConfirmationMobile };

package/confirmation/cssm/component.mobile.js

@@ -0,0 +1,42 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseConfirmation_component = require('./component-5c5b24ae.js');
+var React = require('react');
+var cn = require('classnames');
+require('@alfalab/hooks');
+require('./utils.js');
+require('./context.js');
+require('./types.js');
+require('../../code-input/cssm');
+require('../../link/cssm');
+require('../../typography/cssm');
+require('../../button/cssm');
+require('./components/header/index.module.css');
+require('./components/header/component.js');
+require('../../loader/cssm');
+require('./components/screens/initial/index.module.css');
+require('./components/screens/initial/countdown-section.js');
+require('./components/screens/initial/component.js');
+require('./components/screens/hint/index.module.css');
+require('./components/screens/hint/component.js');
+require('./components/screens/fatal-error/index.module.css');
+require('./components/screens/fatal-error/component.js');
+require('./components/countdown-loader/index.module.css');
+require('./components/countdown-loader/component.js');
+require('./components/screens/temp-block/index.module.css');
+require('./components/screens/temp-block/component.js');
+require('./components/base-confirmation/index.module.css');
+var styles = require('./mobile.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var ConfirmationMobile = function (_a) {
+    var className = _a.className, resProps = components_baseConfirmation_component.__rest(_a, ["className"]);
+    return (React__default['default'].createElement(components_baseConfirmation_component.BaseConfirmation, components_baseConfirmation_component.__assign({ mobile: true, className: cn__default['default'](className, styles__default['default'].container) }, resProps)));
+};
+
+exports.ConfirmationMobile = ConfirmationMobile;

package/confirmation/cssm/component.responsive.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { ConfirmationProps } from "./types";
+type ResponsiveConfirmationProps = Omit<ConfirmationProps, 'confirmationScreens'>;
+type ConfirmationMedia = 'desktop' | 'mobile';
+declare const ConfirmationResponsive: FC<ResponsiveConfirmationProps>;
+export { ResponsiveConfirmationProps, ConfirmationMedia, ConfirmationResponsive };

package/confirmation/cssm/component.responsive.js

@@ -0,0 +1,45 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseConfirmation_component = require('./component-5c5b24ae.js');
+var React = require('react');
+require('classnames');
+var hooks = require('@alfalab/hooks');
+require('./utils.js');
+require('./context.js');
+require('./types.js');
+require('../../code-input/cssm');
+require('../../link/cssm');
+require('../../typography/cssm');
+require('../../button/cssm');
+require('./components/header/index.module.css');
+require('./components/header/component.js');
+require('../../loader/cssm');
+require('./components/screens/initial/index.module.css');
+require('./components/screens/initial/countdown-section.js');
+require('./components/screens/initial/component.js');
+require('./components/screens/hint/index.module.css');
+require('./components/screens/hint/component.js');
+require('./components/screens/fatal-error/index.module.css');
+require('./components/screens/fatal-error/component.js');
+require('./components/countdown-loader/index.module.css');
+require('./components/countdown-loader/component.js');
+require('./components/screens/temp-block/index.module.css');
+require('./components/screens/temp-block/component.js');
+require('./components/base-confirmation/index.module.css');
+var component_desktop = require('./component.desktop.js');
+require('./mobile.module.css');
+var component_mobile = require('./component.mobile.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ConfirmationResponsive = function (props) {
+    var view = hooks.useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop')[0];
+    return view === 'desktop' ? (React__default['default'].createElement(component_desktop.ConfirmationDesktop, components_baseConfirmation_component.__assign({}, props))) : (React__default['default'].createElement(component_mobile.ConfirmationMobile, components_baseConfirmation_component.__assign({}, props)));
+};
+
+exports.ConfirmationResponsive = ConfirmationResponsive;