@alfalab/core-components-bottom-sheet 8.1.4 → 8.1.5-alfasans

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 (84) hide show
  1. package/component.js +1 -1
  2. package/component.js.map +1 -1
  3. package/components/footer/default.css +3 -3
  4. package/components/footer/default.module.css.js +1 -1
  5. package/components/footer/index.css +7 -7
  6. package/components/footer/index.module.css.js +1 -1
  7. package/components/footer/index.module.css.js.map +1 -1
  8. package/components/footer/inverted.css +3 -3
  9. package/components/footer/inverted.module.css.js +1 -1
  10. package/components/header/default.css +4 -4
  11. package/components/header/default.module.css.js +1 -1
  12. package/components/header/index.css +25 -20
  13. package/components/header/index.module.css.js +1 -1
  14. package/components/header/index.module.css.js.map +1 -1
  15. package/components/header/inverted.css +4 -4
  16. package/components/header/inverted.module.css.js +1 -1
  17. package/cssm/component.js +1 -1
  18. package/cssm/component.js.map +1 -1
  19. package/cssm/components/footer/index.module.css +4 -4
  20. package/cssm/components/header/index.module.css +12 -7
  21. package/cssm/index.module.css +5 -5
  22. package/default.css +4 -4
  23. package/default.module.css.js +1 -1
  24. package/esm/component.js +1 -1
  25. package/esm/component.js.map +1 -1
  26. package/esm/components/footer/default.css +3 -3
  27. package/esm/components/footer/default.module.css.js +1 -1
  28. package/esm/components/footer/index.css +7 -7
  29. package/esm/components/footer/index.module.css.js +1 -1
  30. package/esm/components/footer/index.module.css.js.map +1 -1
  31. package/esm/components/footer/inverted.css +3 -3
  32. package/esm/components/footer/inverted.module.css.js +1 -1
  33. package/esm/components/header/default.css +4 -4
  34. package/esm/components/header/default.module.css.js +1 -1
  35. package/esm/components/header/index.css +25 -20
  36. package/esm/components/header/index.module.css.js +1 -1
  37. package/esm/components/header/index.module.css.js.map +1 -1
  38. package/esm/components/header/inverted.css +4 -4
  39. package/esm/components/header/inverted.module.css.js +1 -1
  40. package/esm/default.css +4 -4
  41. package/esm/default.module.css.js +1 -1
  42. package/esm/index.css +50 -50
  43. package/esm/index.module.css.js +1 -1
  44. package/esm/index.module.css.js.map +1 -1
  45. package/esm/inverted.css +4 -4
  46. package/esm/inverted.module.css.js +1 -1
  47. package/index.css +50 -50
  48. package/index.module.css.js +1 -1
  49. package/index.module.css.js.map +1 -1
  50. package/inverted.css +4 -4
  51. package/inverted.module.css.js +1 -1
  52. package/modern/component.js +1 -1
  53. package/modern/component.js.map +1 -1
  54. package/modern/components/footer/default.css +3 -3
  55. package/modern/components/footer/default.module.css.js +1 -1
  56. package/modern/components/footer/index.css +7 -7
  57. package/modern/components/footer/index.module.css.js +1 -1
  58. package/modern/components/footer/index.module.css.js.map +1 -1
  59. package/modern/components/footer/inverted.css +3 -3
  60. package/modern/components/footer/inverted.module.css.js +1 -1
  61. package/modern/components/header/default.css +4 -4
  62. package/modern/components/header/default.module.css.js +1 -1
  63. package/modern/components/header/index.css +25 -20
  64. package/modern/components/header/index.module.css.js +1 -1
  65. package/modern/components/header/index.module.css.js.map +1 -1
  66. package/modern/components/header/inverted.css +4 -4
  67. package/modern/components/header/inverted.module.css.js +1 -1
  68. package/modern/default.css +4 -4
  69. package/modern/default.module.css.js +1 -1
  70. package/modern/index.css +50 -50
  71. package/modern/index.module.css.js +1 -1
  72. package/modern/index.module.css.js.map +1 -1
  73. package/modern/inverted.css +4 -4
  74. package/modern/inverted.module.css.js +1 -1
  75. package/moderncssm/component.js +1 -1
  76. package/moderncssm/component.js.map +1 -1
  77. package/moderncssm/components/footer/index.module.css +2 -2
  78. package/moderncssm/components/header/index.module.css +9 -5
  79. package/moderncssm/index.module.css +3 -3
  80. package/package.json +8 -8
  81. package/src/component.tsx +1 -1
  82. package/src/components/footer/index.module.css +2 -2
  83. package/src/components/header/index.module.css +2 -2
  84. package/src/index.module.css +3 -3
package/esm/index.css CHANGED
@@ -31,10 +31,10 @@
31
31
  }
32
32
  :root {
33
33
  --gap-2xs: 4px;
34
- --gap-m: 16px;
34
+ --gap-l: 20px;
35
35
  --gap-0: 0px;
36
36
  --gap-4: var(--gap-2xs);
37
- --gap-16: var(--gap-m);
37
+ --gap-20: var(--gap-l);
38
38
  }
39
39
  :root {
40
40
  --sab: env(safe-area-inset-bottom, var(--gap-0));
@@ -45,18 +45,18 @@
45
45
  --bottom-sheet-top-radius: var(--border-radius-16);
46
46
  --bottom-sheet-shadow: none;
47
47
  }
48
- .bottom-sheet__modal_emb9s {
48
+ .bottom-sheet__modal_1qore {
49
49
  bottom: var(--gap-0);
50
50
  width: 100%;
51
51
  max-width: 600px;
52
52
  pointer-events: none;
53
53
  touch-action: none;
54
54
  }
55
- .bottom-sheet__modal_emb9s.bottom-sheet__modal_emb9s {
55
+ .bottom-sheet__modal_1qore.bottom-sheet__modal_1qore {
56
56
  background-color: transparent;
57
57
  position: fixed;
58
58
  }
59
- .bottom-sheet__wrapper_emb9s {
59
+ .bottom-sheet__wrapper_1qore {
60
60
  transform: translateY(100%);
61
61
  pointer-events: none;
62
62
  touch-action: none;
@@ -64,13 +64,13 @@
64
64
  border-top-left-radius: var(--bottom-sheet-top-radius);
65
65
  transition: border-radius 0.3s ease;
66
66
  }
67
- .bottom-sheet__outerClassName_emb9s {
67
+ .bottom-sheet__outerClassName_1qore {
68
68
  pointer-events: all;
69
69
  }
70
- .bottom-sheet__fullscreen_emb9s {
70
+ .bottom-sheet__fullscreen_1qore {
71
71
  border-radius: var(--border-radius-0);
72
72
  }
73
- .bottom-sheet__component_emb9s {
73
+ .bottom-sheet__component_1qore {
74
74
  position: relative;
75
75
  display: flex;
76
76
  flex-direction: column;
@@ -79,10 +79,10 @@
79
79
  box-shadow: var(--bottom-sheet-shadow);
80
80
  transform: translate(0, 0);
81
81
  }
82
- .bottom-sheet__withTransition_emb9s {
82
+ .bottom-sheet__withTransition_1qore {
83
83
  transition: var(--bottom-sheet-out-transition);
84
84
  }
85
- .bottom-sheet__scrollableContainer_emb9s {
85
+ .bottom-sheet__scrollableContainer_1qore {
86
86
  overflow: auto;
87
87
  display: flex;
88
88
  flex-direction: column;
@@ -92,7 +92,7 @@
92
92
  border-radius: inherit;
93
93
  overscroll-behavior: contain;
94
94
  }
95
- .bottom-sheet__marker_emb9s {
95
+ .bottom-sheet__marker_1qore {
96
96
  position: fixed;
97
97
  top: var(--gap-4);
98
98
  right: var(--gap-0);
@@ -101,122 +101,122 @@
101
101
  width: 36px;
102
102
  margin: var(--gap-0) auto;
103
103
  }
104
- .bottom-sheet__defaultMarker_emb9s {
104
+ .bottom-sheet__defaultMarker_1qore {
105
105
  height: 4px;
106
106
  border-radius: var(--border-radius-20);
107
107
  }
108
- .bottom-sheet__content_emb9s {
108
+ .bottom-sheet__content_1qore {
109
109
  position: relative;
110
110
  z-index: 0;
111
111
  display: flex;
112
112
  flex-direction: column;
113
113
  flex: 1;
114
- padding: var(--gap-0) var(--gap-16);
114
+ padding: var(--gap-0) var(--gap-20);
115
115
  background-color: inherit;
116
116
  border-radius: inherit;
117
117
  }
118
- .bottom-sheet__noHeader_emb9s {
119
- padding-top: var(--gap-16);
118
+ .bottom-sheet__noHeader_1qore {
119
+ padding-top: var(--gap-20);
120
120
  }
121
- .bottom-sheet__noFooter_emb9s {
122
- padding-bottom: var(--gap-16);
121
+ .bottom-sheet__noFooter_1qore {
122
+ padding-bottom: var(--gap-20);
123
123
  }
124
- .bottom-sheet__scrollLocked_emb9s {
124
+ .bottom-sheet__scrollLocked_1qore {
125
125
  overflow: hidden;
126
126
  }
127
- .bottom-sheet__hiddenScrollbar_emb9s {
127
+ .bottom-sheet__hiddenScrollbar_1qore {
128
128
  scrollbar-width: none;
129
129
  }
130
- .bottom-sheet__hiddenScrollbar_emb9s::-webkit-scrollbar {
130
+ .bottom-sheet__hiddenScrollbar_1qore::-webkit-scrollbar {
131
131
  width: 0;
132
132
  height: 0;
133
133
  }
134
- .bottom-sheet__disabledPointerEvents_emb9s {
134
+ .bottom-sheet__disabledPointerEvents_1qore {
135
135
  pointer-events: none;
136
136
  }
137
- .bottom-sheet__appear_emb9s .bottom-sheet__wrapper_emb9s, .bottom-sheet__enter_emb9s .bottom-sheet__wrapper_emb9s {
137
+ .bottom-sheet__appear_1qore .bottom-sheet__wrapper_1qore, .bottom-sheet__enter_1qore .bottom-sheet__wrapper_1qore {
138
138
  transition: none;
139
139
  }
140
- .bottom-sheet__appearActive_emb9s .bottom-sheet__wrapper_emb9s, .bottom-sheet__enterActive_emb9s .bottom-sheet__wrapper_emb9s {
140
+ .bottom-sheet__appearActive_1qore .bottom-sheet__wrapper_1qore, .bottom-sheet__enterActive_1qore .bottom-sheet__wrapper_1qore {
141
141
  transition: var(--bottom-sheet-in-transition);
142
142
  transform: translateY(0);
143
143
  }
144
- .bottom-sheet__enterDone_emb9s .bottom-sheet__wrapper_emb9s, .bottom-sheet__appearDone_emb9s .bottom-sheet__wrapper_emb9s {
144
+ .bottom-sheet__enterDone_1qore .bottom-sheet__wrapper_1qore, .bottom-sheet__appearDone_1qore .bottom-sheet__wrapper_1qore {
145
145
  transform: translateY(0);
146
146
  }
147
- .bottom-sheet__exit_emb9s .bottom-sheet__wrapper_emb9s {
147
+ .bottom-sheet__exit_1qore .bottom-sheet__wrapper_1qore {
148
148
  transform: translateY(0);
149
149
  }
150
- .bottom-sheet__exitActive_emb9s .bottom-sheet__wrapper_emb9s {
150
+ .bottom-sheet__exitActive_1qore .bottom-sheet__wrapper_1qore {
151
151
  transition: var(--bottom-sheet-out-transition);
152
152
  transform: translateY(100%);
153
153
  }
154
- .bottom-sheet__safeAreaBottom_emb9s {
154
+ .bottom-sheet__safeAreaBottom_1qore {
155
155
  padding-bottom: var(--sab);
156
156
  }
157
- .bottom-sheet__background-accent_emb9s {
157
+ .bottom-sheet__background-accent_1qore {
158
158
  background-color: var(--color-light-bg-accent);
159
159
  }
160
- .bottom-sheet__background-info_emb9s {
160
+ .bottom-sheet__background-info_1qore {
161
161
  background-color: var(--color-light-bg-info);
162
162
  }
163
- .bottom-sheet__background-attention-muted_emb9s {
163
+ .bottom-sheet__background-attention-muted_1qore {
164
164
  background-color: var(--color-light-bg-attention-muted);
165
165
  }
166
- .bottom-sheet__background-positive-muted_emb9s {
166
+ .bottom-sheet__background-positive-muted_1qore {
167
167
  background-color: var(--color-light-bg-positive-muted);
168
168
  }
169
- .bottom-sheet__background-negative-muted_emb9s {
169
+ .bottom-sheet__background-negative-muted_1qore {
170
170
  background-color: var(--color-light-bg-negative-muted);
171
171
  }
172
- .bottom-sheet__background-primary_emb9s {
172
+ .bottom-sheet__background-primary_1qore {
173
173
  background-color: var(--color-light-bg-primary);
174
174
  }
175
- .bottom-sheet__background-primary-inverted_emb9s {
175
+ .bottom-sheet__background-primary-inverted_1qore {
176
176
  background-color: var(--color-light-bg-primary-inverted);
177
177
  }
178
- .bottom-sheet__background-secondary_emb9s {
178
+ .bottom-sheet__background-secondary_1qore {
179
179
  background-color: var(--color-light-bg-secondary);
180
180
  }
181
- .bottom-sheet__background-secondary-inverted_emb9s {
181
+ .bottom-sheet__background-secondary-inverted_1qore {
182
182
  background-color: var(--color-light-bg-secondary-inverted);
183
183
  }
184
- .bottom-sheet__background-tertiary_emb9s {
184
+ .bottom-sheet__background-tertiary_1qore {
185
185
  background-color: var(--color-light-bg-tertiary);
186
186
  }
187
- .bottom-sheet__background-tertiary-inverted_emb9s {
187
+ .bottom-sheet__background-tertiary-inverted_1qore {
188
188
  background-color: var(--color-light-bg-tertiary-inverted);
189
189
  }
190
- .bottom-sheet__background-quaternary_emb9s {
190
+ .bottom-sheet__background-quaternary_1qore {
191
191
  background-color: var(--color-light-bg-quaternary);
192
192
  }
193
- .bottom-sheet__background-quaternary-inverted_emb9s {
193
+ .bottom-sheet__background-quaternary-inverted_1qore {
194
194
  background-color: var(--color-light-bg-quaternary-inverted);
195
195
  }
196
- .bottom-sheet__background-specialbg-component_emb9s {
196
+ .bottom-sheet__background-specialbg-component_1qore {
197
197
  background-color: var(--color-light-specialbg-component);
198
198
  }
199
- .bottom-sheet__background-specialbg-component-inverted_emb9s {
199
+ .bottom-sheet__background-specialbg-component-inverted_1qore {
200
200
  background-color: var(--color-light-specialbg-component-inverted);
201
201
  }
202
- .bottom-sheet__background-specialbg-primary-grouped_emb9s {
202
+ .bottom-sheet__background-specialbg-primary-grouped_1qore {
203
203
  background-color: var(--color-light-specialbg-primary-grouped);
204
204
  }
205
- .bottom-sheet__background-specialbg-secondary-grouped_emb9s {
205
+ .bottom-sheet__background-specialbg-secondary-grouped_1qore {
206
206
  background-color: var(--color-light-specialbg-secondary-grouped);
207
207
  }
208
- .bottom-sheet__background-specialbg-tertiary-grouped_emb9s {
208
+ .bottom-sheet__background-specialbg-tertiary-grouped_1qore {
209
209
  background-color: var(--color-light-specialbg-tertiary-grouped);
210
210
  }
211
- .bottom-sheet__background-specialbg-secondary-transparent_emb9s {
211
+ .bottom-sheet__background-specialbg-secondary-transparent_1qore {
212
212
  background-color: var(--color-light-specialbg-secondary-transparent);
213
213
  }
214
- .bottom-sheet__background-specialbg-secondary-transparent-inverted_emb9s {
214
+ .bottom-sheet__background-specialbg-secondary-transparent-inverted_1qore {
215
215
  background-color: var(--color-light-specialbg-secondary-transparent-inverted);
216
216
  }
217
- .bottom-sheet__background-specialbg-tertiary-transparent_emb9s {
217
+ .bottom-sheet__background-specialbg-tertiary-transparent_1qore {
218
218
  background-color: var(--color-light-specialbg-tertiary-transparent);
219
219
  }
220
- .bottom-sheet__background-specialbg-tertiary-transparent-inverted_emb9s {
220
+ .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1qore {
221
221
  background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
222
222
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"modal":"bottom-sheet__modal_emb9s","wrapper":"bottom-sheet__wrapper_emb9s","outerClassName":"bottom-sheet__outerClassName_emb9s","fullscreen":"bottom-sheet__fullscreen_emb9s","component":"bottom-sheet__component_emb9s","withTransition":"bottom-sheet__withTransition_emb9s","scrollableContainer":"bottom-sheet__scrollableContainer_emb9s","marker":"bottom-sheet__marker_emb9s","defaultMarker":"bottom-sheet__defaultMarker_emb9s","content":"bottom-sheet__content_emb9s","noHeader":"bottom-sheet__noHeader_emb9s","noFooter":"bottom-sheet__noFooter_emb9s","scrollLocked":"bottom-sheet__scrollLocked_emb9s","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_emb9s","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_emb9s","appear":"bottom-sheet__appear_emb9s","enter":"bottom-sheet__enter_emb9s","appearActive":"bottom-sheet__appearActive_emb9s","enterActive":"bottom-sheet__enterActive_emb9s","enterDone":"bottom-sheet__enterDone_emb9s","appearDone":"bottom-sheet__appearDone_emb9s","exit":"bottom-sheet__exit_emb9s","exitActive":"bottom-sheet__exitActive_emb9s","safeAreaBottom":"bottom-sheet__safeAreaBottom_emb9s","background-accent":"bottom-sheet__background-accent_emb9s","background-info":"bottom-sheet__background-info_emb9s","background-attention-muted":"bottom-sheet__background-attention-muted_emb9s","background-positive-muted":"bottom-sheet__background-positive-muted_emb9s","background-negative-muted":"bottom-sheet__background-negative-muted_emb9s","background-primary":"bottom-sheet__background-primary_emb9s","background-primary-inverted":"bottom-sheet__background-primary-inverted_emb9s","background-secondary":"bottom-sheet__background-secondary_emb9s","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_emb9s","background-tertiary":"bottom-sheet__background-tertiary_emb9s","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_emb9s","background-quaternary":"bottom-sheet__background-quaternary_emb9s","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_emb9s","background-specialbg-component":"bottom-sheet__background-specialbg-component_emb9s","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_emb9s","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_emb9s","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_emb9s","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_emb9s","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_emb9s","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_emb9s","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_emb9s","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_emb9s"};
3
+ var styles = {"modal":"bottom-sheet__modal_1qore","wrapper":"bottom-sheet__wrapper_1qore","outerClassName":"bottom-sheet__outerClassName_1qore","fullscreen":"bottom-sheet__fullscreen_1qore","component":"bottom-sheet__component_1qore","withTransition":"bottom-sheet__withTransition_1qore","scrollableContainer":"bottom-sheet__scrollableContainer_1qore","marker":"bottom-sheet__marker_1qore","defaultMarker":"bottom-sheet__defaultMarker_1qore","content":"bottom-sheet__content_1qore","noHeader":"bottom-sheet__noHeader_1qore","noFooter":"bottom-sheet__noFooter_1qore","scrollLocked":"bottom-sheet__scrollLocked_1qore","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1qore","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1qore","appear":"bottom-sheet__appear_1qore","enter":"bottom-sheet__enter_1qore","appearActive":"bottom-sheet__appearActive_1qore","enterActive":"bottom-sheet__enterActive_1qore","enterDone":"bottom-sheet__enterDone_1qore","appearDone":"bottom-sheet__appearDone_1qore","exit":"bottom-sheet__exit_1qore","exitActive":"bottom-sheet__exitActive_1qore","safeAreaBottom":"bottom-sheet__safeAreaBottom_1qore","background-accent":"bottom-sheet__background-accent_1qore","background-info":"bottom-sheet__background-info_1qore","background-attention-muted":"bottom-sheet__background-attention-muted_1qore","background-positive-muted":"bottom-sheet__background-positive-muted_1qore","background-negative-muted":"bottom-sheet__background-negative-muted_1qore","background-primary":"bottom-sheet__background-primary_1qore","background-primary-inverted":"bottom-sheet__background-primary-inverted_1qore","background-secondary":"bottom-sheet__background-secondary_1qore","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1qore","background-tertiary":"bottom-sheet__background-tertiary_1qore","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1qore","background-quaternary":"bottom-sheet__background-quaternary_1qore","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1qore","background-specialbg-component":"bottom-sheet__background-specialbg-component_1qore","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1qore","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1qore","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1qore","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1qore","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1qore","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1qore","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1qore","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1qore"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '@alfalab/core-components-vars/src/safe-area.css';\n@import './vars.css';\n\n.modal {\n bottom: var(--gap-0);\n width: 100%;\n max-width: 600px;\n pointer-events: none;\n touch-action: none;\n}\n\n.modal.modal {\n background-color: transparent;\n position: fixed;\n}\n\n.wrapper {\n transform: translateY(100%);\n pointer-events: none;\n touch-action: none;\n border-top-right-radius: var(--bottom-sheet-top-radius);\n border-top-left-radius: var(--bottom-sheet-top-radius);\n transition: border-radius 0.3s ease;\n}\n\n.outerClassName {\n pointer-events: all;\n}\n\n.fullscreen {\n border-radius: var(--border-radius-0);\n}\n\n.component {\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: inherit;\n pointer-events: all;\n box-shadow: var(--bottom-sheet-shadow);\n\n /* фикс: при включённом padding маркер может визуально \"улетать\" наверх */\n transform: translate(0, 0);\n}\n\n.withTransition {\n transition: var(--bottom-sheet-out-transition);\n}\n\n.scrollableContainer {\n overflow: auto;\n display: flex;\n flex-direction: column;\n position: relative;\n height: 100%;\n background-color: inherit;\n border-radius: inherit;\n overscroll-behavior: contain;\n}\n\n.marker {\n position: fixed;\n top: var(--gap-4);\n right: var(--gap-0);\n left: var(--gap-0);\n z-index: 1000;\n width: 36px;\n margin: var(--gap-0) auto;\n}\n\n.defaultMarker {\n height: 4px;\n border-radius: var(--border-radius-20);\n}\n\n.content {\n position: relative;\n z-index: 0;\n display: flex;\n flex-direction: column;\n flex: 1;\n padding: var(--gap-0) var(--gap-16);\n background-color: inherit;\n border-radius: inherit;\n}\n\n.noHeader {\n padding-top: var(--gap-16);\n}\n\n.noFooter {\n padding-bottom: var(--gap-16);\n}\n\n.scrollLocked {\n overflow: hidden;\n}\n\n.hiddenScrollbar {\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n}\n\n.disabledPointerEvents {\n pointer-events: none;\n}\n\n.appear,\n.enter {\n & .wrapper {\n transition: none;\n }\n}\n\n.appearActive,\n.enterActive {\n & .wrapper {\n transition: var(--bottom-sheet-in-transition);\n transform: translateY(0);\n }\n}\n\n.enterDone,\n.appearDone {\n & .wrapper {\n transform: translateY(0);\n }\n}\n\n.exit {\n & .wrapper {\n transform: translateY(0);\n }\n}\n\n.exitActive {\n & .wrapper {\n transition: var(--bottom-sheet-out-transition);\n transform: translateY(100%);\n }\n}\n\n.safeAreaBottom {\n padding-bottom: var(--sab);\n}\n\n@mixin bg-class-list;\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,OAAO,CAAC,2BAA2B,CAAC,SAAS,CAAC,6BAA6B,CAAC,gBAAgB,CAAC,oCAAoC,CAAC,YAAY,CAAC,gCAAgC,CAAC,WAAW,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,oCAAoC,CAAC,qBAAqB,CAAC,yCAAyC,CAAC,QAAQ,CAAC,4BAA4B,CAAC,eAAe,CAAC,mCAAmC,CAAC,SAAS,CAAC,6BAA6B,CAAC,UAAU,CAAC,8BAA8B,CAAC,UAAU,CAAC,8BAA8B,CAAC,cAAc,CAAC,kCAAkC,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,QAAQ,CAAC,4BAA4B,CAAC,OAAO,CAAC,2BAA2B,CAAC,cAAc,CAAC,kCAAkC,CAAC,aAAa,CAAC,iCAAiC,CAAC,WAAW,CAAC,+BAA+B,CAAC,YAAY,CAAC,gCAAgC,CAAC,MAAM,CAAC,0BAA0B,CAAC,YAAY,CAAC,gCAAgC,CAAC,gBAAgB,CAAC,oCAAoC,CAAC,mBAAmB,CAAC,uCAAuC,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,4BAA4B,CAAC,gDAAgD,CAAC,2BAA2B,CAAC,+CAA+C,CAAC,2BAA2B,CAAC,+CAA+C,CAAC,oBAAoB,CAAC,wCAAwC,CAAC,6BAA6B,CAAC,iDAAiD,CAAC,sBAAsB,CAAC,0CAA0C,CAAC,+BAA+B,CAAC,mDAAmD,CAAC,qBAAqB,CAAC,yCAAyC,CAAC,8BAA8B,CAAC,kDAAkD,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,gCAAgC,CAAC,oDAAoD,CAAC,gCAAgC,CAAC,oDAAoD,CAAC,yCAAyC,CAAC,6DAA6D,CAAC,sCAAsC,CAAC,0DAA0D,CAAC,wCAAwC,CAAC,4DAA4D,CAAC,uCAAuC,CAAC,2DAA2D,CAAC,4CAA4C,CAAC,gEAAgE,CAAC,qDAAqD,CAAC,yEAAyE,CAAC,2CAA2C,CAAC,+DAA+D,CAAC,oDAAoD,CAAC,wEAAwE,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '@alfalab/core-components-vars/src/safe-area.css';\n@import './vars.css';\n\n.modal {\n bottom: var(--gap-0);\n width: 100%;\n max-width: 600px;\n pointer-events: none;\n touch-action: none;\n}\n\n.modal.modal {\n background-color: transparent;\n position: fixed;\n}\n\n.wrapper {\n transform: translateY(100%);\n pointer-events: none;\n touch-action: none;\n border-top-right-radius: var(--bottom-sheet-top-radius);\n border-top-left-radius: var(--bottom-sheet-top-radius);\n transition: border-radius 0.3s ease;\n}\n\n.outerClassName {\n pointer-events: all;\n}\n\n.fullscreen {\n border-radius: var(--border-radius-0);\n}\n\n.component {\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: inherit;\n pointer-events: all;\n box-shadow: var(--bottom-sheet-shadow);\n\n /* фикс: при включённом padding маркер может визуально \"улетать\" наверх */\n transform: translate(0, 0);\n}\n\n.withTransition {\n transition: var(--bottom-sheet-out-transition);\n}\n\n.scrollableContainer {\n overflow: auto;\n display: flex;\n flex-direction: column;\n position: relative;\n height: 100%;\n background-color: inherit;\n border-radius: inherit;\n overscroll-behavior: contain;\n}\n\n.marker {\n position: fixed;\n top: var(--gap-4);\n right: var(--gap-0);\n left: var(--gap-0);\n z-index: 1000;\n width: 36px;\n margin: var(--gap-0) auto;\n}\n\n.defaultMarker {\n height: 4px;\n border-radius: var(--border-radius-20);\n}\n\n.content {\n position: relative;\n z-index: 0;\n display: flex;\n flex-direction: column;\n flex: 1;\n padding: var(--gap-0) var(--gap-20);\n background-color: inherit;\n border-radius: inherit;\n}\n\n.noHeader {\n padding-top: var(--gap-20);\n}\n\n.noFooter {\n padding-bottom: var(--gap-20);\n}\n\n.scrollLocked {\n overflow: hidden;\n}\n\n.hiddenScrollbar {\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n}\n\n.disabledPointerEvents {\n pointer-events: none;\n}\n\n.appear,\n.enter {\n & .wrapper {\n transition: none;\n }\n}\n\n.appearActive,\n.enterActive {\n & .wrapper {\n transition: var(--bottom-sheet-in-transition);\n transform: translateY(0);\n }\n}\n\n.enterDone,\n.appearDone {\n & .wrapper {\n transform: translateY(0);\n }\n}\n\n.exit {\n & .wrapper {\n transform: translateY(0);\n }\n}\n\n.exitActive {\n & .wrapper {\n transition: var(--bottom-sheet-out-transition);\n transform: translateY(100%);\n }\n}\n\n.safeAreaBottom {\n padding-bottom: var(--sab);\n}\n\n@mixin bg-class-list;\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,OAAO,CAAC,2BAA2B,CAAC,SAAS,CAAC,6BAA6B,CAAC,gBAAgB,CAAC,oCAAoC,CAAC,YAAY,CAAC,gCAAgC,CAAC,WAAW,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,oCAAoC,CAAC,qBAAqB,CAAC,yCAAyC,CAAC,QAAQ,CAAC,4BAA4B,CAAC,eAAe,CAAC,mCAAmC,CAAC,SAAS,CAAC,6BAA6B,CAAC,UAAU,CAAC,8BAA8B,CAAC,UAAU,CAAC,8BAA8B,CAAC,cAAc,CAAC,kCAAkC,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,QAAQ,CAAC,4BAA4B,CAAC,OAAO,CAAC,2BAA2B,CAAC,cAAc,CAAC,kCAAkC,CAAC,aAAa,CAAC,iCAAiC,CAAC,WAAW,CAAC,+BAA+B,CAAC,YAAY,CAAC,gCAAgC,CAAC,MAAM,CAAC,0BAA0B,CAAC,YAAY,CAAC,gCAAgC,CAAC,gBAAgB,CAAC,oCAAoC,CAAC,mBAAmB,CAAC,uCAAuC,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,4BAA4B,CAAC,gDAAgD,CAAC,2BAA2B,CAAC,+CAA+C,CAAC,2BAA2B,CAAC,+CAA+C,CAAC,oBAAoB,CAAC,wCAAwC,CAAC,6BAA6B,CAAC,iDAAiD,CAAC,sBAAsB,CAAC,0CAA0C,CAAC,+BAA+B,CAAC,mDAAmD,CAAC,qBAAqB,CAAC,yCAAyC,CAAC,8BAA8B,CAAC,kDAAkD,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,gCAAgC,CAAC,oDAAoD,CAAC,gCAAgC,CAAC,oDAAoD,CAAC,yCAAyC,CAAC,6DAA6D,CAAC,sCAAsC,CAAC,0DAA0D,CAAC,wCAAwC,CAAC,4DAA4D,CAAC,uCAAuC,CAAC,2DAA2D,CAAC,4CAA4C,CAAC,gEAAgE,CAAC,qDAAqD,CAAC,yEAAyE,CAAC,2CAA2C,CAAC,+DAA+D,CAAC,oDAAoD,CAAC,wEAAwE,CAAC;;;;"}
package/esm/inverted.css CHANGED
@@ -8,15 +8,15 @@
8
8
  --bottom-sheet-marker-color-inverted: var(--color-light-neutral-translucent-300-inverted);
9
9
  --bottom-sheet-text-color-inverted: var(--color-light-text-primary-inverted);
10
10
  }
11
- .bottom-sheet__component_m2xgh {
11
+ .bottom-sheet__component_1e0s2 {
12
12
  background-color: var(--bottom-sheet-background-color-inverted);
13
13
  }
14
- .bottom-sheet__content_m2xgh {
14
+ .bottom-sheet__content_1e0s2 {
15
15
  color: var(--bottom-sheet-text-color-inverted);
16
16
  }
17
- .bottom-sheet__defaultMarker_m2xgh {
17
+ .bottom-sheet__defaultMarker_1e0s2 {
18
18
  background-color: var(--bottom-sheet-marker-color-inverted);
19
19
  }
20
- .bottom-sheet__hasContent_m2xgh {
20
+ .bottom-sheet__hasContent_1e0s2 {
21
21
  color: var(--bottom-sheet-text-color-inverted);
22
22
  }
@@ -1,6 +1,6 @@
1
1
  import './inverted.css';
2
2
 
3
- var invertedColors = {"component":"bottom-sheet__component_m2xgh","content":"bottom-sheet__content_m2xgh","defaultMarker":"bottom-sheet__defaultMarker_m2xgh","hasContent":"bottom-sheet__hasContent_m2xgh"};
3
+ var invertedColors = {"component":"bottom-sheet__component_1e0s2","content":"bottom-sheet__content_1e0s2","defaultMarker":"bottom-sheet__defaultMarker_1e0s2","hasContent":"bottom-sheet__hasContent_1e0s2"};
4
4
 
5
5
  export { invertedColors as default };
6
6
  //# sourceMappingURL=inverted.module.css.js.map
package/index.css CHANGED
@@ -31,10 +31,10 @@
31
31
  }
32
32
  :root {
33
33
  --gap-2xs: 4px;
34
- --gap-m: 16px;
34
+ --gap-l: 20px;
35
35
  --gap-0: 0px;
36
36
  --gap-4: var(--gap-2xs);
37
- --gap-16: var(--gap-m);
37
+ --gap-20: var(--gap-l);
38
38
  }
39
39
  :root {
40
40
  --sab: env(safe-area-inset-bottom, var(--gap-0));
@@ -45,18 +45,18 @@
45
45
  --bottom-sheet-top-radius: var(--border-radius-16);
46
46
  --bottom-sheet-shadow: none;
47
47
  }
48
- .bottom-sheet__modal_emb9s {
48
+ .bottom-sheet__modal_1qore {
49
49
  bottom: var(--gap-0);
50
50
  width: 100%;
51
51
  max-width: 600px;
52
52
  pointer-events: none;
53
53
  touch-action: none;
54
54
  }
55
- .bottom-sheet__modal_emb9s.bottom-sheet__modal_emb9s {
55
+ .bottom-sheet__modal_1qore.bottom-sheet__modal_1qore {
56
56
  background-color: transparent;
57
57
  position: fixed;
58
58
  }
59
- .bottom-sheet__wrapper_emb9s {
59
+ .bottom-sheet__wrapper_1qore {
60
60
  transform: translateY(100%);
61
61
  pointer-events: none;
62
62
  touch-action: none;
@@ -64,13 +64,13 @@
64
64
  border-top-left-radius: var(--bottom-sheet-top-radius);
65
65
  transition: border-radius 0.3s ease;
66
66
  }
67
- .bottom-sheet__outerClassName_emb9s {
67
+ .bottom-sheet__outerClassName_1qore {
68
68
  pointer-events: all;
69
69
  }
70
- .bottom-sheet__fullscreen_emb9s {
70
+ .bottom-sheet__fullscreen_1qore {
71
71
  border-radius: var(--border-radius-0);
72
72
  }
73
- .bottom-sheet__component_emb9s {
73
+ .bottom-sheet__component_1qore {
74
74
  position: relative;
75
75
  display: flex;
76
76
  flex-direction: column;
@@ -79,10 +79,10 @@
79
79
  box-shadow: var(--bottom-sheet-shadow);
80
80
  transform: translate(0, 0);
81
81
  }
82
- .bottom-sheet__withTransition_emb9s {
82
+ .bottom-sheet__withTransition_1qore {
83
83
  transition: var(--bottom-sheet-out-transition);
84
84
  }
85
- .bottom-sheet__scrollableContainer_emb9s {
85
+ .bottom-sheet__scrollableContainer_1qore {
86
86
  overflow: auto;
87
87
  display: flex;
88
88
  flex-direction: column;
@@ -92,7 +92,7 @@
92
92
  border-radius: inherit;
93
93
  overscroll-behavior: contain;
94
94
  }
95
- .bottom-sheet__marker_emb9s {
95
+ .bottom-sheet__marker_1qore {
96
96
  position: fixed;
97
97
  top: var(--gap-4);
98
98
  right: var(--gap-0);
@@ -101,122 +101,122 @@
101
101
  width: 36px;
102
102
  margin: var(--gap-0) auto;
103
103
  }
104
- .bottom-sheet__defaultMarker_emb9s {
104
+ .bottom-sheet__defaultMarker_1qore {
105
105
  height: 4px;
106
106
  border-radius: var(--border-radius-20);
107
107
  }
108
- .bottom-sheet__content_emb9s {
108
+ .bottom-sheet__content_1qore {
109
109
  position: relative;
110
110
  z-index: 0;
111
111
  display: flex;
112
112
  flex-direction: column;
113
113
  flex: 1;
114
- padding: var(--gap-0) var(--gap-16);
114
+ padding: var(--gap-0) var(--gap-20);
115
115
  background-color: inherit;
116
116
  border-radius: inherit;
117
117
  }
118
- .bottom-sheet__noHeader_emb9s {
119
- padding-top: var(--gap-16);
118
+ .bottom-sheet__noHeader_1qore {
119
+ padding-top: var(--gap-20);
120
120
  }
121
- .bottom-sheet__noFooter_emb9s {
122
- padding-bottom: var(--gap-16);
121
+ .bottom-sheet__noFooter_1qore {
122
+ padding-bottom: var(--gap-20);
123
123
  }
124
- .bottom-sheet__scrollLocked_emb9s {
124
+ .bottom-sheet__scrollLocked_1qore {
125
125
  overflow: hidden;
126
126
  }
127
- .bottom-sheet__hiddenScrollbar_emb9s {
127
+ .bottom-sheet__hiddenScrollbar_1qore {
128
128
  scrollbar-width: none;
129
129
  }
130
- .bottom-sheet__hiddenScrollbar_emb9s::-webkit-scrollbar {
130
+ .bottom-sheet__hiddenScrollbar_1qore::-webkit-scrollbar {
131
131
  width: 0;
132
132
  height: 0;
133
133
  }
134
- .bottom-sheet__disabledPointerEvents_emb9s {
134
+ .bottom-sheet__disabledPointerEvents_1qore {
135
135
  pointer-events: none;
136
136
  }
137
- .bottom-sheet__appear_emb9s .bottom-sheet__wrapper_emb9s, .bottom-sheet__enter_emb9s .bottom-sheet__wrapper_emb9s {
137
+ .bottom-sheet__appear_1qore .bottom-sheet__wrapper_1qore, .bottom-sheet__enter_1qore .bottom-sheet__wrapper_1qore {
138
138
  transition: none;
139
139
  }
140
- .bottom-sheet__appearActive_emb9s .bottom-sheet__wrapper_emb9s, .bottom-sheet__enterActive_emb9s .bottom-sheet__wrapper_emb9s {
140
+ .bottom-sheet__appearActive_1qore .bottom-sheet__wrapper_1qore, .bottom-sheet__enterActive_1qore .bottom-sheet__wrapper_1qore {
141
141
  transition: var(--bottom-sheet-in-transition);
142
142
  transform: translateY(0);
143
143
  }
144
- .bottom-sheet__enterDone_emb9s .bottom-sheet__wrapper_emb9s, .bottom-sheet__appearDone_emb9s .bottom-sheet__wrapper_emb9s {
144
+ .bottom-sheet__enterDone_1qore .bottom-sheet__wrapper_1qore, .bottom-sheet__appearDone_1qore .bottom-sheet__wrapper_1qore {
145
145
  transform: translateY(0);
146
146
  }
147
- .bottom-sheet__exit_emb9s .bottom-sheet__wrapper_emb9s {
147
+ .bottom-sheet__exit_1qore .bottom-sheet__wrapper_1qore {
148
148
  transform: translateY(0);
149
149
  }
150
- .bottom-sheet__exitActive_emb9s .bottom-sheet__wrapper_emb9s {
150
+ .bottom-sheet__exitActive_1qore .bottom-sheet__wrapper_1qore {
151
151
  transition: var(--bottom-sheet-out-transition);
152
152
  transform: translateY(100%);
153
153
  }
154
- .bottom-sheet__safeAreaBottom_emb9s {
154
+ .bottom-sheet__safeAreaBottom_1qore {
155
155
  padding-bottom: var(--sab);
156
156
  }
157
- .bottom-sheet__background-accent_emb9s {
157
+ .bottom-sheet__background-accent_1qore {
158
158
  background-color: var(--color-light-bg-accent);
159
159
  }
160
- .bottom-sheet__background-info_emb9s {
160
+ .bottom-sheet__background-info_1qore {
161
161
  background-color: var(--color-light-bg-info);
162
162
  }
163
- .bottom-sheet__background-attention-muted_emb9s {
163
+ .bottom-sheet__background-attention-muted_1qore {
164
164
  background-color: var(--color-light-bg-attention-muted);
165
165
  }
166
- .bottom-sheet__background-positive-muted_emb9s {
166
+ .bottom-sheet__background-positive-muted_1qore {
167
167
  background-color: var(--color-light-bg-positive-muted);
168
168
  }
169
- .bottom-sheet__background-negative-muted_emb9s {
169
+ .bottom-sheet__background-negative-muted_1qore {
170
170
  background-color: var(--color-light-bg-negative-muted);
171
171
  }
172
- .bottom-sheet__background-primary_emb9s {
172
+ .bottom-sheet__background-primary_1qore {
173
173
  background-color: var(--color-light-bg-primary);
174
174
  }
175
- .bottom-sheet__background-primary-inverted_emb9s {
175
+ .bottom-sheet__background-primary-inverted_1qore {
176
176
  background-color: var(--color-light-bg-primary-inverted);
177
177
  }
178
- .bottom-sheet__background-secondary_emb9s {
178
+ .bottom-sheet__background-secondary_1qore {
179
179
  background-color: var(--color-light-bg-secondary);
180
180
  }
181
- .bottom-sheet__background-secondary-inverted_emb9s {
181
+ .bottom-sheet__background-secondary-inverted_1qore {
182
182
  background-color: var(--color-light-bg-secondary-inverted);
183
183
  }
184
- .bottom-sheet__background-tertiary_emb9s {
184
+ .bottom-sheet__background-tertiary_1qore {
185
185
  background-color: var(--color-light-bg-tertiary);
186
186
  }
187
- .bottom-sheet__background-tertiary-inverted_emb9s {
187
+ .bottom-sheet__background-tertiary-inverted_1qore {
188
188
  background-color: var(--color-light-bg-tertiary-inverted);
189
189
  }
190
- .bottom-sheet__background-quaternary_emb9s {
190
+ .bottom-sheet__background-quaternary_1qore {
191
191
  background-color: var(--color-light-bg-quaternary);
192
192
  }
193
- .bottom-sheet__background-quaternary-inverted_emb9s {
193
+ .bottom-sheet__background-quaternary-inverted_1qore {
194
194
  background-color: var(--color-light-bg-quaternary-inverted);
195
195
  }
196
- .bottom-sheet__background-specialbg-component_emb9s {
196
+ .bottom-sheet__background-specialbg-component_1qore {
197
197
  background-color: var(--color-light-specialbg-component);
198
198
  }
199
- .bottom-sheet__background-specialbg-component-inverted_emb9s {
199
+ .bottom-sheet__background-specialbg-component-inverted_1qore {
200
200
  background-color: var(--color-light-specialbg-component-inverted);
201
201
  }
202
- .bottom-sheet__background-specialbg-primary-grouped_emb9s {
202
+ .bottom-sheet__background-specialbg-primary-grouped_1qore {
203
203
  background-color: var(--color-light-specialbg-primary-grouped);
204
204
  }
205
- .bottom-sheet__background-specialbg-secondary-grouped_emb9s {
205
+ .bottom-sheet__background-specialbg-secondary-grouped_1qore {
206
206
  background-color: var(--color-light-specialbg-secondary-grouped);
207
207
  }
208
- .bottom-sheet__background-specialbg-tertiary-grouped_emb9s {
208
+ .bottom-sheet__background-specialbg-tertiary-grouped_1qore {
209
209
  background-color: var(--color-light-specialbg-tertiary-grouped);
210
210
  }
211
- .bottom-sheet__background-specialbg-secondary-transparent_emb9s {
211
+ .bottom-sheet__background-specialbg-secondary-transparent_1qore {
212
212
  background-color: var(--color-light-specialbg-secondary-transparent);
213
213
  }
214
- .bottom-sheet__background-specialbg-secondary-transparent-inverted_emb9s {
214
+ .bottom-sheet__background-specialbg-secondary-transparent-inverted_1qore {
215
215
  background-color: var(--color-light-specialbg-secondary-transparent-inverted);
216
216
  }
217
- .bottom-sheet__background-specialbg-tertiary-transparent_emb9s {
217
+ .bottom-sheet__background-specialbg-tertiary-transparent_1qore {
218
218
  background-color: var(--color-light-specialbg-tertiary-transparent);
219
219
  }
220
- .bottom-sheet__background-specialbg-tertiary-transparent-inverted_emb9s {
220
+ .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1qore {
221
221
  background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
222
222
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"modal":"bottom-sheet__modal_emb9s","wrapper":"bottom-sheet__wrapper_emb9s","outerClassName":"bottom-sheet__outerClassName_emb9s","fullscreen":"bottom-sheet__fullscreen_emb9s","component":"bottom-sheet__component_emb9s","withTransition":"bottom-sheet__withTransition_emb9s","scrollableContainer":"bottom-sheet__scrollableContainer_emb9s","marker":"bottom-sheet__marker_emb9s","defaultMarker":"bottom-sheet__defaultMarker_emb9s","content":"bottom-sheet__content_emb9s","noHeader":"bottom-sheet__noHeader_emb9s","noFooter":"bottom-sheet__noFooter_emb9s","scrollLocked":"bottom-sheet__scrollLocked_emb9s","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_emb9s","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_emb9s","appear":"bottom-sheet__appear_emb9s","enter":"bottom-sheet__enter_emb9s","appearActive":"bottom-sheet__appearActive_emb9s","enterActive":"bottom-sheet__enterActive_emb9s","enterDone":"bottom-sheet__enterDone_emb9s","appearDone":"bottom-sheet__appearDone_emb9s","exit":"bottom-sheet__exit_emb9s","exitActive":"bottom-sheet__exitActive_emb9s","safeAreaBottom":"bottom-sheet__safeAreaBottom_emb9s","background-accent":"bottom-sheet__background-accent_emb9s","background-info":"bottom-sheet__background-info_emb9s","background-attention-muted":"bottom-sheet__background-attention-muted_emb9s","background-positive-muted":"bottom-sheet__background-positive-muted_emb9s","background-negative-muted":"bottom-sheet__background-negative-muted_emb9s","background-primary":"bottom-sheet__background-primary_emb9s","background-primary-inverted":"bottom-sheet__background-primary-inverted_emb9s","background-secondary":"bottom-sheet__background-secondary_emb9s","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_emb9s","background-tertiary":"bottom-sheet__background-tertiary_emb9s","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_emb9s","background-quaternary":"bottom-sheet__background-quaternary_emb9s","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_emb9s","background-specialbg-component":"bottom-sheet__background-specialbg-component_emb9s","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_emb9s","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_emb9s","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_emb9s","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_emb9s","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_emb9s","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_emb9s","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_emb9s","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_emb9s"};
5
+ var styles = {"modal":"bottom-sheet__modal_1qore","wrapper":"bottom-sheet__wrapper_1qore","outerClassName":"bottom-sheet__outerClassName_1qore","fullscreen":"bottom-sheet__fullscreen_1qore","component":"bottom-sheet__component_1qore","withTransition":"bottom-sheet__withTransition_1qore","scrollableContainer":"bottom-sheet__scrollableContainer_1qore","marker":"bottom-sheet__marker_1qore","defaultMarker":"bottom-sheet__defaultMarker_1qore","content":"bottom-sheet__content_1qore","noHeader":"bottom-sheet__noHeader_1qore","noFooter":"bottom-sheet__noFooter_1qore","scrollLocked":"bottom-sheet__scrollLocked_1qore","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1qore","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1qore","appear":"bottom-sheet__appear_1qore","enter":"bottom-sheet__enter_1qore","appearActive":"bottom-sheet__appearActive_1qore","enterActive":"bottom-sheet__enterActive_1qore","enterDone":"bottom-sheet__enterDone_1qore","appearDone":"bottom-sheet__appearDone_1qore","exit":"bottom-sheet__exit_1qore","exitActive":"bottom-sheet__exitActive_1qore","safeAreaBottom":"bottom-sheet__safeAreaBottom_1qore","background-accent":"bottom-sheet__background-accent_1qore","background-info":"bottom-sheet__background-info_1qore","background-attention-muted":"bottom-sheet__background-attention-muted_1qore","background-positive-muted":"bottom-sheet__background-positive-muted_1qore","background-negative-muted":"bottom-sheet__background-negative-muted_1qore","background-primary":"bottom-sheet__background-primary_1qore","background-primary-inverted":"bottom-sheet__background-primary-inverted_1qore","background-secondary":"bottom-sheet__background-secondary_1qore","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1qore","background-tertiary":"bottom-sheet__background-tertiary_1qore","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1qore","background-quaternary":"bottom-sheet__background-quaternary_1qore","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1qore","background-specialbg-component":"bottom-sheet__background-specialbg-component_1qore","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1qore","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1qore","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1qore","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1qore","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1qore","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1qore","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1qore","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1qore"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '@alfalab/core-components-vars/src/safe-area.css';\n@import './vars.css';\n\n.modal {\n bottom: var(--gap-0);\n width: 100%;\n max-width: 600px;\n pointer-events: none;\n touch-action: none;\n}\n\n.modal.modal {\n background-color: transparent;\n position: fixed;\n}\n\n.wrapper {\n transform: translateY(100%);\n pointer-events: none;\n touch-action: none;\n border-top-right-radius: var(--bottom-sheet-top-radius);\n border-top-left-radius: var(--bottom-sheet-top-radius);\n transition: border-radius 0.3s ease;\n}\n\n.outerClassName {\n pointer-events: all;\n}\n\n.fullscreen {\n border-radius: var(--border-radius-0);\n}\n\n.component {\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: inherit;\n pointer-events: all;\n box-shadow: var(--bottom-sheet-shadow);\n\n /* фикс: при включённом padding маркер может визуально \"улетать\" наверх */\n transform: translate(0, 0);\n}\n\n.withTransition {\n transition: var(--bottom-sheet-out-transition);\n}\n\n.scrollableContainer {\n overflow: auto;\n display: flex;\n flex-direction: column;\n position: relative;\n height: 100%;\n background-color: inherit;\n border-radius: inherit;\n overscroll-behavior: contain;\n}\n\n.marker {\n position: fixed;\n top: var(--gap-4);\n right: var(--gap-0);\n left: var(--gap-0);\n z-index: 1000;\n width: 36px;\n margin: var(--gap-0) auto;\n}\n\n.defaultMarker {\n height: 4px;\n border-radius: var(--border-radius-20);\n}\n\n.content {\n position: relative;\n z-index: 0;\n display: flex;\n flex-direction: column;\n flex: 1;\n padding: var(--gap-0) var(--gap-16);\n background-color: inherit;\n border-radius: inherit;\n}\n\n.noHeader {\n padding-top: var(--gap-16);\n}\n\n.noFooter {\n padding-bottom: var(--gap-16);\n}\n\n.scrollLocked {\n overflow: hidden;\n}\n\n.hiddenScrollbar {\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n}\n\n.disabledPointerEvents {\n pointer-events: none;\n}\n\n.appear,\n.enter {\n & .wrapper {\n transition: none;\n }\n}\n\n.appearActive,\n.enterActive {\n & .wrapper {\n transition: var(--bottom-sheet-in-transition);\n transform: translateY(0);\n }\n}\n\n.enterDone,\n.appearDone {\n & .wrapper {\n transform: translateY(0);\n }\n}\n\n.exit {\n & .wrapper {\n transform: translateY(0);\n }\n}\n\n.exitActive {\n & .wrapper {\n transition: var(--bottom-sheet-out-transition);\n transform: translateY(100%);\n }\n}\n\n.safeAreaBottom {\n padding-bottom: var(--sab);\n}\n\n@mixin bg-class-list;\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,OAAO,CAAC,2BAA2B,CAAC,SAAS,CAAC,6BAA6B,CAAC,gBAAgB,CAAC,oCAAoC,CAAC,YAAY,CAAC,gCAAgC,CAAC,WAAW,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,oCAAoC,CAAC,qBAAqB,CAAC,yCAAyC,CAAC,QAAQ,CAAC,4BAA4B,CAAC,eAAe,CAAC,mCAAmC,CAAC,SAAS,CAAC,6BAA6B,CAAC,UAAU,CAAC,8BAA8B,CAAC,UAAU,CAAC,8BAA8B,CAAC,cAAc,CAAC,kCAAkC,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,QAAQ,CAAC,4BAA4B,CAAC,OAAO,CAAC,2BAA2B,CAAC,cAAc,CAAC,kCAAkC,CAAC,aAAa,CAAC,iCAAiC,CAAC,WAAW,CAAC,+BAA+B,CAAC,YAAY,CAAC,gCAAgC,CAAC,MAAM,CAAC,0BAA0B,CAAC,YAAY,CAAC,gCAAgC,CAAC,gBAAgB,CAAC,oCAAoC,CAAC,mBAAmB,CAAC,uCAAuC,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,4BAA4B,CAAC,gDAAgD,CAAC,2BAA2B,CAAC,+CAA+C,CAAC,2BAA2B,CAAC,+CAA+C,CAAC,oBAAoB,CAAC,wCAAwC,CAAC,6BAA6B,CAAC,iDAAiD,CAAC,sBAAsB,CAAC,0CAA0C,CAAC,+BAA+B,CAAC,mDAAmD,CAAC,qBAAqB,CAAC,yCAAyC,CAAC,8BAA8B,CAAC,kDAAkD,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,gCAAgC,CAAC,oDAAoD,CAAC,gCAAgC,CAAC,oDAAoD,CAAC,yCAAyC,CAAC,6DAA6D,CAAC,sCAAsC,CAAC,0DAA0D,CAAC,wCAAwC,CAAC,4DAA4D,CAAC,uCAAuC,CAAC,2DAA2D,CAAC,4CAA4C,CAAC,gEAAgE,CAAC,qDAAqD,CAAC,yEAAyE,CAAC,2CAA2C,CAAC,+DAA+D,CAAC,oDAAoD,CAAC,wEAAwE,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '@alfalab/core-components-vars/src/safe-area.css';\n@import './vars.css';\n\n.modal {\n bottom: var(--gap-0);\n width: 100%;\n max-width: 600px;\n pointer-events: none;\n touch-action: none;\n}\n\n.modal.modal {\n background-color: transparent;\n position: fixed;\n}\n\n.wrapper {\n transform: translateY(100%);\n pointer-events: none;\n touch-action: none;\n border-top-right-radius: var(--bottom-sheet-top-radius);\n border-top-left-radius: var(--bottom-sheet-top-radius);\n transition: border-radius 0.3s ease;\n}\n\n.outerClassName {\n pointer-events: all;\n}\n\n.fullscreen {\n border-radius: var(--border-radius-0);\n}\n\n.component {\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: inherit;\n pointer-events: all;\n box-shadow: var(--bottom-sheet-shadow);\n\n /* фикс: при включённом padding маркер может визуально \"улетать\" наверх */\n transform: translate(0, 0);\n}\n\n.withTransition {\n transition: var(--bottom-sheet-out-transition);\n}\n\n.scrollableContainer {\n overflow: auto;\n display: flex;\n flex-direction: column;\n position: relative;\n height: 100%;\n background-color: inherit;\n border-radius: inherit;\n overscroll-behavior: contain;\n}\n\n.marker {\n position: fixed;\n top: var(--gap-4);\n right: var(--gap-0);\n left: var(--gap-0);\n z-index: 1000;\n width: 36px;\n margin: var(--gap-0) auto;\n}\n\n.defaultMarker {\n height: 4px;\n border-radius: var(--border-radius-20);\n}\n\n.content {\n position: relative;\n z-index: 0;\n display: flex;\n flex-direction: column;\n flex: 1;\n padding: var(--gap-0) var(--gap-20);\n background-color: inherit;\n border-radius: inherit;\n}\n\n.noHeader {\n padding-top: var(--gap-20);\n}\n\n.noFooter {\n padding-bottom: var(--gap-20);\n}\n\n.scrollLocked {\n overflow: hidden;\n}\n\n.hiddenScrollbar {\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n}\n\n.disabledPointerEvents {\n pointer-events: none;\n}\n\n.appear,\n.enter {\n & .wrapper {\n transition: none;\n }\n}\n\n.appearActive,\n.enterActive {\n & .wrapper {\n transition: var(--bottom-sheet-in-transition);\n transform: translateY(0);\n }\n}\n\n.enterDone,\n.appearDone {\n & .wrapper {\n transform: translateY(0);\n }\n}\n\n.exit {\n & .wrapper {\n transform: translateY(0);\n }\n}\n\n.exitActive {\n & .wrapper {\n transition: var(--bottom-sheet-out-transition);\n transform: translateY(100%);\n }\n}\n\n.safeAreaBottom {\n padding-bottom: var(--sab);\n}\n\n@mixin bg-class-list;\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,OAAO,CAAC,2BAA2B,CAAC,SAAS,CAAC,6BAA6B,CAAC,gBAAgB,CAAC,oCAAoC,CAAC,YAAY,CAAC,gCAAgC,CAAC,WAAW,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,oCAAoC,CAAC,qBAAqB,CAAC,yCAAyC,CAAC,QAAQ,CAAC,4BAA4B,CAAC,eAAe,CAAC,mCAAmC,CAAC,SAAS,CAAC,6BAA6B,CAAC,UAAU,CAAC,8BAA8B,CAAC,UAAU,CAAC,8BAA8B,CAAC,cAAc,CAAC,kCAAkC,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,QAAQ,CAAC,4BAA4B,CAAC,OAAO,CAAC,2BAA2B,CAAC,cAAc,CAAC,kCAAkC,CAAC,aAAa,CAAC,iCAAiC,CAAC,WAAW,CAAC,+BAA+B,CAAC,YAAY,CAAC,gCAAgC,CAAC,MAAM,CAAC,0BAA0B,CAAC,YAAY,CAAC,gCAAgC,CAAC,gBAAgB,CAAC,oCAAoC,CAAC,mBAAmB,CAAC,uCAAuC,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,4BAA4B,CAAC,gDAAgD,CAAC,2BAA2B,CAAC,+CAA+C,CAAC,2BAA2B,CAAC,+CAA+C,CAAC,oBAAoB,CAAC,wCAAwC,CAAC,6BAA6B,CAAC,iDAAiD,CAAC,sBAAsB,CAAC,0CAA0C,CAAC,+BAA+B,CAAC,mDAAmD,CAAC,qBAAqB,CAAC,yCAAyC,CAAC,8BAA8B,CAAC,kDAAkD,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,gCAAgC,CAAC,oDAAoD,CAAC,gCAAgC,CAAC,oDAAoD,CAAC,yCAAyC,CAAC,6DAA6D,CAAC,sCAAsC,CAAC,0DAA0D,CAAC,wCAAwC,CAAC,4DAA4D,CAAC,uCAAuC,CAAC,2DAA2D,CAAC,4CAA4C,CAAC,gEAAgE,CAAC,qDAAqD,CAAC,yEAAyE,CAAC,2CAA2C,CAAC,+DAA+D,CAAC,oDAAoD,CAAC,wEAAwE,CAAC;;;;"}
package/inverted.css CHANGED
@@ -8,15 +8,15 @@
8
8
  --bottom-sheet-marker-color-inverted: var(--color-light-neutral-translucent-300-inverted);
9
9
  --bottom-sheet-text-color-inverted: var(--color-light-text-primary-inverted);
10
10
  }
11
- .bottom-sheet__component_m2xgh {
11
+ .bottom-sheet__component_1e0s2 {
12
12
  background-color: var(--bottom-sheet-background-color-inverted);
13
13
  }
14
- .bottom-sheet__content_m2xgh {
14
+ .bottom-sheet__content_1e0s2 {
15
15
  color: var(--bottom-sheet-text-color-inverted);
16
16
  }
17
- .bottom-sheet__defaultMarker_m2xgh {
17
+ .bottom-sheet__defaultMarker_1e0s2 {
18
18
  background-color: var(--bottom-sheet-marker-color-inverted);
19
19
  }
20
- .bottom-sheet__hasContent_m2xgh {
20
+ .bottom-sheet__hasContent_1e0s2 {
21
21
  color: var(--bottom-sheet-text-color-inverted);
22
22
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./inverted.css');
4
4
 
5
- var invertedColors = {"component":"bottom-sheet__component_m2xgh","content":"bottom-sheet__content_m2xgh","defaultMarker":"bottom-sheet__defaultMarker_m2xgh","hasContent":"bottom-sheet__hasContent_m2xgh"};
5
+ var invertedColors = {"component":"bottom-sheet__component_1e0s2","content":"bottom-sheet__content_1e0s2","defaultMarker":"bottom-sheet__defaultMarker_1e0s2","hasContent":"bottom-sheet__hasContent_1e0s2"};
6
6
 
7
7
  module.exports = invertedColors;
8
8
  //# sourceMappingURL=inverted.module.css.js.map
@@ -438,7 +438,7 @@ const BottomSheet = forwardRef(
438
438
  !hideHeader && !emptyHeader && (React.createElement(Header, { ...headerProps, showSwipeMarker: showSwipeMarker })),
439
439
  React.createElement("div", { ref: contentRef, className: cn(styles.content, colorStyle.content, contentClassName, {
440
440
  [styles.noHeader]: hideHeader || emptyHeader,
441
- [styles.noFooter]: !actionButton,
441
+ [styles.noFooter]: actionButton === null,
442
442
  }), "data-test-id": getDataTestId(dataTestId, 'content') }, children),
443
443
  actionButton === null ? null : (React.createElement(Footer, { sticky: stickyFooter, className: cn(bgClassName, footerClassName), colors: colors, dataTestId: getDataTestId(dataTestId, 'footer') }, actionButton)))))));
444
444
  });