@elliemae/ds-mobile 3.21.0-next.6 → 3.21.0-next.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/cjs/MobileBanner/styles.js +2 -2
  2. package/dist/cjs/MobileBanner/styles.js.map +2 -2
  3. package/dist/esm/MobileBanner/styles.js +1 -1
  4. package/dist/esm/MobileBanner/styles.js.map +1 -1
  5. package/dist/types/MobileBanner/styles.d.ts +1 -1
  6. package/package.json +18 -17
package/dist/cjs/MobileBanner/styles.js CHANGED
@@ -43,7 +43,7 @@ __export(styles_exports, {
43
43
  module.exports = __toCommonJS(styles_exports);
44
44
  var React = __toESM(require("react"));
45
45
  var import_ds_system = require("@elliemae/ds-system");
46
- var import_ds_button = require("@elliemae/ds-button");
46
+ var import_ds_button_v2 = require("@elliemae/ds-button-v2");
47
47
  var import_styleHelpers = require("./utils/styleHelpers.js");
48
48
  const StyledInnerContainer = import_ds_system.styled.div`
49
49
  display: flex;
@@ -103,7 +103,7 @@ const StyledSubTitleText = import_ds_system.styled.span`
103
103
  margin-right: 16px;
104
104
  line-height: 1.1;
105
105
  `;
106
- const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2)`
106
+ const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2)`
107
107
  position: relative;
108
108
  &:focus {
109
109
  &:after {
package/dist/cjs/MobileBanner/styles.js.map CHANGED
@@ -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, xStyledCommonProps, toMobile } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\nimport type { MOBILE_BANNER_TYPES } from './utils/bannerTypes.js';\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 ${xStyledCommonProps}\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,uBAAqD;AACrD,uBAA2B;AAC3B,0BAAmD;AAsB5C,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAAA,sBAIrB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,6BAClC,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,GAAG;AAAA,eACnC,CAAC,EAAE,MAAM,UAAM,2BAAS,MAAM,UAAU,MAAM,GAAG,CAAC;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,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKzC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAIjE,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKtB,CAAC,EAAE,MAAM,UAAM,2BAAS,MAAM,UAAU,MAAM,GAAG,CAAC;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,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxD,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA,eAGxB,CAAC,EAAE,MAAM,UAAM,2BAAS,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,iBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAGzC,MAAM,4BAAwB,yBAAO,KAAK;AAAA;AAAA,YAErC,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,OAAO,UAAM,qCAAgB,aAAa,QAAQ,MAAM;AAAA,IAChF;AAAA;",
4
+ "sourcesContent": ["import { styled, xStyledCommonProps, toMobile } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\nimport type { MOBILE_BANNER_TYPES } from './utils/bannerTypes.js';\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 ${xStyledCommonProps}\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,uBAAqD;AACrD,0BAA2B;AAC3B,0BAAmD;AAsB5C,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAAA,sBAIrB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,6BAClC,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,GAAG;AAAA,eACnC,CAAC,EAAE,MAAM,UAAM,2BAAS,MAAM,UAAU,MAAM,GAAG,CAAC;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,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKzC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAIjE,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKtB,CAAC,EAAE,MAAM,UAAM,2BAAS,MAAM,UAAU,MAAM,GAAG,CAAC;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,8BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWxB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxD,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA,eAGxB,CAAC,EAAE,MAAM,UAAM,2BAAS,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,iBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAGzC,MAAM,4BAAwB,yBAAO,KAAK;AAAA;AAAA,YAErC,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,OAAO,UAAM,qCAAgB,aAAa,QAAQ,MAAM;AAAA,IAChF;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/esm/MobileBanner/styles.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { styled, xStyledCommonProps, toMobile } from "@elliemae/ds-system";
3
- import { DSButtonV2 } from "@elliemae/ds-button";
3
+ import { DSButtonV2 } from "@elliemae/ds-button-v2";
4
4
  import { handleAnimation, handleBorderColor } from "./utils/styleHelpers.js";
5
5
  const StyledInnerContainer = styled.div`
6
6
  display: flex;
package/dist/esm/MobileBanner/styles.js.map CHANGED
@@ -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, xStyledCommonProps, toMobile } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\nimport type { MOBILE_BANNER_TYPES } from './utils/bannerTypes.js';\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 ${xStyledCommonProps}\n`;\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps, toMobile } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\nimport type { MOBILE_BANNER_TYPES } from './utils/bannerTypes.js';\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 ${xStyledCommonProps}\n`;\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,oBAAoB,gBAAgB;AACrD,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB,yBAAyB;AAsB5C,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIrB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,6BAClC,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,GAAG;AAAA,eACnC,CAAC,EAAE,MAAM,MAAM,SAAS,MAAM,UAAU,MAAM,GAAG,CAAC;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,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKzC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAIjE,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKtB,CAAC,EAAE,MAAM,MAAM,SAAS,MAAM,UAAU,MAAM,GAAG,CAAC;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,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxD,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA,eAGxB,CAAC,EAAE,MAAM,MAAM,SAAS,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,iBAChD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAGzC,MAAM,wBAAwB,OAAO,KAAK;AAAA;AAAA,YAErC,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,OAAO,MAAM,gBAAgB,aAAa,QAAQ,MAAM;AAAA,IAChF;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/types/MobileBanner/styles.d.ts CHANGED
@@ -24,7 +24,7 @@ export declare const StyledIconContainer: import("styled-components").StyledComp
24
24
  export declare const StyledContent: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledContentT & import("@elliemae/ds-system").OwnerInterface, never>;
25
25
  export declare const StyledCloseButtonContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
26
26
  export declare const StyledSubTitleText: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
27
- export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button").DSButtonT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
27
+ export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
28
28
  export declare const StyledActionLink: import("styled-components").StyledComponent<"a", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
29
29
  export declare const StyledBannerContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledBannerContainerT & import("@elliemae/ds-system").OwnerInterface, never>;
30
30
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-mobile",
3
- "version": "3.21.0-next.6",
3
+ "version": "3.21.0-next.8",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - System",
6
6
  "files": [
@@ -439,22 +439,23 @@
439
439
  "prop-types": "~15.8.1",
440
440
  "react-window": "~1.8.8",
441
441
  "react-window-infinite-loader": "~1.0.8",
442
- "@elliemae/ds-accordion": "3.21.0-next.6",
443
- "@elliemae/ds-backdrop": "3.21.0-next.6",
444
- "@elliemae/ds-form": "3.21.0-next.6",
445
- "@elliemae/ds-form-checkbox": "3.21.0-next.6",
446
- "@elliemae/ds-grid": "3.21.0-next.6",
447
- "@elliemae/ds-circular-progress-indicator": "3.21.0-next.6",
448
- "@elliemae/ds-icon": "3.21.0-next.6",
449
- "@elliemae/ds-indeterminate-progress-indicator": "3.21.0-next.6",
450
- "@elliemae/ds-icons": "3.21.0-next.6",
451
- "@elliemae/ds-button": "3.21.0-next.6",
452
- "@elliemae/ds-shared": "3.21.0-next.6",
453
- "@elliemae/ds-props-helpers": "3.21.0-next.6",
454
- "@elliemae/ds-system": "3.21.0-next.6",
455
- "@elliemae/ds-tabs": "3.21.0-next.6",
456
- "@elliemae/ds-utilities": "3.21.0-next.6",
457
- "@elliemae/ds-truncated-expandable-text": "3.21.0-next.6"
442
+ "@elliemae/ds-accordion": "3.21.0-next.8",
443
+ "@elliemae/ds-backdrop": "3.21.0-next.8",
444
+ "@elliemae/ds-button": "3.21.0-next.8",
445
+ "@elliemae/ds-button-v2": "3.21.0-next.8",
446
+ "@elliemae/ds-circular-progress-indicator": "3.21.0-next.8",
447
+ "@elliemae/ds-form": "3.21.0-next.8",
448
+ "@elliemae/ds-form-checkbox": "3.21.0-next.8",
449
+ "@elliemae/ds-grid": "3.21.0-next.8",
450
+ "@elliemae/ds-icon": "3.21.0-next.8",
451
+ "@elliemae/ds-icons": "3.21.0-next.8",
452
+ "@elliemae/ds-indeterminate-progress-indicator": "3.21.0-next.8",
453
+ "@elliemae/ds-props-helpers": "3.21.0-next.8",
454
+ "@elliemae/ds-shared": "3.21.0-next.8",
455
+ "@elliemae/ds-system": "3.21.0-next.8",
456
+ "@elliemae/ds-tabs": "3.21.0-next.8",
457
+ "@elliemae/ds-truncated-expandable-text": "3.21.0-next.8",
458
+ "@elliemae/ds-utilities": "3.21.0-next.8"
458
459
  },
459
460
  "devDependencies": {
460
461
  "@elliemae/pui-theme": "~2.7.0",