@alfalab/core-components-tabs 7.0.1 → 7.1.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 (85) hide show
  1. package/components/primary-tablist/Component.desktop.js +2 -2
  2. package/components/primary-tablist/Component.js +1 -1
  3. package/components/primary-tablist/Component.mobile.js +3 -3
  4. package/components/primary-tablist/Component.responsive.js +2 -2
  5. package/components/primary-tablist/index.css +20 -20
  6. package/components/primary-tablist/mobile.css +32 -24
  7. package/components/scrollable-container/Component.js +1 -1
  8. package/components/scrollable-container/index.css +5 -5
  9. package/components/secondary-tablist/Component.desktop.js +2 -2
  10. package/components/secondary-tablist/Component.js +1 -1
  11. package/components/secondary-tablist/Component.mobile.js +3 -3
  12. package/components/secondary-tablist/Component.responsive.js +2 -2
  13. package/components/secondary-tablist/index.css +11 -11
  14. package/components/secondary-tablist/mobile.css +20 -13
  15. package/components/tab/Component.js +1 -1
  16. package/components/tab/index.css +3 -3
  17. package/components/tabs/Component.desktop.js +3 -3
  18. package/components/tabs/Component.mobile.js +3 -3
  19. package/components/tabs/Component.responsive.js +3 -3
  20. package/cssm/components/primary-tablist/mobile.module.css +2 -1
  21. package/desktop.js +3 -3
  22. package/esm/components/primary-tablist/Component.desktop.js +2 -2
  23. package/esm/components/primary-tablist/Component.js +1 -1
  24. package/esm/components/primary-tablist/Component.mobile.js +3 -3
  25. package/esm/components/primary-tablist/Component.responsive.js +2 -2
  26. package/esm/components/primary-tablist/index.css +20 -20
  27. package/esm/components/primary-tablist/mobile.css +32 -24
  28. package/esm/components/scrollable-container/Component.js +1 -1
  29. package/esm/components/scrollable-container/index.css +5 -5
  30. package/esm/components/secondary-tablist/Component.desktop.js +2 -2
  31. package/esm/components/secondary-tablist/Component.js +1 -1
  32. package/esm/components/secondary-tablist/Component.mobile.js +3 -3
  33. package/esm/components/secondary-tablist/Component.responsive.js +2 -2
  34. package/esm/components/secondary-tablist/index.css +11 -11
  35. package/esm/components/secondary-tablist/mobile.css +20 -13
  36. package/esm/components/tab/Component.js +1 -1
  37. package/esm/components/tab/index.css +3 -3
  38. package/esm/components/tabs/Component.desktop.js +3 -3
  39. package/esm/components/tabs/Component.mobile.js +3 -3
  40. package/esm/components/tabs/Component.responsive.js +3 -3
  41. package/esm/desktop.js +3 -3
  42. package/esm/index.js +3 -3
  43. package/esm/index.module-134e200e.js +4 -0
  44. package/esm/index.module-523e7b48.js +4 -0
  45. package/esm/mobile.js +3 -3
  46. package/esm/responsive.js +3 -3
  47. package/esm/{tslib.es6-4074594a.d.ts → tslib.es6-fbd13ab9.d.ts} +0 -0
  48. package/esm/{tslib.es6-4074594a.js → tslib.es6-fbd13ab9.js} +0 -0
  49. package/index.js +3 -3
  50. package/index.module-509288bb.js +6 -0
  51. package/index.module-7226e3a9.js +6 -0
  52. package/mobile.js +3 -3
  53. package/modern/components/primary-tablist/Component.desktop.js +1 -1
  54. package/modern/components/primary-tablist/Component.mobile.js +2 -2
  55. package/modern/components/primary-tablist/Component.responsive.js +1 -1
  56. package/modern/components/primary-tablist/index.css +20 -20
  57. package/modern/components/primary-tablist/mobile.css +32 -24
  58. package/modern/components/scrollable-container/Component.js +1 -1
  59. package/modern/components/scrollable-container/index.css +5 -5
  60. package/modern/components/secondary-tablist/Component.desktop.js +1 -1
  61. package/modern/components/secondary-tablist/Component.mobile.js +2 -2
  62. package/modern/components/secondary-tablist/Component.responsive.js +1 -1
  63. package/modern/components/secondary-tablist/index.css +11 -11
  64. package/modern/components/secondary-tablist/mobile.css +20 -13
  65. package/modern/components/tab/Component.js +1 -1
  66. package/modern/components/tab/index.css +3 -3
  67. package/modern/components/tabs/Component.desktop.js +2 -2
  68. package/modern/components/tabs/Component.mobile.js +2 -2
  69. package/modern/components/tabs/Component.responsive.js +2 -2
  70. package/modern/desktop.js +2 -2
  71. package/modern/index.js +2 -2
  72. package/modern/index.module-134e200e.js +4 -0
  73. package/modern/index.module-523e7b48.js +4 -0
  74. package/modern/mobile.js +2 -2
  75. package/modern/responsive.js +2 -2
  76. package/package.json +1 -1
  77. package/responsive.js +3 -3
  78. package/{tslib.es6-0ecd86e7.d.ts → tslib.es6-e61a3999.d.ts} +0 -0
  79. package/{tslib.es6-0ecd86e7.js → tslib.es6-e61a3999.js} +0 -0
  80. package/esm/index.module-8a913c30.js +0 -4
  81. package/esm/index.module-e2bdd346.js +0 -4
  82. package/index.module-26e7f797.js +0 -6
  83. package/index.module-a6debef8.js +0 -6
  84. package/modern/index.module-8a913c30.js +0 -4
  85. package/modern/index.module-e2bdd346.js +0 -4
@@ -1,4 +1,4 @@
1
- /* hash: 1lhvd */
1
+ /* hash: ktvhl */
2
2
  :root {
3
3
  }:root {
4
4
  }:root {
@@ -41,6 +41,7 @@
41
41
  /* mobile */
42
42
  --primary-tablist-mobile-gaps: var(--gap-xl);
43
43
  --primary-tablist-mobile-font-size: 16px;
44
+ --primary-tablist-mobile-line-height: 24px;
44
45
  --primary-tablist-mobile-font-weight: 400;
45
46
  --primary-tablist-mobile-font-family: var(--font-family-system);
46
47
  --primary-tablist-mobile-padding: 0 0 var(--gap-s);
@@ -86,11 +87,11 @@
86
87
  /* size l */
87
88
 
88
89
  /* size xl */
89
- }.tabs__component_v6hkw {
90
+ }.tabs__component_3bs9g {
90
91
  position: relative;
91
92
  display: inline-flex;
92
93
  min-width: 100%
93
- }.tabs__component_v6hkw:before {
94
+ }.tabs__component_3bs9g:before {
94
95
  content: '';
95
96
  display: block;
96
97
  position: absolute;
@@ -98,13 +99,13 @@
98
99
  height: 1px;
99
100
  width: 100%;
100
101
  background-color: var(--primary-tablist-bottom-border-color);
101
- }.tabs__fullWidthScroll_v6hkw {
102
+ }.tabs__fullWidthScroll_3bs9g {
102
103
  min-width: calc(100% - 2 * var(--gap-m));
103
104
  margin: 0 var(--gap-m);
104
- }.tabs__container_v6hkw {
105
+ }.tabs__container_3bs9g {
105
106
  position: relative;
106
107
  overflow: hidden;
107
- }.tabs__title_v6hkw {
108
+ }.tabs__title_3bs9g {
108
109
  display: flex;
109
110
  align-items: center;
110
111
  height: 100%;
@@ -121,57 +122,57 @@
121
122
  user-select: none;
122
123
  cursor: pointer;
123
124
  outline: none
124
- }.tabs__title_v6hkw:not(.tabs__disabled_v6hkw):hover {
125
+ }.tabs__title_3bs9g:not(.tabs__disabled_3bs9g):hover {
125
126
  color: var(--primary-tablist-hover-color);
126
- }.tabs__focused_v6hkw {
127
+ }.tabs__focused_3bs9g {
127
128
  outline: 2px solid var(--focus-color);
128
129
  outline-offset: 2px;
129
- }.tabs__selected_v6hkw {
130
+ }.tabs__selected_3bs9g {
130
131
  cursor: default;
131
132
  color: var(--primary-tablist-selected-color);
132
- }.tabs__disabled_v6hkw {
133
+ }.tabs__disabled_3bs9g {
133
134
  cursor: var(--disabled-cursor);
134
135
  color: var(--primary-tablist-disabled-color);
135
- }.tabs__line_v6hkw {
136
+ }.tabs__line_3bs9g {
136
137
  position: absolute;
137
138
  height: 3px;
138
139
  bottom: 0;
139
140
  left: 0;
140
141
  background-color: var(--primary-tablist-line-color);
141
142
  transition: transform 0.2s ease, width 0.2s ease;
142
- }/* sizes */.tabs__s_v6hkw .tabs__title_v6hkw, .tabs__xs_v6hkw .tabs__title_v6hkw, .tabs__xxs_v6hkw .tabs__title_v6hkw {
143
+ }/* sizes */.tabs__s_3bs9g .tabs__title_3bs9g, .tabs__xs_3bs9g .tabs__title_3bs9g, .tabs__xxs_3bs9g .tabs__title_3bs9g {
143
144
  padding: var(--primary-tablist-s-padding);
144
145
  font-size: var(--primary-tablist-s-font-size);
145
146
  font-weight: var(--primary-tablist-s-font-weight);
146
147
  font-family: var(--primary-tablist-s-font-family);
147
148
  line-height: 24px;
148
- }.tabs__s_v6hkw .tabs__title_v6hkw + .tabs__title_v6hkw, .tabs__xs_v6hkw .tabs__title_v6hkw + .tabs__title_v6hkw, .tabs__xxs_v6hkw .tabs__title_v6hkw + .tabs__title_v6hkw {
149
+ }.tabs__s_3bs9g .tabs__title_3bs9g + .tabs__title_3bs9g, .tabs__xs_3bs9g .tabs__title_3bs9g + .tabs__title_3bs9g, .tabs__xxs_3bs9g .tabs__title_3bs9g + .tabs__title_3bs9g {
149
150
  margin-left: var(--primary-tablist-s-gaps);
150
- }.tabs__m_v6hkw .tabs__title_v6hkw {
151
+ }.tabs__m_3bs9g .tabs__title_3bs9g {
151
152
  padding: var(--primary-tablist-m-padding);
152
153
  font-size: var(--primary-tablist-m-font-size);
153
154
  font-weight: var(--primary-tablist-m-font-weight);
154
155
  font-family: var(--primary-tablist-m-font-family);
155
156
  line-height: 24px;
156
- }.tabs__m_v6hkw .tabs__title_v6hkw + .tabs__title_v6hkw {
157
+ }.tabs__m_3bs9g .tabs__title_3bs9g + .tabs__title_3bs9g {
157
158
  margin-left: var(--primary-tablist-m-gaps);
158
- }.tabs__l_v6hkw .tabs__title_v6hkw {
159
+ }.tabs__l_3bs9g .tabs__title_3bs9g {
159
160
  padding: var(--primary-tablist-l-padding);
160
161
  font-size: var(--primary-tablist-l-font-size);
161
162
  font-weight: var(--primary-tablist-l-font-weight);
162
163
  font-family: var(--primary-tablist-l-font-family);
163
164
  line-height: 24px;
164
- }.tabs__l_v6hkw .tabs__title_v6hkw + .tabs__title_v6hkw {
165
+ }.tabs__l_3bs9g .tabs__title_3bs9g + .tabs__title_3bs9g {
165
166
  margin-left: var(--primary-tablist-l-gaps);
166
- }.tabs__xl_v6hkw .tabs__title_v6hkw {
167
+ }.tabs__xl_3bs9g .tabs__title_3bs9g {
167
168
  padding: var(--primary-tablist-xl-padding);
168
169
  font-size: var(--primary-tablist-xl-font-size);
169
170
  font-weight: var(--primary-tablist-xl-font-weight);
170
171
  font-family: var(--primary-tablist-xl-font-family);
171
172
  line-height: 32px;
172
- }.tabs__xl_v6hkw .tabs__title_v6hkw + .tabs__title_v6hkw {
173
+ }.tabs__xl_3bs9g .tabs__title_3bs9g + .tabs__title_3bs9g {
173
174
  margin-left: var(--primary-tablist-xl-gaps);
174
- }.tabs__rightAddons_v6hkw {
175
+ }.tabs__rightAddons_3bs9g {
175
176
  margin-left: var(--gap-xs);
176
177
  }
177
178
  :root {
@@ -516,6 +517,8 @@
516
517
  --color-dark-bg-primary-alpha-32: rgba(11, 31, 53, 0.32);
517
518
  --color-dark-bg-primary-alpha-37: rgba(11, 31, 53, 0.37);
518
519
  --color-dark-bg-primary-alpha-40: rgba(11, 31, 53, 0.4);
520
+ --color-dark-bg-primary-tint-7: rgb(28, 47, 67);
521
+ --color-dark-bg-primary-tint-15: rgb(48, 65, 83);
519
522
  --color-dark-bg-primary-inverted-alpha-3: rgba(255, 255, 255, 0.03);
520
523
  --color-dark-bg-primary-inverted-alpha-4: rgba(255, 255, 255, 0.04);
521
524
  --color-dark-bg-primary-inverted-alpha-5: rgba(255, 255, 255, 0.05);
@@ -531,6 +534,7 @@
531
534
  --color-dark-bg-primary-inverted-alpha-32: rgba(255, 255, 255, 0.32);
532
535
  --color-dark-bg-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
533
536
  --color-dark-bg-primary-inverted-alpha-50: rgba(255, 255, 255, 0.5);
537
+ --color-dark-bg-primary-inverted-shade-7: rgb(237, 237, 237);
534
538
  --color-dark-bg-primary-inverted-shade-15: rgb(217, 217, 217);
535
539
  --color-dark-bg-primary-inverted-shade-20: rgb(204, 204, 204);
536
540
  --color-dark-bg-quaternary-alpha-30: rgba(72, 87, 103, 0.3);
@@ -652,6 +656,8 @@
652
656
  --color-light-bg-primary-alpha-32: rgba(255, 255, 255, 0.32);
653
657
  --color-light-bg-primary-alpha-37: rgba(255, 255, 255, 0.37);
654
658
  --color-light-bg-primary-alpha-40: rgba(255, 255, 255, 0.4);
659
+ --color-light-bg-primary-shade-7: rgb(237, 237, 237);
660
+ --color-light-bg-primary-shade-15: rgb(217, 217, 217);
655
661
  --color-light-bg-primary-inverted-alpha-3: rgba(11, 31, 53, 0.03);
656
662
  --color-light-bg-primary-inverted-alpha-4: rgba(11, 31, 53, 0.04);
657
663
  --color-light-bg-primary-inverted-alpha-5: rgba(11, 31, 53, 0.05);
@@ -667,6 +673,7 @@
667
673
  --color-light-bg-primary-inverted-alpha-32: rgba(11, 31, 53, 0.32);
668
674
  --color-light-bg-primary-inverted-alpha-40: rgba(11, 31, 53, 0.4);
669
675
  --color-light-bg-primary-inverted-alpha-50: rgba(11, 31, 53, 0.5);
676
+ --color-light-bg-primary-inverted-tint-7: rgb(28, 47, 67);
670
677
  --color-light-bg-primary-inverted-tint-15: rgb(48, 65, 83);
671
678
  --color-light-bg-primary-inverted-tint-20: rgb(60, 76, 93);
672
679
  --color-light-bg-quaternary-alpha-30: rgba(219, 222, 225, 0.3);
@@ -913,6 +920,7 @@
913
920
  /* mobile */
914
921
  --primary-tablist-mobile-gaps: var(--gap-xl);
915
922
  --primary-tablist-mobile-font-size: 16px;
923
+ --primary-tablist-mobile-line-height: 24px;
916
924
  --primary-tablist-mobile-font-weight: 400;
917
925
  --primary-tablist-mobile-font-family: var(--font-family-system);
918
926
  --primary-tablist-mobile-padding: 0 0 var(--gap-s);
@@ -966,15 +974,15 @@
966
974
  /* size xl */
967
975
  --secondary-tablist-xl-gaps: var(--gap-m);
968
976
  }
969
- .tabs__title_qt96k {
977
+ .tabs__title_186yr {
970
978
  }
971
- .tabs__mobile_qt96k .tabs__title_qt96k {
979
+ .tabs__mobile_186yr .tabs__title_186yr {
972
980
  padding: var(--primary-tablist-mobile-padding);
973
981
  font-size: var(--primary-tablist-mobile-font-size);
974
982
  font-weight: var(--primary-tablist-mobile-font-weight);
975
983
  font-family: var(--primary-tablist-mobile-font-family);
976
- line-height: 24px
984
+ line-height: var(--primary-tablist-mobile-line-height)
977
985
  }
978
- .tabs__mobile_qt96k .tabs__title_qt96k + .tabs__title_qt96k {
986
+ .tabs__mobile_186yr .tabs__title_186yr + .tabs__title_186yr {
979
987
  margin-left: var(--primary-tablist-mobile-gaps);
980
988
  }
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
2
2
  import cn from 'classnames';
3
3
  import computeScrollIntoView from 'compute-scroll-into-view';
4
4
 
5
- var styles = {"container":"tabs__container_2e9go","fullWidthScroll":"tabs__fullWidthScroll_2e9go"};
5
+ var styles = {"container":"tabs__container_1p5a2","fullWidthScroll":"tabs__fullWidthScroll_1p5a2"};
6
6
  require('./index.css')
7
7
 
8
8
  /**
@@ -1,4 +1,4 @@
1
- /* hash: eaq5c */
1
+ /* hash: 1lg9t */
2
2
  :root {
3
3
 
4
4
  /* Hard */
@@ -36,19 +36,19 @@
36
36
 
37
37
  /* size xl */
38
38
  }
39
- .tabs__container_2e9go {
39
+ .tabs__container_1p5a2 {
40
40
  position: relative;
41
41
  overflow-x: auto;
42
42
  overflow-y: hidden;
43
43
  scroll-behavior: smooth;
44
44
  scrollbar-width: none
45
45
  }
46
- .tabs__container_2e9go::-webkit-scrollbar {
46
+ .tabs__container_1p5a2::-webkit-scrollbar {
47
47
  display: none;
48
48
  }
49
- .tabs__container_2e9go > * {
49
+ .tabs__container_1p5a2 > * {
50
50
  flex-shrink: 0;
51
51
  }
52
- .tabs__fullWidthScroll_2e9go {
52
+ .tabs__fullWidthScroll_1p5a2 {
53
53
  margin: 0 var(--gap-m-neg);
54
54
  }
@@ -5,7 +5,7 @@ import '../scrollable-container/Component.js';
5
5
  import '../../useTabs.js';
6
6
  import '@alfalab/core-components-tag/modern';
7
7
  import { SecondaryTabList } from './Component.js';
8
- import { c as commonStyles } from '../../index.module-8a913c30.js';
8
+ import { c as commonStyles } from '../../index.module-523e7b48.js';
9
9
 
10
10
  const SecondaryTabListDesktop = ({ size = 's', ...restProps }) => (React.createElement(SecondaryTabList, Object.assign({}, restProps, { size: size, styles: commonStyles, tagSize: size })));
11
11
 
@@ -5,9 +5,9 @@ import '../scrollable-container/Component.js';
5
5
  import '../../useTabs.js';
6
6
  import '@alfalab/core-components-tag/modern';
7
7
  import { SecondaryTabList } from './Component.js';
8
- import { c as commonStyles } from '../../index.module-8a913c30.js';
8
+ import { c as commonStyles } from '../../index.module-523e7b48.js';
9
9
 
10
- var mobileStyles = {"title":"tabs__title_yx072 tabs__title_1qxoj","mobile":"tabs__mobile_yx072"};
10
+ var mobileStyles = {"title":"tabs__title_1otp0 tabs__title_j4n9p","mobile":"tabs__mobile_1otp0"};
11
11
  require('./mobile.css')
12
12
 
13
13
  const styles = {
@@ -5,7 +5,7 @@ import '../scrollable-container/Component.js';
5
5
  import '../../useTabs.js';
6
6
  import '@alfalab/core-components-tag/modern';
7
7
  import './Component.js';
8
- import '../../index.module-8a913c30.js';
8
+ import '../../index.module-523e7b48.js';
9
9
  import { SecondaryTabListDesktop } from './Component.desktop.js';
10
10
  import { useMedia } from '@alfalab/hooks';
11
11
  import { SecondaryTabListMobile } from './Component.mobile.js';
@@ -1,4 +1,4 @@
1
- /* hash: 1on73 */
1
+ /* hash: nz77x */
2
2
  :root {
3
3
 
4
4
  /* Hard */
@@ -44,35 +44,35 @@
44
44
  /* size xl */
45
45
  --secondary-tablist-xl-gaps: var(--gap-m);
46
46
  }
47
- .tabs__component_1qxoj {
47
+ .tabs__component_j4n9p {
48
48
  position: relative;
49
49
  display: inline-flex;
50
50
  }
51
- .tabs__fullWidthScroll_1qxoj {
51
+ .tabs__fullWidthScroll_j4n9p {
52
52
  margin: 0 var(--gap-m);
53
53
  }
54
- .tabs__container_1qxoj {
54
+ .tabs__container_j4n9p {
55
55
  overflow: hidden;
56
56
  }
57
- .tabs__title_1qxoj {
57
+ .tabs__title_j4n9p {
58
58
  white-space: nowrap;
59
59
  }
60
60
  /* sizes */
61
- .tabs__xxs_1qxoj .tabs__title_1qxoj + .tabs__title_1qxoj {
61
+ .tabs__xxs_j4n9p .tabs__title_j4n9p + .tabs__title_j4n9p {
62
62
  margin-left: var(--secondary-tablist-xxs-gaps);
63
63
  }
64
- .tabs__xs_1qxoj .tabs__title_1qxoj + .tabs__title_1qxoj {
64
+ .tabs__xs_j4n9p .tabs__title_j4n9p + .tabs__title_j4n9p {
65
65
  margin-left: var(--secondary-tablist-xs-gaps);
66
66
  }
67
- .tabs__s_1qxoj .tabs__title_1qxoj + .tabs__title_1qxoj {
67
+ .tabs__s_j4n9p .tabs__title_j4n9p + .tabs__title_j4n9p {
68
68
  margin-left: var(--secondary-tablist-s-gaps);
69
69
  }
70
- .tabs__m_1qxoj .tabs__title_1qxoj + .tabs__title_1qxoj {
70
+ .tabs__m_j4n9p .tabs__title_j4n9p + .tabs__title_j4n9p {
71
71
  margin-left: var(--secondary-tablist-m-gaps);
72
72
  }
73
- .tabs__l_1qxoj .tabs__title_1qxoj + .tabs__title_1qxoj {
73
+ .tabs__l_j4n9p .tabs__title_j4n9p + .tabs__title_j4n9p {
74
74
  margin-left: var(--secondary-tablist-l-gaps);
75
75
  }
76
- .tabs__xl_1qxoj .tabs__title_1qxoj + .tabs__title_1qxoj {
76
+ .tabs__xl_j4n9p .tabs__title_j4n9p + .tabs__title_j4n9p {
77
77
  margin-left: var(--secondary-tablist-xl-gaps);
78
78
  }
@@ -1,4 +1,4 @@
1
- /* hash: 1nxto */
1
+ /* hash: 1ahp0 */
2
2
  :root {
3
3
  }:root {
4
4
  }:root {
@@ -49,26 +49,26 @@
49
49
 
50
50
  /* size xl */
51
51
  --secondary-tablist-xl-gaps: var(--gap-m);
52
- }.tabs__component_1qxoj {
52
+ }.tabs__component_j4n9p {
53
53
  position: relative;
54
54
  display: inline-flex;
55
- }.tabs__fullWidthScroll_1qxoj {
55
+ }.tabs__fullWidthScroll_j4n9p {
56
56
  margin: 0 var(--gap-m);
57
- }.tabs__container_1qxoj {
57
+ }.tabs__container_j4n9p {
58
58
  overflow: hidden;
59
- }.tabs__title_1qxoj {
59
+ }.tabs__title_j4n9p {
60
60
  white-space: nowrap;
61
- }/* sizes */.tabs__xxs_1qxoj .tabs__title_1qxoj + .tabs__title_1qxoj {
61
+ }/* sizes */.tabs__xxs_j4n9p .tabs__title_j4n9p + .tabs__title_j4n9p {
62
62
  margin-left: var(--secondary-tablist-xxs-gaps);
63
- }.tabs__xs_1qxoj .tabs__title_1qxoj + .tabs__title_1qxoj {
63
+ }.tabs__xs_j4n9p .tabs__title_j4n9p + .tabs__title_j4n9p {
64
64
  margin-left: var(--secondary-tablist-xs-gaps);
65
- }.tabs__s_1qxoj .tabs__title_1qxoj + .tabs__title_1qxoj {
65
+ }.tabs__s_j4n9p .tabs__title_j4n9p + .tabs__title_j4n9p {
66
66
  margin-left: var(--secondary-tablist-s-gaps);
67
- }.tabs__m_1qxoj .tabs__title_1qxoj + .tabs__title_1qxoj {
67
+ }.tabs__m_j4n9p .tabs__title_j4n9p + .tabs__title_j4n9p {
68
68
  margin-left: var(--secondary-tablist-m-gaps);
69
- }.tabs__l_1qxoj .tabs__title_1qxoj + .tabs__title_1qxoj {
69
+ }.tabs__l_j4n9p .tabs__title_j4n9p + .tabs__title_j4n9p {
70
70
  margin-left: var(--secondary-tablist-l-gaps);
71
- }.tabs__xl_1qxoj .tabs__title_1qxoj + .tabs__title_1qxoj {
71
+ }.tabs__xl_j4n9p .tabs__title_j4n9p + .tabs__title_j4n9p {
72
72
  margin-left: var(--secondary-tablist-xl-gaps);
73
73
  }
74
74
  :root {
@@ -413,6 +413,8 @@
413
413
  --color-dark-bg-primary-alpha-32: rgba(11, 31, 53, 0.32);
414
414
  --color-dark-bg-primary-alpha-37: rgba(11, 31, 53, 0.37);
415
415
  --color-dark-bg-primary-alpha-40: rgba(11, 31, 53, 0.4);
416
+ --color-dark-bg-primary-tint-7: rgb(28, 47, 67);
417
+ --color-dark-bg-primary-tint-15: rgb(48, 65, 83);
416
418
  --color-dark-bg-primary-inverted-alpha-3: rgba(255, 255, 255, 0.03);
417
419
  --color-dark-bg-primary-inverted-alpha-4: rgba(255, 255, 255, 0.04);
418
420
  --color-dark-bg-primary-inverted-alpha-5: rgba(255, 255, 255, 0.05);
@@ -428,6 +430,7 @@
428
430
  --color-dark-bg-primary-inverted-alpha-32: rgba(255, 255, 255, 0.32);
429
431
  --color-dark-bg-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
430
432
  --color-dark-bg-primary-inverted-alpha-50: rgba(255, 255, 255, 0.5);
433
+ --color-dark-bg-primary-inverted-shade-7: rgb(237, 237, 237);
431
434
  --color-dark-bg-primary-inverted-shade-15: rgb(217, 217, 217);
432
435
  --color-dark-bg-primary-inverted-shade-20: rgb(204, 204, 204);
433
436
  --color-dark-bg-quaternary-alpha-30: rgba(72, 87, 103, 0.3);
@@ -549,6 +552,8 @@
549
552
  --color-light-bg-primary-alpha-32: rgba(255, 255, 255, 0.32);
550
553
  --color-light-bg-primary-alpha-37: rgba(255, 255, 255, 0.37);
551
554
  --color-light-bg-primary-alpha-40: rgba(255, 255, 255, 0.4);
555
+ --color-light-bg-primary-shade-7: rgb(237, 237, 237);
556
+ --color-light-bg-primary-shade-15: rgb(217, 217, 217);
552
557
  --color-light-bg-primary-inverted-alpha-3: rgba(11, 31, 53, 0.03);
553
558
  --color-light-bg-primary-inverted-alpha-4: rgba(11, 31, 53, 0.04);
554
559
  --color-light-bg-primary-inverted-alpha-5: rgba(11, 31, 53, 0.05);
@@ -564,6 +569,7 @@
564
569
  --color-light-bg-primary-inverted-alpha-32: rgba(11, 31, 53, 0.32);
565
570
  --color-light-bg-primary-inverted-alpha-40: rgba(11, 31, 53, 0.4);
566
571
  --color-light-bg-primary-inverted-alpha-50: rgba(11, 31, 53, 0.5);
572
+ --color-light-bg-primary-inverted-tint-7: rgb(28, 47, 67);
567
573
  --color-light-bg-primary-inverted-tint-15: rgb(48, 65, 83);
568
574
  --color-light-bg-primary-inverted-tint-20: rgb(60, 76, 93);
569
575
  --color-light-bg-quaternary-alpha-30: rgba(219, 222, 225, 0.3);
@@ -810,6 +816,7 @@
810
816
  /* mobile */
811
817
  --primary-tablist-mobile-gaps: var(--gap-xl);
812
818
  --primary-tablist-mobile-font-size: 16px;
819
+ --primary-tablist-mobile-line-height: 24px;
813
820
  --primary-tablist-mobile-font-weight: 400;
814
821
  --primary-tablist-mobile-font-family: var(--font-family-system);
815
822
  --primary-tablist-mobile-padding: 0 0 var(--gap-s);
@@ -863,8 +870,8 @@
863
870
  /* size xl */
864
871
  --secondary-tablist-xl-gaps: var(--gap-m);
865
872
  }
866
- .tabs__title_yx072 {
873
+ .tabs__title_1otp0 {
867
874
  }
868
- .tabs__mobile_yx072 .tabs__title_yx072 + .tabs__title_yx072 {
875
+ .tabs__mobile_1otp0 .tabs__title_1otp0 + .tabs__title_1otp0 {
869
876
  margin-left: var(--secondary-tablist-mobile-gaps);
870
877
  }
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import cn from 'classnames';
3
3
 
4
- var styles = {"component":"tabs__component_ueq2j","hidden":"tabs__hidden_ueq2j"};
4
+ var styles = {"component":"tabs__component_1m9fd","hidden":"tabs__hidden_1m9fd"};
5
5
  require('./index.css')
6
6
 
7
7
  const Tab = ({ children, hidden, className, disabled, dataTestId }) => children ? (React.createElement("div", { className: cn(styles.component, {
@@ -1,8 +1,8 @@
1
- /* hash: zja1w */
2
- .tabs__component_ueq2j {
1
+ /* hash: k7esg */
2
+ .tabs__component_1m9fd {
3
3
  outline: none;
4
4
  }
5
5
 
6
- .tabs__hidden_ueq2j {
6
+ .tabs__hidden_1m9fd {
7
7
  display: none;
8
8
  }
@@ -5,11 +5,11 @@ import 'compute-scroll-into-view';
5
5
  import '../scrollable-container/Component.js';
6
6
  import '../../useTabs.js';
7
7
  import '../primary-tablist/Component.js';
8
- import '../../index.module-e2bdd346.js';
8
+ import '../../index.module-134e200e.js';
9
9
  import { PrimaryTabListDesktop } from '../primary-tablist/Component.desktop.js';
10
10
  import '@alfalab/core-components-tag/modern';
11
11
  import '../secondary-tablist/Component.js';
12
- import '../../index.module-8a913c30.js';
12
+ import '../../index.module-523e7b48.js';
13
13
  import { SecondaryTabListDesktop } from '../secondary-tablist/Component.desktop.js';
14
14
  import { Tabs } from './Component.js';
15
15
 
@@ -5,10 +5,10 @@ import 'compute-scroll-into-view';
5
5
  import '../scrollable-container/Component.js';
6
6
  import '../../useTabs.js';
7
7
  import '../primary-tablist/Component.js';
8
- import '../../index.module-e2bdd346.js';
8
+ import '../../index.module-134e200e.js';
9
9
  import '@alfalab/core-components-tag/modern';
10
10
  import '../secondary-tablist/Component.js';
11
- import '../../index.module-8a913c30.js';
11
+ import '../../index.module-523e7b48.js';
12
12
  import { Tabs } from './Component.js';
13
13
  import { PrimaryTabListMobile } from '../primary-tablist/Component.mobile.js';
14
14
  import { SecondaryTabListMobile } from '../secondary-tablist/Component.mobile.js';
@@ -5,11 +5,11 @@ import 'compute-scroll-into-view';
5
5
  import '../scrollable-container/Component.js';
6
6
  import '../../useTabs.js';
7
7
  import '../primary-tablist/Component.js';
8
- import '../../index.module-e2bdd346.js';
8
+ import '../../index.module-134e200e.js';
9
9
  import '../primary-tablist/Component.desktop.js';
10
10
  import '@alfalab/core-components-tag/modern';
11
11
  import '../secondary-tablist/Component.js';
12
- import '../../index.module-8a913c30.js';
12
+ import '../../index.module-523e7b48.js';
13
13
  import '../secondary-tablist/Component.desktop.js';
14
14
  import { Tabs } from './Component.js';
15
15
  import '@alfalab/hooks';
package/modern/desktop.js CHANGED
@@ -5,11 +5,11 @@ import 'compute-scroll-into-view';
5
5
  export { ScrollableContainer } from './components/scrollable-container/Component.js';
6
6
  export { useTabs } from './useTabs.js';
7
7
  import './components/primary-tablist/Component.js';
8
- import './index.module-e2bdd346.js';
8
+ import './index.module-134e200e.js';
9
9
  export { PrimaryTabListDesktop } from './components/primary-tablist/Component.desktop.js';
10
10
  import '@alfalab/core-components-tag/modern';
11
11
  import './components/secondary-tablist/Component.js';
12
- import './index.module-8a913c30.js';
12
+ import './index.module-523e7b48.js';
13
13
  export { SecondaryTabListDesktop } from './components/secondary-tablist/Component.desktop.js';
14
14
  export { Tab } from './components/tab/Component.js';
15
15
  import './components/tabs/Component.js';
package/modern/index.js CHANGED
@@ -5,11 +5,11 @@ import 'compute-scroll-into-view';
5
5
  export { ScrollableContainer } from './components/scrollable-container/Component.js';
6
6
  export { useTabs } from './useTabs.js';
7
7
  import './components/primary-tablist/Component.js';
8
- import './index.module-e2bdd346.js';
8
+ import './index.module-134e200e.js';
9
9
  import './components/primary-tablist/Component.desktop.js';
10
10
  import '@alfalab/core-components-tag/modern';
11
11
  import './components/secondary-tablist/Component.js';
12
- import './index.module-8a913c30.js';
12
+ import './index.module-523e7b48.js';
13
13
  import './components/secondary-tablist/Component.desktop.js';
14
14
  export { Tab } from './components/tab/Component.js';
15
15
  import './components/tabs/Component.js';
@@ -0,0 +1,4 @@
1
+ var commonStyles = {"component":"tabs__component_3bs9g","fullWidthScroll":"tabs__fullWidthScroll_3bs9g","container":"tabs__container_3bs9g","title":"tabs__title_3bs9g","disabled":"tabs__disabled_3bs9g","focused":"tabs__focused_3bs9g","selected":"tabs__selected_3bs9g","line":"tabs__line_3bs9g","s":"tabs__s_3bs9g","xs":"tabs__xs_3bs9g","xxs":"tabs__xxs_3bs9g","m":"tabs__m_3bs9g","l":"tabs__l_3bs9g","xl":"tabs__xl_3bs9g","rightAddons":"tabs__rightAddons_3bs9g"};
2
+ require('./components/primary-tablist/index.css')
3
+
4
+ export { commonStyles as c };
@@ -0,0 +1,4 @@
1
+ var commonStyles = {"component":"tabs__component_j4n9p","fullWidthScroll":"tabs__fullWidthScroll_j4n9p","container":"tabs__container_j4n9p","title":"tabs__title_j4n9p","xxs":"tabs__xxs_j4n9p","xs":"tabs__xs_j4n9p","s":"tabs__s_j4n9p","m":"tabs__m_j4n9p","l":"tabs__l_j4n9p","xl":"tabs__xl_j4n9p"};
2
+ require('./components/secondary-tablist/index.css')
3
+
4
+ export { commonStyles as c };
package/modern/mobile.js CHANGED
@@ -5,10 +5,10 @@ import 'compute-scroll-into-view';
5
5
  export { ScrollableContainer } from './components/scrollable-container/Component.js';
6
6
  export { useTabs } from './useTabs.js';
7
7
  import './components/primary-tablist/Component.js';
8
- import './index.module-e2bdd346.js';
8
+ import './index.module-134e200e.js';
9
9
  import '@alfalab/core-components-tag/modern';
10
10
  import './components/secondary-tablist/Component.js';
11
- import './index.module-8a913c30.js';
11
+ import './index.module-523e7b48.js';
12
12
  export { Tab } from './components/tab/Component.js';
13
13
  import './components/tabs/Component.js';
14
14
  export { PrimaryTabListMobile } from './components/primary-tablist/Component.mobile.js';
@@ -5,11 +5,11 @@ import 'compute-scroll-into-view';
5
5
  export { ScrollableContainer } from './components/scrollable-container/Component.js';
6
6
  export { useTabs } from './useTabs.js';
7
7
  import './components/primary-tablist/Component.js';
8
- import './index.module-e2bdd346.js';
8
+ import './index.module-134e200e.js';
9
9
  import './components/primary-tablist/Component.desktop.js';
10
10
  import '@alfalab/core-components-tag/modern';
11
11
  import './components/secondary-tablist/Component.js';
12
- import './index.module-8a913c30.js';
12
+ import './index.module-523e7b48.js';
13
13
  import './components/secondary-tablist/Component.desktop.js';
14
14
  export { Tab } from './components/tab/Component.js';
15
15
  import './components/tabs/Component.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-tabs",
3
- "version": "7.0.1",
3
+ "version": "7.1.0",
4
4
  "description": "Tabs components",
5
5
  "keywords": [],
6
6
  "license": "MIT",
package/responsive.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- require('./tslib.es6-0ecd86e7.js');
5
+ require('./tslib.es6-e61a3999.js');
6
6
  require('react');
7
7
  require('@alfalab/core-components-keyboard-focusable');
8
8
  require('classnames');
@@ -10,11 +10,11 @@ require('compute-scroll-into-view');
10
10
  var components_scrollableContainer_Component = require('./components/scrollable-container/Component.js');
11
11
  var useTabs = require('./useTabs.js');
12
12
  require('./components/primary-tablist/Component.js');
13
- require('./index.module-a6debef8.js');
13
+ require('./index.module-7226e3a9.js');
14
14
  require('./components/primary-tablist/Component.desktop.js');
15
15
  require('@alfalab/core-components-tag');
16
16
  require('./components/secondary-tablist/Component.js');
17
- require('./index.module-26e7f797.js');
17
+ require('./index.module-509288bb.js');
18
18
  require('./components/secondary-tablist/Component.desktop.js');
19
19
  var components_tab_Component = require('./components/tab/Component.js');
20
20
  require('./components/tabs/Component.js');
File without changes
@@ -1,4 +0,0 @@
1
- var commonStyles = {"component":"tabs__component_1qxoj","fullWidthScroll":"tabs__fullWidthScroll_1qxoj","container":"tabs__container_1qxoj","title":"tabs__title_1qxoj","xxs":"tabs__xxs_1qxoj","xs":"tabs__xs_1qxoj","s":"tabs__s_1qxoj","m":"tabs__m_1qxoj","l":"tabs__l_1qxoj","xl":"tabs__xl_1qxoj"};
2
- require('./components/secondary-tablist/index.css')
3
-
4
- export { commonStyles as c };
@@ -1,4 +0,0 @@
1
- var commonStyles = {"component":"tabs__component_v6hkw","fullWidthScroll":"tabs__fullWidthScroll_v6hkw","container":"tabs__container_v6hkw","title":"tabs__title_v6hkw","disabled":"tabs__disabled_v6hkw","focused":"tabs__focused_v6hkw","selected":"tabs__selected_v6hkw","line":"tabs__line_v6hkw","s":"tabs__s_v6hkw","xs":"tabs__xs_v6hkw","xxs":"tabs__xxs_v6hkw","m":"tabs__m_v6hkw","l":"tabs__l_v6hkw","xl":"tabs__xl_v6hkw","rightAddons":"tabs__rightAddons_v6hkw"};
2
- require('./components/primary-tablist/index.css')
3
-
4
- export { commonStyles as c };
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var commonStyles = {"component":"tabs__component_1qxoj","fullWidthScroll":"tabs__fullWidthScroll_1qxoj","container":"tabs__container_1qxoj","title":"tabs__title_1qxoj","xxs":"tabs__xxs_1qxoj","xs":"tabs__xs_1qxoj","s":"tabs__s_1qxoj","m":"tabs__m_1qxoj","l":"tabs__l_1qxoj","xl":"tabs__xl_1qxoj"};
4
- require('./components/secondary-tablist/index.css')
5
-
6
- exports.commonStyles = commonStyles;
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var commonStyles = {"component":"tabs__component_v6hkw","fullWidthScroll":"tabs__fullWidthScroll_v6hkw","container":"tabs__container_v6hkw","title":"tabs__title_v6hkw","disabled":"tabs__disabled_v6hkw","focused":"tabs__focused_v6hkw","selected":"tabs__selected_v6hkw","line":"tabs__line_v6hkw","s":"tabs__s_v6hkw","xs":"tabs__xs_v6hkw","xxs":"tabs__xxs_v6hkw","m":"tabs__m_v6hkw","l":"tabs__l_v6hkw","xl":"tabs__xl_v6hkw","rightAddons":"tabs__rightAddons_v6hkw"};
4
- require('./components/primary-tablist/index.css')
5
-
6
- exports.commonStyles = commonStyles;
@@ -1,4 +0,0 @@
1
- var commonStyles = {"component":"tabs__component_1qxoj","fullWidthScroll":"tabs__fullWidthScroll_1qxoj","container":"tabs__container_1qxoj","title":"tabs__title_1qxoj","xxs":"tabs__xxs_1qxoj","xs":"tabs__xs_1qxoj","s":"tabs__s_1qxoj","m":"tabs__m_1qxoj","l":"tabs__l_1qxoj","xl":"tabs__xl_1qxoj"};
2
- require('./components/secondary-tablist/index.css')
3
-
4
- export { commonStyles as c };
@@ -1,4 +0,0 @@
1
- var commonStyles = {"component":"tabs__component_v6hkw","fullWidthScroll":"tabs__fullWidthScroll_v6hkw","container":"tabs__container_v6hkw","title":"tabs__title_v6hkw","disabled":"tabs__disabled_v6hkw","focused":"tabs__focused_v6hkw","selected":"tabs__selected_v6hkw","line":"tabs__line_v6hkw","s":"tabs__s_v6hkw","xs":"tabs__xs_v6hkw","xxs":"tabs__xxs_v6hkw","m":"tabs__m_v6hkw","l":"tabs__l_v6hkw","xl":"tabs__xl_v6hkw","rightAddons":"tabs__rightAddons_v6hkw"};
2
- require('./components/primary-tablist/index.css')
3
-
4
- export { commonStyles as c };