@elliemae/ds-banner 3.18.0-next.0 → 3.18.0-next.2

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.
@@ -77,7 +77,7 @@ const StyledTitle = (0, import_ds_system.styled)("div", { name: import_exported_
77
77
  color: ${({ theme }) => theme.colors.neutral[700]};
78
78
  font-size: ${({ theme }) => theme.fontSizes.label[400]};
79
79
  font-weight: ${({ theme }) => theme.fontWeights.semibold};
80
- margin-top: ${({ height }) => height > 41 ? "8px" : "1px"};
80
+ margin-top: ${({ height }) => height > 41 ? "8px" : "2px"};
81
81
  font-size: 14px;
82
82
  overflow-wrap: break-word;
83
83
  white-space: pre-wrap;
@@ -87,7 +87,7 @@ const StyledSubTitle = (0, import_ds_system.styled)("div", { name: import_export
87
87
  margin-left: ${({ theme }) => theme.space.xs};
88
88
  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};
89
89
  font-weight: ${({ theme }) => theme.fontWeights.regular};
90
- margin-top: ${({ height }) => height > 41 ? "8px" : "1px"};
90
+ margin-top: ${({ height }) => height > 41 ? "8px" : "3px"};
91
91
  font-size: 14px;
92
92
  overflow-wrap: break-word;
93
93
  white-space: pre-wrap;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { SizingProps, LayoutProps, SpaceProps, ColorProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\nimport { DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\nimport { Grid } from '@elliemae/ds-grid';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n isOpen: boolean;\n isAnimating: boolean;\n height: number;\n}\n\ninterface StyledInnerContainerT {\n type: DSBannerInternalsT.BannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n}\n\ninterface StyledIconContainerT {\n height: number;\n}\n\ninterface StyledTitleT {\n height: number;\n}\n\ninterface StyledSubTitleT {\n height: number;\n}\n\ninterface StyledActionLinkT {\n isBodyEmpty: boolean;\n}\n\ninterface StyledCloseButtonT {\n height: number;\n}\n\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n ${xStyledCommonProps}\n`;\n\nexport const StyledInnerContainer = styled(Grid, {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n padding-right: 4px;\n min-height: 41px;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n`;\n\nexport const StyledIconContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.ICON_CONTAINER,\n})<StyledIconContainerT>`\n margin-top: ${({ height }) => (height > 41 ? '6px' : '2px')};\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n min-width: 0px;\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.TITLE })<StyledTitleT>`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => theme.fontSizes.label[400]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n margin-top: ${({ height }) => (height > 41 ? '8px' : '1px')};\n font-size: 14px;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })<StyledSubTitleT>`\n margin-left: ${({ theme }) => theme.space.xs};\n font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n margin-top: ${({ height }) => (height > 41 ? '8px' : '1px')};\n font-size: 14px;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n`;\n\nexport const StyledActionLink = styled('a', { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })<StyledActionLinkT>`\n margin-left: ${({ theme, isBodyEmpty }) => (!isBodyEmpty ? theme.space.xs : 0)};\n text-decoration: none;\n font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 2px;\n min-width: 0px;\n &:focus {\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n name: DSBannerName,\n slot: DSBannerSlots.CLOSE_BUTTON,\n})<StyledCloseButtonT>`\n margin-left: ${({ theme }) => theme.space.xxs};\n margin-top: ${({ height }) => (height > 41 ? '5px' : '2px')};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { SizingProps, LayoutProps, SpaceProps, ColorProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\nimport { DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\nimport { Grid } from '@elliemae/ds-grid';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n isOpen: boolean;\n isAnimating: boolean;\n height: number;\n}\n\ninterface StyledInnerContainerT {\n type: DSBannerInternalsT.BannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n}\n\ninterface StyledIconContainerT {\n height: number;\n}\n\ninterface StyledTitleT {\n height: number;\n}\n\ninterface StyledSubTitleT {\n height: number;\n}\n\ninterface StyledActionLinkT {\n isBodyEmpty: boolean;\n}\n\ninterface StyledCloseButtonT {\n height: number;\n}\n\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n ${xStyledCommonProps}\n`;\n\nexport const StyledInnerContainer = styled(Grid, {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n padding-right: 4px;\n min-height: 41px;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n`;\n\nexport const StyledIconContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.ICON_CONTAINER,\n})<StyledIconContainerT>`\n margin-top: ${({ height }) => (height > 41 ? '6px' : '2px')};\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n min-width: 0px;\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.TITLE })<StyledTitleT>`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => theme.fontSizes.label[400]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n margin-top: ${({ height }) => (height > 41 ? '8px' : '2px')};\n font-size: 14px;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })<StyledSubTitleT>`\n margin-left: ${({ theme }) => theme.space.xs};\n font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n margin-top: ${({ height }) => (height > 41 ? '8px' : '3px')};\n font-size: 14px;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n`;\n\nexport const StyledActionLink = styled('a', { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })<StyledActionLinkT>`\n margin-left: ${({ theme, isBodyEmpty }) => (!isBodyEmpty ? theme.space.xs : 0)};\n text-decoration: none;\n font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 2px;\n min-width: 0px;\n &:focus {\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n name: DSBannerName,\n slot: DSBannerSlots.CLOSE_BUTTON,\n})<StyledCloseButtonT>`\n margin-left: ${({ theme }) => theme.space.xxs};\n margin-top: ${({ height }) => (height > 41 ? '5px' : '2px')};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAE3C,uBAA2B;AAC3B,0BAAmD;AACnD,8BAA4C;AAE5C,qBAAqB;AAoCd,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,OAAO,UAAM,qCAAgB,aAAa,QAAQ,MAAM;AAAA,IAChF;AAAA;AAGG,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA,sBAIqB,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;AAG7D,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA,gBACe,CAAC,EAAE,OAAO,MAAO,SAAS,KAAK,QAAQ;AAAA,kBACrC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAIrC,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,MAAM,CAAC;AAAA,WAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,eACnC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA,iBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,gBAClC,CAAC,EAAE,OAAO,MAAO,SAAS,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhD,MAAM,qBAAiB,yBAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,SAAS,CAAC;AAAA,iBAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,SAAS,GAAG;AAAA,iBACzC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,gBAClC,CAAC,EAAE,OAAO,MAAO,SAAS,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhD,MAAM,uBAAmB,yBAAO,KAAK,EAAE,MAAM,sCAAc,MAAM,sCAAc,YAAY,CAAC;AAAA,iBAClF,CAAC,EAAE,OAAO,YAAY,MAAO,CAAC,cAAc,MAAM,MAAM,KAAK;AAAA;AAAA,eAE/D,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG;AAAA,iBAC1C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA,yBAIvB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAGvD,MAAM,wBAAoB,yBAAO,6BAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA,iBACgB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,gBAC5B,CAAC,EAAE,OAAO,MAAO,SAAS,KAAK,QAAQ;AAAA;",
6
6
  "names": []
7
7
  }
@@ -38,7 +38,7 @@ const StyledTitle = styled("div", { name: DSBannerName, slot: DSBannerSlots.TITL
38
38
  color: ${({ theme }) => theme.colors.neutral[700]};
39
39
  font-size: ${({ theme }) => theme.fontSizes.label[400]};
40
40
  font-weight: ${({ theme }) => theme.fontWeights.semibold};
41
- margin-top: ${({ height }) => height > 41 ? "8px" : "1px"};
41
+ margin-top: ${({ height }) => height > 41 ? "8px" : "2px"};
42
42
  font-size: 14px;
43
43
  overflow-wrap: break-word;
44
44
  white-space: pre-wrap;
@@ -48,7 +48,7 @@ const StyledSubTitle = styled("div", { name: DSBannerName, slot: DSBannerSlots.S
48
48
  margin-left: ${({ theme }) => theme.space.xs};
49
49
  font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};
50
50
  font-weight: ${({ theme }) => theme.fontWeights.regular};
51
- margin-top: ${({ height }) => height > 41 ? "8px" : "1px"};
51
+ margin-top: ${({ height }) => height > 41 ? "8px" : "3px"};
52
52
  font-size: 14px;
53
53
  overflow-wrap: break-word;
54
54
  white-space: pre-wrap;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { SizingProps, LayoutProps, SpaceProps, ColorProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\nimport { DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\nimport { Grid } from '@elliemae/ds-grid';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n isOpen: boolean;\n isAnimating: boolean;\n height: number;\n}\n\ninterface StyledInnerContainerT {\n type: DSBannerInternalsT.BannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n}\n\ninterface StyledIconContainerT {\n height: number;\n}\n\ninterface StyledTitleT {\n height: number;\n}\n\ninterface StyledSubTitleT {\n height: number;\n}\n\ninterface StyledActionLinkT {\n isBodyEmpty: boolean;\n}\n\ninterface StyledCloseButtonT {\n height: number;\n}\n\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n ${xStyledCommonProps}\n`;\n\nexport const StyledInnerContainer = styled(Grid, {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n padding-right: 4px;\n min-height: 41px;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n`;\n\nexport const StyledIconContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.ICON_CONTAINER,\n})<StyledIconContainerT>`\n margin-top: ${({ height }) => (height > 41 ? '6px' : '2px')};\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n min-width: 0px;\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.TITLE })<StyledTitleT>`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => theme.fontSizes.label[400]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n margin-top: ${({ height }) => (height > 41 ? '8px' : '1px')};\n font-size: 14px;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })<StyledSubTitleT>`\n margin-left: ${({ theme }) => theme.space.xs};\n font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n margin-top: ${({ height }) => (height > 41 ? '8px' : '1px')};\n font-size: 14px;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n`;\n\nexport const StyledActionLink = styled('a', { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })<StyledActionLinkT>`\n margin-left: ${({ theme, isBodyEmpty }) => (!isBodyEmpty ? theme.space.xs : 0)};\n text-decoration: none;\n font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 2px;\n min-width: 0px;\n &:focus {\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n name: DSBannerName,\n slot: DSBannerSlots.CLOSE_BUTTON,\n})<StyledCloseButtonT>`\n margin-left: ${({ theme }) => theme.space.xxs};\n margin-top: ${({ height }) => (height > 41 ? '5px' : '2px')};\n`;\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { SizingProps, LayoutProps, SpaceProps, ColorProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';\nimport { DSBannerName, DSBannerSlots } from './exported-related/index.js';\nimport type { DSBannerInternalsT } from './sharedTypes.js';\nimport { Grid } from '@elliemae/ds-grid';\nimport type {} from '@xstyled/util';\nimport type {} from '@xstyled/system';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n isOpen: boolean;\n isAnimating: boolean;\n height: number;\n}\n\ninterface StyledInnerContainerT {\n type: DSBannerInternalsT.BannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n}\n\ninterface StyledIconContainerT {\n height: number;\n}\n\ninterface StyledTitleT {\n height: number;\n}\n\ninterface StyledSubTitleT {\n height: number;\n}\n\ninterface StyledActionLinkT {\n isBodyEmpty: boolean;\n}\n\ninterface StyledCloseButtonT {\n height: number;\n}\n\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n ${xStyledCommonProps}\n`;\n\nexport const StyledInnerContainer = styled(Grid, {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n padding-right: 4px;\n min-height: 41px;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\n`;\n\nexport const StyledIconContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.ICON_CONTAINER,\n})<StyledIconContainerT>`\n margin-top: ${({ height }) => (height > 41 ? '6px' : '2px')};\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n min-width: 0px;\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.TITLE })<StyledTitleT>`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => theme.fontSizes.label[400]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n margin-top: ${({ height }) => (height > 41 ? '8px' : '2px')};\n font-size: 14px;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n`;\n\nexport const StyledSubTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })<StyledSubTitleT>`\n margin-left: ${({ theme }) => theme.space.xs};\n font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n margin-top: ${({ height }) => (height > 41 ? '8px' : '3px')};\n font-size: 14px;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n`;\n\nexport const StyledActionLink = styled('a', { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })<StyledActionLinkT>`\n margin-left: ${({ theme, isBodyEmpty }) => (!isBodyEmpty ? theme.space.xs : 0)};\n text-decoration: none;\n font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 2px;\n min-width: 0px;\n &:focus {\n outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n name: DSBannerName,\n slot: DSBannerSlots.CLOSE_BUTTON,\n})<StyledCloseButtonT>`\n margin-left: ${({ theme }) => theme.space.xxs};\n margin-top: ${({ height }) => (height > 41 ? '5px' : '2px')};\n`;\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAE3C,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB,yBAAyB;AACnD,SAAS,cAAc,qBAAqB;AAE5C,SAAS,YAAY;AAoCd,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,OAAO,MAAM,gBAAgB,aAAa,QAAQ,MAAM;AAAA,IAChF;AAAA;AAGG,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA,sBAIqB,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;AAG7D,MAAM,sBAAsB,OAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,gBACe,CAAC,EAAE,OAAO,MAAO,SAAS,KAAK,QAAQ;AAAA,kBACrC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAIrC,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA,WAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,eACnC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA,iBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,gBAClC,CAAC,EAAE,OAAO,MAAO,SAAS,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhD,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,SAAS,CAAC;AAAA,iBAC/E,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,SAAS,GAAG;AAAA,iBACzC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,gBAClC,CAAC,EAAE,OAAO,MAAO,SAAS,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhD,MAAM,mBAAmB,OAAO,KAAK,EAAE,MAAM,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA,iBAClF,CAAC,EAAE,OAAO,YAAY,MAAO,CAAC,cAAc,MAAM,MAAM,KAAK;AAAA;AAAA,eAE/D,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG;AAAA,iBAC1C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA,yBAIvB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAGvD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,iBACgB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,gBAC5B,CAAC,EAAE,OAAO,MAAO,SAAS,KAAK,QAAQ;AAAA;",
6
6
  "names": []
7
7
  }
@@ -26,11 +26,11 @@ interface StyledActionLinkT {
26
26
  interface StyledCloseButtonT {
27
27
  height: number;
28
28
  }
29
- export declare const StyledBannerContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledBannerContainerT, never>;
30
- export declare const StyledInnerContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, StyledInnerContainerT, never>;
31
- export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledIconContainerT, never>;
32
- export declare const StyledTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledTitleT, never>;
33
- export declare const StyledSubTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledSubTitleT, never>;
34
- export declare const StyledActionLink: import("styled-components").StyledComponent<"a", import("@elliemae/ds-system").Theme, StyledActionLinkT, never>;
35
- export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button").DSButtonT.Props>, import("@elliemae/ds-system").Theme, StyledCloseButtonT, never>;
29
+ export declare const StyledBannerContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledBannerContainerT & import("@elliemae/ds-system").OwnerInterface, never>;
30
+ export declare const StyledInnerContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, StyledInnerContainerT & import("@elliemae/ds-system").OwnerInterface, never>;
31
+ export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledIconContainerT & import("@elliemae/ds-system").OwnerInterface, never>;
32
+ export declare const StyledTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledTitleT & import("@elliemae/ds-system").OwnerInterface, never>;
33
+ export declare const StyledSubTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledSubTitleT & import("@elliemae/ds-system").OwnerInterface, never>;
34
+ export declare const StyledActionLink: import("styled-components").StyledComponent<"a", import("@elliemae/ds-system").Theme, StyledActionLinkT & import("@elliemae/ds-system").OwnerInterface, never>;
35
+ export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button").DSButtonT.Props>, import("@elliemae/ds-system").Theme, StyledCloseButtonT & import("@elliemae/ds-system").OwnerInterface, never>;
36
36
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-banner",
3
- "version": "3.18.0-next.0",
3
+ "version": "3.18.0-next.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Banner",
6
6
  "files": [
@@ -63,13 +63,13 @@
63
63
  "indent": 4
64
64
  },
65
65
  "dependencies": {
66
- "@elliemae/ds-button": "3.18.0-next.0",
67
- "@elliemae/ds-grid": "3.18.0-next.0",
68
- "@elliemae/ds-icons": "3.18.0-next.0",
69
- "@elliemae/ds-props-helpers": "3.18.0-next.0",
70
- "@elliemae/ds-system": "3.18.0-next.0",
71
66
  "@xstyled/system": "~3.7.3",
72
- "@xstyled/util": "3.7.0"
67
+ "@xstyled/util": "3.7.0",
68
+ "@elliemae/ds-button": "3.18.0-next.2",
69
+ "@elliemae/ds-grid": "3.18.0-next.2",
70
+ "@elliemae/ds-icons": "3.18.0-next.2",
71
+ "@elliemae/ds-props-helpers": "3.18.0-next.2",
72
+ "@elliemae/ds-system": "3.18.0-next.2"
73
73
  },
74
74
  "devDependencies": {
75
75
  "@testing-library/jest-dom": "~5.16.5",
@@ -82,7 +82,7 @@
82
82
  "lodash": "^4.17.21",
83
83
  "react": "^17.0.2",
84
84
  "react-dom": "^17.0.2",
85
- "styled-components": "~5.3.6"
85
+ "styled-components": "~5.3.9"
86
86
  },
87
87
  "publishConfig": {
88
88
  "access": "public",
@@ -97,6 +97,6 @@
97
97
  "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
98
98
  "dev:build": "pnpm --filter {.}... build",
99
99
  "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
100
- "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
100
+ "checkDeps": "npm exec ../ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
101
101
  }
102
102
  }