@elliemae/ds-tabs 2.4.4 → 2.4.7

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 +59 -54
  2. package/esm/parts/tabBar/styles.js +59 -54
  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,58 @@ 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
80
  tabType
76
- } = _ref7;
81
+ } = _ref8;
77
82
  return tabType === constants.TabTypes.SUBTABS ? `capitalize` : `uppercase`;
78
- }, _ref8 => {
83
+ }, _ref9 => {
79
84
  let {
80
85
  fixedTabsHeaders,
81
86
  isDSMobile
82
- } = _ref8;
87
+ } = _ref9;
83
88
  if (fixedTabsHeaders) return '0px';
84
89
  if (!fixedTabsHeaders && isDSMobile) return '14px';
85
90
  return '16px';
86
- }, _ref9 => {
91
+ }, _ref10 => {
87
92
  let {
88
93
  fixedTabsHeaders,
89
94
  isDSMobile
90
- } = _ref9;
95
+ } = _ref10;
91
96
  if (fixedTabsHeaders) return '0px';
92
97
  if (!fixedTabsHeaders && isDSMobile) return '14px';
93
98
  return '16px';
94
- }, _ref10 => {
99
+ }, _ref11 => {
95
100
  let {
96
101
  theme
97
- } = _ref10;
102
+ } = _ref11;
98
103
  return theme.colors.neutral[700];
99
- }, dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref11 => {
104
+ }, dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref12 => {
100
105
  let {
101
106
  tabType
102
- } = _ref11;
107
+ } = _ref12;
103
108
  return tabType === constants.TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`;
104
- }, _ref12 => {
109
+ }, _ref13 => {
105
110
  let {
106
111
  theme,
107
112
  isActive,
108
113
  disabled
109
- } = _ref12;
114
+ } = _ref13;
110
115
  return isActive && !disabled ? `
111
116
  font-weight: ${theme.fontWeights.semibold};
112
117
  ${dsSystem.safariAndFirefoxBold(`#353C46`)}
@@ -118,11 +123,11 @@ const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfi
118
123
  ` : `
119
124
 
120
125
  `;
121
- }, _ref13 => {
126
+ }, _ref14 => {
122
127
  let {
123
128
  theme,
124
129
  disabled
125
- } = _ref13;
130
+ } = _ref14;
126
131
  return disabled ? `
127
132
  color: ${theme.colors.neutral[500]};
128
133
  cursor: not-allowed;
@@ -131,12 +136,12 @@ const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfi
131
136
  color: ${theme.colors.brand[600]};
132
137
  }
133
138
  `;
134
- }, _ref14 => {
139
+ }, _ref15 => {
135
140
  let {
136
141
  theme,
137
142
  showSeparator,
138
143
  tabType
139
- } = _ref14;
144
+ } = _ref15;
140
145
  return showSeparator ? `
141
146
  &:not(:last-of-type):before
142
147
  {
@@ -149,13 +154,13 @@ const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfi
149
154
  height: ${tabType === constants.TabTypes.SUBTABS ? `10px` : `16px`};
150
155
  background: ${theme.colors.neutral[400]};
151
156
  }` : ``;
152
- }, _ref15 => {
157
+ }, _ref16 => {
153
158
  let {
154
159
  theme,
155
160
  isDSMobile,
156
161
  tabType,
157
162
  isActive
158
- } = _ref15;
163
+ } = _ref16;
159
164
  return !isDSMobile ? `
160
165
  &:focus {
161
166
  outline: none;
@@ -188,16 +193,16 @@ const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfi
188
193
  }
189
194
 
190
195
  ` : ``;
191
- }, _ref16 => {
196
+ }, _ref17 => {
192
197
  let {
193
198
  theme,
194
199
  isActive,
195
200
  disabled,
196
201
  isDSMobile
197
- } = _ref16;
202
+ } = _ref17;
198
203
  return isDSMobile ? `
199
204
  height: 40px;
200
- color: ${theme.colors.brand[600]};
205
+ color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};
201
206
  font-weight: ${theme.fontWeights.regular};
202
207
  padding: 0;
203
208
  font-size: 13px;
@@ -236,26 +241,26 @@ const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfi
236
241
  });
237
242
  const StyledSubTabsList = /*#__PURE__*/styled__default["default"].div.withConfig({
238
243
  componentId: "sc-3hla56-3"
239
- })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", ""], _ref17 => {
244
+ })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", ""], _ref18 => {
240
245
  let {
241
246
  withCarousel
242
- } = _ref17;
247
+ } = _ref18;
243
248
  return withCarousel ? 'max-width: 100%;' : '';
244
249
  });
245
250
  const StyledTabList = /*#__PURE__*/styled__default["default"].div.withConfig({
246
251
  componentId: "sc-3hla56-4"
247
- })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", " ", " ", "{padding-bottom:0;padding-top:0;}", " ", " ", " ", "{", "}", "{background:", ";}"], _ref18 => {
252
+ })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", " ", " ", "{padding-bottom:0;padding-top:0;}", " ", " ", " ", "{", "}", "{background:", ";}"], _ref19 => {
248
253
  let {
249
254
  withCarousel,
250
255
  isDSMobile
251
- } = _ref18;
256
+ } = _ref19;
252
257
  return withCarousel && !isDSMobile ? `max-width: 100%;` : '';
253
- }, _ref19 => {
258
+ }, _ref20 => {
254
259
  let {
255
260
  theme,
256
261
  isDSMobile,
257
262
  tabType
258
- } = _ref19;
263
+ } = _ref20;
259
264
  return tabType !== constants.TabTypes.NORMAL_SMALL && !isDSMobile ? `
260
265
  &:after {
261
266
  content: '';
@@ -267,19 +272,19 @@ const StyledTabList = /*#__PURE__*/styled__default["default"].div.withConfig({
267
272
  bottom: 0px;
268
273
  }
269
274
  ` : ``;
270
- }, StyledTabButton, _ref20 => {
275
+ }, StyledTabButton, _ref21 => {
271
276
  let {
272
277
  theme,
273
278
  isDSMobile
274
- } = _ref20;
279
+ } = _ref21;
275
280
  return isDSMobile ? `
276
281
 
277
- background: ${theme.colors.brand[200]};` : ``;
278
- }, mobileGradientsSettings, _ref21 => {
282
+ background: ${theme.colors.neutral['000']};` : ``;
283
+ }, mobileGradientsSettings, _ref22 => {
279
284
  let {
280
285
  isDSMobile,
281
286
  fixedTabsHeaders
282
- } = _ref21;
287
+ } = _ref22;
283
288
  return isDSMobile ? `
284
289
  ${!fixedTabsHeaders ? `
285
290
  z-index: 0;
@@ -294,28 +299,28 @@ const StyledTabList = /*#__PURE__*/styled__default["default"].div.withConfig({
294
299
  flex: 1;
295
300
  overflow-x: hidden;
296
301
  }`}` : ``;
297
- }, StyledSelectionIndicator, _ref22 => {
302
+ }, StyledSelectionIndicator, _ref23 => {
298
303
  let {
299
304
  indicatorStyle
300
- } = _ref22;
305
+ } = _ref23;
301
306
  return `
302
307
  width: ${indicatorStyle.width};
303
308
  left: ${indicatorStyle.left};
304
309
  `;
305
- }, StyledSelectionIndicator, _ref23 => {
310
+ }, StyledSelectionIndicator, _ref24 => {
306
311
  let {
307
312
  theme,
308
313
  indicatorStyle,
309
314
  isDSMobile
310
- } = _ref23;
315
+ } = _ref24;
311
316
  return !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600];
312
317
  });
313
318
  const StyledRequiredMark = /*#__PURE__*/styled__default["default"].span.withConfig({
314
319
  componentId: "sc-3hla56-5"
315
- })(["color:", ";font-size:6px;margin-left:2px;position:absolute;top:5px;"], _ref24 => {
320
+ })(["color:", ";font-size:6px;margin-left:2px;position:absolute;top:5px;"], _ref25 => {
316
321
  let {
317
322
  theme
318
- } = _ref24;
323
+ } = _ref25;
319
324
  return theme.colors.danger[900];
320
325
  });
321
326
 
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,58 @@ 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
72
  tabType
68
- } = _ref7;
73
+ } = _ref8;
69
74
  return tabType === TabTypes.SUBTABS ? `capitalize` : `uppercase`;
70
- }, _ref8 => {
75
+ }, _ref9 => {
71
76
  let {
72
77
  fixedTabsHeaders,
73
78
  isDSMobile
74
- } = _ref8;
79
+ } = _ref9;
75
80
  if (fixedTabsHeaders) return '0px';
76
81
  if (!fixedTabsHeaders && isDSMobile) return '14px';
77
82
  return '16px';
78
- }, _ref9 => {
83
+ }, _ref10 => {
79
84
  let {
80
85
  fixedTabsHeaders,
81
86
  isDSMobile
82
- } = _ref9;
87
+ } = _ref10;
83
88
  if (fixedTabsHeaders) return '0px';
84
89
  if (!fixedTabsHeaders && isDSMobile) return '14px';
85
90
  return '16px';
86
- }, _ref10 => {
91
+ }, _ref11 => {
87
92
  let {
88
93
  theme
89
- } = _ref10;
94
+ } = _ref11;
90
95
  return theme.colors.neutral[700];
91
- }, onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref11 => {
96
+ }, onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref12 => {
92
97
  let {
93
98
  tabType
94
- } = _ref11;
99
+ } = _ref12;
95
100
  return tabType === TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`;
96
- }, _ref12 => {
101
+ }, _ref13 => {
97
102
  let {
98
103
  theme,
99
104
  isActive,
100
105
  disabled
101
- } = _ref12;
106
+ } = _ref13;
102
107
  return isActive && !disabled ? `
103
108
  font-weight: ${theme.fontWeights.semibold};
104
109
  ${safariAndFirefoxBold(`#353C46`)}
@@ -110,11 +115,11 @@ const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
110
115
  ` : `
111
116
 
112
117
  `;
113
- }, _ref13 => {
118
+ }, _ref14 => {
114
119
  let {
115
120
  theme,
116
121
  disabled
117
- } = _ref13;
122
+ } = _ref14;
118
123
  return disabled ? `
119
124
  color: ${theme.colors.neutral[500]};
120
125
  cursor: not-allowed;
@@ -123,12 +128,12 @@ const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
123
128
  color: ${theme.colors.brand[600]};
124
129
  }
125
130
  `;
126
- }, _ref14 => {
131
+ }, _ref15 => {
127
132
  let {
128
133
  theme,
129
134
  showSeparator,
130
135
  tabType
131
- } = _ref14;
136
+ } = _ref15;
132
137
  return showSeparator ? `
133
138
  &:not(:last-of-type):before
134
139
  {
@@ -141,13 +146,13 @@ const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
141
146
  height: ${tabType === TabTypes.SUBTABS ? `10px` : `16px`};
142
147
  background: ${theme.colors.neutral[400]};
143
148
  }` : ``;
144
- }, _ref15 => {
149
+ }, _ref16 => {
145
150
  let {
146
151
  theme,
147
152
  isDSMobile,
148
153
  tabType,
149
154
  isActive
150
- } = _ref15;
155
+ } = _ref16;
151
156
  return !isDSMobile ? `
152
157
  &:focus {
153
158
  outline: none;
@@ -180,16 +185,16 @@ const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
180
185
  }
181
186
 
182
187
  ` : ``;
183
- }, _ref16 => {
188
+ }, _ref17 => {
184
189
  let {
185
190
  theme,
186
191
  isActive,
187
192
  disabled,
188
193
  isDSMobile
189
- } = _ref16;
194
+ } = _ref17;
190
195
  return isDSMobile ? `
191
196
  height: 40px;
192
- color: ${theme.colors.brand[600]};
197
+ color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};
193
198
  font-weight: ${theme.fontWeights.regular};
194
199
  padding: 0;
195
200
  font-size: 13px;
@@ -228,26 +233,26 @@ const StyledTabButton = /*#__PURE__*/styled.button.withConfig({
228
233
  });
229
234
  const StyledSubTabsList = /*#__PURE__*/styled.div.withConfig({
230
235
  componentId: "sc-3hla56-3"
231
- })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", ""], _ref17 => {
236
+ })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", ""], _ref18 => {
232
237
  let {
233
238
  withCarousel
234
- } = _ref17;
239
+ } = _ref18;
235
240
  return withCarousel ? 'max-width: 100%;' : '';
236
241
  });
237
242
  const StyledTabList = /*#__PURE__*/styled.div.withConfig({
238
243
  componentId: "sc-3hla56-4"
239
- })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", " ", " ", "{padding-bottom:0;padding-top:0;}", " ", " ", " ", "{", "}", "{background:", ";}"], _ref18 => {
244
+ })(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", " ", " ", "{padding-bottom:0;padding-top:0;}", " ", " ", " ", "{", "}", "{background:", ";}"], _ref19 => {
240
245
  let {
241
246
  withCarousel,
242
247
  isDSMobile
243
- } = _ref18;
248
+ } = _ref19;
244
249
  return withCarousel && !isDSMobile ? `max-width: 100%;` : '';
245
- }, _ref19 => {
250
+ }, _ref20 => {
246
251
  let {
247
252
  theme,
248
253
  isDSMobile,
249
254
  tabType
250
- } = _ref19;
255
+ } = _ref20;
251
256
  return tabType !== TabTypes.NORMAL_SMALL && !isDSMobile ? `
252
257
  &:after {
253
258
  content: '';
@@ -259,19 +264,19 @@ const StyledTabList = /*#__PURE__*/styled.div.withConfig({
259
264
  bottom: 0px;
260
265
  }
261
266
  ` : ``;
262
- }, StyledTabButton, _ref20 => {
267
+ }, StyledTabButton, _ref21 => {
263
268
  let {
264
269
  theme,
265
270
  isDSMobile
266
- } = _ref20;
271
+ } = _ref21;
267
272
  return isDSMobile ? `
268
273
 
269
- background: ${theme.colors.brand[200]};` : ``;
270
- }, mobileGradientsSettings, _ref21 => {
274
+ background: ${theme.colors.neutral['000']};` : ``;
275
+ }, mobileGradientsSettings, _ref22 => {
271
276
  let {
272
277
  isDSMobile,
273
278
  fixedTabsHeaders
274
- } = _ref21;
279
+ } = _ref22;
275
280
  return isDSMobile ? `
276
281
  ${!fixedTabsHeaders ? `
277
282
  z-index: 0;
@@ -286,28 +291,28 @@ const StyledTabList = /*#__PURE__*/styled.div.withConfig({
286
291
  flex: 1;
287
292
  overflow-x: hidden;
288
293
  }`}` : ``;
289
- }, StyledSelectionIndicator, _ref22 => {
294
+ }, StyledSelectionIndicator, _ref23 => {
290
295
  let {
291
296
  indicatorStyle
292
- } = _ref22;
297
+ } = _ref23;
293
298
  return `
294
299
  width: ${indicatorStyle.width};
295
300
  left: ${indicatorStyle.left};
296
301
  `;
297
- }, StyledSelectionIndicator, _ref23 => {
302
+ }, StyledSelectionIndicator, _ref24 => {
298
303
  let {
299
304
  theme,
300
305
  indicatorStyle,
301
306
  isDSMobile
302
- } = _ref23;
307
+ } = _ref24;
303
308
  return !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600];
304
309
  });
305
310
  const StyledRequiredMark = /*#__PURE__*/styled.span.withConfig({
306
311
  componentId: "sc-3hla56-5"
307
- })(["color:", ";font-size:6px;margin-left:2px;position:absolute;top:5px;"], _ref24 => {
312
+ })(["color:", ";font-size:6px;margin-left:2px;position:absolute;top:5px;"], _ref25 => {
308
313
  let {
309
314
  theme
310
- } = _ref24;
315
+ } = _ref25;
311
316
  return theme.colors.danger[900];
312
317
  });
313
318
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-tabs",
3
- "version": "2.4.4",
3
+ "version": "2.4.7",
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.4",
128
- "@elliemae/ds-icon": "2.4.4",
129
- "@elliemae/ds-icons": "2.4.4",
130
- "@elliemae/ds-props-helpers": "2.4.4",
131
- "@elliemae/ds-system": "2.4.4",
127
+ "@elliemae/ds-button": "2.4.7",
128
+ "@elliemae/ds-icon": "2.4.7",
129
+ "@elliemae/ds-icons": "2.4.7",
130
+ "@elliemae/ds-props-helpers": "2.4.7",
131
+ "@elliemae/ds-system": "2.4.7",
132
132
  "@react-hook/resize-observer": "~1.2.5",
133
133
  "prop-types": "~15.7.2",
134
134
  "react-desc": "~4.1.3",