@elliemae/ds-dialog 3.12.0-rc.0 → 3.12.0-rc.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.
@@ -86,7 +86,7 @@ const DSDialogTitle = import_ds_system.styled.h3`
86
86
  margin: 0;
87
87
  `;
88
88
  const DSDialogAddon = import_ds_system.styled.div``;
89
- const DSDialogHeader = (0, import_ds_system.styled)(import_ds_system.XStyledWrapper)`
89
+ const DSDialogHeader = (0, import_ds_system.styled)("div")`
90
90
  display: grid;
91
91
  align-items: center;
92
92
  grid-auto-flow: column;
@@ -99,14 +99,16 @@ const DSDialogHeader = (0, import_ds_system.styled)(import_ds_system.XStyledWrap
99
99
  & ${DSDialogAddon}:only-child {
100
100
  justify-self: flex-end;
101
101
  }
102
+ ${import_ds_system.xStyledCommonProps}
102
103
  `;
103
104
  const DSDialogSeparator = import_ds_system.styled.hr.attrs(() => ({ "aria-hidden": true }))`
104
105
  margin: 0;
105
106
  border-top: 1px solid ${({ theme }) => theme.colors.neutral["080"]};
106
107
  `;
107
- const DSDialogBody = (0, import_ds_system.styled)(import_ds_system.XStyledWrapper)`
108
+ const DSDialogBody = (0, import_ds_system.styled)("div")`
108
109
  padding: ${({ theme }) => theme.space.xs};
109
110
  overflow-y: auto;
111
+ ${import_ds_system.xStyledCommonProps}
110
112
  `;
111
113
  const DSDialogPrimaryMessage = import_ds_system.styled.h3`
112
114
  margin: 0;
@@ -126,7 +128,7 @@ const DSDialogDefaultLayout = import_ds_system.styled.div`
126
128
  text-align: center;
127
129
  }
128
130
  `;
129
- const DSDialogFooter = (0, import_ds_system.styled)(import_ds_system.XStyledWrapper)`
131
+ const DSDialogFooter = (0, import_ds_system.styled)("div")`
130
132
  display: grid;
131
133
  grid-auto-flow: column;
132
134
  align-items: center;
@@ -134,5 +136,6 @@ const DSDialogFooter = (0, import_ds_system.styled)(import_ds_system.XStyledWrap
134
136
  grid-gap: ${({ theme }) => theme.space.xxs};
135
137
  min-height: ${({ theme }) => theme.space.m};
136
138
  padding: 0 ${({ theme }) => theme.space.xs};
139
+ ${import_ds_system.xStyledCommonProps}
137
140
  `;
138
141
  //# sourceMappingURL=styles.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, createGlobalStyle, XStyledWrapper } from '@elliemae/ds-system';\nimport { allSizes } from './utils';\nimport type { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\ninterface PortalStylesT {\n portalInfo: DSDialogInternalsT.PortalInfo;\n portalClassName: string;\n}\n\ninterface StyledDialogBackgroundT {\n zIndex: number;\n}\n\ninterface StyledDialogContainerT {\n size: DSDialogT.Sizes;\n centered: boolean;\n}\n\nexport const PortalStyles = createGlobalStyle<PortalStylesT>`\n ${({ portalClassName }) => `.${portalClassName}`} {\n overflow: hidden;\n ${({ portalInfo }) =>\n portalInfo.scrollbarWidth !== '0px'\n ? `padding-right: calc( ${portalInfo.paddingRight} + ${portalInfo.scrollbarWidth} ) !important;`\n : ``}\n }\n`;\n\nexport const StyledDialogBackground = styled.div<StyledDialogBackgroundT>`\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(37, 41, 47, 50%);\n overflow-y: auto;\n z-index: ${({ zIndex, theme }) => zIndex ?? theme.zIndex.dialog};\n`;\n\nexport const StyledDialogContainer = styled.div<StyledDialogContainerT>`\n height: fit-content;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: ${({ centered }) => (centered ? 'auto' : '20vh auto auto auto')};\n width: ${({ size }) => allSizes[size]};\n min-width: 300px;\n box-shadow: 0 10px 20px 0 ${({ theme }) => theme.colors.neutral[500]};\n background: ${({ theme }) => theme.colors.neutral['000']};\n overflow-y: auto;\n &:focus {\n outline: none;\n }\n max-height: 100vh;\n`;\n\nexport const DSDialogTitle = styled.h3`\n font-size: ${({ theme }) => theme.fontSizes.title[700]};\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n line-height: 28px;\n margin: 0;\n`;\n\nexport const DSDialogAddon = styled.div``;\n\nexport const DSDialogHeader = styled(XStyledWrapper)`\n display: grid;\n align-items: center;\n grid-auto-flow: column;\n min-height: ${({ theme }) => theme.space.m};\n padding: 10px ${({ theme }) => theme.space.xs};\n & ${DSDialogTitle} + ${DSDialogAddon} {\n align-self: flex-start;\n justify-self: flex-end;\n }\n & ${DSDialogAddon}:only-child {\n justify-self: flex-end;\n }\n`;\n\nexport const DSDialogSeparator = styled.hr.attrs(() => ({ 'aria-hidden': true }))`\n margin: 0;\n border-top: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n`;\n\nexport const DSDialogBody = styled(XStyledWrapper)`\n padding: ${({ theme }) => theme.space.xs};\n overflow-y: auto;\n`;\n\nexport const DSDialogPrimaryMessage = styled.h3`\n margin: 0;\n`;\n\nexport const DSDialogSecondaryMessage = styled.p`\n margin: 0;\n color: ${({ theme }) => theme.colors.neutral[500]};\n`;\n\nexport const DSDialogDefaultLayout = styled.div`\n display: grid;\n grid-auto-flow: row;\n justify-items: center;\n align-items: center;\n grid-gap: ${({ theme }) => theme.space.xxs};\n\n ${DSDialogSecondaryMessage} {\n text-align: center;\n }\n`;\n\nexport const DSDialogFooter = styled(XStyledWrapper)`\n display: grid;\n grid-auto-flow: column;\n align-items: center;\n justify-content: flex-end;\n grid-gap: ${({ theme }) => theme.space.xxs};\n min-height: ${({ theme }) => theme.space.m};\n padding: 0 ${({ theme }) => theme.space.xs};\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;AAAA;ACAA,YAAuB;ADCvB,uBAA0D;AAC1D,mBAAyB;AAkBlB,MAAM,eAAe;AAAA,IACxB,CAAC,EAAE,gBAAgB,MAAM,IAAI;AAAA;AAAA,MAE3B,CAAC,EAAE,WAAW,MACd,WAAW,mBAAmB,QAC1B,wBAAwB,WAAW,kBAAkB,WAAW,iCAChE;AAAA;AAAA;AAIH,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAShC,CAAC,EAAE,QAAQ,MAAM,MAAM,UAAU,MAAM,OAAO;AAAA;AAGpD,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhC,CAAC,EAAE,SAAS,MAAO,WAAW,SAAS;AAAA,WACxC,CAAC,EAAE,KAAK,MAAM,sBAAS;AAAA;AAAA,8BAEJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,gBAClD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ7C,MAAM,gBAAgB,wBAAO;AAAA,eACrB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,gBAAgB,wBAAO;AAE7B,MAAM,qBAAiB,yBAAO,+BAAc;AAAA;AAAA;AAAA;AAAA,gBAInC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,kBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,MACvC,mBAAmB;AAAA;AAAA;AAAA;AAAA,MAInB;AAAA;AAAA;AAAA;AAKC,MAAM,oBAAoB,wBAAO,GAAG,MAAM,OAAO,EAAE,eAAe,KAAK,EAAE;AAAA;AAAA,0BAEtD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGvD,MAAM,mBAAe,yBAAO,+BAAc;AAAA,aACpC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAIjC,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAItC,MAAM,2BAA2B,wBAAO;AAAA;AAAA,WAEpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGxC,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAK9B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA,IAErC;AAAA;AAAA;AAAA;AAKG,MAAM,qBAAiB,yBAAO,+BAAc;AAAA;AAAA;AAAA;AAAA;AAAA,cAKrC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,gBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,eAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;",
4
+ "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, createGlobalStyle, xStyledCommonProps } from '@elliemae/ds-system';\nimport { allSizes } from './utils';\nimport type { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\ninterface PortalStylesT {\n portalInfo: DSDialogInternalsT.PortalInfo;\n portalClassName: string;\n}\n\ninterface StyledDialogBackgroundT {\n zIndex: number;\n}\n\ninterface StyledDialogContainerT {\n size: DSDialogT.Sizes;\n centered: boolean;\n}\n\nexport const PortalStyles = createGlobalStyle<PortalStylesT>`\n ${({ portalClassName }) => `.${portalClassName}`} {\n overflow: hidden;\n ${({ portalInfo }) =>\n portalInfo.scrollbarWidth !== '0px'\n ? `padding-right: calc( ${portalInfo.paddingRight} + ${portalInfo.scrollbarWidth} ) !important;`\n : ``}\n }\n`;\n\nexport const StyledDialogBackground = styled.div<StyledDialogBackgroundT>`\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(37, 41, 47, 50%);\n overflow-y: auto;\n z-index: ${({ zIndex, theme }) => zIndex ?? theme.zIndex.dialog};\n`;\n\nexport const StyledDialogContainer = styled.div<StyledDialogContainerT>`\n height: fit-content;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: ${({ centered }) => (centered ? 'auto' : '20vh auto auto auto')};\n width: ${({ size }) => allSizes[size]};\n min-width: 300px;\n box-shadow: 0 10px 20px 0 ${({ theme }) => theme.colors.neutral[500]};\n background: ${({ theme }) => theme.colors.neutral['000']};\n overflow-y: auto;\n &:focus {\n outline: none;\n }\n max-height: 100vh;\n`;\n\nexport const DSDialogTitle = styled.h3`\n font-size: ${({ theme }) => theme.fontSizes.title[700]};\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n line-height: 28px;\n margin: 0;\n`;\n\nexport const DSDialogAddon = styled.div``;\n\nexport const DSDialogHeader = styled('div')`\n display: grid;\n align-items: center;\n grid-auto-flow: column;\n min-height: ${({ theme }) => theme.space.m};\n padding: 10px ${({ theme }) => theme.space.xs};\n & ${DSDialogTitle} + ${DSDialogAddon} {\n align-self: flex-start;\n justify-self: flex-end;\n }\n & ${DSDialogAddon}:only-child {\n justify-self: flex-end;\n }\n ${xStyledCommonProps}\n`;\n\nexport const DSDialogSeparator = styled.hr.attrs(() => ({ 'aria-hidden': true }))`\n margin: 0;\n border-top: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n`;\n\nexport const DSDialogBody = styled('div')`\n padding: ${({ theme }) => theme.space.xs};\n overflow-y: auto;\n ${xStyledCommonProps}\n`;\n\nexport const DSDialogPrimaryMessage = styled.h3`\n margin: 0;\n`;\n\nexport const DSDialogSecondaryMessage = styled.p`\n margin: 0;\n color: ${({ theme }) => theme.colors.neutral[500]};\n`;\n\nexport const DSDialogDefaultLayout = styled.div`\n display: grid;\n grid-auto-flow: row;\n justify-items: center;\n align-items: center;\n grid-gap: ${({ theme }) => theme.space.xxs};\n\n ${DSDialogSecondaryMessage} {\n text-align: center;\n }\n`;\n\nexport const DSDialogFooter = styled('div')`\n display: grid;\n grid-auto-flow: column;\n align-items: center;\n justify-content: flex-end;\n grid-gap: ${({ theme }) => theme.space.xxs};\n min-height: ${({ theme }) => theme.space.m};\n padding: 0 ${({ theme }) => theme.space.xs};\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;AAAA;ACAA,YAAuB;ADCvB,uBAA8D;AAC9D,mBAAyB;AAkBlB,MAAM,eAAe;AAAA,IACxB,CAAC,EAAE,gBAAgB,MAAM,IAAI;AAAA;AAAA,MAE3B,CAAC,EAAE,WAAW,MACd,WAAW,mBAAmB,QAC1B,wBAAwB,WAAW,kBAAkB,WAAW,iCAChE;AAAA;AAAA;AAIH,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAShC,CAAC,EAAE,QAAQ,MAAM,MAAM,UAAU,MAAM,OAAO;AAAA;AAGpD,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhC,CAAC,EAAE,SAAS,MAAO,WAAW,SAAS;AAAA,WACxC,CAAC,EAAE,KAAK,MAAM,sBAAS;AAAA;AAAA,8BAEJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,gBAClD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ7C,MAAM,gBAAgB,wBAAO;AAAA,eACrB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,gBAAgB,wBAAO;AAE7B,MAAM,qBAAiB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA,gBAI1B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,kBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,MACvC,mBAAmB;AAAA;AAAA;AAAA;AAAA,MAInB;AAAA;AAAA;AAAA,IAGF;AAAA;AAGG,MAAM,oBAAoB,wBAAO,GAAG,MAAM,OAAO,EAAE,eAAe,KAAK,EAAE;AAAA;AAAA,0BAEtD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGvD,MAAM,mBAAe,yBAAO,KAAK;AAAA,aAC3B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA,IAEpC;AAAA;AAGG,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAItC,MAAM,2BAA2B,wBAAO;AAAA;AAAA,WAEpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGxC,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAK9B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA,IAErC;AAAA;AAAA;AAAA;AAKG,MAAM,qBAAiB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,gBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,eAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,IACtC;AAAA;",
6
6
  "names": []
7
7
  }
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { styled, createGlobalStyle, XStyledWrapper } from "@elliemae/ds-system";
2
+ import { styled, createGlobalStyle, xStyledCommonProps } from "@elliemae/ds-system";
3
3
  import { allSizes } from "./utils";
4
4
  const PortalStyles = createGlobalStyle`
5
5
  ${({ portalClassName }) => `.${portalClassName}`} {
@@ -46,7 +46,7 @@ const DSDialogTitle = styled.h3`
46
46
  margin: 0;
47
47
  `;
48
48
  const DSDialogAddon = styled.div``;
49
- const DSDialogHeader = styled(XStyledWrapper)`
49
+ const DSDialogHeader = styled("div")`
50
50
  display: grid;
51
51
  align-items: center;
52
52
  grid-auto-flow: column;
@@ -59,14 +59,16 @@ const DSDialogHeader = styled(XStyledWrapper)`
59
59
  & ${DSDialogAddon}:only-child {
60
60
  justify-self: flex-end;
61
61
  }
62
+ ${xStyledCommonProps}
62
63
  `;
63
64
  const DSDialogSeparator = styled.hr.attrs(() => ({ "aria-hidden": true }))`
64
65
  margin: 0;
65
66
  border-top: 1px solid ${({ theme }) => theme.colors.neutral["080"]};
66
67
  `;
67
- const DSDialogBody = styled(XStyledWrapper)`
68
+ const DSDialogBody = styled("div")`
68
69
  padding: ${({ theme }) => theme.space.xs};
69
70
  overflow-y: auto;
71
+ ${xStyledCommonProps}
70
72
  `;
71
73
  const DSDialogPrimaryMessage = styled.h3`
72
74
  margin: 0;
@@ -86,7 +88,7 @@ const DSDialogDefaultLayout = styled.div`
86
88
  text-align: center;
87
89
  }
88
90
  `;
89
- const DSDialogFooter = styled(XStyledWrapper)`
91
+ const DSDialogFooter = styled("div")`
90
92
  display: grid;
91
93
  grid-auto-flow: column;
92
94
  align-items: center;
@@ -94,6 +96,7 @@ const DSDialogFooter = styled(XStyledWrapper)`
94
96
  grid-gap: ${({ theme }) => theme.space.xxs};
95
97
  min-height: ${({ theme }) => theme.space.m};
96
98
  padding: 0 ${({ theme }) => theme.space.xs};
99
+ ${xStyledCommonProps}
97
100
  `;
98
101
  export {
99
102
  DSDialogAddon,
@@ -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", "/* eslint-disable max-lines */\nimport { styled, createGlobalStyle, XStyledWrapper } from '@elliemae/ds-system';\nimport { allSizes } from './utils';\nimport type { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\ninterface PortalStylesT {\n portalInfo: DSDialogInternalsT.PortalInfo;\n portalClassName: string;\n}\n\ninterface StyledDialogBackgroundT {\n zIndex: number;\n}\n\ninterface StyledDialogContainerT {\n size: DSDialogT.Sizes;\n centered: boolean;\n}\n\nexport const PortalStyles = createGlobalStyle<PortalStylesT>`\n ${({ portalClassName }) => `.${portalClassName}`} {\n overflow: hidden;\n ${({ portalInfo }) =>\n portalInfo.scrollbarWidth !== '0px'\n ? `padding-right: calc( ${portalInfo.paddingRight} + ${portalInfo.scrollbarWidth} ) !important;`\n : ``}\n }\n`;\n\nexport const StyledDialogBackground = styled.div<StyledDialogBackgroundT>`\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(37, 41, 47, 50%);\n overflow-y: auto;\n z-index: ${({ zIndex, theme }) => zIndex ?? theme.zIndex.dialog};\n`;\n\nexport const StyledDialogContainer = styled.div<StyledDialogContainerT>`\n height: fit-content;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: ${({ centered }) => (centered ? 'auto' : '20vh auto auto auto')};\n width: ${({ size }) => allSizes[size]};\n min-width: 300px;\n box-shadow: 0 10px 20px 0 ${({ theme }) => theme.colors.neutral[500]};\n background: ${({ theme }) => theme.colors.neutral['000']};\n overflow-y: auto;\n &:focus {\n outline: none;\n }\n max-height: 100vh;\n`;\n\nexport const DSDialogTitle = styled.h3`\n font-size: ${({ theme }) => theme.fontSizes.title[700]};\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n line-height: 28px;\n margin: 0;\n`;\n\nexport const DSDialogAddon = styled.div``;\n\nexport const DSDialogHeader = styled(XStyledWrapper)`\n display: grid;\n align-items: center;\n grid-auto-flow: column;\n min-height: ${({ theme }) => theme.space.m};\n padding: 10px ${({ theme }) => theme.space.xs};\n & ${DSDialogTitle} + ${DSDialogAddon} {\n align-self: flex-start;\n justify-self: flex-end;\n }\n & ${DSDialogAddon}:only-child {\n justify-self: flex-end;\n }\n`;\n\nexport const DSDialogSeparator = styled.hr.attrs(() => ({ 'aria-hidden': true }))`\n margin: 0;\n border-top: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n`;\n\nexport const DSDialogBody = styled(XStyledWrapper)`\n padding: ${({ theme }) => theme.space.xs};\n overflow-y: auto;\n`;\n\nexport const DSDialogPrimaryMessage = styled.h3`\n margin: 0;\n`;\n\nexport const DSDialogSecondaryMessage = styled.p`\n margin: 0;\n color: ${({ theme }) => theme.colors.neutral[500]};\n`;\n\nexport const DSDialogDefaultLayout = styled.div`\n display: grid;\n grid-auto-flow: row;\n justify-items: center;\n align-items: center;\n grid-gap: ${({ theme }) => theme.space.xxs};\n\n ${DSDialogSecondaryMessage} {\n text-align: center;\n }\n`;\n\nexport const DSDialogFooter = styled(XStyledWrapper)`\n display: grid;\n grid-auto-flow: column;\n align-items: center;\n justify-content: flex-end;\n grid-gap: ${({ theme }) => theme.space.xxs};\n min-height: ${({ theme }) => theme.space.m};\n padding: 0 ${({ theme }) => theme.space.xs};\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,mBAAmB,sBAAsB;AAC1D,SAAS,gBAAgB;AAkBlB,MAAM,eAAe;AAAA,IACxB,CAAC,EAAE,gBAAgB,MAAM,IAAI;AAAA;AAAA,MAE3B,CAAC,EAAE,WAAW,MACd,WAAW,mBAAmB,QAC1B,wBAAwB,WAAW,kBAAkB,WAAW,iCAChE;AAAA;AAAA;AAIH,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAShC,CAAC,EAAE,QAAQ,MAAM,MAAM,UAAU,MAAM,OAAO;AAAA;AAGpD,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhC,CAAC,EAAE,SAAS,MAAO,WAAW,SAAS;AAAA,WACxC,CAAC,EAAE,KAAK,MAAM,SAAS;AAAA;AAAA,8BAEJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,gBAClD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ7C,MAAM,gBAAgB,OAAO;AAAA,eACrB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,gBAAgB,OAAO;AAE7B,MAAM,iBAAiB,OAAO,cAAc;AAAA;AAAA;AAAA;AAAA,gBAInC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,kBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,MACvC,mBAAmB;AAAA;AAAA;AAAA;AAAA,MAInB;AAAA;AAAA;AAAA;AAKC,MAAM,oBAAoB,OAAO,GAAG,MAAM,OAAO,EAAE,eAAe,KAAK,EAAE;AAAA;AAAA,0BAEtD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGvD,MAAM,eAAe,OAAO,cAAc;AAAA,aACpC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAIjC,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAItC,MAAM,2BAA2B,OAAO;AAAA;AAAA,WAEpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGxC,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAK9B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA,IAErC;AAAA;AAAA;AAAA;AAKG,MAAM,iBAAiB,OAAO,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,cAKrC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,gBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,eAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, createGlobalStyle, xStyledCommonProps } from '@elliemae/ds-system';\nimport { allSizes } from './utils';\nimport type { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\ninterface PortalStylesT {\n portalInfo: DSDialogInternalsT.PortalInfo;\n portalClassName: string;\n}\n\ninterface StyledDialogBackgroundT {\n zIndex: number;\n}\n\ninterface StyledDialogContainerT {\n size: DSDialogT.Sizes;\n centered: boolean;\n}\n\nexport const PortalStyles = createGlobalStyle<PortalStylesT>`\n ${({ portalClassName }) => `.${portalClassName}`} {\n overflow: hidden;\n ${({ portalInfo }) =>\n portalInfo.scrollbarWidth !== '0px'\n ? `padding-right: calc( ${portalInfo.paddingRight} + ${portalInfo.scrollbarWidth} ) !important;`\n : ``}\n }\n`;\n\nexport const StyledDialogBackground = styled.div<StyledDialogBackgroundT>`\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(37, 41, 47, 50%);\n overflow-y: auto;\n z-index: ${({ zIndex, theme }) => zIndex ?? theme.zIndex.dialog};\n`;\n\nexport const StyledDialogContainer = styled.div<StyledDialogContainerT>`\n height: fit-content;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: ${({ centered }) => (centered ? 'auto' : '20vh auto auto auto')};\n width: ${({ size }) => allSizes[size]};\n min-width: 300px;\n box-shadow: 0 10px 20px 0 ${({ theme }) => theme.colors.neutral[500]};\n background: ${({ theme }) => theme.colors.neutral['000']};\n overflow-y: auto;\n &:focus {\n outline: none;\n }\n max-height: 100vh;\n`;\n\nexport const DSDialogTitle = styled.h3`\n font-size: ${({ theme }) => theme.fontSizes.title[700]};\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n line-height: 28px;\n margin: 0;\n`;\n\nexport const DSDialogAddon = styled.div``;\n\nexport const DSDialogHeader = styled('div')`\n display: grid;\n align-items: center;\n grid-auto-flow: column;\n min-height: ${({ theme }) => theme.space.m};\n padding: 10px ${({ theme }) => theme.space.xs};\n & ${DSDialogTitle} + ${DSDialogAddon} {\n align-self: flex-start;\n justify-self: flex-end;\n }\n & ${DSDialogAddon}:only-child {\n justify-self: flex-end;\n }\n ${xStyledCommonProps}\n`;\n\nexport const DSDialogSeparator = styled.hr.attrs(() => ({ 'aria-hidden': true }))`\n margin: 0;\n border-top: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n`;\n\nexport const DSDialogBody = styled('div')`\n padding: ${({ theme }) => theme.space.xs};\n overflow-y: auto;\n ${xStyledCommonProps}\n`;\n\nexport const DSDialogPrimaryMessage = styled.h3`\n margin: 0;\n`;\n\nexport const DSDialogSecondaryMessage = styled.p`\n margin: 0;\n color: ${({ theme }) => theme.colors.neutral[500]};\n`;\n\nexport const DSDialogDefaultLayout = styled.div`\n display: grid;\n grid-auto-flow: row;\n justify-items: center;\n align-items: center;\n grid-gap: ${({ theme }) => theme.space.xxs};\n\n ${DSDialogSecondaryMessage} {\n text-align: center;\n }\n`;\n\nexport const DSDialogFooter = styled('div')`\n display: grid;\n grid-auto-flow: column;\n align-items: center;\n justify-content: flex-end;\n grid-gap: ${({ theme }) => theme.space.xxs};\n min-height: ${({ theme }) => theme.space.m};\n padding: 0 ${({ theme }) => theme.space.xs};\n ${xStyledCommonProps}\n`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,mBAAmB,0BAA0B;AAC9D,SAAS,gBAAgB;AAkBlB,MAAM,eAAe;AAAA,IACxB,CAAC,EAAE,gBAAgB,MAAM,IAAI;AAAA;AAAA,MAE3B,CAAC,EAAE,WAAW,MACd,WAAW,mBAAmB,QAC1B,wBAAwB,WAAW,kBAAkB,WAAW,iCAChE;AAAA;AAAA;AAIH,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAShC,CAAC,EAAE,QAAQ,MAAM,MAAM,UAAU,MAAM,OAAO;AAAA;AAGpD,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhC,CAAC,EAAE,SAAS,MAAO,WAAW,SAAS;AAAA,WACxC,CAAC,EAAE,KAAK,MAAM,SAAS;AAAA;AAAA,8BAEJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,gBAClD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ7C,MAAM,gBAAgB,OAAO;AAAA,eACrB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,gBAAgB,OAAO;AAE7B,MAAM,iBAAiB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,gBAI1B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,kBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,MACvC,mBAAmB;AAAA;AAAA;AAAA;AAAA,MAInB;AAAA;AAAA;AAAA,IAGF;AAAA;AAGG,MAAM,oBAAoB,OAAO,GAAG,MAAM,OAAO,EAAE,eAAe,KAAK,EAAE;AAAA;AAAA,0BAEtD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGvD,MAAM,eAAe,OAAO,KAAK;AAAA,aAC3B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA,IAEpC;AAAA;AAGG,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAItC,MAAM,2BAA2B,OAAO;AAAA;AAAA,WAEpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGxC,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAK9B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA,IAErC;AAAA;AAAA;AAAA;AAKG,MAAM,iBAAiB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,gBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,eAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,IACtC;AAAA;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-dialog",
3
- "version": "3.12.0-rc.0",
3
+ "version": "3.12.0-rc.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Dialog",
6
6
  "files": [
@@ -67,21 +67,21 @@
67
67
  "indent": 4
68
68
  },
69
69
  "dependencies": {
70
- "@elliemae/ds-button": "3.12.0-rc.0",
71
- "@elliemae/ds-icons": "3.12.0-rc.0",
72
- "@elliemae/ds-system": "3.12.0-rc.0",
73
- "@elliemae/ds-utilities": "3.12.0-rc.0",
70
+ "@elliemae/ds-button": "3.12.0-rc.2",
71
+ "@elliemae/ds-icons": "3.12.0-rc.2",
72
+ "@elliemae/ds-system": "3.12.0-rc.2",
73
+ "@elliemae/ds-utilities": "3.12.0-rc.2",
74
74
  "lodash": "~4.17.21",
75
75
  "uid": "~2.0.0"
76
76
  },
77
77
  "devDependencies": {
78
78
  "@testing-library/react": "~12.1.3",
79
- "styled-components": "~5.3.5"
79
+ "styled-components": "~5.3.6"
80
80
  },
81
81
  "peerDependencies": {
82
82
  "react": "^17.0.2",
83
83
  "react-dom": "^17.0.2",
84
- "styled-components": "^5.3.5"
84
+ "styled-components": "~5.3.6"
85
85
  },
86
86
  "publishConfig": {
87
87
  "access": "public",