@elliemae/ds-mobile 3.12.0-next.0 → 3.12.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.
@@ -124,7 +124,7 @@ const StyledActionLink = import_ds_system.styled.a`
124
124
  font-weight: ${({ theme }) => theme.fontWeights.regular};
125
125
  color: ${({ theme }) => theme.colors.brand[600]};
126
126
  `;
127
- const StyledBannerContainer = import_ds_system.styled.div`
127
+ const StyledBannerContainer = (0, import_ds_system.styled)(import_ds_system.XStyledWrapper)`
128
128
  overflow: hidden;
129
129
  height: ${({ isOpen }) => isOpen ? "auto" : "0px"};
130
130
  ${({ isAnimating, isOpen, height }) => (0, import_styleHelpers.handleAnimation)(isAnimating, isOpen, height)};
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/MobileBanner/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { toMobile } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\nimport { MOBILE_BANNER_TYPES } from './utils/bannerTypes';\n\ntype MobileBannerTypesT = typeof MOBILE_BANNER_TYPES[keyof typeof MOBILE_BANNER_TYPES];\n\ninterface StyledBannerContainerT {\n type: MobileBannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n height: number;\n}\n\ninterface StyledInnerContainerT {\n type: MobileBannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n ref: React.MutableRefObject<HTMLDivElement>;\n}\n\ninterface StyledContentT {\n showCloseButton: boolean;\n}\nexport const StyledInnerContainer = styled.div<StyledInnerContainerT>`\n display: flex;\n min-height: 60px;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n border-bottom: 4px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n padding: 8px 8px 8px 16px;\n`;\n\nexport const StyledTextContent = styled.div`\n width: 100%;\n`;\n\nexport const StyledTitle = styled.div`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[700])};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n margin-bottom: ${({ theme }) => theme.space.xxxs};\n @media not all and (min-resolution: 0.001dpcm) {\n @media {\n -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n }\n }\n @media screen and (min--moz-device-pixel-ratio: 0) {\n -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n }\n`;\n\nexport const StyledSubTitle = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n\n & > * {\n margin-top: 4px;\n }\n`;\n\nexport const StyledIconContainer = styled.div`\n margin-right: ${({ theme }) => theme.space.xxs};\n`;\n\nexport const StyledContent = styled.div<StyledContentT>`\n width: 100%;\n display: flex;\n flex-direction: column;\n margin-right: ${({ showCloseButton }) => (!showCloseButton ? '28px' : '0')};\n`;\n\nexport const StyledCloseButtonContainer = styled.div`\n display: flex;\n align-items: flex-start;\n`;\n\nexport const StyledSubTitleText = styled.span`\n margin-right: 16px;\n line-height: 1.1;\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2)`\n position: relative;\n &:focus {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n border-radius: 2px;\n pointer-events: none;\n }\n }\n`;\n\nexport const StyledActionLink = styled.a`\n text-decoration: none;\n line-height: 1.1;\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledBannerContainer = styled.div<StyledBannerContainerT>`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,IAAAA,oBAAyB;AACzB,uBAA2B;AAC3B,0BAAmD;AAsB5C,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAAA,sBAIrB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,MAAM,UAAM,uCAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,OAAO,MAAO,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,OAAO,UAAM,qCAAgB,aAAa,MAAM;AAAA;AAAA;AAI7D,MAAM,oBAAoB,wBAAO;AAAA;AAAA;AAIjC,MAAM,cAAc,wBAAO;AAAA,WACvB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,MAAM,UAAM,4BAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,mCAIX,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKtC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI9D,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKtB,CAAC,EAAE,MAAM,UAAM,4BAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,sBAAsB,wBAAO;AAAA,kBACxB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAGtC,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA,kBAIlB,CAAC,EAAE,gBAAgB,MAAO,CAAC,kBAAkB,SAAS;AAAA;AAGjE,MAAM,6BAA6B,wBAAO;AAAA;AAAA;AAAA;AAK1C,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAKlC,MAAM,wBAAoB,yBAAO,2BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWxB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA,eAGxB,CAAC,EAAE,MAAM,UAAM,4BAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAGtC,MAAM,wBAAwB,wBAAO;AAAA;AAAA,YAEhC,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,OAAO,UAAM,qCAAgB,aAAa,QAAQ,MAAM;AAAA;",
4
+ "sourcesContent": ["import { styled, XStyledWrapper } from '@elliemae/ds-system';\nimport { toMobile } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\nimport { MOBILE_BANNER_TYPES } from './utils/bannerTypes';\n\ntype MobileBannerTypesT = typeof MOBILE_BANNER_TYPES[keyof typeof MOBILE_BANNER_TYPES];\n\ninterface StyledBannerContainerT {\n type: MobileBannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n height: number;\n}\n\ninterface StyledInnerContainerT {\n type: MobileBannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n ref: React.MutableRefObject<HTMLDivElement>;\n}\n\ninterface StyledContentT {\n showCloseButton: boolean;\n}\nexport const StyledInnerContainer = styled.div<StyledInnerContainerT>`\n display: flex;\n min-height: 60px;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n border-bottom: 4px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n padding: 8px 8px 8px 16px;\n`;\n\nexport const StyledTextContent = styled.div`\n width: 100%;\n`;\n\nexport const StyledTitle = styled.div`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[700])};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n margin-bottom: ${({ theme }) => theme.space.xxxs};\n @media not all and (min-resolution: 0.001dpcm) {\n @media {\n -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n }\n }\n @media screen and (min--moz-device-pixel-ratio: 0) {\n -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n }\n`;\n\nexport const StyledSubTitle = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n\n & > * {\n margin-top: 4px;\n }\n`;\n\nexport const StyledIconContainer = styled.div`\n margin-right: ${({ theme }) => theme.space.xxs};\n`;\n\nexport const StyledContent = styled.div<StyledContentT>`\n width: 100%;\n display: flex;\n flex-direction: column;\n margin-right: ${({ showCloseButton }) => (!showCloseButton ? '28px' : '0')};\n`;\n\nexport const StyledCloseButtonContainer = styled.div`\n display: flex;\n align-items: flex-start;\n`;\n\nexport const StyledSubTitleText = styled.span`\n margin-right: 16px;\n line-height: 1.1;\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2)`\n position: relative;\n &:focus {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n border-radius: 2px;\n pointer-events: none;\n }\n }\n`;\n\nexport const StyledActionLink = styled.a`\n text-decoration: none;\n line-height: 1.1;\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledBannerContainer = styled(XStyledWrapper)<StyledBannerContainerT>`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuC;AACvC,IAAAA,oBAAyB;AACzB,uBAA2B;AAC3B,0BAAmD;AAsB5C,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAAA,sBAIrB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,MAAM,UAAM,uCAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,OAAO,MAAO,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,OAAO,UAAM,qCAAgB,aAAa,MAAM;AAAA;AAAA;AAI7D,MAAM,oBAAoB,wBAAO;AAAA;AAAA;AAIjC,MAAM,cAAc,wBAAO;AAAA,WACvB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,MAAM,UAAM,4BAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,mCAIX,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKtC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI9D,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKtB,CAAC,EAAE,MAAM,UAAM,4BAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,sBAAsB,wBAAO;AAAA,kBACxB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAGtC,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA,kBAIlB,CAAC,EAAE,gBAAgB,MAAO,CAAC,kBAAkB,SAAS;AAAA;AAGjE,MAAM,6BAA6B,wBAAO;AAAA;AAAA;AAAA;AAK1C,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAKlC,MAAM,wBAAoB,yBAAO,2BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWxB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA,eAGxB,CAAC,EAAE,MAAM,UAAM,4BAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAGtC,MAAM,4BAAwB,yBAAO,+BAAc;AAAA;AAAA,YAE9C,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,OAAO,UAAM,qCAAgB,aAAa,QAAQ,MAAM;AAAA;",
6
6
  "names": ["import_ds_system"]
7
7
  }
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { styled } from "@elliemae/ds-system";
2
+ import { styled, XStyledWrapper } from "@elliemae/ds-system";
3
3
  import { toMobile } from "@elliemae/ds-system";
4
4
  import { DSButtonV2 } from "@elliemae/ds-button";
5
5
  import { handleAnimation, handleBorderColor } from "./utils/styleHelpers";
@@ -85,7 +85,7 @@ const StyledActionLink = styled.a`
85
85
  font-weight: ${({ theme }) => theme.fontWeights.regular};
86
86
  color: ${({ theme }) => theme.colors.brand[600]};
87
87
  `;
88
- const StyledBannerContainer = styled.div`
88
+ const StyledBannerContainer = styled(XStyledWrapper)`
89
89
  overflow: hidden;
90
90
  height: ${({ isOpen }) => isOpen ? "auto" : "0px"};
91
91
  ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileBanner/styles.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { toMobile } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\nimport { MOBILE_BANNER_TYPES } from './utils/bannerTypes';\n\ntype MobileBannerTypesT = typeof MOBILE_BANNER_TYPES[keyof typeof MOBILE_BANNER_TYPES];\n\ninterface StyledBannerContainerT {\n type: MobileBannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n height: number;\n}\n\ninterface StyledInnerContainerT {\n type: MobileBannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n ref: React.MutableRefObject<HTMLDivElement>;\n}\n\ninterface StyledContentT {\n showCloseButton: boolean;\n}\nexport const StyledInnerContainer = styled.div<StyledInnerContainerT>`\n display: flex;\n min-height: 60px;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n border-bottom: 4px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n padding: 8px 8px 8px 16px;\n`;\n\nexport const StyledTextContent = styled.div`\n width: 100%;\n`;\n\nexport const StyledTitle = styled.div`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[700])};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n margin-bottom: ${({ theme }) => theme.space.xxxs};\n @media not all and (min-resolution: 0.001dpcm) {\n @media {\n -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n }\n }\n @media screen and (min--moz-device-pixel-ratio: 0) {\n -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n }\n`;\n\nexport const StyledSubTitle = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n\n & > * {\n margin-top: 4px;\n }\n`;\n\nexport const StyledIconContainer = styled.div`\n margin-right: ${({ theme }) => theme.space.xxs};\n`;\n\nexport const StyledContent = styled.div<StyledContentT>`\n width: 100%;\n display: flex;\n flex-direction: column;\n margin-right: ${({ showCloseButton }) => (!showCloseButton ? '28px' : '0')};\n`;\n\nexport const StyledCloseButtonContainer = styled.div`\n display: flex;\n align-items: flex-start;\n`;\n\nexport const StyledSubTitleText = styled.span`\n margin-right: 16px;\n line-height: 1.1;\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2)`\n position: relative;\n &:focus {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n border-radius: 2px;\n pointer-events: none;\n }\n }\n`;\n\nexport const StyledActionLink = styled.a`\n text-decoration: none;\n line-height: 1.1;\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledBannerContainer = styled.div<StyledBannerContainerT>`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB,yBAAyB;AAsB5C,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIrB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,kBAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,OAAO,MAAO,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,OAAO,MAAM,gBAAgB,aAAa,MAAM;AAAA;AAAA;AAI7D,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAIjC,MAAM,cAAc,OAAO;AAAA,WACvB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,MAAM,MAAM,SAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,mCAIX,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKtC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI9D,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKtB,CAAC,EAAE,MAAM,MAAM,SAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,sBAAsB,OAAO;AAAA,kBACxB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAGtC,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA,kBAIlB,CAAC,EAAE,gBAAgB,MAAO,CAAC,kBAAkB,SAAS;AAAA;AAGjE,MAAM,6BAA6B,OAAO;AAAA;AAAA;AAAA;AAK1C,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAKlC,MAAM,oBAAoB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWxB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA,eAGxB,CAAC,EAAE,MAAM,MAAM,SAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAGtC,MAAM,wBAAwB,OAAO;AAAA;AAAA,YAEhC,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,OAAO,MAAM,gBAAgB,aAAa,QAAQ,MAAM;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, XStyledWrapper } from '@elliemae/ds-system';\nimport { toMobile } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\nimport { MOBILE_BANNER_TYPES } from './utils/bannerTypes';\n\ntype MobileBannerTypesT = typeof MOBILE_BANNER_TYPES[keyof typeof MOBILE_BANNER_TYPES];\n\ninterface StyledBannerContainerT {\n type: MobileBannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n height: number;\n}\n\ninterface StyledInnerContainerT {\n type: MobileBannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n ref: React.MutableRefObject<HTMLDivElement>;\n}\n\ninterface StyledContentT {\n showCloseButton: boolean;\n}\nexport const StyledInnerContainer = styled.div<StyledInnerContainerT>`\n display: flex;\n min-height: 60px;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n border-bottom: 4px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n padding: 8px 8px 8px 16px;\n`;\n\nexport const StyledTextContent = styled.div`\n width: 100%;\n`;\n\nexport const StyledTitle = styled.div`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[700])};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n margin-bottom: ${({ theme }) => theme.space.xxxs};\n @media not all and (min-resolution: 0.001dpcm) {\n @media {\n -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n }\n }\n @media screen and (min--moz-device-pixel-ratio: 0) {\n -webkit-font-smoothing: subpixel-antialiased; // fix safari bold render\n -webkit-text-stroke: 0.4px ${({ theme }) => theme.colors.neutral[700]}; // fix safari bold render\n }\n`;\n\nexport const StyledSubTitle = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n\n & > * {\n margin-top: 4px;\n }\n`;\n\nexport const StyledIconContainer = styled.div`\n margin-right: ${({ theme }) => theme.space.xxs};\n`;\n\nexport const StyledContent = styled.div<StyledContentT>`\n width: 100%;\n display: flex;\n flex-direction: column;\n margin-right: ${({ showCloseButton }) => (!showCloseButton ? '28px' : '0')};\n`;\n\nexport const StyledCloseButtonContainer = styled.div`\n display: flex;\n align-items: flex-start;\n`;\n\nexport const StyledSubTitleText = styled.span`\n margin-right: 16px;\n line-height: 1.1;\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2)`\n position: relative;\n &:focus {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n border-radius: 2px;\n pointer-events: none;\n }\n }\n`;\n\nexport const StyledActionLink = styled.a`\n text-decoration: none;\n line-height: 1.1;\n font-size: ${({ theme }) => toMobile(theme.fontSizes.title[600])};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledBannerContainer = styled(XStyledWrapper)<StyledBannerContainerT>`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,sBAAsB;AACvC,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB,yBAAyB;AAsB5C,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIrB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,kBAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,OAAO,MAAO,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,OAAO,MAAM,gBAAgB,aAAa,MAAM;AAAA;AAAA;AAI7D,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAIjC,MAAM,cAAc,OAAO;AAAA,WACvB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,MAAM,MAAM,SAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,mBAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,mCAIX,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKtC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI9D,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKtB,CAAC,EAAE,MAAM,MAAM,SAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,sBAAsB,OAAO;AAAA,kBACxB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAGtC,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA,kBAIlB,CAAC,EAAE,gBAAgB,MAAO,CAAC,kBAAkB,SAAS;AAAA;AAGjE,MAAM,6BAA6B,OAAO;AAAA;AAAA;AAAA;AAK1C,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAKlC,MAAM,oBAAoB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWxB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA,eAGxB,CAAC,EAAE,MAAM,MAAM,SAAS,MAAM,UAAU,MAAM,IAAI;AAAA,iBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAGtC,MAAM,wBAAwB,OAAO,cAAc;AAAA;AAAA,YAE9C,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,OAAO,MAAM,gBAAgB,aAAa,QAAQ,MAAM;AAAA;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-mobile",
3
- "version": "3.12.0-next.0",
3
+ "version": "3.12.0-rc.0",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - System",
6
6
  "files": [
@@ -435,21 +435,21 @@
435
435
  "typeSafety": false
436
436
  },
437
437
  "dependencies": {
438
- "@elliemae/ds-accordion": "3.12.0-next.0",
439
- "@elliemae/ds-backdrop": "3.12.0-next.0",
440
- "@elliemae/ds-button": "3.12.0-next.0",
441
- "@elliemae/ds-circular-progress-indicator": "3.12.0-next.0",
442
- "@elliemae/ds-form": "3.12.0-next.0",
443
- "@elliemae/ds-form-checkbox": "3.12.0-next.0",
444
- "@elliemae/ds-grid": "3.12.0-next.0",
445
- "@elliemae/ds-icon": "3.12.0-next.0",
446
- "@elliemae/ds-icons": "3.12.0-next.0",
447
- "@elliemae/ds-indeterminate-progress-indicator": "3.12.0-next.0",
448
- "@elliemae/ds-shared": "3.12.0-next.0",
449
- "@elliemae/ds-system": "3.12.0-next.0",
450
- "@elliemae/ds-tabs": "3.12.0-next.0",
451
- "@elliemae/ds-truncated-expandable-text": "3.12.0-next.0",
452
- "@elliemae/ds-utilities": "3.12.0-next.0",
438
+ "@elliemae/ds-accordion": "3.12.0-rc.0",
439
+ "@elliemae/ds-backdrop": "3.12.0-rc.0",
440
+ "@elliemae/ds-button": "3.12.0-rc.0",
441
+ "@elliemae/ds-circular-progress-indicator": "3.12.0-rc.0",
442
+ "@elliemae/ds-form": "3.12.0-rc.0",
443
+ "@elliemae/ds-form-checkbox": "3.12.0-rc.0",
444
+ "@elliemae/ds-grid": "3.12.0-rc.0",
445
+ "@elliemae/ds-icon": "3.12.0-rc.0",
446
+ "@elliemae/ds-icons": "3.12.0-rc.0",
447
+ "@elliemae/ds-indeterminate-progress-indicator": "3.12.0-rc.0",
448
+ "@elliemae/ds-shared": "3.12.0-rc.0",
449
+ "@elliemae/ds-system": "3.12.0-rc.0",
450
+ "@elliemae/ds-tabs": "3.12.0-rc.0",
451
+ "@elliemae/ds-truncated-expandable-text": "3.12.0-rc.0",
452
+ "@elliemae/ds-utilities": "3.12.0-rc.0",
453
453
  "polished": "~3.6.7",
454
454
  "prop-types": "~15.8.1",
455
455
  "react-window": "~1.8.7",