@elliemae/ds-tabs 3.0.0-next.49 → 3.0.0-next.52

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.
@@ -34,7 +34,7 @@ var import_ds_system = require("@elliemae/ds-system");
34
34
  var import_constants = require("../../utils/constants");
35
35
  const StyledSelectionIndicator = import_styled_components.default.div`
36
36
  position: absolute;
37
- height: 3px;
37
+ height: ${({ isDSMobile }) => isDSMobile ? "2px" : "3px"};
38
38
  top: ${({ tabType, isDSMobile }) => {
39
39
  if (isDSMobile)
40
40
  return `35px`;
@@ -55,11 +55,11 @@ const mobileGradientsSettings = import_ds_system.css`
55
55
  ${({ theme, mobileGradients, isDSMobile, fixedTabsHeaders }) => {
56
56
  if (isDSMobile && !fixedTabsHeaders) {
57
57
  if (mobileGradients.right && mobileGradients.left)
58
- 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%);`;
58
+ return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, transparent 10%, transparent 90%, rgba(238,238,238,0) 100%);`;
59
59
  if (mobileGradients.right)
60
- return `background: linear-gradient(90deg, ${theme.colors.brand[200]} 0%, ${theme.colors.brand[200]} 80%, rgba(238,238,238,0) 100%);`;
60
+ return `background: linear-gradient(90deg, transparent 0%, transparent 90%, rgba(238,238,238,0) 100%);`;
61
61
  if (mobileGradients.left)
62
- return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 100%);`;
62
+ return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, transparent 10%, transparent 100%);`;
63
63
  }
64
64
  return ``;
65
65
  }}
@@ -69,7 +69,7 @@ const StyledTabWrapper = import_styled_components.default.div`
69
69
  flex: 1;
70
70
  flex-wrap: nowrap;
71
71
  ${({ fixedTabsHeaders, isDSMobile }) => !fixedTabsHeaders && isDSMobile ? "" : "overflow-x: hidden;"}
72
- ${({ theme, isDSMobile }) => isDSMobile ? `border-bottom: 1px solid ${theme.colors.brand[300]};` : ``}
72
+ ${({ theme, isDSMobile }) => isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``}
73
73
  `;
74
74
  const StyledTabButton = import_styled_components.default.button`
75
75
  position: relative;
@@ -77,7 +77,11 @@ const StyledTabButton = import_styled_components.default.button`
77
77
  border: none;
78
78
  cursor: pointer;
79
79
  transition: 100ms cubic-bezier(0, 0, 0.42, 1);
80
- text-transform: ${({ tabType }) => tabType === import_constants.TabTypes.SUBTABS ? `capitalize` : `uppercase`};
80
+ text-transform: ${({ tabType, isDSMobile }) => {
81
+ if (tabType === import_constants.TabTypes.SUBTABS)
82
+ return "capitalize";
83
+ return isDSMobile ? "none" : "uppercase";
84
+ }};
81
85
  letter-spacing: 0px;
82
86
  white-space: nowrap;
83
87
  padding: 2px 0;
@@ -174,27 +178,24 @@ const StyledTabButton = import_styled_components.default.button`
174
178
 
175
179
  ${({ theme, isActive, disabled, isDSMobile }) => isDSMobile ? `
176
180
  height: 40px;
177
- color: ${theme.colors.brand[600]};
181
+ color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};
178
182
  font-weight: ${theme.fontWeights.regular};
179
183
  padding: 0;
180
- font-size: 13px;
184
+ font-size: 16px;
181
185
  line-height: 1.3;
182
186
  ${(0, import_ds_system.onlySafariAndFirefox)("-webkit-text-stroke: 0.4px transparent;")}
183
187
 
184
188
  &:focus {
185
189
  font-weight: ${theme.fontWeights.regular};
186
- font-size: 13px;
187
190
  ${(0, import_ds_system.safariAndFirefoxBold)("#006AA9")}
188
191
  }
189
192
 
190
193
  ${isActive ? `
191
194
  font-weight: ${theme.fontWeights.regular};
192
- font-size: 13px;
193
195
  ${(0, import_ds_system.safariAndFirefoxBold)("#006AA9")}
194
196
  ` : ``}
195
197
 
196
198
  ${isActive && !disabled ? `
197
- font-size: 13px;
198
199
  color: ${theme.colors.brand[700]};
199
200
  line-height: 1.3;
200
201
  font-weight: ${theme.fontWeights.regular};
@@ -246,7 +247,7 @@ const StyledTabList = import_styled_components.default.div`
246
247
 
247
248
  ${({ theme, isDSMobile }) => isDSMobile ? `
248
249
 
249
- background: ${theme.colors.brand[200]};` : ``}
250
+ background: ${theme.colors.neutral["000"]};` : ``}
250
251
 
251
252
  ${mobileGradientsSettings}
252
253
 
@@ -266,7 +267,7 @@ const StyledTabList = import_styled_components.default.div`
266
267
  overflow-x: hidden;
267
268
  }`}` : ``}
268
269
 
269
- ${StyledSelectionIndicator} {
270
+ ${StyledSelectionIndicator} {
270
271
  ${({ indicatorStyle }) => `
271
272
  width: ${indicatorStyle.width};
272
273
  left: ${indicatorStyle.left};
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/tabBar/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { safariAndFirefoxBold, onlySafariAndFirefox, css } from '@elliemae/ds-system';\nimport { TabTypes } from '../../utils/constants';\nimport type { DSTabsInternalsT } from '../../sharedTypes';\n\ninterface StyledSelectionIndicatoPropsT {\n isDSMobile: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledSubTabsListPropsT {\n withCarousel: boolean;\n}\n\ninterface StyledTabButtonPropsT {\n isActive: boolean;\n disabled: boolean;\n showSeparator: boolean;\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledTabListPropsT {\n withCarousel: boolean;\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n tabType: DSTabsInternalsT.TabTypesT;\n}\ninterface StyledTabWrapperPropsT {\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n}\n\nexport const StyledSelectionIndicator = styled.div<StyledSelectionIndicatoPropsT>`\n position: absolute;\n height: 3px;\n top: ${({ tabType, isDSMobile }) => {\n if (isDSMobile) return `35px`;\n if (tabType === TabTypes.NORMAL_SMALL) return `15px`;\n return `25px`;\n }};\n margin-top: ${({ theme }) => theme.space.xxxs};\n pointer-events: none;\n transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n z-index: 10;\n ${({ isDSMobile }) =>\n isDSMobile\n ? ` \n margin-left: 0;\n margin-top: 3px;\n `\n : ``}\n`;\n\nconst mobileGradientsSettings = css<StyledTabListPropsT>`\n ${({ theme, mobileGradients, isDSMobile, fixedTabsHeaders }) => {\n if (isDSMobile && !fixedTabsHeaders) {\n if (mobileGradients.right && mobileGradients.left)\n 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%);`;\n if (mobileGradients.right)\n return `background: linear-gradient(90deg, ${theme.colors.brand[200]} 0%, ${theme.colors.brand[200]} 80%, rgba(238,238,238,0) 100%);`;\n if (mobileGradients.left)\n return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 100%);`;\n }\n return ``;\n }}\n`;\n\nexport const StyledTabWrapper = styled.div<StyledTabWrapperPropsT>`\n display: flex;\n flex: 1;\n flex-wrap: nowrap;\n ${({ fixedTabsHeaders, isDSMobile }) => (!fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;')}\n ${({ theme, isDSMobile }) => (isDSMobile ? `border-bottom: 1px solid ${theme.colors.brand[300]};` : ``)}\n`;\n\nexport const StyledTabButton = styled.button<StyledTabButtonPropsT>`\n position: relative;\n background-color: transparent;\n border: none;\n cursor: pointer;\n transition: 100ms cubic-bezier(0, 0, 0.42, 1);\n text-transform: ${({ tabType }) => (tabType === TabTypes.SUBTABS ? `capitalize` : `uppercase`)};\n letter-spacing: 0px;\n white-space: nowrap;\n padding: 2px 0;\n margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {\n if (fixedTabsHeaders) return '0px';\n if (!fixedTabsHeaders && isDSMobile) return '14px';\n return '16px';\n }};\n\n margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {\n if (fixedTabsHeaders) return '0px';\n if (!fixedTabsHeaders && isDSMobile) return '14px';\n return '16px';\n }};\n\n color: ${({ theme }) => theme.colors.neutral[700]};\n ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}\n\n ${({ tabType }) => (tabType === TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`)}\n\n ${({ theme, isActive, disabled }) =>\n isActive && !disabled\n ? `\n font-weight: ${theme.fontWeights.semibold};\n ${safariAndFirefoxBold(`#353C46`)}\n\n &:hover {\n ${safariAndFirefoxBold(`#1E79C2`)}\n }\n \n `\n : `\n \n `}\n\n ${({ theme, disabled }) =>\n disabled\n ? `\n color: ${theme.colors.neutral[500]};\n cursor: not-allowed;\n `\n : `\n &:hover {\n color: ${theme.colors.brand[600]};\n }\n `}\n\n\n ${({ theme, showSeparator, tabType }) =>\n showSeparator\n ? `\n &:not(:last-of-type):before\n {\n content: \"\";\n position: absolute;\n width: 1px;\n right: -16px;\n top: 50%;\n transform: translateY(-50%);\n height: ${tabType === TabTypes.SUBTABS ? `10px` : `16px`};\n background: ${theme.colors.neutral[400]};\n }`\n : ``}\n\n ${({ theme, isDSMobile, tabType, isActive }) =>\n !isDSMobile\n ? `\n &:focus {\n outline: none;\n &:after {\n position: absolute;\n content: '';\n top: 0;\n left: -16px;\n width: calc(100% + 32px);\n height: 100%;\n z-index: 5;\n border-radius: 2px;\n border: 2px solid ${theme.colors.brand[700]};\n }\n\n ${\n tabType !== TabTypes.SUBTABS && isActive\n ? `\n &:before {\n position: absolute;\n content: '';\n left: -16px;\n right: 0;\n top: calc(100% - 2px);\n transform: none;\n width: calc(100% + 32px);\n height: 2px;\n z-index: 10;\n background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px), white calc(100% - 16px), white calc(100% - 12px), transparent calc(100% - 12px), transparent 100%);\n }\n `\n : ``\n }\n }\n \n `\n : ``}\n\n \n \n${({ theme, isActive, disabled, isDSMobile }) =>\n isDSMobile\n ? `\n height: 40px;\n color: ${theme.colors.brand[600]};\n font-weight: ${theme.fontWeights.regular};\n padding: 0;\n font-size: 13px;\n line-height: 1.3;\n ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')} \n\n &:focus {\n font-weight: ${theme.fontWeights.regular};\n font-size: 13px;\n ${safariAndFirefoxBold('#006AA9')}\n }\n\n ${\n isActive\n ? `\n font-weight: ${theme.fontWeights.regular};\n font-size: 13px;\n ${safariAndFirefoxBold('#006AA9')}\n `\n : ``\n }\n\n ${\n isActive && !disabled\n ? `\n font-size: 13px;\n color: ${theme.colors.brand[700]};\n line-height: 1.3;\n font-weight: ${theme.fontWeights.regular};\n -webkit-font-smoothing: subpixel-antialiased; \n -webkit-text-stroke: 0.4px ${theme.colors.brand[700]};`\n : ``\n }\n\n ${\n !disabled\n ? `\n &:hover,\n &:focus {\n outline: none;\n color: ${theme.colors.brand[700]};\n ${safariAndFirefoxBold('#006AA9')}\n }`\n : ``\n }\n\n `\n : ``}\n`;\n\nexport const StyledSubTabsList = styled.div<StyledSubTabsListPropsT>`\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n width: 100%;\n ${({ withCarousel }) => (withCarousel ? 'max-width: 100%;' : '')}\n`;\n\nexport const StyledTabList = styled.div<StyledTabListPropsT>`\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n width: 100%;\n ${({ withCarousel, isDSMobile }) => (withCarousel && !isDSMobile ? `max-width: 100%;` : '')}\n\n ${({ theme, isDSMobile, tabType }) =>\n tabType !== TabTypes.NORMAL_SMALL && !isDSMobile\n ? `\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};\n pointer-events: none;\n bottom: 0px;\n }\n `\n : ``}\n\n ${StyledTabButton} {\n padding-bottom: 0;\n padding-top: 0;\n }\n\n ${({ theme, isDSMobile }) =>\n isDSMobile\n ? `\n \n background: ${theme.colors.brand[200]};`\n : ``}\n\n ${mobileGradientsSettings}\n\n\n ${({ isDSMobile, fixedTabsHeaders }) =>\n isDSMobile\n ? `\n ${\n !fixedTabsHeaders\n ? `\n z-index: 0;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: thin;\n &::-webkit-scrollbar {\n display: none;\n }`\n : `\n display: flex;\n ${StyledTabButton} {\n flex: 1;\n overflow-x: hidden;\n }`\n }`\n : ``}\n\n ${StyledSelectionIndicator} {\n ${({ indicatorStyle }) => `\n width: ${indicatorStyle.width};\n left: ${indicatorStyle.left};\n `}\n }\n\n ${StyledSelectionIndicator} {\n background: ${({ theme, indicatorStyle, isDSMobile }) =>\n !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600]};\n }\n`;\n\nexport const StyledRequiredMark = styled.span`\n color: ${({ theme }) => theme.colors.danger[900]};\n font-size: 6px;\n margin-left: 2px;\n position: absolute;\n top: 5px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { safariAndFirefoxBold, onlySafariAndFirefox, css } from '@elliemae/ds-system';\nimport { TabTypes } from '../../utils/constants';\nimport type { DSTabsInternalsT } from '../../sharedTypes';\n\ninterface StyledSelectionIndicatoPropsT {\n isDSMobile: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledSubTabsListPropsT {\n withCarousel: boolean;\n}\n\ninterface StyledTabButtonPropsT {\n isActive: boolean;\n disabled: boolean;\n showSeparator: boolean;\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledTabListPropsT {\n withCarousel: boolean;\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n tabType: DSTabsInternalsT.TabTypesT;\n}\ninterface StyledTabWrapperPropsT {\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n}\n\nexport const StyledSelectionIndicator = styled.div<StyledSelectionIndicatoPropsT>`\n position: absolute;\n height: ${({ isDSMobile }) => (isDSMobile ? '2px' : '3px')};\n top: ${({ tabType, isDSMobile }) => {\n if (isDSMobile) return `35px`;\n if (tabType === TabTypes.NORMAL_SMALL) return `15px`;\n return `25px`;\n }};\n margin-top: ${({ theme }) => theme.space.xxxs};\n pointer-events: none;\n transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n z-index: 10;\n ${({ isDSMobile }) =>\n isDSMobile\n ? ` \n margin-left: 0;\n margin-top: 3px;\n `\n : ``}\n`;\n\nconst mobileGradientsSettings = css<StyledTabListPropsT>`\n ${({ theme, mobileGradients, isDSMobile, fixedTabsHeaders }) => {\n if (isDSMobile && !fixedTabsHeaders) {\n if (mobileGradients.right && mobileGradients.left)\n return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, transparent 10%, transparent 90%, rgba(238,238,238,0) 100%);`;\n if (mobileGradients.right)\n return `background: linear-gradient(90deg, transparent 0%, transparent 90%, rgba(238,238,238,0) 100%);`;\n if (mobileGradients.left)\n return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, transparent 10%, transparent 100%);`;\n }\n return ``;\n }}\n`;\n\nexport const StyledTabWrapper = styled.div<StyledTabWrapperPropsT>`\n display: flex;\n flex: 1;\n flex-wrap: nowrap;\n ${({ fixedTabsHeaders, isDSMobile }) => (!fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;')}\n ${({ theme, isDSMobile }) => (isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``)}\n`;\n\nexport const StyledTabButton = styled.button<StyledTabButtonPropsT>`\n position: relative;\n background-color: transparent;\n border: none;\n cursor: pointer;\n transition: 100ms cubic-bezier(0, 0, 0.42, 1);\n text-transform: ${({ tabType, isDSMobile }) => {\n if (tabType === TabTypes.SUBTABS) return 'capitalize';\n return isDSMobile ? 'none' : 'uppercase';\n }};\n letter-spacing: 0px;\n white-space: nowrap;\n padding: 2px 0;\n margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {\n if (fixedTabsHeaders) return '0px';\n if (!fixedTabsHeaders && isDSMobile) return '14px';\n return '16px';\n }};\n\n margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {\n if (fixedTabsHeaders) return '0px';\n if (!fixedTabsHeaders && isDSMobile) return '14px';\n return '16px';\n }};\n\n color: ${({ theme }) => theme.colors.neutral[700]};\n ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}\n\n ${({ tabType }) => (tabType === TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`)}\n\n ${({ theme, isActive, disabled }) =>\n isActive && !disabled\n ? `\n font-weight: ${theme.fontWeights.semibold};\n ${safariAndFirefoxBold(`#353C46`)}\n\n &:hover {\n ${safariAndFirefoxBold(`#1E79C2`)}\n }\n \n `\n : `\n \n `}\n\n ${({ theme, disabled }) =>\n disabled\n ? `\n color: ${theme.colors.neutral[500]};\n cursor: not-allowed;\n `\n : `\n &:hover {\n color: ${theme.colors.brand[600]};\n }\n `}\n\n\n ${({ theme, showSeparator, tabType }) =>\n showSeparator\n ? `\n &:not(:last-of-type):before\n {\n content: \"\";\n position: absolute;\n width: 1px;\n right: -16px;\n top: 50%;\n transform: translateY(-50%);\n height: ${tabType === TabTypes.SUBTABS ? `10px` : `16px`};\n background: ${theme.colors.neutral[400]};\n }`\n : ``}\n\n ${({ theme, isDSMobile, tabType, isActive }) =>\n !isDSMobile\n ? `\n &:focus {\n outline: none;\n &:after {\n position: absolute;\n content: '';\n top: 0;\n left: -16px;\n width: calc(100% + 32px);\n height: 100%;\n z-index: 5;\n border-radius: 2px;\n border: 2px solid ${theme.colors.brand[700]};\n }\n\n ${\n tabType !== TabTypes.SUBTABS && isActive\n ? `\n &:before {\n position: absolute;\n content: '';\n left: -16px;\n right: 0;\n top: calc(100% - 2px);\n transform: none;\n width: calc(100% + 32px);\n height: 2px;\n z-index: 10;\n background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px), white calc(100% - 16px), white calc(100% - 12px), transparent calc(100% - 12px), transparent 100%);\n }\n `\n : ``\n }\n }\n \n `\n : ``}\n\n \n \n${({ theme, isActive, disabled, isDSMobile }) =>\n isDSMobile\n ? `\n height: 40px;\n color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n font-weight: ${theme.fontWeights.regular};\n padding: 0;\n font-size: 16px;\n line-height: 1.3;\n ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')} \n\n &:focus {\n font-weight: ${theme.fontWeights.regular};\n ${safariAndFirefoxBold('#006AA9')}\n }\n\n ${\n isActive\n ? `\n font-weight: ${theme.fontWeights.regular};\n ${safariAndFirefoxBold('#006AA9')}\n `\n : ``\n }\n\n ${\n isActive && !disabled\n ? `\n color: ${theme.colors.brand[700]};\n line-height: 1.3;\n font-weight: ${theme.fontWeights.regular};\n -webkit-font-smoothing: subpixel-antialiased; \n -webkit-text-stroke: 0.4px ${theme.colors.brand[700]};`\n : ``\n }\n\n ${\n !disabled\n ? `\n &:hover,\n &:focus {\n outline: none;\n color: ${theme.colors.brand[700]};\n ${safariAndFirefoxBold('#006AA9')}\n }`\n : ``\n }\n\n `\n : ``}\n`;\n\nexport const StyledSubTabsList = styled.div<StyledSubTabsListPropsT>`\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n width: 100%;\n ${({ withCarousel }) => (withCarousel ? 'max-width: 100%;' : '')}\n`;\n\nexport const StyledTabList = styled.div<StyledTabListPropsT>`\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n width: 100%;\n ${({ withCarousel, isDSMobile }) => (withCarousel && !isDSMobile ? `max-width: 100%;` : '')}\n\n ${({ theme, isDSMobile, tabType }) =>\n tabType !== TabTypes.NORMAL_SMALL && !isDSMobile\n ? `\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};\n pointer-events: none;\n bottom: 0px;\n }\n `\n : ``}\n\n ${StyledTabButton} {\n padding-bottom: 0;\n padding-top: 0;\n }\n\n ${({ theme, isDSMobile }) =>\n isDSMobile\n ? `\n \n background: ${theme.colors.neutral['000']};`\n : ``}\n\n ${mobileGradientsSettings}\n\n\n ${({ isDSMobile, fixedTabsHeaders }) =>\n isDSMobile\n ? `\n ${\n !fixedTabsHeaders\n ? `\n z-index: 0;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: thin;\n &::-webkit-scrollbar {\n display: none;\n }`\n : `\n display: flex;\n ${StyledTabButton} {\n flex: 1;\n overflow-x: hidden;\n }`\n }`\n : ``}\n\n ${StyledSelectionIndicator} {\n ${({ indicatorStyle }) => `\n width: ${indicatorStyle.width};\n left: ${indicatorStyle.left};\n `}\n }\n\n ${StyledSelectionIndicator} {\n background: ${({ theme, indicatorStyle, isDSMobile }) =>\n !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600]};\n }\n`;\n\nexport const StyledRequiredMark = styled.span`\n color: ${({ theme }) => theme.colors.danger[900]};\n font-size: 6px;\n margin-left: 2px;\n position: absolute;\n top: 5px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -4,7 +4,7 @@ import { safariAndFirefoxBold, onlySafariAndFirefox, css } from "@elliemae/ds-sy
4
4
  import { TabTypes } from "../../utils/constants";
5
5
  const StyledSelectionIndicator = styled.div`
6
6
  position: absolute;
7
- height: 3px;
7
+ height: ${({ isDSMobile }) => isDSMobile ? "2px" : "3px"};
8
8
  top: ${({ tabType, isDSMobile }) => {
9
9
  if (isDSMobile)
10
10
  return `35px`;
@@ -25,11 +25,11 @@ const mobileGradientsSettings = css`
25
25
  ${({ theme, mobileGradients, isDSMobile, fixedTabsHeaders }) => {
26
26
  if (isDSMobile && !fixedTabsHeaders) {
27
27
  if (mobileGradients.right && mobileGradients.left)
28
- 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%);`;
28
+ return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, transparent 10%, transparent 90%, rgba(238,238,238,0) 100%);`;
29
29
  if (mobileGradients.right)
30
- return `background: linear-gradient(90deg, ${theme.colors.brand[200]} 0%, ${theme.colors.brand[200]} 80%, rgba(238,238,238,0) 100%);`;
30
+ return `background: linear-gradient(90deg, transparent 0%, transparent 90%, rgba(238,238,238,0) 100%);`;
31
31
  if (mobileGradients.left)
32
- return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 100%);`;
32
+ return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, transparent 10%, transparent 100%);`;
33
33
  }
34
34
  return ``;
35
35
  }}
@@ -39,7 +39,7 @@ const StyledTabWrapper = styled.div`
39
39
  flex: 1;
40
40
  flex-wrap: nowrap;
41
41
  ${({ fixedTabsHeaders, isDSMobile }) => !fixedTabsHeaders && isDSMobile ? "" : "overflow-x: hidden;"}
42
- ${({ theme, isDSMobile }) => isDSMobile ? `border-bottom: 1px solid ${theme.colors.brand[300]};` : ``}
42
+ ${({ theme, isDSMobile }) => isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``}
43
43
  `;
44
44
  const StyledTabButton = styled.button`
45
45
  position: relative;
@@ -47,7 +47,11 @@ const StyledTabButton = styled.button`
47
47
  border: none;
48
48
  cursor: pointer;
49
49
  transition: 100ms cubic-bezier(0, 0, 0.42, 1);
50
- text-transform: ${({ tabType }) => tabType === TabTypes.SUBTABS ? `capitalize` : `uppercase`};
50
+ text-transform: ${({ tabType, isDSMobile }) => {
51
+ if (tabType === TabTypes.SUBTABS)
52
+ return "capitalize";
53
+ return isDSMobile ? "none" : "uppercase";
54
+ }};
51
55
  letter-spacing: 0px;
52
56
  white-space: nowrap;
53
57
  padding: 2px 0;
@@ -144,27 +148,24 @@ const StyledTabButton = styled.button`
144
148
 
145
149
  ${({ theme, isActive, disabled, isDSMobile }) => isDSMobile ? `
146
150
  height: 40px;
147
- color: ${theme.colors.brand[600]};
151
+ color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};
148
152
  font-weight: ${theme.fontWeights.regular};
149
153
  padding: 0;
150
- font-size: 13px;
154
+ font-size: 16px;
151
155
  line-height: 1.3;
152
156
  ${onlySafariAndFirefox("-webkit-text-stroke: 0.4px transparent;")}
153
157
 
154
158
  &:focus {
155
159
  font-weight: ${theme.fontWeights.regular};
156
- font-size: 13px;
157
160
  ${safariAndFirefoxBold("#006AA9")}
158
161
  }
159
162
 
160
163
  ${isActive ? `
161
164
  font-weight: ${theme.fontWeights.regular};
162
- font-size: 13px;
163
165
  ${safariAndFirefoxBold("#006AA9")}
164
166
  ` : ``}
165
167
 
166
168
  ${isActive && !disabled ? `
167
- font-size: 13px;
168
169
  color: ${theme.colors.brand[700]};
169
170
  line-height: 1.3;
170
171
  font-weight: ${theme.fontWeights.regular};
@@ -216,7 +217,7 @@ const StyledTabList = styled.div`
216
217
 
217
218
  ${({ theme, isDSMobile }) => isDSMobile ? `
218
219
 
219
- background: ${theme.colors.brand[200]};` : ``}
220
+ background: ${theme.colors.neutral["000"]};` : ``}
220
221
 
221
222
  ${mobileGradientsSettings}
222
223
 
@@ -236,7 +237,7 @@ const StyledTabList = styled.div`
236
237
  overflow-x: hidden;
237
238
  }`}` : ``}
238
239
 
239
- ${StyledSelectionIndicator} {
240
+ ${StyledSelectionIndicator} {
240
241
  ${({ indicatorStyle }) => `
241
242
  width: ${indicatorStyle.width};
242
243
  left: ${indicatorStyle.left};
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/styles.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { safariAndFirefoxBold, onlySafariAndFirefox, css } from '@elliemae/ds-system';\nimport { TabTypes } from '../../utils/constants';\nimport type { DSTabsInternalsT } from '../../sharedTypes';\n\ninterface StyledSelectionIndicatoPropsT {\n isDSMobile: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledSubTabsListPropsT {\n withCarousel: boolean;\n}\n\ninterface StyledTabButtonPropsT {\n isActive: boolean;\n disabled: boolean;\n showSeparator: boolean;\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledTabListPropsT {\n withCarousel: boolean;\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n tabType: DSTabsInternalsT.TabTypesT;\n}\ninterface StyledTabWrapperPropsT {\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n}\n\nexport const StyledSelectionIndicator = styled.div<StyledSelectionIndicatoPropsT>`\n position: absolute;\n height: 3px;\n top: ${({ tabType, isDSMobile }) => {\n if (isDSMobile) return `35px`;\n if (tabType === TabTypes.NORMAL_SMALL) return `15px`;\n return `25px`;\n }};\n margin-top: ${({ theme }) => theme.space.xxxs};\n pointer-events: none;\n transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n z-index: 10;\n ${({ isDSMobile }) =>\n isDSMobile\n ? ` \n margin-left: 0;\n margin-top: 3px;\n `\n : ``}\n`;\n\nconst mobileGradientsSettings = css<StyledTabListPropsT>`\n ${({ theme, mobileGradients, isDSMobile, fixedTabsHeaders }) => {\n if (isDSMobile && !fixedTabsHeaders) {\n if (mobileGradients.right && mobileGradients.left)\n 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%);`;\n if (mobileGradients.right)\n return `background: linear-gradient(90deg, ${theme.colors.brand[200]} 0%, ${theme.colors.brand[200]} 80%, rgba(238,238,238,0) 100%);`;\n if (mobileGradients.left)\n return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 100%);`;\n }\n return ``;\n }}\n`;\n\nexport const StyledTabWrapper = styled.div<StyledTabWrapperPropsT>`\n display: flex;\n flex: 1;\n flex-wrap: nowrap;\n ${({ fixedTabsHeaders, isDSMobile }) => (!fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;')}\n ${({ theme, isDSMobile }) => (isDSMobile ? `border-bottom: 1px solid ${theme.colors.brand[300]};` : ``)}\n`;\n\nexport const StyledTabButton = styled.button<StyledTabButtonPropsT>`\n position: relative;\n background-color: transparent;\n border: none;\n cursor: pointer;\n transition: 100ms cubic-bezier(0, 0, 0.42, 1);\n text-transform: ${({ tabType }) => (tabType === TabTypes.SUBTABS ? `capitalize` : `uppercase`)};\n letter-spacing: 0px;\n white-space: nowrap;\n padding: 2px 0;\n margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {\n if (fixedTabsHeaders) return '0px';\n if (!fixedTabsHeaders && isDSMobile) return '14px';\n return '16px';\n }};\n\n margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {\n if (fixedTabsHeaders) return '0px';\n if (!fixedTabsHeaders && isDSMobile) return '14px';\n return '16px';\n }};\n\n color: ${({ theme }) => theme.colors.neutral[700]};\n ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}\n\n ${({ tabType }) => (tabType === TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`)}\n\n ${({ theme, isActive, disabled }) =>\n isActive && !disabled\n ? `\n font-weight: ${theme.fontWeights.semibold};\n ${safariAndFirefoxBold(`#353C46`)}\n\n &:hover {\n ${safariAndFirefoxBold(`#1E79C2`)}\n }\n \n `\n : `\n \n `}\n\n ${({ theme, disabled }) =>\n disabled\n ? `\n color: ${theme.colors.neutral[500]};\n cursor: not-allowed;\n `\n : `\n &:hover {\n color: ${theme.colors.brand[600]};\n }\n `}\n\n\n ${({ theme, showSeparator, tabType }) =>\n showSeparator\n ? `\n &:not(:last-of-type):before\n {\n content: \"\";\n position: absolute;\n width: 1px;\n right: -16px;\n top: 50%;\n transform: translateY(-50%);\n height: ${tabType === TabTypes.SUBTABS ? `10px` : `16px`};\n background: ${theme.colors.neutral[400]};\n }`\n : ``}\n\n ${({ theme, isDSMobile, tabType, isActive }) =>\n !isDSMobile\n ? `\n &:focus {\n outline: none;\n &:after {\n position: absolute;\n content: '';\n top: 0;\n left: -16px;\n width: calc(100% + 32px);\n height: 100%;\n z-index: 5;\n border-radius: 2px;\n border: 2px solid ${theme.colors.brand[700]};\n }\n\n ${\n tabType !== TabTypes.SUBTABS && isActive\n ? `\n &:before {\n position: absolute;\n content: '';\n left: -16px;\n right: 0;\n top: calc(100% - 2px);\n transform: none;\n width: calc(100% + 32px);\n height: 2px;\n z-index: 10;\n background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px), white calc(100% - 16px), white calc(100% - 12px), transparent calc(100% - 12px), transparent 100%);\n }\n `\n : ``\n }\n }\n \n `\n : ``}\n\n \n \n${({ theme, isActive, disabled, isDSMobile }) =>\n isDSMobile\n ? `\n height: 40px;\n color: ${theme.colors.brand[600]};\n font-weight: ${theme.fontWeights.regular};\n padding: 0;\n font-size: 13px;\n line-height: 1.3;\n ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')} \n\n &:focus {\n font-weight: ${theme.fontWeights.regular};\n font-size: 13px;\n ${safariAndFirefoxBold('#006AA9')}\n }\n\n ${\n isActive\n ? `\n font-weight: ${theme.fontWeights.regular};\n font-size: 13px;\n ${safariAndFirefoxBold('#006AA9')}\n `\n : ``\n }\n\n ${\n isActive && !disabled\n ? `\n font-size: 13px;\n color: ${theme.colors.brand[700]};\n line-height: 1.3;\n font-weight: ${theme.fontWeights.regular};\n -webkit-font-smoothing: subpixel-antialiased; \n -webkit-text-stroke: 0.4px ${theme.colors.brand[700]};`\n : ``\n }\n\n ${\n !disabled\n ? `\n &:hover,\n &:focus {\n outline: none;\n color: ${theme.colors.brand[700]};\n ${safariAndFirefoxBold('#006AA9')}\n }`\n : ``\n }\n\n `\n : ``}\n`;\n\nexport const StyledSubTabsList = styled.div<StyledSubTabsListPropsT>`\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n width: 100%;\n ${({ withCarousel }) => (withCarousel ? 'max-width: 100%;' : '')}\n`;\n\nexport const StyledTabList = styled.div<StyledTabListPropsT>`\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n width: 100%;\n ${({ withCarousel, isDSMobile }) => (withCarousel && !isDSMobile ? `max-width: 100%;` : '')}\n\n ${({ theme, isDSMobile, tabType }) =>\n tabType !== TabTypes.NORMAL_SMALL && !isDSMobile\n ? `\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};\n pointer-events: none;\n bottom: 0px;\n }\n `\n : ``}\n\n ${StyledTabButton} {\n padding-bottom: 0;\n padding-top: 0;\n }\n\n ${({ theme, isDSMobile }) =>\n isDSMobile\n ? `\n \n background: ${theme.colors.brand[200]};`\n : ``}\n\n ${mobileGradientsSettings}\n\n\n ${({ isDSMobile, fixedTabsHeaders }) =>\n isDSMobile\n ? `\n ${\n !fixedTabsHeaders\n ? `\n z-index: 0;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: thin;\n &::-webkit-scrollbar {\n display: none;\n }`\n : `\n display: flex;\n ${StyledTabButton} {\n flex: 1;\n overflow-x: hidden;\n }`\n }`\n : ``}\n\n ${StyledSelectionIndicator} {\n ${({ indicatorStyle }) => `\n width: ${indicatorStyle.width};\n left: ${indicatorStyle.left};\n `}\n }\n\n ${StyledSelectionIndicator} {\n background: ${({ theme, indicatorStyle, isDSMobile }) =>\n !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600]};\n }\n`;\n\nexport const StyledRequiredMark = styled.span`\n color: ${({ theme }) => theme.colors.danger[900]};\n font-size: 6px;\n margin-left: 2px;\n position: absolute;\n top: 5px;\n`;\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { safariAndFirefoxBold, onlySafariAndFirefox, css } from '@elliemae/ds-system';\nimport { TabTypes } from '../../utils/constants';\nimport type { DSTabsInternalsT } from '../../sharedTypes';\n\ninterface StyledSelectionIndicatoPropsT {\n isDSMobile: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledSubTabsListPropsT {\n withCarousel: boolean;\n}\n\ninterface StyledTabButtonPropsT {\n isActive: boolean;\n disabled: boolean;\n showSeparator: boolean;\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledTabListPropsT {\n withCarousel: boolean;\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n tabType: DSTabsInternalsT.TabTypesT;\n}\ninterface StyledTabWrapperPropsT {\n isDSMobile: boolean;\n fixedTabsHeaders: boolean;\n}\n\nexport const StyledSelectionIndicator = styled.div<StyledSelectionIndicatoPropsT>`\n position: absolute;\n height: ${({ isDSMobile }) => (isDSMobile ? '2px' : '3px')};\n top: ${({ tabType, isDSMobile }) => {\n if (isDSMobile) return `35px`;\n if (tabType === TabTypes.NORMAL_SMALL) return `15px`;\n return `25px`;\n }};\n margin-top: ${({ theme }) => theme.space.xxxs};\n pointer-events: none;\n transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n z-index: 10;\n ${({ isDSMobile }) =>\n isDSMobile\n ? ` \n margin-left: 0;\n margin-top: 3px;\n `\n : ``}\n`;\n\nconst mobileGradientsSettings = css<StyledTabListPropsT>`\n ${({ theme, mobileGradients, isDSMobile, fixedTabsHeaders }) => {\n if (isDSMobile && !fixedTabsHeaders) {\n if (mobileGradients.right && mobileGradients.left)\n return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, transparent 10%, transparent 90%, rgba(238,238,238,0) 100%);`;\n if (mobileGradients.right)\n return `background: linear-gradient(90deg, transparent 0%, transparent 90%, rgba(238,238,238,0) 100%);`;\n if (mobileGradients.left)\n return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, transparent 10%, transparent 100%);`;\n }\n return ``;\n }}\n`;\n\nexport const StyledTabWrapper = styled.div<StyledTabWrapperPropsT>`\n display: flex;\n flex: 1;\n flex-wrap: nowrap;\n ${({ fixedTabsHeaders, isDSMobile }) => (!fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;')}\n ${({ theme, isDSMobile }) => (isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``)}\n`;\n\nexport const StyledTabButton = styled.button<StyledTabButtonPropsT>`\n position: relative;\n background-color: transparent;\n border: none;\n cursor: pointer;\n transition: 100ms cubic-bezier(0, 0, 0.42, 1);\n text-transform: ${({ tabType, isDSMobile }) => {\n if (tabType === TabTypes.SUBTABS) return 'capitalize';\n return isDSMobile ? 'none' : 'uppercase';\n }};\n letter-spacing: 0px;\n white-space: nowrap;\n padding: 2px 0;\n margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {\n if (fixedTabsHeaders) return '0px';\n if (!fixedTabsHeaders && isDSMobile) return '14px';\n return '16px';\n }};\n\n margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {\n if (fixedTabsHeaders) return '0px';\n if (!fixedTabsHeaders && isDSMobile) return '14px';\n return '16px';\n }};\n\n color: ${({ theme }) => theme.colors.neutral[700]};\n ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}\n\n ${({ tabType }) => (tabType === TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`)}\n\n ${({ theme, isActive, disabled }) =>\n isActive && !disabled\n ? `\n font-weight: ${theme.fontWeights.semibold};\n ${safariAndFirefoxBold(`#353C46`)}\n\n &:hover {\n ${safariAndFirefoxBold(`#1E79C2`)}\n }\n \n `\n : `\n \n `}\n\n ${({ theme, disabled }) =>\n disabled\n ? `\n color: ${theme.colors.neutral[500]};\n cursor: not-allowed;\n `\n : `\n &:hover {\n color: ${theme.colors.brand[600]};\n }\n `}\n\n\n ${({ theme, showSeparator, tabType }) =>\n showSeparator\n ? `\n &:not(:last-of-type):before\n {\n content: \"\";\n position: absolute;\n width: 1px;\n right: -16px;\n top: 50%;\n transform: translateY(-50%);\n height: ${tabType === TabTypes.SUBTABS ? `10px` : `16px`};\n background: ${theme.colors.neutral[400]};\n }`\n : ``}\n\n ${({ theme, isDSMobile, tabType, isActive }) =>\n !isDSMobile\n ? `\n &:focus {\n outline: none;\n &:after {\n position: absolute;\n content: '';\n top: 0;\n left: -16px;\n width: calc(100% + 32px);\n height: 100%;\n z-index: 5;\n border-radius: 2px;\n border: 2px solid ${theme.colors.brand[700]};\n }\n\n ${\n tabType !== TabTypes.SUBTABS && isActive\n ? `\n &:before {\n position: absolute;\n content: '';\n left: -16px;\n right: 0;\n top: calc(100% - 2px);\n transform: none;\n width: calc(100% + 32px);\n height: 2px;\n z-index: 10;\n background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px), white calc(100% - 16px), white calc(100% - 12px), transparent calc(100% - 12px), transparent 100%);\n }\n `\n : ``\n }\n }\n \n `\n : ``}\n\n \n \n${({ theme, isActive, disabled, isDSMobile }) =>\n isDSMobile\n ? `\n height: 40px;\n color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n font-weight: ${theme.fontWeights.regular};\n padding: 0;\n font-size: 16px;\n line-height: 1.3;\n ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')} \n\n &:focus {\n font-weight: ${theme.fontWeights.regular};\n ${safariAndFirefoxBold('#006AA9')}\n }\n\n ${\n isActive\n ? `\n font-weight: ${theme.fontWeights.regular};\n ${safariAndFirefoxBold('#006AA9')}\n `\n : ``\n }\n\n ${\n isActive && !disabled\n ? `\n color: ${theme.colors.brand[700]};\n line-height: 1.3;\n font-weight: ${theme.fontWeights.regular};\n -webkit-font-smoothing: subpixel-antialiased; \n -webkit-text-stroke: 0.4px ${theme.colors.brand[700]};`\n : ``\n }\n\n ${\n !disabled\n ? `\n &:hover,\n &:focus {\n outline: none;\n color: ${theme.colors.brand[700]};\n ${safariAndFirefoxBold('#006AA9')}\n }`\n : ``\n }\n\n `\n : ``}\n`;\n\nexport const StyledSubTabsList = styled.div<StyledSubTabsListPropsT>`\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n width: 100%;\n ${({ withCarousel }) => (withCarousel ? 'max-width: 100%;' : '')}\n`;\n\nexport const StyledTabList = styled.div<StyledTabListPropsT>`\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n width: 100%;\n ${({ withCarousel, isDSMobile }) => (withCarousel && !isDSMobile ? `max-width: 100%;` : '')}\n\n ${({ theme, isDSMobile, tabType }) =>\n tabType !== TabTypes.NORMAL_SMALL && !isDSMobile\n ? `\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};\n pointer-events: none;\n bottom: 0px;\n }\n `\n : ``}\n\n ${StyledTabButton} {\n padding-bottom: 0;\n padding-top: 0;\n }\n\n ${({ theme, isDSMobile }) =>\n isDSMobile\n ? `\n \n background: ${theme.colors.neutral['000']};`\n : ``}\n\n ${mobileGradientsSettings}\n\n\n ${({ isDSMobile, fixedTabsHeaders }) =>\n isDSMobile\n ? `\n ${\n !fixedTabsHeaders\n ? `\n z-index: 0;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: thin;\n &::-webkit-scrollbar {\n display: none;\n }`\n : `\n display: flex;\n ${StyledTabButton} {\n flex: 1;\n overflow-x: hidden;\n }`\n }`\n : ``}\n\n ${StyledSelectionIndicator} {\n ${({ indicatorStyle }) => `\n width: ${indicatorStyle.width};\n left: ${indicatorStyle.left};\n `}\n }\n\n ${StyledSelectionIndicator} {\n background: ${({ theme, indicatorStyle, isDSMobile }) =>\n !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600]};\n }\n`;\n\nexport const StyledRequiredMark = styled.span`\n color: ${({ theme }) => theme.colors.danger[900]};\n font-size: 6px;\n margin-left: 2px;\n position: absolute;\n top: 5px;\n`;\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-tabs",
3
- "version": "3.0.0-next.49",
3
+ "version": "3.0.0-next.52",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Tabs",
6
6
  "files": [
@@ -130,12 +130,19 @@
130
130
  "reportFile": "tests.xml",
131
131
  "indent": 4
132
132
  },
133
+ "scripts": {
134
+ "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
135
+ "test": "node ../../scripts/testing/test.mjs",
136
+ "lint": "node ../../scripts/lint.mjs",
137
+ "dts": "node ../../scripts/dts.mjs",
138
+ "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
139
+ },
133
140
  "dependencies": {
134
- "@elliemae/ds-button": "3.0.0-next.49",
135
- "@elliemae/ds-icon": "3.0.0-next.49",
136
- "@elliemae/ds-icons": "3.0.0-next.49",
137
- "@elliemae/ds-system": "3.0.0-next.49",
138
- "@elliemae/ds-utilities": "3.0.0-next.49",
141
+ "@elliemae/ds-button": "workspace:*",
142
+ "@elliemae/ds-icon": "workspace:*",
143
+ "@elliemae/ds-icons": "workspace:*",
144
+ "@elliemae/ds-system": "workspace:*",
145
+ "@elliemae/ds-utilities": "workspace:*",
139
146
  "@react-hook/resize-observer": "~1.2.5",
140
147
  "prop-types": "~15.8.1",
141
148
  "react-desc": "~4.1.3",
@@ -156,12 +163,5 @@
156
163
  "publishConfig": {
157
164
  "access": "public",
158
165
  "typeSafety": false
159
- },
160
- "scripts": {
161
- "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
162
- "test": "node ../../scripts/testing/test.mjs",
163
- "lint": "node ../../scripts/lint.mjs",
164
- "dts": "node ../../scripts/dts.mjs",
165
- "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
166
166
  }
167
- }
167
+ }