@cloud-ru/ds-uikit-product-modal-predefined 1.0.29-preview-d90ac2be.0 → 1.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/components/DeleteModal/DeleteModal.js +2 -2
  3. package/dist/cjs/components/RecallModal/RecallModal.js +2 -2
  4. package/dist/cjs/helperComponents/DesktopReleaseNotes/styles.module.css +1 -1
  5. package/dist/cjs/helperComponents/InputConfirm/styles.module.css +7 -6
  6. package/dist/cjs/helperComponents/NoteItem/styles.module.css +4 -3
  7. package/dist/cjs/helperComponents/ReleaseNotesFooter/styles.module.css +2 -1
  8. package/dist/cjs/style.css +31 -45
  9. package/dist/esm/components/DeleteModal/DeleteModal.js +3 -3
  10. package/dist/esm/components/RecallModal/RecallModal.js +3 -3
  11. package/dist/esm/helperComponents/DesktopReleaseNotes/styles.module.css +1 -1
  12. package/dist/esm/helperComponents/InputConfirm/styles.module.css +7 -6
  13. package/dist/esm/helperComponents/NoteItem/styles.module.css +4 -3
  14. package/dist/esm/helperComponents/ReleaseNotesFooter/styles.module.css +2 -1
  15. package/dist/esm/style.css +31 -45
  16. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  17. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  18. package/package.json +19 -19
  19. package/src/components/DeleteModal/DeleteModal.tsx +4 -2
  20. package/src/components/RecallModal/RecallModal.tsx +4 -2
  21. package/src/helperComponents/InputConfirm/styles.module.scss +1 -0
  22. package/src/helperComponents/NoteItem/styles.module.scss +2 -0
  23. package/src/helperComponents/ReleaseNotesFooter/styles.module.scss +1 -0
  24. package/dist/esm/components/DeleteModal/styles.module.css +0 -17
  25. package/dist/esm/components/RecallModal/styles.module.css +0 -17
  26. package/src/components/RecallModal/styles.module.scss +0 -18
  27. /package/dist/cjs/{components/DeleteModal → shared}/styles.module.css +0 -0
  28. /package/dist/{cjs/components/RecallModal → esm/shared}/styles.module.css +0 -0
  29. /package/src/{components/DeleteModal → shared}/styles.module.scss +0 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,13 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 1.0.29 (2026-09-25)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **FF-9083:** migrate components to renamed token keys ([fd8237d](https://github.com/cloud-ru-tech/snack-v2/commit/fd8237d04c95b5474955c946d9db7bedb3821c97))
11
+ - **FF-9085:** align uikit-product components with Figma update branch ([0b06c25](https://github.com/cloud-ru-tech/snack-v2/commit/0b06c25d1c05e0d3ce6ca38d8cdd9836ad9393c1))
12
+
6
13
  ## 1.0.28 (2026-09-21)
7
14
 
8
15
  **Note:** Version bump only for package @ds/uikit-product-modal-predefined
package/dist/cjs/components/DeleteModal/DeleteModal.js CHANGED
@@ -13,7 +13,7 @@ const constants_1 = require("../../constants");
13
13
  const helperComponents_1 = require("../../helperComponents");
14
14
  const hooks_1 = require("../../hooks");
15
15
  const locale_1 = require("../../locale");
16
- const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
16
+ const styles_module_scss_1 = __importDefault(require('../../shared/styles.module.css'));
17
17
  function DeleteModal({ open, onClose, mode, closeOnPopstate, objectType, titleTooltip, onDelete, deleting, content, confirmText, hideConfirmCopyButton, subtitle, confirmTextVariant = constants_1.CONFIRM_TEXT_VARIANT.Name, ...rest }) {
18
18
  const { t } = locale_1.modalPredefinedLocale.useTranslations();
19
19
  const inputRef = (0, react_1.useRef)(null);
@@ -35,5 +35,5 @@ function DeleteModal({ open, onClose, mode, closeOnPopstate, objectType, titleTo
35
35
  }
36
36
  onDelete(handleClose);
37
37
  };
38
- return ((0, jsx_runtime_1.jsxs)(modal_1.ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: modal_1.WIDTH.S, "data-test-id": constants_1.TEST_IDS.deleteModal, ...rest, children: [(0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Header, { title: title, subtitle: subtitle, slotAfterTitle: titleTooltip ? (0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Body, { className: styles_module_scss_1.default.body, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [content ?? t('deleteModal.content'), shouldShowConfirm && ((0, jsx_runtime_1.jsx)(helperComponents_1.InputConfirm, { ref: inputRef, confirmText: confirmText ?? '', hideConfirmCopyButton: hideConfirmCopyButton, value: value, error: error, size: 'l', copyLineAlign: 'start', confirmLabel: t('deleteModal.confirmLabel'), placeholder: confirmPlaceholder, onChange: handleChange }))] }) }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Footer, { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Outline, appearance: button_1.APPEARANCE.Neutral, label: t('deleteModal.cancel'), onClick: handleClose, "data-test-id": constants_1.TEST_IDS.cancelButton }), (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Filled, appearance: button_1.APPEARANCE.Critical, label: t('deleteModal.approve'), loading: deleting, onClick: handleApproveClick, "data-test-id": constants_1.TEST_IDS.approveButton })] }) })] }));
38
+ return ((0, jsx_runtime_1.jsxs)(modal_1.ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: modal_1.WIDTH.S, "data-test-id": constants_1.TEST_IDS.deleteModal, ...rest, children: [(0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Header, { title: title, subtitle: subtitle, slotAfterTitle: titleTooltip ? (0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Body, { className: styles_module_scss_1.default.body, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [content ?? t('deleteModal.content'), shouldShowConfirm && ((0, jsx_runtime_1.jsx)(helperComponents_1.InputConfirm, { ref: inputRef, confirmText: confirmText ?? '', hideConfirmCopyButton: hideConfirmCopyButton, value: value, error: error, size: 'l', copyLineAlign: 'start', confirmLabel: t('deleteModal.confirmLabel'), placeholder: confirmPlaceholder, onChange: handleChange }))] }) }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Footer, { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { size: button_1.SIZE.L, view: button_1.VIEW.Outline, appearance: button_1.APPEARANCE.Neutral, label: t('deleteModal.cancel'), onClick: handleClose, "data-test-id": constants_1.TEST_IDS.cancelButton }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: button_1.SIZE.L, view: button_1.VIEW.Filled, appearance: button_1.APPEARANCE.Critical, label: t('deleteModal.approve'), loading: deleting, onClick: handleApproveClick, "data-test-id": constants_1.TEST_IDS.approveButton })] }) })] }));
39
39
  }
package/dist/cjs/components/RecallModal/RecallModal.js CHANGED
@@ -13,7 +13,7 @@ const constants_1 = require("../../constants");
13
13
  const helperComponents_1 = require("../../helperComponents");
14
14
  const hooks_1 = require("../../hooks");
15
15
  const locale_1 = require("../../locale");
16
- const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
16
+ const styles_module_scss_1 = __importDefault(require('../../shared/styles.module.css'));
17
17
  function RecallModal({ open, onClose, mode, closeOnPopstate, titleTooltip, onRecall, loading, content, confirmText, hideConfirmCopyButton, subtitle, ...rest }) {
18
18
  const { t } = locale_1.modalPredefinedLocale.useTranslations();
19
19
  const inputRef = (0, react_1.useRef)(null);
@@ -33,5 +33,5 @@ function RecallModal({ open, onClose, mode, closeOnPopstate, titleTooltip, onRec
33
33
  }
34
34
  onRecall(handleClose);
35
35
  };
36
- return ((0, jsx_runtime_1.jsxs)(modal_1.ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: modal_1.WIDTH.S, "data-test-id": constants_1.TEST_IDS.recallModal, ...rest, children: [(0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Header, { title: t('recallModal.title'), subtitle: subtitle, slotAfterTitle: titleTooltip ? (0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Body, { className: styles_module_scss_1.default.body, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [content ?? t('recallModal.content'), shouldShowConfirm && ((0, jsx_runtime_1.jsx)(helperComponents_1.InputConfirm, { ref: inputRef, confirmText: confirmText ?? '', confirmLabel: t('recallModal.confirmLabel'), hideConfirmCopyButton: hideConfirmCopyButton, value: value, error: error, size: 'l', copyLineAlign: 'start', placeholder: t('confirm.namePlaceholder'), onChange: handleChange }))] }) }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Footer, { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Outline, appearance: button_1.APPEARANCE.Neutral, label: t('recallModal.cancel'), onClick: handleClose, "data-test-id": constants_1.TEST_IDS.cancelButton }), (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Filled, appearance: button_1.APPEARANCE.Critical, label: t('recallModal.approve'), loading: loading, onClick: handleApproveClick, "data-test-id": constants_1.TEST_IDS.approveButton })] }) })] }));
36
+ return ((0, jsx_runtime_1.jsxs)(modal_1.ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: modal_1.WIDTH.S, "data-test-id": constants_1.TEST_IDS.recallModal, ...rest, children: [(0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Header, { title: t('recallModal.title'), subtitle: subtitle, slotAfterTitle: titleTooltip ? (0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Body, { className: styles_module_scss_1.default.body, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [content ?? t('recallModal.content'), shouldShowConfirm && ((0, jsx_runtime_1.jsx)(helperComponents_1.InputConfirm, { ref: inputRef, confirmText: confirmText ?? '', confirmLabel: t('recallModal.confirmLabel'), hideConfirmCopyButton: hideConfirmCopyButton, value: value, error: error, size: 'l', copyLineAlign: 'start', placeholder: t('confirm.namePlaceholder'), onChange: handleChange }))] }) }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Footer, { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { size: button_1.SIZE.L, view: button_1.VIEW.Outline, appearance: button_1.APPEARANCE.Neutral, label: t('recallModal.cancel'), onClick: handleClose, "data-test-id": constants_1.TEST_IDS.cancelButton }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: button_1.SIZE.L, view: button_1.VIEW.Filled, appearance: button_1.APPEARANCE.Critical, label: t('recallModal.approve'), loading: loading, onClick: handleApproveClick, "data-test-id": constants_1.TEST_IDS.approveButton })] }) })] }));
37
37
  }
package/dist/cjs/helperComponents/DesktopReleaseNotes/styles.module.css CHANGED
@@ -3,5 +3,5 @@
3
3
  }
4
4
 
5
5
  .safeAreaBottom{
6
- padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
6
+ padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-primitive-dimension-8, 8px));
7
7
  }
package/dist/cjs/helperComponents/InputConfirm/styles.module.css CHANGED
@@ -1,6 +1,7 @@
1
1
  .root{
2
2
  display:flex;
3
3
  flex-direction:column;
4
+ box-sizing:border-box;
4
5
  }
5
6
 
6
7
  .confirmText{
@@ -19,20 +20,20 @@
19
20
  }
20
21
 
21
22
  .confirmLabel{
22
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
23
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
23
24
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
24
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
25
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
25
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
26
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
26
27
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
27
28
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
28
29
  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
29
30
  }
30
31
 
31
32
  .confirmValue{
32
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
33
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
33
34
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
34
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
35
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
35
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
36
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
36
37
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
37
38
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
38
39
  min-width:0;
package/dist/cjs/helperComponents/NoteItem/styles.module.css CHANGED
@@ -3,6 +3,7 @@
3
3
  grid-template-columns:minmax(0, 1fr) calc(6 * var(--sn-primitive-dimension-64, 64px) - var(--sn-primitive-dimension-4, 4px));
4
4
  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
5
5
  column-gap:var(--sn-primitive-dimension-8, 8px);
6
+ box-sizing:border-box;
6
7
  height:calc(6 * var(--sn-primitive-dimension-64, 64px) - var(--sn-primitive-dimension-4, 4px));
7
8
  }
8
9
  .root[data-surface=bottomSheet]{
@@ -15,11 +16,11 @@
15
16
  position:relative;
16
17
  overflow:hidden;
17
18
  min-width:0;
18
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
19
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
19
20
  }
20
21
 
21
22
  .media[data-status=error]{
22
- background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
23
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
23
24
  }
24
25
 
25
26
  .root[data-surface=bottomSheet] .media{
@@ -46,7 +47,7 @@
46
47
  }
47
48
 
48
49
  .mediaFallbackIcon{
49
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
50
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
50
51
  }
51
52
 
52
53
  .content{
package/dist/cjs/helperComponents/ReleaseNotesFooter/styles.module.css CHANGED
@@ -5,6 +5,7 @@
5
5
  column-gap:var(--sn-primitive-dimension-16, 16px);
6
6
  align-items:center;
7
7
  justify-content:space-between;
8
+ box-sizing:border-box;
8
9
  width:100%;
9
10
  }
10
11
 
@@ -24,5 +25,5 @@
24
25
  .sliderSkeleton{
25
26
  width:calc(3 * var(--sn-primitive-dimension-16, 16px));
26
27
  height:var(--sn-primitive-dimension-16, 16px);
27
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
28
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
28
29
  }
package/dist/cjs/style.css CHANGED
@@ -1,47 +1,14 @@
1
- .body{
2
- min-height:auto;
3
- }
4
-
5
- .content{
6
- display:flex;
7
- flex-direction:column;
8
- row-gap:var(--sn-primitive-dimension-16, 16px);
9
- }
10
-
11
- .footer{
12
- display:flex;
13
- -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
14
- column-gap:var(--sn-primitive-dimension-8, 8px);
15
- justify-content:flex-end;
16
- width:100%;
17
- }
18
- .body{
19
- min-height:auto;
20
- }
21
-
22
- .content{
23
- display:flex;
24
- flex-direction:column;
25
- row-gap:var(--sn-primitive-dimension-16, 16px);
26
- }
27
-
28
- .footer{
29
- display:flex;
30
- -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
31
- column-gap:var(--sn-primitive-dimension-8, 8px);
32
- justify-content:flex-end;
33
- width:100%;
34
- }
35
1
  .body{
36
2
  min-height:calc(6 * var(--sn-primitive-dimension-64, 64px));
37
3
  }
38
4
 
39
5
  .safeAreaBottom{
40
- padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
6
+ padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-primitive-dimension-8, 8px));
41
7
  }
42
8
  .root{
43
9
  display:flex;
44
10
  flex-direction:column;
11
+ box-sizing:border-box;
45
12
  }
46
13
 
47
14
  .confirmText{
@@ -60,20 +27,20 @@
60
27
  }
61
28
 
62
29
  .confirmLabel{
63
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
30
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
64
31
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
65
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
66
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
32
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
33
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
67
34
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
68
35
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
69
36
  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
70
37
  }
71
38
 
72
39
  .confirmValue{
73
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
40
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
74
41
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
75
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
76
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
42
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
43
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
77
44
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
78
45
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
79
46
  min-width:0;
@@ -83,6 +50,7 @@
83
50
  grid-template-columns:minmax(0, 1fr) calc(6 * var(--sn-primitive-dimension-64, 64px) - var(--sn-primitive-dimension-4, 4px));
84
51
  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
85
52
  column-gap:var(--sn-primitive-dimension-8, 8px);
53
+ box-sizing:border-box;
86
54
  height:calc(6 * var(--sn-primitive-dimension-64, 64px) - var(--sn-primitive-dimension-4, 4px));
87
55
  }
88
56
  .root[data-surface=bottomSheet]{
@@ -95,11 +63,11 @@
95
63
  position:relative;
96
64
  overflow:hidden;
97
65
  min-width:0;
98
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
66
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
99
67
  }
100
68
 
101
69
  .media[data-status=error]{
102
- background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
70
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
103
71
  }
104
72
 
105
73
  .root[data-surface=bottomSheet] .media{
@@ -126,7 +94,7 @@
126
94
  }
127
95
 
128
96
  .mediaFallbackIcon{
129
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
97
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
130
98
  }
131
99
 
132
100
  .content{
@@ -210,6 +178,7 @@
210
178
  column-gap:var(--sn-primitive-dimension-16, 16px);
211
179
  align-items:center;
212
180
  justify-content:space-between;
181
+ box-sizing:border-box;
213
182
  width:100%;
214
183
  }
215
184
 
@@ -229,5 +198,22 @@
229
198
  .sliderSkeleton{
230
199
  width:calc(3 * var(--sn-primitive-dimension-16, 16px));
231
200
  height:var(--sn-primitive-dimension-16, 16px);
232
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
201
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
202
+ }
203
+ .body{
204
+ min-height:auto;
205
+ }
206
+
207
+ .content{
208
+ display:flex;
209
+ flex-direction:column;
210
+ row-gap:var(--sn-primitive-dimension-16, 16px);
211
+ }
212
+
213
+ .footer{
214
+ display:flex;
215
+ -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
216
+ column-gap:var(--sn-primitive-dimension-8, 8px);
217
+ justify-content:flex-end;
218
+ width:100%;
233
219
  }
package/dist/esm/components/DeleteModal/DeleteModal.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { APPEARANCE, Button, VIEW } from '@cloud-ru/ds-button';
2
+ import { APPEARANCE, Button, SIZE, VIEW } from '@cloud-ru/ds-button';
3
3
  import { ModalCustom, WIDTH } from '@cloud-ru/ds-modal';
4
4
  import { QuestionTooltip } from '@cloud-ru/ds-tooltip';
5
5
  import { useRef } from 'react';
@@ -7,7 +7,7 @@ import { CONFIRM_TEXT_VARIANT, TEST_IDS } from '../../constants.js';
7
7
  import { InputConfirm } from '../../helperComponents/index.js';
8
8
  import { useTextFieldValidation } from '../../hooks.js';
9
9
  import { modalPredefinedLocale } from '../../locale/index.js';
10
- import styles from './styles.module.css';
10
+ import styles from '../../shared/styles.module.css';
11
11
  export function DeleteModal({ open, onClose, mode, closeOnPopstate, objectType, titleTooltip, onDelete, deleting, content, confirmText, hideConfirmCopyButton, subtitle, confirmTextVariant = CONFIRM_TEXT_VARIANT.Name, ...rest }) {
12
12
  const { t } = modalPredefinedLocale.useTranslations();
13
13
  const inputRef = useRef(null);
@@ -29,5 +29,5 @@ export function DeleteModal({ open, onClose, mode, closeOnPopstate, objectType,
29
29
  }
30
30
  onDelete(handleClose);
31
31
  };
32
- return (_jsxs(ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: WIDTH.S, "data-test-id": TEST_IDS.deleteModal, ...rest, children: [_jsx(ModalCustom.Header, { title: title, subtitle: subtitle, slotAfterTitle: titleTooltip ? _jsx(QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), _jsx(ModalCustom.Body, { className: styles.body, content: _jsxs("div", { className: styles.content, children: [content ?? t('deleteModal.content'), shouldShowConfirm && (_jsx(InputConfirm, { ref: inputRef, confirmText: confirmText ?? '', hideConfirmCopyButton: hideConfirmCopyButton, value: value, error: error, size: 'l', copyLineAlign: 'start', confirmLabel: t('deleteModal.confirmLabel'), placeholder: confirmPlaceholder, onChange: handleChange }))] }) }), _jsx(ModalCustom.Footer, { children: _jsxs("div", { className: styles.footer, children: [_jsx(Button, { view: VIEW.Outline, appearance: APPEARANCE.Neutral, label: t('deleteModal.cancel'), onClick: handleClose, "data-test-id": TEST_IDS.cancelButton }), _jsx(Button, { view: VIEW.Filled, appearance: APPEARANCE.Critical, label: t('deleteModal.approve'), loading: deleting, onClick: handleApproveClick, "data-test-id": TEST_IDS.approveButton })] }) })] }));
32
+ return (_jsxs(ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: WIDTH.S, "data-test-id": TEST_IDS.deleteModal, ...rest, children: [_jsx(ModalCustom.Header, { title: title, subtitle: subtitle, slotAfterTitle: titleTooltip ? _jsx(QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), _jsx(ModalCustom.Body, { className: styles.body, content: _jsxs("div", { className: styles.content, children: [content ?? t('deleteModal.content'), shouldShowConfirm && (_jsx(InputConfirm, { ref: inputRef, confirmText: confirmText ?? '', hideConfirmCopyButton: hideConfirmCopyButton, value: value, error: error, size: 'l', copyLineAlign: 'start', confirmLabel: t('deleteModal.confirmLabel'), placeholder: confirmPlaceholder, onChange: handleChange }))] }) }), _jsx(ModalCustom.Footer, { children: _jsxs("div", { className: styles.footer, children: [_jsx(Button, { size: SIZE.L, view: VIEW.Outline, appearance: APPEARANCE.Neutral, label: t('deleteModal.cancel'), onClick: handleClose, "data-test-id": TEST_IDS.cancelButton }), _jsx(Button, { size: SIZE.L, view: VIEW.Filled, appearance: APPEARANCE.Critical, label: t('deleteModal.approve'), loading: deleting, onClick: handleApproveClick, "data-test-id": TEST_IDS.approveButton })] }) })] }));
33
33
  }
package/dist/esm/components/RecallModal/RecallModal.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { APPEARANCE, Button, VIEW } from '@cloud-ru/ds-button';
2
+ import { APPEARANCE, Button, SIZE, VIEW } from '@cloud-ru/ds-button';
3
3
  import { ModalCustom, WIDTH } from '@cloud-ru/ds-modal';
4
4
  import { QuestionTooltip } from '@cloud-ru/ds-tooltip';
5
5
  import { useRef } from 'react';
@@ -7,7 +7,7 @@ import { TEST_IDS } from '../../constants.js';
7
7
  import { InputConfirm } from '../../helperComponents/index.js';
8
8
  import { useTextFieldValidation } from '../../hooks.js';
9
9
  import { modalPredefinedLocale } from '../../locale/index.js';
10
- import styles from './styles.module.css';
10
+ import styles from '../../shared/styles.module.css';
11
11
  export function RecallModal({ open, onClose, mode, closeOnPopstate, titleTooltip, onRecall, loading, content, confirmText, hideConfirmCopyButton, subtitle, ...rest }) {
12
12
  const { t } = modalPredefinedLocale.useTranslations();
13
13
  const inputRef = useRef(null);
@@ -27,5 +27,5 @@ export function RecallModal({ open, onClose, mode, closeOnPopstate, titleTooltip
27
27
  }
28
28
  onRecall(handleClose);
29
29
  };
30
- return (_jsxs(ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: WIDTH.S, "data-test-id": TEST_IDS.recallModal, ...rest, children: [_jsx(ModalCustom.Header, { title: t('recallModal.title'), subtitle: subtitle, slotAfterTitle: titleTooltip ? _jsx(QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), _jsx(ModalCustom.Body, { className: styles.body, content: _jsxs("div", { className: styles.content, children: [content ?? t('recallModal.content'), shouldShowConfirm && (_jsx(InputConfirm, { ref: inputRef, confirmText: confirmText ?? '', confirmLabel: t('recallModal.confirmLabel'), hideConfirmCopyButton: hideConfirmCopyButton, value: value, error: error, size: 'l', copyLineAlign: 'start', placeholder: t('confirm.namePlaceholder'), onChange: handleChange }))] }) }), _jsx(ModalCustom.Footer, { children: _jsxs("div", { className: styles.footer, children: [_jsx(Button, { view: VIEW.Outline, appearance: APPEARANCE.Neutral, label: t('recallModal.cancel'), onClick: handleClose, "data-test-id": TEST_IDS.cancelButton }), _jsx(Button, { view: VIEW.Filled, appearance: APPEARANCE.Critical, label: t('recallModal.approve'), loading: loading, onClick: handleApproveClick, "data-test-id": TEST_IDS.approveButton })] }) })] }));
30
+ return (_jsxs(ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: WIDTH.S, "data-test-id": TEST_IDS.recallModal, ...rest, children: [_jsx(ModalCustom.Header, { title: t('recallModal.title'), subtitle: subtitle, slotAfterTitle: titleTooltip ? _jsx(QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), _jsx(ModalCustom.Body, { className: styles.body, content: _jsxs("div", { className: styles.content, children: [content ?? t('recallModal.content'), shouldShowConfirm && (_jsx(InputConfirm, { ref: inputRef, confirmText: confirmText ?? '', confirmLabel: t('recallModal.confirmLabel'), hideConfirmCopyButton: hideConfirmCopyButton, value: value, error: error, size: 'l', copyLineAlign: 'start', placeholder: t('confirm.namePlaceholder'), onChange: handleChange }))] }) }), _jsx(ModalCustom.Footer, { children: _jsxs("div", { className: styles.footer, children: [_jsx(Button, { size: SIZE.L, view: VIEW.Outline, appearance: APPEARANCE.Neutral, label: t('recallModal.cancel'), onClick: handleClose, "data-test-id": TEST_IDS.cancelButton }), _jsx(Button, { size: SIZE.L, view: VIEW.Filled, appearance: APPEARANCE.Critical, label: t('recallModal.approve'), loading: loading, onClick: handleApproveClick, "data-test-id": TEST_IDS.approveButton })] }) })] }));
31
31
  }
package/dist/esm/helperComponents/DesktopReleaseNotes/styles.module.css CHANGED
@@ -3,5 +3,5 @@
3
3
  }
4
4
 
5
5
  .safeAreaBottom{
6
- padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
6
+ padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-primitive-dimension-8, 8px));
7
7
  }
package/dist/esm/helperComponents/InputConfirm/styles.module.css CHANGED
@@ -1,6 +1,7 @@
1
1
  .root{
2
2
  display:flex;
3
3
  flex-direction:column;
4
+ box-sizing:border-box;
4
5
  }
5
6
 
6
7
  .confirmText{
@@ -19,20 +20,20 @@
19
20
  }
20
21
 
21
22
  .confirmLabel{
22
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
23
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
23
24
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
24
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
25
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
25
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
26
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
26
27
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
27
28
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
28
29
  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
29
30
  }
30
31
 
31
32
  .confirmValue{
32
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
33
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
33
34
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
34
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
35
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
35
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
36
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
36
37
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
37
38
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
38
39
  min-width:0;
package/dist/esm/helperComponents/NoteItem/styles.module.css CHANGED
@@ -3,6 +3,7 @@
3
3
  grid-template-columns:minmax(0, 1fr) calc(6 * var(--sn-primitive-dimension-64, 64px) - var(--sn-primitive-dimension-4, 4px));
4
4
  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
5
5
  column-gap:var(--sn-primitive-dimension-8, 8px);
6
+ box-sizing:border-box;
6
7
  height:calc(6 * var(--sn-primitive-dimension-64, 64px) - var(--sn-primitive-dimension-4, 4px));
7
8
  }
8
9
  .root[data-surface=bottomSheet]{
@@ -15,11 +16,11 @@
15
16
  position:relative;
16
17
  overflow:hidden;
17
18
  min-width:0;
18
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
19
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
19
20
  }
20
21
 
21
22
  .media[data-status=error]{
22
- background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
23
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
23
24
  }
24
25
 
25
26
  .root[data-surface=bottomSheet] .media{
@@ -46,7 +47,7 @@
46
47
  }
47
48
 
48
49
  .mediaFallbackIcon{
49
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
50
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
50
51
  }
51
52
 
52
53
  .content{
package/dist/esm/helperComponents/ReleaseNotesFooter/styles.module.css CHANGED
@@ -5,6 +5,7 @@
5
5
  column-gap:var(--sn-primitive-dimension-16, 16px);
6
6
  align-items:center;
7
7
  justify-content:space-between;
8
+ box-sizing:border-box;
8
9
  width:100%;
9
10
  }
10
11
 
@@ -24,5 +25,5 @@
24
25
  .sliderSkeleton{
25
26
  width:calc(3 * var(--sn-primitive-dimension-16, 16px));
26
27
  height:var(--sn-primitive-dimension-16, 16px);
27
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
28
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
28
29
  }
package/dist/esm/style.css CHANGED
@@ -1,47 +1,14 @@
1
- .body{
2
- min-height:auto;
3
- }
4
-
5
- .content{
6
- display:flex;
7
- flex-direction:column;
8
- row-gap:var(--sn-primitive-dimension-16, 16px);
9
- }
10
-
11
- .footer{
12
- display:flex;
13
- -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
14
- column-gap:var(--sn-primitive-dimension-8, 8px);
15
- justify-content:flex-end;
16
- width:100%;
17
- }
18
- .body{
19
- min-height:auto;
20
- }
21
-
22
- .content{
23
- display:flex;
24
- flex-direction:column;
25
- row-gap:var(--sn-primitive-dimension-16, 16px);
26
- }
27
-
28
- .footer{
29
- display:flex;
30
- -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
31
- column-gap:var(--sn-primitive-dimension-8, 8px);
32
- justify-content:flex-end;
33
- width:100%;
34
- }
35
1
  .body{
36
2
  min-height:calc(6 * var(--sn-primitive-dimension-64, 64px));
37
3
  }
38
4
 
39
5
  .safeAreaBottom{
40
- padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
6
+ padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-primitive-dimension-8, 8px));
41
7
  }
42
8
  .root{
43
9
  display:flex;
44
10
  flex-direction:column;
11
+ box-sizing:border-box;
45
12
  }
46
13
 
47
14
  .confirmText{
@@ -60,20 +27,20 @@
60
27
  }
61
28
 
62
29
  .confirmLabel{
63
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
30
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
64
31
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
65
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
66
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
32
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
33
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
67
34
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
68
35
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
69
36
  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
70
37
  }
71
38
 
72
39
  .confirmValue{
73
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
40
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
74
41
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
75
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
76
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
42
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
43
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
77
44
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
78
45
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
79
46
  min-width:0;
@@ -83,6 +50,7 @@
83
50
  grid-template-columns:minmax(0, 1fr) calc(6 * var(--sn-primitive-dimension-64, 64px) - var(--sn-primitive-dimension-4, 4px));
84
51
  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
85
52
  column-gap:var(--sn-primitive-dimension-8, 8px);
53
+ box-sizing:border-box;
86
54
  height:calc(6 * var(--sn-primitive-dimension-64, 64px) - var(--sn-primitive-dimension-4, 4px));
87
55
  }
88
56
  .root[data-surface=bottomSheet]{
@@ -95,11 +63,11 @@
95
63
  position:relative;
96
64
  overflow:hidden;
97
65
  min-width:0;
98
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
66
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
99
67
  }
100
68
 
101
69
  .media[data-status=error]{
102
- background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
70
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
103
71
  }
104
72
 
105
73
  .root[data-surface=bottomSheet] .media{
@@ -126,7 +94,7 @@
126
94
  }
127
95
 
128
96
  .mediaFallbackIcon{
129
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
97
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
130
98
  }
131
99
 
132
100
  .content{
@@ -210,6 +178,7 @@
210
178
  column-gap:var(--sn-primitive-dimension-16, 16px);
211
179
  align-items:center;
212
180
  justify-content:space-between;
181
+ box-sizing:border-box;
213
182
  width:100%;
214
183
  }
215
184
 
@@ -229,5 +198,22 @@
229
198
  .sliderSkeleton{
230
199
  width:calc(3 * var(--sn-primitive-dimension-16, 16px));
231
200
  height:var(--sn-primitive-dimension-16, 16px);
232
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
201
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
202
+ }
203
+ .body{
204
+ min-height:auto;
205
+ }
206
+
207
+ .content{
208
+ display:flex;
209
+ flex-direction:column;
210
+ row-gap:var(--sn-primitive-dimension-16, 16px);
211
+ }
212
+
213
+ .footer{
214
+ display:flex;
215
+ -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
216
+ column-gap:var(--sn-primitive-dimension-8, 8px);
217
+ justify-content:flex-end;
218
+ width:100%;
233
219
  }