@alfalab/core-components-confirmation 13.10.4 → 13.10.5

package/modern/{countdown-section-113af7c0.js → countdown-section-4580d2ec.js}

@@ -6,7 +6,7 @@ import { Text } from '@alfalab/core-components-typography/modern';
 import { ConfirmationContext } from './context.js';
 import { formatMsAsMinutes } from './utils.js';
 
-const styles = {"component":"confirmation__component_y8rk3","phone":"confirmation__phone_y8rk3","typographyTheme":"confirmation__typographyTheme_y8rk3","typographyThemeMobile":"confirmation__typographyThemeMobile_y8rk3","compact":"confirmation__compact_y8rk3","loaderWrap":"confirmation__loaderWrap_y8rk3","left":"confirmation__left_y8rk3","center":"confirmation__center_y8rk3","codeInput":"confirmation__codeInput_y8rk3","smsBtn":"confirmation__smsBtn_y8rk3","smsComeLink":"confirmation__smsComeLink_y8rk3","countdownContainer":"confirmation__countdownContainer_y8rk3","countdownMobile":"confirmation__countdownMobile_y8rk3","countdownLoaderMobile":"confirmation__countdownLoaderMobile_y8rk3","timeCounter":"confirmation__timeCounter_y8rk3","getCodeButton":"confirmation__getCodeButton_y8rk3","getCodeButtonMobile":"confirmation__getCodeButtonMobile_y8rk3","containerInput":"confirmation__containerInput_y8rk3"};
+const styles = {"component":"confirmation__component_mkw51","phone":"confirmation__phone_mkw51","typographyTheme":"confirmation__typographyTheme_mkw51","typographyThemeMobile":"confirmation__typographyThemeMobile_mkw51","compact":"confirmation__compact_mkw51","loaderWrap":"confirmation__loaderWrap_mkw51","left":"confirmation__left_mkw51","center":"confirmation__center_mkw51","codeInput":"confirmation__codeInput_mkw51","smsBtn":"confirmation__smsBtn_mkw51","smsComeLink":"confirmation__smsComeLink_mkw51","countdownContainer":"confirmation__countdownContainer_mkw51","countdownMobile":"confirmation__countdownMobile_mkw51","countdownLoaderMobile":"confirmation__countdownLoaderMobile_mkw51","timeCounter":"confirmation__timeCounter_mkw51","getCodeButton":"confirmation__getCodeButton_mkw51","getCodeButtonMobile":"confirmation__getCodeButtonMobile_mkw51","containerInput":"confirmation__containerInput_mkw51"};
 require('./components/screens/initial/index.css')
 
 const CountdownSection = ({ codeSendHintVisible, timePassed, processing, mobile, handleSmsRetryClick, }) => {

package/modern/mobile/component.mobile.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { BaseConfirmation } from '../components/base-confirmation/component.js';
 
-const styles = {"container":"confirmation__container_jofv4"};
+const styles = {"container":"confirmation__container_80kg1"};
 require('./mobile.css')
 
 const ConfirmationMobile = ({ className, ...resProps }) => (React.createElement(BaseConfirmation, { mobile: true, className: cn(className, styles.container), ...resProps }));

package/modern/mobile/mobile.css

@@ -1,4 +1,4 @@
-/* hash: ysde4 */
-.confirmation__container_jofv4 {
+/* hash: 1v279 */
+.confirmation__container_80kg1 {
     max-width: 288px;
 }

package/moderncssm/components/base-confirmation/component.js

@@ -83,7 +83,9 @@ const BaseConfirmation = ({ state, screen, alignContent = 'left', children, requ
     const screensMap = customScreen || confirmationScreens;
     const CurrentScreen = screensMap[screen];
     return (React.createElement(ConfirmationContext.Provider, { value: contextValue },
-        React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId }, CurrentScreen && React.createElement(CurrentScreen, { mobile: mobile }))));
+        React.createElement("div", { className: cn(styles.component, className, {
+                [styles.center]: alignContent === 'center',
+            }), "data-test-id": dataTestId }, CurrentScreen && React.createElement(CurrentScreen, { mobile: mobile }))));
 };
 
 export { BaseConfirmation };

package/moderncssm/components/base-confirmation/index.module.css

@@ -3,6 +3,9 @@
 .component {
     width: 100%;
     max-width: 388px;
-    margin: var(--gap-0) auto;
-    color: var(--color-light-text-secondary);
+    color: var(--color-light-text-secondary)
 }
+
+.component.center {
+        margin: var(--gap-0) auto;
+    }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-confirmation",
-    "version": "13.10.4",
+    "version": "13.10.5",
     "description": "Sms confirmation component",
     "keywords": [],
     "license": "MIT",
@@ -12,20 +12,20 @@
     },
     "sideEffects": false,
     "dependencies": {
-        "@alfalab/core-components-button": "^11.11.9",
-        "@alfalab/core-components-code-input": "^3.9.9",
+        "@alfalab/core-components-button": "^11.11.10",
+        "@alfalab/core-components-code-input": "^3.9.10",
         "@alfalab/core-components-link": "^5.3.4",
-        "@alfalab/core-components-spinner": "^4.0.8",
-        "@alfalab/core-components-typography": "^4.14.2",
+        "@alfalab/core-components-spinner": "^4.0.9",
+        "@alfalab/core-components-typography": "^4.14.3",
         "@alfalab/core-components-mq": "^4.4.1",
         "@alfalab/hooks": "^1.13.1",
         "classnames": "^2.5.1",
         "tslib": "^2.4.0",
-        "@alfalab/core-components-shared": "^0.17.1"
+        "@alfalab/core-components-shared": "^0.18.0"
     },
     "peerDependencies": {
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
-    "themesVersion": "13.7.3",
-    "varsVersion": "9.20.0"
+    "themesVersion": "13.7.4",
+    "varsVersion": "9.20.1"
 }

package/src/components/base-confirmation/component.tsx

@@ -130,7 +130,12 @@ export const BaseConfirmation: FC<ConfirmationProps> = ({
 
     return (
         <ConfirmationContext.Provider value={contextValue}>
-            <div className={cn(styles.component, className)} data-test-id={dataTestId}>
+            <div
+                className={cn(styles.component, className, {
+                    [styles.center]: alignContent === 'center',
+                })}
+                data-test-id={dataTestId}
+            >
                 {CurrentScreen && <CurrentScreen mobile={mobile} />}
             </div>
         </ConfirmationContext.Provider>

package/src/components/base-confirmation/index.module.css

@@ -3,6 +3,9 @@
 .component {
     width: 100%;
     max-width: 388px;
-    margin: var(--gap-0) auto;
     color: var(--color-light-text-secondary);
+
+    &.center {
+        margin: var(--gap-0) auto;
+    }
 }