@elliemae/ds-tabs 2.4.5 → 2.4.8

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 (3) hide show
  1. package/cjs/parts/tabBar/styles.js +64 -60
  2. package/esm/parts/tabBar/styles.js +64 -60
  3. package/package.json +6 -6
package/cjs/parts/tabBar/styles.js CHANGED
@@ -13,41 +13,46 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
13
  /* eslint-disable indent */
14
14
  const StyledSelectionIndicator = /*#__PURE__*/styled__default["default"].div.withConfig({
15
15
  componentId: "sc-3hla56-0"
16
- })(["position:absolute;height:3px;top:", ";margin-top:", ";pointer-events:none;transition:200ms cubic-bezier(0.36,0,1,1);z-index:10;", ""], _ref => {
16
+ })(["position:absolute;height:", ";top:", ";margin-top:", ";pointer-events:none;transition:200ms cubic-bezier(0.36,0,1,1);z-index:10;", ""], _ref => {
17
17
  let {
18
- tabType,
19
18
  isDSMobile
20
19
  } = _ref;
20
+ return isDSMobile ? '2px' : '3px';
21
+ }, _ref2 => {
22
+ let {
23
+ tabType,
24
+ isDSMobile
25
+ } = _ref2;
21
26
  if (isDSMobile) return `35px`;
22
27
  if (tabType === constants.TabTypes.NORMAL_SMALL) return `15px`;
23
28
  return `25px`;
24
- }, _ref2 => {
29
+ }, _ref3 => {
25
30
  let {
26
31
  theme
27
- } = _ref2;
32
+ } = _ref3;
28
33
  return theme.space.xxxs;
29
- }, _ref3 => {
34
+ }, _ref4 => {
30
35
  let {
31
36
  isDSMobile
32
- } = _ref3;
37
+ } = _ref4;
33
38
  return isDSMobile ? `
34
39
  margin-left: 0;
35
40
  margin-top: 3px;
36
41
  ` : ``;
37
42
  });
38
43
  const mobileGradientsSettings = dsSystem.css`
39
- ${_ref4 => {
44
+ ${_ref5 => {
40
45
  let {
41
46
  theme,
42
47
  mobileGradients,
43
48
  isDSMobile,
44
49
  fixedTabsHeaders
45
- } = _ref4;
50
+ } = _ref5;
46
51
 
47
52
  if (isDSMobile && !fixedTabsHeaders) {
48
- if (mobileGradients.right && mobileGradients.left) return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 80%, rgba(238,238,238,0) 100%);`;
49
- if (mobileGradients.right) return `background: linear-gradient(90deg, ${theme.colors.brand[200]} 0%, ${theme.colors.brand[200]} 80%, rgba(238,238,238,0) 100%);`;
50
- if (mobileGradients.left) return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 100%);`;
53
+ if (mobileGradients.right && mobileGradients.left) return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, transparent 10%, transparent 90%, rgba(238,238,238,0) 100%);`;
54
+ if (mobileGradients.right) return `background: linear-gradient(90deg, transparent 0%, transparent 90%, rgba(238,238,238,0) 100%);`;
55
+ if (mobileGradients.left) return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, transparent 10%, transparent 100%);`;
51
56
  }
52
57
 
53
58
  return ``;
@@ -55,58 +60,60 @@ const mobileGradientsSettings = dsSystem.css`
55
60
  `;
56
61
  const StyledTabWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
57
62
  componentId: "sc-3hla56-1"
58
- })(["display:flex;flex:1;flex-wrap:nowrap;", " ", ""], _ref5 => {
63
+ })(["display:flex;flex:1;flex-wrap:nowrap;", " ", ""], _ref6 => {
59
64
  let {
60
65
  fixedTabsHeaders,
61
66
  isDSMobile
62
- } = _ref5;
67
+ } = _ref6;
63
68
  return !fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;';
64
- }, _ref6 => {
69
+ }, _ref7 => {
65
70
  let {
66
71
  theme,
67
72
  isDSMobile
68
- } = _ref6;
69
- return isDSMobile ? `border-bottom: 1px solid ${theme.colors.brand[300]};` : ``;
73
+ } = _ref7;
74
+ return isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``;
70
75
  });
71
76
  const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfig({
72
77
  componentId: "sc-3hla56-2"
73
- })(["position:relative;background-color:transparent;border:none;cursor:pointer;transition:100ms cubic-bezier(0,0,0.42,1);text-transform:", ";letter-spacing:0px;white-space:nowrap;padding:2px 0;margin-right:", ";margin-left:", ";color:", ";", " ", " ", " ", " ", " ", " ", ""], _ref7 => {
78
+ })(["position:relative;background-color:transparent;border:none;cursor:pointer;transition:100ms cubic-bezier(0,0,0.42,1);text-transform:", ";letter-spacing:0px;white-space:nowrap;padding:2px 0;margin-right:", ";margin-left:", ";color:", ";", " ", " ", " ", " ", " ", " ", ""], _ref8 => {
74
79
  let {
75
- tabType
76
- } = _ref7;
77
- return tabType === constants.TabTypes.SUBTABS ? `capitalize` : `uppercase`;
78
- }, _ref8 => {
80
+ tabType,
81
+ isDSMobile
82
+ } = _ref8;
83
+ if (tabType === constants.TabTypes.SUBTABS) return 'capitalize';
84
+ return isDSMobile ? 'none' : 'uppercase';
85
+ }, _ref9 => {
79
86
  let {
80
87
  fixedTabsHeaders,
81
88
  isDSMobile
82
- } = _ref8;
89
+ } = _ref9;
83
90
  if (fixedTabsHeaders) return '0px';
84
91
  if (!fixedTabsHeaders && isDSMobile) return '14px';
85
92
  return '16px';
86
- }, _ref9 => {
93
+ }, _ref10 => {
87
94
  let {
88
95
  fixedTabsHeaders,
89
96
  isDSMobile
90
- } = _ref9;
97
+ } = _ref10;
91
98
  if (fixedTabsHeaders) return '0px';
92
99
  if (!fixedTabsHeaders && isDSMobile) return '14px';
93
100
  return '16px';
94
- }, _ref10 => {
101
+ }, _ref11 => {
95
102
  let {
96
103
  theme
97
- } = _ref10;
104
+ } = _ref11;
98
105
  return theme.colors.neutral[700];
99
- }, dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref11 => {
106
+ }, dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref12 => {
100
107
  let {
101
108
  tabType
102
- } = _ref11;
109
+ } = _ref12;
103
110
  return tabType === constants.TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`;
104
- }, _ref12 => {
111
+ }, _ref13 => {
105
112
  let {
106
113
  theme,
107
114
  isActive,
108
115
  disabled
109
- } = _ref12;
116
+ } = _ref13;
110
117
  return isActive && !disabled ? `
111
118
  font-weight: ${theme.fontWeights.semibold};
112
119
  ${dsSystem.safariAndFirefoxBold(`#353C46`)}
@@ -118,11 +125,11 @@ const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfi
118
125
  ` : `
119
126
 
120
127
  `;
121
- }, _ref13 => {
128
+ }, _ref14 => {
122
129
  let {
123
130
  theme,
124
131
  disabled
125
- } = _ref13;
132
+ } = _ref14;
126
133
  return disabled ? `
127
134
  color: ${theme.colors.neutral[500]};
128
135
  cursor: not-allowed;
@@ -131,12 +138,12 @@ const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfi
131
138
  color: ${theme.colors.brand[600]};
132
139
  }
133
140
  `;
134
- }, _ref14 => {
141
+ }, _ref15 => {
135
142
  let {
136
143
  theme,
137
144
  showSeparator,
138
145
  tabType
139
- } = _ref14;
146
+ } = _ref15;
140
147
  return showSeparator ? `
141
148
  &:not(:last-of-type):before
142
149
  {
@@ -149,13 +156,13 @@ const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfi
149
156
  height: ${tabType === constants.TabTypes.SUBTABS ? `10px` : `16px`};
150
157
  background: ${theme.colors.neutral[400]};
151
158
  }` : ``;
152
- }, _ref15 => {
159
+ }, _ref16 => {
153
160
  let {
154
161
  theme,
155
162
  isDSMobile,
156
163
  tabType,
157
164
  isActive
158
- } = _ref15;
165
+ } = _ref16;
159
166
  return !isDSMobile ? `
160
167
  &:focus {
161
168
  outline: none;
@@ -188,36 +195,33 @@ const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfi
188
195
  }
189
196
 
190
197
  ` : ``;
191
- }, _ref16 => {
198
+ }, _ref17 => {
192
199
  let {
193
200
  theme,
194
201
  isActive,
195
202
  disabled,
196
203
  isDSMobile
197
- } = _ref16;
204
+ } = _ref17;
198
205
  return isDSMobile ? `
199
206
  height: 40px;
200
- color: ${theme.colors.brand[600]};
207
+ color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};
201
208
  font-weight: ${theme.fontWeights.regular};
202
209
  padding: 0;
203
- font-size: 13px;
210
+ font-size: 16px;
204
211
  line-height: 1.3;
205
212
  ${dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}
206
213
 
207
214
  &:focus {
208
215
  font-weight: ${theme.fontWeights.regular};
209
- font-size: 13px;
210
216
  ${dsSystem.safariAndFirefoxBold('#006AA9')}
211
217
  }
212
218
 
213
219
  ${isActive ? `
214
220
  font-weight: ${theme.fontWeights.regular};
215
- font-size: 13px;
216
221
  ${dsSystem.safariAndFirefoxBold('#006AA9')}
217
222
  ` : ``}
218
223
 
219
224
  ${isActive && !disabled ? `
220
- font-size: 13px;
221
225
  color: ${theme.colors.brand[700]};
222
226
  line-height: 1.3;
223
227
  font-weight: ${theme.fontWeights.regular};
@@ -236,26 +240,26 @@ const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfi
236
240
  });
237
241
  const StyledSubTabsList = /*#__PURE__*/styled__default["default"].div.withConfig({
238
242
  componentId: "sc-3hla56-3"
239
- })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", ""], _ref17 => {
243
+ })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", ""], _ref18 => {
240
244
  let {
241
245
  withCarousel
242
- } = _ref17;
246
+ } = _ref18;
243
247
  return withCarousel ? 'max-width: 100%;' : '';
244
248
  });
245
249
  const StyledTabList = /*#__PURE__*/styled__default["default"].div.withConfig({
246
250
  componentId: "sc-3hla56-4"
247
- })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", " ", " ", "{padding-bottom:0;padding-top:0;}", " ", " ", " ", "{", "}", "{background:", ";}"], _ref18 => {
251
+ })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", " ", " ", "{padding-bottom:0;padding-top:0;}", " ", " ", " ", "{", "}", "{background:", ";}"], _ref19 => {
248
252
  let {
249
253
  withCarousel,
250
254
  isDSMobile
251
- } = _ref18;
255
+ } = _ref19;
252
256
  return withCarousel && !isDSMobile ? `max-width: 100%;` : '';
253
- }, _ref19 => {
257
+ }, _ref20 => {
254
258
  let {
255
259
  theme,
256
260
  isDSMobile,
257
261
  tabType
258
- } = _ref19;
262
+ } = _ref20;
259
263
  return tabType !== constants.TabTypes.NORMAL_SMALL && !isDSMobile ? `
260
264
  &:after {
261
265
  content: '';
@@ -267,19 +271,19 @@ const StyledTabList = /*#__PURE__*/styled__default["default"].div.withConfig({
267
271
  bottom: 0px;
268
272
  }
269
273
  ` : ``;
270
- }, StyledTabButton, _ref20 => {
274
+ }, StyledTabButton, _ref21 => {
271
275
  let {
272
276
  theme,
273
277
  isDSMobile
274
- } = _ref20;
278
+ } = _ref21;
275
279
  return isDSMobile ? `
276
280
 
277
- background: ${theme.colors.brand[200]};` : ``;
278
- }, mobileGradientsSettings, _ref21 => {
281
+ background: ${theme.colors.neutral['000']};` : ``;
282
+ }, mobileGradientsSettings, _ref22 => {
279
283
  let {
280
284
  isDSMobile,
281
285
  fixedTabsHeaders
282
- } = _ref21;
286
+ } = _ref22;
283
287
  return isDSMobile ? `
284
288
  ${!fixedTabsHeaders ? `
285
289
  z-index: 0;
@@ -294,28 +298,28 @@ const StyledTabList = /*#__PURE__*/styled__default["default"].div.withConfig({
294
298
  flex: 1;
295
299
  overflow-x: hidden;
296
300
  }`}` : ``;
297
- }, StyledSelectionIndicator, _ref22 => {
301
+ }, StyledSelectionIndicator, _ref23 => {
298
302
  let {
299
303
  indicatorStyle
300
- } = _ref22;
304
+ } = _ref23;
301
305
  return `
302
306
  width: ${indicatorStyle.width};
303
307
  left: ${indicatorStyle.left};
304
308
  `;
305
- }, StyledSelectionIndicator, _ref23 => {
309
+ }, StyledSelectionIndicator, _ref24 => {
306
310
  let {
307
311
  theme,
308
312
  indicatorStyle,
309
313
  isDSMobile
310
- } = _ref23;
314
+ } = _ref24;
311
315
  return !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600];
312
316
  });
313
317
  const StyledRequiredMark = /*#__PURE__*/styled__default["default"].span.withConfig({
314
318
  componentId: "sc-3hla56-5"
315
- })(["color:", ";font-size:6px;margin-left:2px;position:absolute;top:5px;"], _ref24 => {
319
+ })(["color:", ";font-size:6px;margin-left:2px;position:absolute;top:5px;"], _ref25 => {
316
320
  let {
317
321
  theme
318
- } = _ref24;
322
+ } = _ref25;
319
323
  return theme.colors.danger[900];
320
324
  });
321
325
 
package/esm/parts/tabBar/styles.js CHANGED
@@ -5,41 +5,46 @@ import { TabTypes } from '../../utils/constants.js';
5
5
  /* eslint-disable indent */
6
6
  const StyledSelectionIndicator = /*#__PURE__*/styled.div.withConfig({
7
7
  componentId: "sc-3hla56-0"
8
- })(["position:absolute;height:3px;top:", ";margin-top:", ";pointer-events:none;transition:200ms cubic-bezier(0.36,0,1,1);z-index:10;", ""], _ref => {
8
+ })(["position:absolute;height:", ";top:", ";margin-top:", ";pointer-events:none;transition:200ms cubic-bezier(0.36,0,1,1);z-index:10;", ""], _ref => {
9
9
  let {
10
- tabType,
11
10
  isDSMobile
12
11
  } = _ref;
12
+ return isDSMobile ? '2px' : '3px';
13
+ }, _ref2 => {
14
+ let {
15
+ tabType,
16
+ isDSMobile
17
+ } = _ref2;
13
18
  if (isDSMobile) return `35px`;
14
19
  if (tabType === TabTypes.NORMAL_SMALL) return `15px`;
15
20
  return `25px`;
16
- }, _ref2 => {
21
+ }, _ref3 => {
17
22
  let {
18
23
  theme
19
- } = _ref2;
24
+ } = _ref3;
20
25
  return theme.space.xxxs;
21
- }, _ref3 => {
26
+ }, _ref4 => {
22
27
  let {
23
28
  isDSMobile
24
- } = _ref3;
29
+ } = _ref4;
25
30
  return isDSMobile ? `
26
31
  margin-left: 0;
27
32
  margin-top: 3px;
28
33
  ` : ``;
29
34
  });
30
35
  const mobileGradientsSettings = css`
31
- ${_ref4 => {
36
+ ${_ref5 => {
32
37
  let {
33
38
  theme,
34
39
  mobileGradients,
35
40
  isDSMobile,
36
41
  fixedTabsHeaders
37
- } = _ref4;
42
+ } = _ref5;
38
43
 
39
44
  if (isDSMobile && !fixedTabsHeaders) {
40
- if (mobileGradients.right && mobileGradients.left) return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 80%, rgba(238,238,238,0) 100%);`;
41
- if (mobileGradients.right) return `background: linear-gradient(90deg, ${theme.colors.brand[200]} 0%, ${theme.colors.brand[200]} 80%, rgba(238,238,238,0) 100%);`;
42
- if (mobileGradients.left) return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 100%);`;
45
+ if (mobileGradients.right && mobileGradients.left) return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, transparent 10%, transparent 90%, rgba(238,238,238,0) 100%);`;
46
+ if (mobileGradients.right) return `background: linear-gradient(90deg, transparent 0%, transparent 90%, rgba(238,238,238,0) 100%);`;
47
+ if (mobileGradients.left) return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, transparent 10%, transparent 100%);`;
43
48
  }
44
49
 
45
50
  return ``;
@@ -47,58 +52,60 @@ const mobileGradientsSettings = css`
47
52
  `;
48
53
  const StyledTabWrapper = /*#__PURE__*/styled.div.withConfig({
49
54
  componentId: "sc-3hla56-1"
50
- })(["display:flex;flex:1;flex-wrap:nowrap;", " ", ""], _ref5 => {
55
+ })(["display:flex;flex:1;flex-wrap:nowrap;", " ", ""], _ref6 => {
51
56
  let {
52
57
  fixedTabsHeaders,
53
58
  isDSMobile
54
- } = _ref5;
59
+ } = _ref6;
55
60
  return !fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;';
56
- }, _ref6 => {
61
+ }, _ref7 => {
57
62
  let {
58
63
  theme,
59
64
  isDSMobile
60
- } = _ref6;
61
- return isDSMobile ? `border-bottom: 1px solid ${theme.colors.brand[300]};` : ``;
65
+ } = _ref7;
66
+ return isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``;
62
67
  });
63
68
  const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
64
69
  componentId: "sc-3hla56-2"
65
- })(["position:relative;background-color:transparent;border:none;cursor:pointer;transition:100ms cubic-bezier(0,0,0.42,1);text-transform:", ";letter-spacing:0px;white-space:nowrap;padding:2px 0;margin-right:", ";margin-left:", ";color:", ";", " ", " ", " ", " ", " ", " ", ""], _ref7 => {
70
+ })(["position:relative;background-color:transparent;border:none;cursor:pointer;transition:100ms cubic-bezier(0,0,0.42,1);text-transform:", ";letter-spacing:0px;white-space:nowrap;padding:2px 0;margin-right:", ";margin-left:", ";color:", ";", " ", " ", " ", " ", " ", " ", ""], _ref8 => {
66
71
  let {
67
- tabType
68
- } = _ref7;
69
- return tabType === TabTypes.SUBTABS ? `capitalize` : `uppercase`;
70
- }, _ref8 => {
72
+ tabType,
73
+ isDSMobile
74
+ } = _ref8;
75
+ if (tabType === TabTypes.SUBTABS) return 'capitalize';
76
+ return isDSMobile ? 'none' : 'uppercase';
77
+ }, _ref9 => {
71
78
  let {
72
79
  fixedTabsHeaders,
73
80
  isDSMobile
74
- } = _ref8;
81
+ } = _ref9;
75
82
  if (fixedTabsHeaders) return '0px';
76
83
  if (!fixedTabsHeaders && isDSMobile) return '14px';
77
84
  return '16px';
78
- }, _ref9 => {
85
+ }, _ref10 => {
79
86
  let {
80
87
  fixedTabsHeaders,
81
88
  isDSMobile
82
- } = _ref9;
89
+ } = _ref10;
83
90
  if (fixedTabsHeaders) return '0px';
84
91
  if (!fixedTabsHeaders && isDSMobile) return '14px';
85
92
  return '16px';
86
- }, _ref10 => {
93
+ }, _ref11 => {
87
94
  let {
88
95
  theme
89
- } = _ref10;
96
+ } = _ref11;
90
97
  return theme.colors.neutral[700];
91
- }, onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref11 => {
98
+ }, onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref12 => {
92
99
  let {
93
100
  tabType
94
- } = _ref11;
101
+ } = _ref12;
95
102
  return tabType === TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`;
96
- }, _ref12 => {
103
+ }, _ref13 => {
97
104
  let {
98
105
  theme,
99
106
  isActive,
100
107
  disabled
101
- } = _ref12;
108
+ } = _ref13;
102
109
  return isActive && !disabled ? `
103
110
  font-weight: ${theme.fontWeights.semibold};
104
111
  ${safariAndFirefoxBold(`#353C46`)}
@@ -110,11 +117,11 @@ const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
110
117
  ` : `
111
118
 
112
119
  `;
113
- }, _ref13 => {
120
+ }, _ref14 => {
114
121
  let {
115
122
  theme,
116
123
  disabled
117
- } = _ref13;
124
+ } = _ref14;
118
125
  return disabled ? `
119
126
  color: ${theme.colors.neutral[500]};
120
127
  cursor: not-allowed;
@@ -123,12 +130,12 @@ const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
123
130
  color: ${theme.colors.brand[600]};
124
131
  }
125
132
  `;
126
- }, _ref14 => {
133
+ }, _ref15 => {
127
134
  let {
128
135
  theme,
129
136
  showSeparator,
130
137
  tabType
131
- } = _ref14;
138
+ } = _ref15;
132
139
  return showSeparator ? `
133
140
  &:not(:last-of-type):before
134
141
  {
@@ -141,13 +148,13 @@ const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
141
148
  height: ${tabType === TabTypes.SUBTABS ? `10px` : `16px`};
142
149
  background: ${theme.colors.neutral[400]};
143
150
  }` : ``;
144
- }, _ref15 => {
151
+ }, _ref16 => {
145
152
  let {
146
153
  theme,
147
154
  isDSMobile,
148
155
  tabType,
149
156
  isActive
150
- } = _ref15;
157
+ } = _ref16;
151
158
  return !isDSMobile ? `
152
159
  &:focus {
153
160
  outline: none;
@@ -180,36 +187,33 @@ const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
180
187
  }
181
188
 
182
189
  ` : ``;
183
- }, _ref16 => {
190
+ }, _ref17 => {
184
191
  let {
185
192
  theme,
186
193
  isActive,
187
194
  disabled,
188
195
  isDSMobile
189
- } = _ref16;
196
+ } = _ref17;
190
197
  return isDSMobile ? `
191
198
  height: 40px;
192
- color: ${theme.colors.brand[600]};
199
+ color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};
193
200
  font-weight: ${theme.fontWeights.regular};
194
201
  padding: 0;
195
- font-size: 13px;
202
+ font-size: 16px;
196
203
  line-height: 1.3;
197
204
  ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}
198
205
 
199
206
  &:focus {
200
207
  font-weight: ${theme.fontWeights.regular};
201
- font-size: 13px;
202
208
  ${safariAndFirefoxBold('#006AA9')}
203
209
  }
204
210
 
205
211
  ${isActive ? `
206
212
  font-weight: ${theme.fontWeights.regular};
207
- font-size: 13px;
208
213
  ${safariAndFirefoxBold('#006AA9')}
209
214
  ` : ``}
210
215
 
211
216
  ${isActive && !disabled ? `
212
- font-size: 13px;
213
217
  color: ${theme.colors.brand[700]};
214
218
  line-height: 1.3;
215
219
  font-weight: ${theme.fontWeights.regular};
@@ -228,26 +232,26 @@ const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
228
232
  });
229
233
  const StyledSubTabsList = /*#__PURE__*/styled.div.withConfig({
230
234
  componentId: "sc-3hla56-3"
231
- })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", ""], _ref17 => {
235
+ })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", ""], _ref18 => {
232
236
  let {
233
237
  withCarousel
234
- } = _ref17;
238
+ } = _ref18;
235
239
  return withCarousel ? 'max-width: 100%;' : '';
236
240
  });
237
241
  const StyledTabList = /*#__PURE__*/styled.div.withConfig({
238
242
  componentId: "sc-3hla56-4"
239
- })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", " ", " ", "{padding-bottom:0;padding-top:0;}", " ", " ", " ", "{", "}", "{background:", ";}"], _ref18 => {
243
+ })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", " ", " ", "{padding-bottom:0;padding-top:0;}", " ", " ", " ", "{", "}", "{background:", ";}"], _ref19 => {
240
244
  let {
241
245
  withCarousel,
242
246
  isDSMobile
243
- } = _ref18;
247
+ } = _ref19;
244
248
  return withCarousel && !isDSMobile ? `max-width: 100%;` : '';
245
- }, _ref19 => {
249
+ }, _ref20 => {
246
250
  let {
247
251
  theme,
248
252
  isDSMobile,
249
253
  tabType
250
- } = _ref19;
254
+ } = _ref20;
251
255
  return tabType !== TabTypes.NORMAL_SMALL && !isDSMobile ? `
252
256
  &:after {
253
257
  content: '';
@@ -259,19 +263,19 @@ const StyledTabList = /*#__PURE__*/styled.div.withConfig({
259
263
  bottom: 0px;
260
264
  }
261
265
  ` : ``;
262
- }, StyledTabButton, _ref20 => {
266
+ }, StyledTabButton, _ref21 => {
263
267
  let {
264
268
  theme,
265
269
  isDSMobile
266
- } = _ref20;
270
+ } = _ref21;
267
271
  return isDSMobile ? `
268
272
 
269
- background: ${theme.colors.brand[200]};` : ``;
270
- }, mobileGradientsSettings, _ref21 => {
273
+ background: ${theme.colors.neutral['000']};` : ``;
274
+ }, mobileGradientsSettings, _ref22 => {
271
275
  let {
272
276
  isDSMobile,
273
277
  fixedTabsHeaders
274
- } = _ref21;
278
+ } = _ref22;
275
279
  return isDSMobile ? `
276
280
  ${!fixedTabsHeaders ? `
277
281
  z-index: 0;
@@ -286,28 +290,28 @@ const StyledTabList = /*#__PURE__*/styled.div.withConfig({
286
290
  flex: 1;
287
291
  overflow-x: hidden;
288
292
  }`}` : ``;
289
- }, StyledSelectionIndicator, _ref22 => {
293
+ }, StyledSelectionIndicator, _ref23 => {
290
294
  let {
291
295
  indicatorStyle
292
- } = _ref22;
296
+ } = _ref23;
293
297
  return `
294
298
  width: ${indicatorStyle.width};
295
299
  left: ${indicatorStyle.left};
296
300
  `;
297
- }, StyledSelectionIndicator, _ref23 => {
301
+ }, StyledSelectionIndicator, _ref24 => {
298
302
  let {
299
303
  theme,
300
304
  indicatorStyle,
301
305
  isDSMobile
302
- } = _ref23;
306
+ } = _ref24;
303
307
  return !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600];
304
308
  });
305
309
  const StyledRequiredMark = /*#__PURE__*/styled.span.withConfig({
306
310
  componentId: "sc-3hla56-5"
307
- })(["color:", ";font-size:6px;margin-left:2px;position:absolute;top:5px;"], _ref24 => {
311
+ })(["color:", ";font-size:6px;margin-left:2px;position:absolute;top:5px;"], _ref25 => {
308
312
  let {
309
313
  theme
310
- } = _ref24;
314
+ } = _ref25;
311
315
  return theme.colors.danger[900];
312
316
  });
313
317
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-tabs",
3
- "version": "2.4.5",
3
+ "version": "2.4.8",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Tabs",
6
6
  "module": "./esm/index.js",
@@ -124,11 +124,11 @@
124
124
  "build": "node ../../scripts/build/build.js"
125
125
  },
126
126
  "dependencies": {
127
- "@elliemae/ds-button": "2.4.5",
128
- "@elliemae/ds-icon": "2.4.5",
129
- "@elliemae/ds-icons": "2.4.5",
130
- "@elliemae/ds-props-helpers": "2.4.5",
131
- "@elliemae/ds-system": "2.4.5",
127
+ "@elliemae/ds-button": "2.4.8",
128
+ "@elliemae/ds-icon": "2.4.8",
129
+ "@elliemae/ds-icons": "2.4.8",
130
+ "@elliemae/ds-props-helpers": "2.4.8",
131
+ "@elliemae/ds-system": "2.4.8",
132
132
  "@react-hook/resize-observer": "~1.2.5",
133
133
  "prop-types": "~15.7.2",
134
134
  "react-desc": "~4.1.3",