@elliemae/ds-tabs 3.37.2 → 3.38.0-rc.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.
@@ -61,11 +61,11 @@ const StyledSelectionIndicator = import_ds_system.styled.div`
61
61
  const StyledMobileGradient = import_ds_system.styled.div.attrs(({ left = 0, width = 0 }) => ({
62
62
  style: { left: left - 10, maxWidth: width - left }
63
63
  }))`
64
- position: absolute;
64
+ position: fixed;
65
65
  z-index: 15;
66
66
  top: 0;
67
67
  width: calc(100% + 20px);
68
- height: calc(100% - 1px);
68
+ height: 40px;
69
69
  pointer-events: none;
70
70
 
71
71
  ${({ mobileGradients: { left, right } }) => {
@@ -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, safariAndFirefoxBold, onlySafariAndFirefox, th } from '@elliemae/ds-system';\nimport { TabTypes } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\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}\n\ninterface StyledMobileGradientPropsT {\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n left: number | undefined;\n width: number | undefined;\n}\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 z-index: 1;\n margin-top: ${({ theme }) => theme.space.xxxs};\n pointer-events: none;\n transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n\n ${({ isDSMobile }) =>\n isDSMobile\n ? ` \n margin-left: 0;\n margin-top: 3px;\n `\n : ``}\n`;\n\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n position: absolute;\n z-index: 15;\n top: 0;\n width: calc(100% + 20px);\n height: calc(100% - 1px);\n pointer-events: none;\n\n ${({ mobileGradients: { left, right } }) => {\n if (right && left)\n return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (right)\n return `background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 100%);`;\n return '';\n }};\n`;\n\n/** CSS Setters */\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 ${String(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 z-index: 0;\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 ${({ isDSMobile, fixedTabsHeaders }) =>\n isDSMobile\n ? `\n ${\n !fixedTabsHeaders\n ? `\n z-index: 0;\n overflow-x: auto;\n overflow-y: hidden;\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}px;\n left: ${indicatorStyle.left}px;\n `}\n }\n\n ${StyledSelectionIndicator} {\n background: ${(props) => {\n const { theme, indicatorStyle, isDSMobile } = props;\n return !isDSMobile\n ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color('brand-600')(\n props,\n )} 16px, ${th.color('brand-600')(props)} ${indicatorStyle.width - 16}px, transparent ${\n indicatorStyle.width - 16\n }px, transparent ${indicatorStyle.width}px )`\n : theme.colors.brand[600];\n }};\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"],
4
+ "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled, safariAndFirefoxBold, onlySafariAndFirefox, th } from '@elliemae/ds-system';\nimport { TabTypes } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\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}\n\ninterface StyledMobileGradientPropsT {\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n left: number | undefined;\n width: number | undefined;\n}\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 z-index: 1;\n margin-top: ${({ theme }) => theme.space.xxxs};\n pointer-events: none;\n transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n\n ${({ isDSMobile }) =>\n isDSMobile\n ? ` \n margin-left: 0;\n margin-top: 3px;\n `\n : ``}\n`;\n\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n position: fixed;\n z-index: 15;\n top: 0;\n width: calc(100% + 20px);\n height: 40px;\n pointer-events: none;\n\n ${({ mobileGradients: { left, right } }) => {\n if (right && left)\n return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (right)\n return `background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 100%);`;\n return '';\n }};\n`;\n\n/** CSS Setters */\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 ${String(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 z-index: 0;\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 ${({ isDSMobile, fixedTabsHeaders }) =>\n isDSMobile\n ? `\n ${\n !fixedTabsHeaders\n ? `\n z-index: 0;\n overflow-x: auto;\n overflow-y: hidden;\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}px;\n left: ${indicatorStyle.left}px;\n `}\n }\n\n ${StyledSelectionIndicator} {\n background: ${(props) => {\n const { theme, indicatorStyle, isDSMobile } = props;\n return !isDSMobile\n ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color('brand-600')(\n props,\n )} 16px, ${th.color('brand-600')(props)} ${indicatorStyle.width - 16}px, transparent ${\n indicatorStyle.width - 16\n }px, transparent ${indicatorStyle.width}px )`\n : theme.colors.brand[600];\n }};\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
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -22,11 +22,11 @@ const StyledSelectionIndicator = styled.div`
22
22
  const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }) => ({
23
23
  style: { left: left - 10, maxWidth: width - left }
24
24
  }))`
25
- position: absolute;
25
+ position: fixed;
26
26
  z-index: 15;
27
27
  top: 0;
28
28
  width: calc(100% + 20px);
29
- height: calc(100% - 1px);
29
+ height: 40px;
30
30
  pointer-events: none;
31
31
 
32
32
  ${({ mobileGradients: { left, right } }) => {
@@ -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, safariAndFirefoxBold, onlySafariAndFirefox, th } from '@elliemae/ds-system';\nimport { TabTypes } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\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}\n\ninterface StyledMobileGradientPropsT {\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n left: number | undefined;\n width: number | undefined;\n}\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 z-index: 1;\n margin-top: ${({ theme }) => theme.space.xxxs};\n pointer-events: none;\n transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n\n ${({ isDSMobile }) =>\n isDSMobile\n ? ` \n margin-left: 0;\n margin-top: 3px;\n `\n : ``}\n`;\n\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n position: absolute;\n z-index: 15;\n top: 0;\n width: calc(100% + 20px);\n height: calc(100% - 1px);\n pointer-events: none;\n\n ${({ mobileGradients: { left, right } }) => {\n if (right && left)\n return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (right)\n return `background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 100%);`;\n return '';\n }};\n`;\n\n/** CSS Setters */\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 ${String(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 z-index: 0;\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 ${({ isDSMobile, fixedTabsHeaders }) =>\n isDSMobile\n ? `\n ${\n !fixedTabsHeaders\n ? `\n z-index: 0;\n overflow-x: auto;\n overflow-y: hidden;\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}px;\n left: ${indicatorStyle.left}px;\n `}\n }\n\n ${StyledSelectionIndicator} {\n background: ${(props) => {\n const { theme, indicatorStyle, isDSMobile } = props;\n return !isDSMobile\n ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color('brand-600')(\n props,\n )} 16px, ${th.color('brand-600')(props)} ${indicatorStyle.width - 16}px, transparent ${\n indicatorStyle.width - 16\n }px, transparent ${indicatorStyle.width}px )`\n : theme.colors.brand[600];\n }};\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"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled, safariAndFirefoxBold, onlySafariAndFirefox, th } from '@elliemae/ds-system';\nimport { TabTypes } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\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}\n\ninterface StyledMobileGradientPropsT {\n mobileGradients: DSTabsInternalsT.MobileGradientsT;\n left: number | undefined;\n width: number | undefined;\n}\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 z-index: 1;\n margin-top: ${({ theme }) => theme.space.xxxs};\n pointer-events: none;\n transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n\n ${({ isDSMobile }) =>\n isDSMobile\n ? ` \n margin-left: 0;\n margin-top: 3px;\n `\n : ``}\n`;\n\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n position: fixed;\n z-index: 15;\n top: 0;\n width: calc(100% + 20px);\n height: 40px;\n pointer-events: none;\n\n ${({ mobileGradients: { left, right } }) => {\n if (right && left)\n return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (right)\n return `background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 100%);`;\n return '';\n }};\n`;\n\n/** CSS Setters */\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 ${String(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 z-index: 0;\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 ${({ isDSMobile, fixedTabsHeaders }) =>\n isDSMobile\n ? `\n ${\n !fixedTabsHeaders\n ? `\n z-index: 0;\n overflow-x: auto;\n overflow-y: hidden;\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}px;\n left: ${indicatorStyle.left}px;\n `}\n }\n\n ${StyledSelectionIndicator} {\n background: ${(props) => {\n const { theme, indicatorStyle, isDSMobile } = props;\n return !isDSMobile\n ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color('brand-600')(\n props,\n )} 16px, ${th.color('brand-600')(props)} ${indicatorStyle.width - 16}px, transparent ${\n indicatorStyle.width - 16\n }px, transparent ${indicatorStyle.width}px )`\n : theme.colors.brand[600];\n }};\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
5
  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,QAAQ,sBAAsB,sBAAsB,UAAU;AACvE,SAAS,gBAAgB;AA0ClB,MAAM,2BAA2B,OAAO;AAAA;AAAA,YAEnC,CAAC,EAAE,WAAW,MAAO,aAAa,QAAQ,KAAM;AAAA,SACnD,CAAC,EAAE,SAAS,WAAW,MAAM;AAClC,MAAI,WAAY,QAAO;AACvB,MAAI,YAAY,SAAS,aAAc,QAAO;AAC9C,SAAO;AACT,CAAC;AAAA;AAAA,gBAEa,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA,IAI3C,CAAC,EAAE,WAAW,MACd,aACI;AAAA;AAAA;AAAA,MAIA,EAAE;AAAA;AAGH,MAAM,uBAAuB,OAAO,IAAI,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,EAAE,OAAmC;AAAA,EAC7G,OAAO,EAAE,MAAM,OAAO,IAAI,UAAU,QAAQ,KAAK;AACnD,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQE,CAAC,EAAE,iBAAiB,EAAE,MAAM,MAAM,EAAE,MAAM;AAC1C,MAAI,SAAS;AACX,WAAO;AACT,MAAI;AACF,WAAO;AACT,MAAI,KAAM,QAAO;AACjB,SAAO;AACT,CAAC;AAAA;AAKI,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,EAAE,kBAAkB,WAAW,MAAO,CAAC,oBAAoB,aAAa,KAAK,qBAAsB;AAAA,IACpG,CAAC,EAAE,OAAO,WAAW,MAAO,aAAa,4BAA4B,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA;AAGpG,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMlB,CAAC,EAAE,SAAS,WAAW,MAAM;AAC7C,MAAI,YAAY,SAAS,QAAS,QAAO;AACzC,SAAO,aAAa,SAAS;AAC/B,CAAC;AAAA;AAAA;AAAA;AAAA,kBAIe,CAAC,EAAE,kBAAkB,WAAW,MAAM;AACpD,MAAI,iBAAkB,QAAO;AAC7B,MAAI,CAAC,oBAAoB,WAAY,QAAO;AAC5C,SAAO;AACT,CAAC;AAAA;AAAA,iBAEc,CAAC,EAAE,kBAAkB,WAAW,MAAM;AACnD,MAAI,iBAAkB,QAAO;AAC7B,MAAI,CAAC,oBAAoB,WAAY,QAAO;AAC5C,SAAO;AACT,CAAC;AAAA;AAAA,WAEQ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,IAC/C,qBAAqB,yCAAyC,CAAC;AAAA;AAAA,IAE/D,CAAC,EAAE,QAAQ,MAAO,YAAY,SAAS,SAAS,kBAAkB,eAAgB;AAAA;AAAA,IAElF,CAAC,EAAE,OAAO,UAAU,SAAS,MAC7B,YAAY,CAAC,WACT;AAAA,0BACkB,MAAM,YAAY,QAAQ;AAAA,YACxC,qBAAqB,SAAS,CAAC;AAAA;AAAA;AAAA,cAG7B,qBAAqB,SAAS,CAAC;AAAA;AAAA;AAAA,YAIrC;AAAA;AAAA,OAED;AAAA;AAAA,IAEH,CAAC,EAAE,OAAO,SAAS,MACnB,WACI;AAAA,mBACW,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,YAGpC;AAAA;AAAA,iBAES,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,WAE7B;AAAA;AAAA;AAAA,IAGP,CAAC,EAAE,OAAO,eAAe,QAAQ,MACjC,gBACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASgB,YAAY,SAAS,UAAU,SAAS,MAAM;AAAA,4BAC1C,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,iBAE7C,EAAE;AAAA;AAAA,IAEN,CAAC,EAAE,OAAO,YAAY,SAAS,SAAS,MACxC,CAAC,aACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYkB,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,MAI3C,YAAY,SAAS,WAAW,WAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAcA,EACN;AAAA;AAAA;AAAA,MAII,EAAE;AAAA;AAAA;AAAA;AAAA,EAIR,CAAC,EAAE,OAAO,UAAU,UAAU,WAAW,MACvC,aACI;AAAA;AAAA,aAEK,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,mBAC1D,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA,MAItC,OAAO,qBAAqB,yCAAyC,CAAC,CAAC;AAAA;AAAA;AAAA,qBAGxD,MAAM,YAAY,OAAO;AAAA,QACtC,qBAAqB,SAAS,CAAC;AAAA;AAAA;AAAA,MAIjC,WACI;AAAA,uBACa,MAAM,YAAY,OAAO;AAAA,UACtC,qBAAqB,SAAS,CAAC;AAAA,YAE/B,EACN;AAAA;AAAA,MAGE,YAAY,CAAC,WACT;AAAA,kBACQ,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,uBAElB,MAAM,YAAY,OAAO;AAAA;AAAA,qCAEX,MAAM,OAAO,MAAM,GAAG,CAAC,MAClD,EACN;AAAA;AAAA,MAGE,CAAC,WACG;AAAA;AAAA;AAAA;AAAA,mBAIS,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,YAC9B,qBAAqB,SAAS,CAAC;AAAA,aAEjC,EACN;AAAA;AAAA,QAGI,EAAE;AAAA;AAGH,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMpC,CAAC,EAAE,aAAa,MAAO,eAAe,qBAAqB,EAAG;AAAA;AAG3D,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhC,CAAC,EAAE,cAAc,WAAW,MAAO,gBAAgB,CAAC,aAAa,qBAAqB,EAAG;AAAA;AAAA,IAEzF,CAAC,EAAE,OAAO,YAAY,QAAQ,MAC9B,YAAY,SAAS,gBAAgB,CAAC,aAClC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAM0B,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,MAKnD,EAAE;AAAA;AAAA,IAEN,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,IAKf,CAAC,EAAE,OAAO,WAAW,MACrB,aACI;AAAA;AAAA,uBAEe,MAAM,OAAO,QAAQ,KAAK,CAAC,MAC1C,EAAE;AAAA;AAAA,IAEN,CAAC,EAAE,YAAY,iBAAiB,MAChC,aACI;AAAA,QAEA,CAAC,mBACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOA;AAAA;AAAA,UAEF,eAAe;AAAA;AAAA;AAAA,UAInB,KACE,EAAE;AAAA;AAAA,IAEN,wBAAwB;AAAA,MACtB,CAAC,EAAE,eAAe,MAAM;AAAA,eACf,eAAe,KAAK;AAAA,cACrB,eAAe,IAAI;AAAA,OAC1B;AAAA;AAAA;AAAA,IAGH,wBAAwB;AAAA,kBACV,CAAC,UAAU;AACvB,QAAM,EAAE,OAAO,gBAAgB,WAAW,IAAI;AAC9C,SAAO,CAAC,aACJ,gEAAgE,GAAG,MAAM,WAAW;AAAA,IAClF;AAAA,EACF,CAAC,UAAU,GAAG,MAAM,WAAW,EAAE,KAAK,CAAC,IAAI,eAAe,QAAQ,EAAE,mBAClE,eAAe,QAAQ,EACzB,mBAAmB,eAAe,KAAK,SACvC,MAAM,OAAO,MAAM,GAAG;AAC5B,CAAC;AAAA;AAAA;AAIE,MAAM,qBAAqB,OAAO;AAAA,WAC9B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-tabs",
3
- "version": "3.37.2",
3
+ "version": "3.38.0-rc.0",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Tabs",
6
6
  "files": [
@@ -134,16 +134,16 @@
134
134
  "dependencies": {
135
135
  "@react-hook/resize-observer": "~1.2.6",
136
136
  "react-swipeable-views": "~0.14.0",
137
- "@elliemae/ds-button-v2": "3.37.2",
138
- "@elliemae/ds-icon": "3.37.2",
139
- "@elliemae/ds-props-helpers": "3.37.2",
140
- "@elliemae/ds-system": "3.37.2",
141
- "@elliemae/ds-icons": "3.37.2"
137
+ "@elliemae/ds-button-v2": "3.38.0-rc.0",
138
+ "@elliemae/ds-icon": "3.38.0-rc.0",
139
+ "@elliemae/ds-icons": "3.38.0-rc.0",
140
+ "@elliemae/ds-system": "3.38.0-rc.0",
141
+ "@elliemae/ds-props-helpers": "3.38.0-rc.0"
142
142
  },
143
143
  "devDependencies": {
144
144
  "@elliemae/pui-cli": "9.0.0-next.50",
145
145
  "styled-components": "~5.3.9",
146
- "@elliemae/ds-monorepo-devops": "3.37.2"
146
+ "@elliemae/ds-monorepo-devops": "3.38.0-rc.0"
147
147
  },
148
148
  "peerDependencies": {
149
149
  "lodash": "^4.17.21",