@alfalab/core-components-modal 6.1.12 → 7.0.0

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 (123) hide show
  1. package/Component.desktop.d.ts +1 -1
  2. package/Component.desktop.js +2 -5
  3. package/Component.js +3 -3
  4. package/Component.mobile.d.ts +1 -1
  5. package/Component.mobile.js +2 -5
  6. package/Component.responsive.d.ts +1 -1
  7. package/Component.responsive.js +2 -5
  8. package/components/content/Component.js +6 -5
  9. package/components/content/desktop.css +12 -13
  10. package/components/content/index.css +8 -4
  11. package/components/content/mobile.css +6 -4
  12. package/components/footer/Component.js +4 -4
  13. package/components/footer/desktop.css +12 -13
  14. package/components/footer/index.css +8 -6
  15. package/components/footer/layout.css +27 -25
  16. package/components/footer/mobile.css +5 -3
  17. package/components/header/Component.d.ts +3 -47
  18. package/components/header/Component.js +15 -29
  19. package/components/header/desktop.css +23 -27
  20. package/components/header/index.css +8 -42
  21. package/components/header/mobile.css +10 -5
  22. package/cssm/Component.desktop.d.ts +1 -1
  23. package/cssm/Component.desktop.js +2 -6
  24. package/cssm/Component.mobile.d.ts +1 -1
  25. package/cssm/Component.mobile.js +2 -6
  26. package/cssm/Component.responsive.d.ts +1 -1
  27. package/cssm/Component.responsive.js +2 -6
  28. package/cssm/components/content/Component.js +3 -2
  29. package/cssm/components/content/desktop.module.css +10 -11
  30. package/cssm/components/content/index.module.css +6 -2
  31. package/cssm/components/content/mobile.module.css +3 -1
  32. package/cssm/components/footer/desktop.module.css +6 -7
  33. package/cssm/components/footer/index.module.css +4 -2
  34. package/cssm/components/footer/layout.module.css +2 -0
  35. package/cssm/components/footer/mobile.module.css +2 -0
  36. package/cssm/components/header/Component.d.ts +3 -47
  37. package/cssm/components/header/Component.js +12 -27
  38. package/cssm/components/header/desktop.module.css +11 -15
  39. package/cssm/components/header/index.module.css +5 -39
  40. package/cssm/components/header/mobile.module.css +7 -2
  41. package/cssm/desktop.js +2 -6
  42. package/cssm/desktop.module.css +2 -0
  43. package/cssm/index.js +3 -7
  44. package/cssm/mobile.js +2 -6
  45. package/cssm/mobile.module.css +2 -0
  46. package/cssm/responsive.js +2 -6
  47. package/cssm/vars.css +2 -0
  48. package/desktop.css +11 -9
  49. package/desktop.js +2 -5
  50. package/esm/Component.desktop.d.ts +1 -1
  51. package/esm/Component.desktop.js +1 -4
  52. package/esm/Component.js +3 -3
  53. package/esm/Component.mobile.d.ts +1 -1
  54. package/esm/Component.mobile.js +1 -4
  55. package/esm/Component.responsive.d.ts +1 -1
  56. package/esm/Component.responsive.js +1 -4
  57. package/esm/components/content/Component.js +6 -5
  58. package/esm/components/content/desktop.css +12 -13
  59. package/esm/components/content/index.css +8 -4
  60. package/esm/components/content/mobile.css +6 -4
  61. package/esm/components/footer/Component.js +4 -4
  62. package/esm/components/footer/desktop.css +12 -13
  63. package/esm/components/footer/index.css +8 -6
  64. package/esm/components/footer/layout.css +27 -25
  65. package/esm/components/footer/mobile.css +5 -3
  66. package/esm/components/header/Component.d.ts +3 -47
  67. package/esm/components/header/Component.js +15 -29
  68. package/esm/components/header/desktop.css +23 -27
  69. package/esm/components/header/index.css +8 -42
  70. package/esm/components/header/mobile.css +10 -5
  71. package/esm/desktop.css +11 -9
  72. package/esm/desktop.js +2 -5
  73. package/esm/index.js +3 -6
  74. package/esm/mobile.css +4 -2
  75. package/esm/mobile.js +2 -5
  76. package/esm/responsive.js +2 -5
  77. package/esm/transitions.css +8 -8
  78. package/index.js +3 -6
  79. package/mobile.css +4 -2
  80. package/mobile.js +2 -5
  81. package/modern/Component.desktop.d.ts +1 -1
  82. package/modern/Component.desktop.js +1 -4
  83. package/modern/Component.js +3 -3
  84. package/modern/Component.mobile.d.ts +1 -1
  85. package/modern/Component.mobile.js +1 -4
  86. package/modern/Component.responsive.d.ts +1 -1
  87. package/modern/Component.responsive.js +1 -4
  88. package/modern/components/content/Component.js +5 -4
  89. package/modern/components/content/desktop.css +12 -13
  90. package/modern/components/content/index.css +8 -4
  91. package/modern/components/content/mobile.css +6 -4
  92. package/modern/components/footer/Component.js +4 -4
  93. package/modern/components/footer/desktop.css +12 -13
  94. package/modern/components/footer/index.css +8 -6
  95. package/modern/components/footer/layout.css +27 -25
  96. package/modern/components/footer/mobile.css +5 -3
  97. package/modern/components/header/Component.d.ts +3 -47
  98. package/modern/components/header/Component.js +14 -28
  99. package/modern/components/header/desktop.css +23 -27
  100. package/modern/components/header/index.css +8 -42
  101. package/modern/components/header/mobile.css +10 -5
  102. package/modern/desktop.css +11 -9
  103. package/modern/desktop.js +2 -5
  104. package/modern/index.js +3 -6
  105. package/modern/mobile.css +4 -2
  106. package/modern/mobile.js +2 -5
  107. package/modern/responsive.js +2 -5
  108. package/modern/transitions.css +8 -8
  109. package/package.json +3 -2
  110. package/responsive.js +2 -5
  111. package/transitions.css +8 -8
  112. package/components/closer/Component.d.ts +0 -33
  113. package/components/closer/Component.js +0 -35
  114. package/components/closer/index.css +0 -49
  115. package/cssm/components/closer/Component.d.ts +0 -33
  116. package/cssm/components/closer/Component.js +0 -34
  117. package/cssm/components/closer/index.module.css +0 -48
  118. package/esm/components/closer/Component.d.ts +0 -33
  119. package/esm/components/closer/Component.js +0 -28
  120. package/esm/components/closer/index.css +0 -49
  121. package/modern/components/closer/Component.d.ts +0 -33
  122. package/modern/components/closer/Component.js +0 -25
  123. package/modern/components/closer/index.css +0 -49
@@ -1,24 +1,24 @@
1
- /* hash: jx97z */
2
- .modal__appear_19gn2,
3
- .modal__enter_19gn2 {
1
+ /* hash: kb3u0 */
2
+ .modal__appear_14ixj,
3
+ .modal__enter_14ixj {
4
4
  opacity: 0;
5
5
  transform: translateY(15px);
6
6
  }
7
7
 
8
- .modal__appearActive_19gn2,
9
- .modal__enterActive_19gn2 {
8
+ .modal__appearActive_14ixj,
9
+ .modal__enterActive_14ixj {
10
10
  opacity: 1;
11
11
  transform: translateY(0);
12
12
  transition: opacity 200ms ease-in, transform 200ms ease-in;
13
13
  }
14
14
 
15
- .modal__exit_19gn2 {
15
+ .modal__exit_14ixj {
16
16
  opacity: 1;
17
17
  transform: translateY(0);
18
18
  }
19
19
 
20
- .modal__exitActive_19gn2,
21
- .modal__exitDone_19gn2 {
20
+ .modal__exitActive_14ixj,
21
+ .modal__exitDone_14ixj {
22
22
  opacity: 0;
23
23
  transform: translateY(15px);
24
24
  transition: opacity 200ms ease-out, transform 200ms ease-out;
package/index.js CHANGED
@@ -4,17 +4,14 @@ var Component_responsive = require('./Component.responsive.js');
4
4
  var Context = require('./Context.js');
5
5
  require('tslib');
6
6
  require('react');
7
+ require('@alfalab/core-components-navigation-bar');
7
8
  require('@alfalab/hooks');
8
- require('./components/closer/Component.js');
9
- require('classnames');
10
- require('@alfalab/core-components-icon-button');
11
- require('@alfalab/icons-glyph/CrossHeavyMIcon');
12
- require('@alfalab/core-components-base-modal');
13
9
  require('./components/content/Component.js');
10
+ require('classnames');
14
11
  require('./ResponsiveContext.js');
12
+ require('@alfalab/core-components-base-modal');
15
13
  require('./components/footer/Component.js');
16
14
  require('./components/header/Component.js');
17
- require('@alfalab/icons-glyph/CrossMIcon');
18
15
  require('./Component.js');
19
16
  require('react-merge-refs');
20
17
 
package/mobile.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1eajj */
1
+ /* hash: 1eoe5 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  } :root {
@@ -25,7 +25,9 @@
25
25
  /* desktop */
26
26
 
27
27
  /* mobile */
28
- } .modal__component_1ouph {
28
+
29
+ /* paddings */
30
+ } .modal__component_gwnha {
29
31
  flex: 1;
30
32
  width: 100%;
31
33
  }
package/mobile.js CHANGED
@@ -3,17 +3,14 @@
3
3
  var Component_mobile = require('./Component.mobile.js');
4
4
  require('tslib');
5
5
  require('react');
6
- require('./components/closer/Component.js');
6
+ require('@alfalab/core-components-navigation-bar');
7
+ require('./components/content/Component.js');
7
8
  require('classnames');
8
- require('@alfalab/core-components-icon-button');
9
- require('@alfalab/icons-glyph/CrossHeavyMIcon');
10
9
  require('./Context.js');
11
10
  require('@alfalab/core-components-base-modal');
12
- require('./components/content/Component.js');
13
11
  require('./ResponsiveContext.js');
14
12
  require('./components/footer/Component.js');
15
13
  require('./components/header/Component.js');
16
- require('@alfalab/icons-glyph/CrossMIcon');
17
14
  require('./Component.js');
18
15
  require('react-merge-refs');
19
16
 
@@ -10,6 +10,6 @@ declare const ModalDesktop: React.ForwardRefExoticComponent<BaseModalProps & {
10
10
  Content: React.FC<import("./typings").ContentProps>;
11
11
  Header: React.FC<import("./components/header/Component").HeaderProps>;
12
12
  Footer: React.FC<import("./components/footer/Component").FooterProps>;
13
- Closer: React.FC<import("./components/closer/Component").CloserProps>;
13
+ Closer: React.FC<import("@alfalab/core-components-navigation-bar").CloserProps>;
14
14
  };
15
15
  export { ModalDesktop };
@@ -1,16 +1,13 @@
1
1
  import React, { forwardRef } from 'react';
2
- import { Closer } from './components/closer/Component.js';
2
+ import { Closer } from '@alfalab/core-components-navigation-bar/modern';
3
3
  import { Content } from './components/content/Component.js';
4
4
  import { Footer } from './components/footer/Component.js';
5
5
  import { Header } from './components/header/Component.js';
6
6
  import { Modal } from './Component.js';
7
7
  import 'classnames';
8
- import '@alfalab/core-components-icon-button/modern';
9
- import '@alfalab/icons-glyph/CrossHeavyMIcon';
10
8
  import './Context.js';
11
9
  import '@alfalab/core-components-base-modal/modern';
12
10
  import './ResponsiveContext.js';
13
- import '@alfalab/icons-glyph/CrossMIcon';
14
11
  import 'react-merge-refs';
15
12
 
16
13
  const ModalDesktopComponent = forwardRef((props, ref) => (React.createElement(Modal, { ...props, ref: ref, view: 'desktop' })));
@@ -4,13 +4,13 @@ import cn from 'classnames';
4
4
  import { BaseModal } from '@alfalab/core-components-base-modal/modern';
5
5
  import { ResponsiveContext } from './ResponsiveContext.js';
6
6
 
7
- const desktopStyles = {"wrapper":"modal__wrapper_1qc7d","component":"modal__component_1qc7d","fullscreen":"modal__fullscreen_1qc7d","s":"modal__s_1qc7d","m":"modal__m_1qc7d","l":"modal__l_1qc7d","xl":"modal__xl_1qc7d"};
7
+ const desktopStyles = {"wrapper":"modal__wrapper_1h080","component":"modal__component_1h080","fullscreen":"modal__fullscreen_1h080","s":"modal__s_1h080","m":"modal__m_1h080","l":"modal__l_1h080","xl":"modal__xl_1h080"};
8
8
  require('./desktop.css')
9
9
 
10
- const mobileStyles = {"component":"modal__component_1ouph"};
10
+ const mobileStyles = {"component":"modal__component_gwnha"};
11
11
  require('./mobile.css')
12
12
 
13
- const transitions = {"appear":"modal__appear_19gn2","enter":"modal__enter_19gn2","appearActive":"modal__appearActive_19gn2","enterActive":"modal__enterActive_19gn2","exit":"modal__exit_19gn2","exitActive":"modal__exitActive_19gn2","exitDone":"modal__exitDone_19gn2"};
13
+ const transitions = {"appear":"modal__appear_14ixj","enter":"modal__enter_14ixj","appearActive":"modal__appearActive_14ixj","enterActive":"modal__enterActive_14ixj","exit":"modal__exit_14ixj","exitActive":"modal__exitActive_14ixj","exitDone":"modal__exitDone_14ixj"};
14
14
  require('./transitions.css')
15
15
 
16
16
  const Modal = forwardRef(({ size = 's', fixedPosition, fullscreen, children, className, wrapperClassName, transitionProps = {}, view, ...restProps }, ref) => {
@@ -5,6 +5,6 @@ declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & Re
5
5
  Content: React.FC<import("./typings").ContentProps>;
6
6
  Header: React.FC<import("./components/header/Component").HeaderProps>;
7
7
  Footer: React.FC<import("./components/footer/Component").FooterProps>;
8
- Closer: React.FC<import("./components/closer/Component").CloserProps>;
8
+ Closer: React.FC<import("@alfalab/core-components-navigation-bar").CloserProps>;
9
9
  };
10
10
  export { ModalMobile };
@@ -1,16 +1,13 @@
1
1
  import React, { forwardRef } from 'react';
2
- import { Closer } from './components/closer/Component.js';
2
+ import { Closer } from '@alfalab/core-components-navigation-bar/modern';
3
3
  import { Content } from './components/content/Component.js';
4
4
  import { Footer } from './components/footer/Component.js';
5
5
  import { Header } from './components/header/Component.js';
6
6
  import { Modal } from './Component.js';
7
7
  import 'classnames';
8
- import '@alfalab/core-components-icon-button/modern';
9
- import '@alfalab/icons-glyph/CrossHeavyMIcon';
10
8
  import './Context.js';
11
9
  import '@alfalab/core-components-base-modal/modern';
12
10
  import './ResponsiveContext.js';
13
- import '@alfalab/icons-glyph/CrossMIcon';
14
11
  import 'react-merge-refs';
15
12
 
16
13
  const ModalMobileComponent = forwardRef((props, ref) => (React.createElement(Modal, { ...props, ref: ref, view: 'mobile' })));
@@ -12,6 +12,6 @@ declare const ModalResponsive: React.ForwardRefExoticComponent<BaseModalProps &
12
12
  Header: React.FC<import("./components/header/Component").HeaderProps>;
13
13
  Content: React.FC<import("./typings").ContentProps>;
14
14
  Footer: React.FC<import("./components/footer/Component").FooterProps>;
15
- Closer: React.FC<import("./components/closer/Component").CloserProps>;
15
+ Closer: React.FC<import("@alfalab/core-components-navigation-bar").CloserProps>;
16
16
  };
17
17
  export { ModalResponsive };
@@ -1,17 +1,14 @@
1
1
  import React, { forwardRef } from 'react';
2
+ import { Closer } from '@alfalab/core-components-navigation-bar/modern';
2
3
  import { useMedia } from '@alfalab/hooks';
3
- import { Closer } from './components/closer/Component.js';
4
4
  import { Content } from './components/content/Component.js';
5
5
  import { Footer } from './components/footer/Component.js';
6
6
  import { Header } from './components/header/Component.js';
7
7
  import { Modal } from './Component.js';
8
8
  import 'classnames';
9
- import '@alfalab/core-components-icon-button/modern';
10
- import '@alfalab/icons-glyph/CrossHeavyMIcon';
11
9
  import './Context.js';
12
10
  import '@alfalab/core-components-base-modal/modern';
13
11
  import './ResponsiveContext.js';
14
- import '@alfalab/icons-glyph/CrossMIcon';
15
12
  import 'react-merge-refs';
16
13
 
17
14
  const ModalResponsiveComponent = forwardRef(({ children, breakpoint = 1024, ...restProps }, ref) => {
@@ -4,20 +4,21 @@ import { ModalContext } from '../../Context.js';
4
4
  import { ResponsiveContext } from '../../ResponsiveContext.js';
5
5
  import '@alfalab/core-components-base-modal/modern';
6
6
 
7
- const desktopStyles = {"s":"modal__s_1rous","m":"modal__m_1rous","l":"modal__l_1rous","xl":"modal__xl_1rous","fullscreen":"modal__fullscreen_1rous"};
7
+ const desktopStyles = {"s":"modal__s_10lsq","m":"modal__m_10lsq","l":"modal__l_10lsq","xl":"modal__xl_10lsq","fullscreen":"modal__fullscreen_10lsq"};
8
8
  require('./desktop.css')
9
9
 
10
- const styles = {"content":"modal__content_4qg8n","flex":"modal__flex_4qg8n"};
10
+ const styles = {"content":"modal__content_9o5rw","withHeader":"modal__withHeader_9o5rw","flex":"modal__flex_9o5rw"};
11
11
  require('./index.css')
12
12
 
13
- const mobileStyles = {"content":"modal__content_1ia6o"};
13
+ const mobileStyles = {"content":"modal__content_rvw86"};
14
14
  require('./mobile.css')
15
15
 
16
16
  const Content = ({ children, flex, className }) => {
17
- const { contentRef } = useContext(ModalContext);
17
+ const { contentRef, hasHeader } = useContext(ModalContext);
18
18
  const { size, view } = useContext(ResponsiveContext);
19
19
  return (React.createElement("div", { className: cn(styles.content, className, {
20
20
  [styles.flex]: flex,
21
+ [styles.withHeader]: hasHeader,
21
22
  [desktopStyles[size]]: view === 'desktop' && size,
22
23
  [mobileStyles.content]: view === 'mobile',
23
24
  }), ref: contentRef }, children));
@@ -1,4 +1,4 @@
1
- /* hash: 3fjyg */
1
+ /* hash: 31pcf */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  } :root {
@@ -12,7 +12,7 @@
12
12
  /* Hard up */
13
13
  } :root {
14
14
  } :root {
15
- --gap-6xl: 72px;
15
+ --gap-3xl: 40px;
16
16
  } :root {
17
17
  } :root {
18
18
  } :root {
@@ -20,23 +20,22 @@
20
20
  /* sizes */
21
21
 
22
22
  /* paddings */
23
- --modal-s-content-paddings: 0 56px;
24
- --modal-s-content-only-bottom-padding: 56px;
23
+ --modal-s-content-paddings: var(--gap-3xl) var(--gap-3xl) 0;
24
+ --modal-s-content-only-bottom-padding: var(--gap-3xl);
25
25
 
26
26
  /* scroll */
27
27
 
28
28
  /* desktop */
29
29
 
30
30
  /* mobile */
31
- } .modal__s_1rous,
32
- .modal__m_1rous {
31
+
32
+ /* paddings */
33
+ } .modal__s_10lsq,
34
+ .modal__m_10lsq,
35
+ .modal__l_10lsq,
36
+ .modal__xl_10lsq,
37
+ .modal__fullscreen_10lsq {
33
38
  padding: var(--modal-s-content-paddings)
34
- } .modal__s_1rous:last-child, .modal__m_1rous:last-child {
39
+ } .modal__s_10lsq:last-child, .modal__m_10lsq:last-child, .modal__l_10lsq:last-child, .modal__xl_10lsq:last-child, .modal__fullscreen_10lsq:last-child {
35
40
  padding-bottom: var(--modal-s-content-only-bottom-padding);
36
- } .modal__l_1rous,
37
- .modal__xl_1rous,
38
- .modal__fullscreen_1rous {
39
- padding: 0 var(--gap-6xl)
40
- } .modal__l_1rous:last-child, .modal__xl_1rous:last-child, .modal__fullscreen_1rous:last-child {
41
- padding-bottom: var(--gap-6xl);
42
41
  }
@@ -1,4 +1,4 @@
1
- /* hash: 8dl35 */
1
+ /* hash: 7zqh4 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  } :root {
@@ -25,9 +25,13 @@
25
25
  /* desktop */
26
26
 
27
27
  /* mobile */
28
- } .modal__content_4qg8n {
28
+
29
+ /* paddings */
30
+ } .modal__content_9o5rw {
29
31
  box-sizing: border-box;
30
- width: 100%;
31
- } .modal__flex_4qg8n {
32
+ width: 100%
33
+ } .modal__content_9o5rw.modal__withHeader_9o5rw {
34
+ padding-top: 0;
35
+ } .modal__flex_9o5rw {
32
36
  flex: 1;
33
37
  }
@@ -1,4 +1,4 @@
1
- /* hash: uxhv9 */
1
+ /* hash: q0wl1 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  } :root {
@@ -26,8 +26,10 @@
26
26
  /* desktop */
27
27
 
28
28
  /* mobile */
29
- } .modal__content_1ia6o {
30
- padding: 0 var(--gap-m)
31
- } .modal__content_1ia6o:last-child {
29
+
30
+ /* paddings */
31
+ } .modal__content_rvw86 {
32
+ padding: var(--gap-m) var(--gap-m) 0
33
+ } .modal__content_rvw86:last-child {
32
34
  padding-bottom: var(--gap-m);
33
35
  }
@@ -4,16 +4,16 @@ import { ModalContext } from '../../Context.js';
4
4
  import { ResponsiveContext } from '../../ResponsiveContext.js';
5
5
  import '@alfalab/core-components-base-modal/modern';
6
6
 
7
- const desktopStyles = {"footer":"modal__footer_1sboe","sticky":"modal__sticky_1sboe","fullscreen":"modal__fullscreen_1sboe","s":"modal__s_1sboe","m":"modal__m_1sboe","l":"modal__l_1sboe","xl":"modal__xl_1sboe"};
7
+ const desktopStyles = {"footer":"modal__footer_kzf10","sticky":"modal__sticky_kzf10","fullscreen":"modal__fullscreen_kzf10","s":"modal__s_kzf10","m":"modal__m_kzf10","l":"modal__l_kzf10","xl":"modal__xl_kzf10"};
8
8
  require('./desktop.css')
9
9
 
10
- const styles = {"footer":"modal__footer_1de14","sticky":"modal__sticky_1de14","highlighted":"modal__highlighted_1de14"};
10
+ const styles = {"footer":"modal__footer_19247","sticky":"modal__sticky_19247","highlighted":"modal__highlighted_19247"};
11
11
  require('./index.css')
12
12
 
13
- const layoutStyles = {"column":"modal__column_ecmie","gap-16":"modal__gap-16_ecmie","gap-24":"modal__gap-24_ecmie","gap-32":"modal__gap-32_ecmie","start":"modal__start_ecmie","center":"modal__center_ecmie","space-between":"modal__space-between_ecmie"};
13
+ const layoutStyles = {"column":"modal__column_161h6","gap-16":"modal__gap-16_161h6","gap-24":"modal__gap-24_161h6","gap-32":"modal__gap-32_161h6","start":"modal__start_161h6","center":"modal__center_161h6","space-between":"modal__space-between_161h6"};
14
14
  require('./layout.css')
15
15
 
16
- const mobileStyles = {"footer":"modal__footer_1paqu","sticky":"modal__sticky_1paqu"};
16
+ const mobileStyles = {"footer":"modal__footer_vmdq8","sticky":"modal__sticky_vmdq8"};
17
17
  require('./mobile.css')
18
18
 
19
19
  const Footer = ({ children, className, sticky, layout = 'start', gap }) => {
@@ -1,4 +1,4 @@
1
- /* hash: e7e26 */
1
+ /* hash: 1hqlk */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  } :root {
@@ -14,9 +14,7 @@
14
14
  --border-radius-l: 12px;
15
15
  } :root {
16
16
  --gap-xl: 24px;
17
- --gap-2xl: 32px;
18
17
  --gap-3xl: 40px;
19
- --gap-6xl: 72px;
20
18
  } :root {
21
19
  } :root {
22
20
  } :root {
@@ -26,25 +24,26 @@
26
24
  /* sizes */
27
25
 
28
26
  /* paddings */
29
- --modal-s-footer-paddings: var(--gap-xl) 56px 56px;
27
+ --modal-s-footer-paddings: var(--gap-xl) var(--gap-3xl) var(--gap-3xl);
30
28
 
31
29
  /* scroll */
32
30
 
33
31
  /* desktop */
34
32
 
35
33
  /* mobile */
36
- } .modal__footer_1sboe {
34
+
35
+ /* paddings */
36
+ } .modal__footer_kzf10 {
37
37
  border-bottom-left-radius: var(--modal-border-radius);
38
38
  border-bottom-right-radius: var(--modal-border-radius);
39
- } .modal__sticky_1sboe {
39
+ } .modal__sticky_kzf10 {
40
40
  bottom: calc(var(--modal-vertical-padding) * -1)
41
- } .modal__sticky_1sboe.modal__fullscreen_1sboe {
41
+ } .modal__sticky_kzf10.modal__fullscreen_kzf10 {
42
42
  bottom: 0;
43
- } .modal__s_1sboe,
44
- .modal__m_1sboe {
43
+ } .modal__s_kzf10,
44
+ .modal__m_kzf10,
45
+ .modal__l_kzf10,
46
+ .modal__xl_kzf10,
47
+ .modal__fullscreen_kzf10 {
45
48
  padding: var(--modal-s-footer-paddings);
46
- } .modal__l_1sboe,
47
- .modal__xl_1sboe,
48
- .modal__fullscreen_1sboe {
49
- padding: var(--gap-2xl) var(--gap-6xl) var(--gap-6xl);
50
49
  }
@@ -1,8 +1,8 @@
1
- /* hash: 6ef5k */
1
+ /* hash: 19xmn */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-primary: #fff;
5
- --color-light-border-primary: #dbdee1;
5
+ --color-light-border-secondary: #e7e9eb;
6
6
  } :root {
7
7
  } :root {
8
8
  } :root {
@@ -25,19 +25,21 @@
25
25
 
26
26
  /* scroll */
27
27
  --modal-footer-highlight-background: var(--color-light-bg-primary);
28
- --modal-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-border-primary);
28
+ --modal-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-border-secondary);
29
29
 
30
30
  /* desktop */
31
31
 
32
32
  /* mobile */
33
- } .modal__footer_1de14 {
33
+
34
+ /* paddings */
35
+ } .modal__footer_19247 {
34
36
  width: 100%;
35
37
  box-sizing: border-box;
36
38
  transition: box-shadow 0.2s ease, background 0.2s ease;
37
- } .modal__sticky_1de14 {
39
+ } .modal__sticky_19247 {
38
40
  background: var(--modal-footer-background);
39
41
  position: sticky;
40
- } .modal__highlighted_1de14 {
42
+ } .modal__highlighted_19247 {
41
43
  background: var(--modal-footer-highlight-background);
42
44
  box-shadow: var(--modal-footer-highlight-box-shadow);
43
45
  }
@@ -1,4 +1,4 @@
1
- /* hash: 19r38 */
1
+ /* hash: e96ok */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  } :root {
@@ -29,45 +29,47 @@
29
29
  /* desktop */
30
30
 
31
31
  /* mobile */
32
- } .modal__column_ecmie {
32
+
33
+ /* paddings */
34
+ } .modal__column_161h6 {
33
35
  display: flex;
34
36
  flex-direction: column
35
- } .modal__column_ecmie > * {
37
+ } .modal__column_161h6 > * {
36
38
  margin-bottom: var(--modal-footer-default-gap);
37
- } .modal__column_ecmie > *:last-child,
38
- .modal__column_ecmie > *:only-child {
39
+ } .modal__column_161h6 > *:last-child,
40
+ .modal__column_161h6 > *:only-child {
39
41
  margin-bottom: 0;
40
- } .modal__column_ecmie.modal__gap-16_ecmie > * {
42
+ } .modal__column_161h6.modal__gap-16_161h6 > * {
41
43
  margin-bottom: var(--gap-m);
42
- } .modal__column_ecmie.modal__gap-24_ecmie > * {
44
+ } .modal__column_161h6.modal__gap-24_161h6 > * {
43
45
  margin-bottom: var(--gap-xl);
44
- } .modal__column_ecmie.modal__gap-32_ecmie > * {
46
+ } .modal__column_161h6.modal__gap-32_161h6 > * {
45
47
  margin-bottom: var(--gap-2xl);
46
- } .modal__start_ecmie {
48
+ } .modal__start_161h6 {
47
49
  justify-content: flex-start;
48
- } .modal__center_ecmie {
50
+ } .modal__center_161h6 {
49
51
  justify-content: center;
50
- } .modal__space-between_ecmie {
52
+ } .modal__space-between_161h6 {
51
53
  justify-content: space-between
52
- } .modal__space-between_ecmie > * {
54
+ } .modal__space-between_161h6 > * {
53
55
  flex: 1;
54
- } .modal__start_ecmie,
55
- .modal__center_ecmie,
56
- .modal__space-between_ecmie {
56
+ } .modal__start_161h6,
57
+ .modal__center_161h6,
58
+ .modal__space-between_161h6 {
57
59
  display: flex
58
- } .modal__start_ecmie > *, .modal__center_ecmie > *, .modal__space-between_ecmie > * {
60
+ } .modal__start_161h6 > *, .modal__center_161h6 > *, .modal__space-between_161h6 > * {
59
61
  margin-right: var(--modal-footer-default-gap);
60
- } .modal__start_ecmie > *:last-child,
61
- .modal__start_ecmie > *:only-child,
62
- .modal__center_ecmie > *:last-child,
63
- .modal__center_ecmie > *:only-child,
64
- .modal__space-between_ecmie > *:last-child,
65
- .modal__space-between_ecmie > *:only-child {
62
+ } .modal__start_161h6 > *:last-child,
63
+ .modal__start_161h6 > *:only-child,
64
+ .modal__center_161h6 > *:last-child,
65
+ .modal__center_161h6 > *:only-child,
66
+ .modal__space-between_161h6 > *:last-child,
67
+ .modal__space-between_161h6 > *:only-child {
66
68
  margin-right: 0;
67
- } .modal__start_ecmie.modal__gap-16_ecmie > *, .modal__center_ecmie.modal__gap-16_ecmie > *, .modal__space-between_ecmie.modal__gap-16_ecmie > * {
69
+ } .modal__start_161h6.modal__gap-16_161h6 > *, .modal__center_161h6.modal__gap-16_161h6 > *, .modal__space-between_161h6.modal__gap-16_161h6 > * {
68
70
  margin-right: var(--gap-m);
69
- } .modal__start_ecmie.modal__gap-24_ecmie > *, .modal__center_ecmie.modal__gap-24_ecmie > *, .modal__space-between_ecmie.modal__gap-24_ecmie > * {
71
+ } .modal__start_161h6.modal__gap-24_161h6 > *, .modal__center_161h6.modal__gap-24_161h6 > *, .modal__space-between_161h6.modal__gap-24_161h6 > * {
70
72
  margin-right: var(--gap-xl);
71
- } .modal__start_ecmie.modal__gap-32_ecmie > *, .modal__center_ecmie.modal__gap-32_ecmie > *, .modal__space-between_ecmie.modal__gap-32_ecmie > * {
73
+ } .modal__start_161h6.modal__gap-32_161h6 > *, .modal__center_161h6.modal__gap-32_161h6 > *, .modal__space-between_161h6.modal__gap-32_161h6 > * {
72
74
  margin-right: var(--gap-2xl);
73
75
  }
@@ -1,4 +1,4 @@
1
- /* hash: 1t8zi */
1
+ /* hash: 5pqlo */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  } :root {
@@ -26,8 +26,10 @@
26
26
  /* desktop */
27
27
 
28
28
  /* mobile */
29
- } .modal__footer_1paqu {
29
+
30
+ /* paddings */
31
+ } .modal__footer_vmdq8 {
30
32
  padding: var(--gap-m);
31
- } .modal__sticky_1paqu {
33
+ } .modal__sticky_vmdq8 {
32
34
  bottom: 0;
33
35
  }
@@ -1,49 +1,5 @@
1
- import { FC, ReactNode } from 'react';
2
- type HeaderProps = {
3
- /**
4
- * Контент шапки
5
- */
6
- children?: ReactNode;
7
- /**
8
- * Слот слева
9
- */
10
- leftAddons?: ReactNode;
11
- /**
12
- * Наличие компонента крестика
13
- */
14
- hasCloser?: ReactNode;
15
- /**
16
- * Дополнительный класс
17
- */
18
- className?: string;
19
- /**
20
- * Дополнительный класс для аддонов
21
- */
22
- addonClassName?: string;
23
- /**
24
- * Дополнительный класс для контента
25
- */
26
- contentClassName?: string;
27
- /**
28
- * Заголовок шапки
29
- */
30
- title?: string;
31
- /**
32
- * Выравнивание заголовка
33
- */
34
- align?: 'left' | 'center';
35
- /**
36
- * Обрезать ли заголовок
37
- */
38
- trim?: boolean;
39
- /**
40
- * Фиксирует шапку
41
- */
42
- sticky?: boolean;
43
- /**
44
- * Идентификатор для систем автоматизированного тестирования
45
- */
46
- dataTestId?: string;
47
- };
1
+ import { FC } from 'react';
2
+ import { NavigationBarProps } from "@alfalab/core-components-navigation-bar";
3
+ type HeaderProps = Omit<NavigationBarProps, 'size' | 'view' | 'parentRef'>;
48
4
  declare const Header: FC<HeaderProps>;
49
5
  export { HeaderProps, Header };