@elliemae/ds-dialog 3.12.0-next.1 → 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.
@@ -71,7 +71,6 @@ const StyledDialogContainer = import_ds_system.styled.div`
71
71
  box-shadow: 0 10px 20px 0 ${({ theme }) => theme.colors.neutral[500]};
72
72
  background: ${({ theme }) => theme.colors.neutral["000"]};
73
73
  overflow-y: auto;
74
- ${import_ds_system.space}
75
74
  &:focus {
76
75
  outline: none;
77
76
  }
@@ -87,7 +86,7 @@ const DSDialogTitle = import_ds_system.styled.h3`
87
86
  margin: 0;
88
87
  `;
89
88
  const DSDialogAddon = import_ds_system.styled.div``;
90
- const DSDialogHeader = import_ds_system.styled.div`
89
+ const DSDialogHeader = (0, import_ds_system.styled)(import_ds_system.XStyledWrapper)`
91
90
  display: grid;
92
91
  align-items: center;
93
92
  grid-auto-flow: column;
@@ -100,21 +99,14 @@ const DSDialogHeader = import_ds_system.styled.div`
100
99
  & ${DSDialogAddon}:only-child {
101
100
  justify-self: flex-end;
102
101
  }
103
- ${import_ds_system.space}
104
- ${import_ds_system.sizing}
105
102
  `;
106
103
  const DSDialogSeparator = import_ds_system.styled.hr.attrs(() => ({ "aria-hidden": true }))`
107
104
  margin: 0;
108
105
  border-top: 1px solid ${({ theme }) => theme.colors.neutral["080"]};
109
106
  `;
110
- const DSDialogBody = import_ds_system.styled.div`
107
+ const DSDialogBody = (0, import_ds_system.styled)(import_ds_system.XStyledWrapper)`
111
108
  padding: ${({ theme }) => theme.space.xs};
112
109
  overflow-y: auto;
113
-
114
- ${import_ds_system.layout}
115
- ${import_ds_system.space}
116
- ${import_ds_system.flexboxes}
117
- ${import_ds_system.sizing}
118
110
  `;
119
111
  const DSDialogPrimaryMessage = import_ds_system.styled.h3`
120
112
  margin: 0;
@@ -134,7 +126,7 @@ const DSDialogDefaultLayout = import_ds_system.styled.div`
134
126
  text-align: center;
135
127
  }
136
128
  `;
137
- const DSDialogFooter = import_ds_system.styled.div`
129
+ const DSDialogFooter = (0, import_ds_system.styled)(import_ds_system.XStyledWrapper)`
138
130
  display: grid;
139
131
  grid-auto-flow: column;
140
132
  align-items: center;
@@ -142,8 +134,5 @@ const DSDialogFooter = import_ds_system.styled.div`
142
134
  grid-gap: ${({ theme }) => theme.space.xxs};
143
135
  min-height: ${({ theme }) => theme.space.m};
144
136
  padding: 0 ${({ theme }) => theme.space.xs};
145
- ${import_ds_system.space}
146
- ${import_ds_system.flexboxes}
147
- ${import_ds_system.sizing}
148
137
  `;
149
138
  //# 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, space, flexboxes, layout, sizing } 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 ${space}\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 ${space}\n ${sizing}\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\n ${layout}\n ${space}\n ${flexboxes}\n ${sizing}\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 ${space}\n ${flexboxes}\n ${sizing}\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,uBAA4E;AAC5E,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,IAEhD;AAAA;AAAA;AAAA;AAAA;AAAA;AAOG,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,iBAAiB,wBAAO;AAAA;AAAA;AAAA;AAAA,gBAIrB,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,IACA;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,eAAe,wBAAO;AAAA,aACtB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,IAGpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;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,iBAAiB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAKvB,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,IACA;AAAA,IACA;AAAA;",
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;",
6
6
  "names": []
7
7
  }
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { styled, createGlobalStyle, space, flexboxes, layout, sizing } from "@elliemae/ds-system";
2
+ import { styled, createGlobalStyle, XStyledWrapper } from "@elliemae/ds-system";
3
3
  import { allSizes } from "./utils";
4
4
  const PortalStyles = createGlobalStyle`
5
5
  ${({ portalClassName }) => `.${portalClassName}`} {
@@ -31,7 +31,6 @@ const StyledDialogContainer = styled.div`
31
31
  box-shadow: 0 10px 20px 0 ${({ theme }) => theme.colors.neutral[500]};
32
32
  background: ${({ theme }) => theme.colors.neutral["000"]};
33
33
  overflow-y: auto;
34
- ${space}
35
34
  &:focus {
36
35
  outline: none;
37
36
  }
@@ -47,7 +46,7 @@ const DSDialogTitle = styled.h3`
47
46
  margin: 0;
48
47
  `;
49
48
  const DSDialogAddon = styled.div``;
50
- const DSDialogHeader = styled.div`
49
+ const DSDialogHeader = styled(XStyledWrapper)`
51
50
  display: grid;
52
51
  align-items: center;
53
52
  grid-auto-flow: column;
@@ -60,21 +59,14 @@ const DSDialogHeader = styled.div`
60
59
  & ${DSDialogAddon}:only-child {
61
60
  justify-self: flex-end;
62
61
  }
63
- ${space}
64
- ${sizing}
65
62
  `;
66
63
  const DSDialogSeparator = styled.hr.attrs(() => ({ "aria-hidden": true }))`
67
64
  margin: 0;
68
65
  border-top: 1px solid ${({ theme }) => theme.colors.neutral["080"]};
69
66
  `;
70
- const DSDialogBody = styled.div`
67
+ const DSDialogBody = styled(XStyledWrapper)`
71
68
  padding: ${({ theme }) => theme.space.xs};
72
69
  overflow-y: auto;
73
-
74
- ${layout}
75
- ${space}
76
- ${flexboxes}
77
- ${sizing}
78
70
  `;
79
71
  const DSDialogPrimaryMessage = styled.h3`
80
72
  margin: 0;
@@ -94,7 +86,7 @@ const DSDialogDefaultLayout = styled.div`
94
86
  text-align: center;
95
87
  }
96
88
  `;
97
- const DSDialogFooter = styled.div`
89
+ const DSDialogFooter = styled(XStyledWrapper)`
98
90
  display: grid;
99
91
  grid-auto-flow: column;
100
92
  align-items: center;
@@ -102,9 +94,6 @@ const DSDialogFooter = styled.div`
102
94
  grid-gap: ${({ theme }) => theme.space.xxs};
103
95
  min-height: ${({ theme }) => theme.space.m};
104
96
  padding: 0 ${({ theme }) => theme.space.xs};
105
- ${space}
106
- ${flexboxes}
107
- ${sizing}
108
97
  `;
109
98
  export {
110
99
  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, space, flexboxes, layout, sizing } 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 ${space}\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 ${space}\n ${sizing}\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\n ${layout}\n ${space}\n ${flexboxes}\n ${sizing}\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 ${space}\n ${flexboxes}\n ${sizing}\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,mBAAmB,OAAO,WAAW,QAAQ,cAAc;AAC5E,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,IAEhD;AAAA;AAAA;AAAA;AAAA;AAAA;AAOG,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;AAAA;AAAA;AAAA;AAAA,gBAIrB,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,IACA;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;AAAA,aACtB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,IAGpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;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;AAAA;AAAA;AAAA;AAAA;AAAA,cAKvB,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,IACA;AAAA,IACA;AAAA;",
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;",
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-next.1",
3
+ "version": "3.12.0-rc.0",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Dialog",
6
6
  "files": [
@@ -67,10 +67,10 @@
67
67
  "indent": 4
68
68
  },
69
69
  "dependencies": {
70
- "@elliemae/ds-button": "3.12.0-next.1",
71
- "@elliemae/ds-icons": "3.12.0-next.1",
72
- "@elliemae/ds-system": "3.12.0-next.1",
73
- "@elliemae/ds-utilities": "3.12.0-next.1",
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",
74
74
  "lodash": "~4.17.21",
75
75
  "uid": "~2.0.0"
76
76
  },