@pingux/astro 2.130.3 → 2.130.4-alpha.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.
Files changed (14) hide show
  1. package/lib/cjs/components/Modal/Modal.js +3 -1
  2. package/lib/cjs/components/Modal/Modal.stories.js +21 -111
  3. package/lib/cjs/components/Modal/Modal.styles.d.ts +1 -1
  4. package/lib/cjs/components/Modal/Modal.styles.js +1 -1
  5. package/lib/cjs/styles/themes/next-gen/next-gen.d.ts +6 -14
  6. package/lib/cjs/styles/themes/next-gen/variants/button.js +1 -1
  7. package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts +6 -14
  8. package/lib/cjs/styles/themes/next-gen/variants/variants.js +7 -15
  9. package/lib/components/Modal/Modal.js +3 -1
  10. package/lib/components/Modal/Modal.stories.js +22 -112
  11. package/lib/components/Modal/Modal.styles.js +1 -1
  12. package/lib/styles/themes/next-gen/variants/button.js +1 -1
  13. package/lib/styles/themes/next-gen/variants/variants.js +7 -15
  14. package/package.json +1 -1
package/lib/cjs/components/Modal/Modal.js CHANGED
@@ -129,7 +129,9 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
129
129
  title: {
130
130
  name: 'Close Icon'
131
131
  }
132
- }))), titleContent), children))));
132
+ }))), titleContent), (0, _react2.jsx)(_Box["default"], {
133
+ pt: "lg"
134
+ }, children)))));
133
135
  });
134
136
  Modal.defaultProps = {
135
137
  role: 'dialog',
package/lib/cjs/components/Modal/Modal.stories.js CHANGED
@@ -98,49 +98,23 @@ var _default = {
98
98
  exports["default"] = _default;
99
99
  var Default = function Default(args) {
100
100
  var state = (0, _hooks.useModalState)();
101
- var _useGetTheme = (0, _hooks.useGetTheme)(),
102
- isOnyx = _useGetTheme.themeState.isOnyx;
103
- var ModalBodyContent;
104
- if (isOnyx) {
105
- ModalBodyContent = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
106
- p: "lg"
107
- }, (0, _react2.jsx)(_index.Text, {
108
- color: "text.primary"
109
- }, "Do you want to continue with this action that you\u2018re performing?")), (0, _react2.jsx)(_index.Box, {
110
- isRow: true,
111
- variant: "modal.footer"
112
- }, (0, _react2.jsx)(_index.Box, {
113
- isRow: true,
114
- ml: "auto"
115
- }, (0, _react2.jsx)(_index.Button, {
116
- variant: "link",
117
- onPress: state.close,
118
- "aria-label": "Cancel"
119
- }, "Cancel"), (0, _react2.jsx)(_index.Button, {
120
- variant: "primary",
121
- onPress: state.close,
122
- ml: "sm",
123
- "aria-label": "Save"
124
- }, "Save"))));
125
- } else {
126
- ModalBodyContent = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Text, {
127
- pt: "lg"
128
- }, "Do you want to continue with this action that you\u2018re performing?"), (0, _react2.jsx)(_index.Box, {
129
- isRow: true,
130
- pt: "lg",
131
- mr: "auto",
132
- variant: "modal.buttonsContainer"
133
- }, (0, _react2.jsx)(_index.Button, {
134
- variant: "primary",
135
- onPress: state.close,
136
- mr: "md",
137
- "aria-label": "Continue"
138
- }, "Continue"), (0, _react2.jsx)(_index.Button, {
139
- variant: "link",
140
- onPress: state.close,
141
- "aria-label": "Cancel"
142
- }, "Cancel")));
143
- }
101
+ var ModalBodyContent = (0, _react2.jsx)(_index.Box, {
102
+ gap: "lg"
103
+ }, (0, _react2.jsx)(_index.Text, null, "Do you want to continue with this action that you\u2018re performing?"), (0, _react2.jsx)(_index.Box, {
104
+ isRow: true,
105
+ pt: "lg",
106
+ mr: "auto",
107
+ variant: "modal.buttonsContainer"
108
+ }, (0, _react2.jsx)(_index.Button, {
109
+ variant: "primary",
110
+ onPress: state.close,
111
+ mr: "md",
112
+ "aria-label": "Continue"
113
+ }, "Continue"), (0, _react2.jsx)(_index.Button, {
114
+ variant: "link",
115
+ onPress: state.close,
116
+ "aria-label": "Cancel"
117
+ }, "Cancel")));
144
118
  return (
145
119
  // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
146
120
  // readers when an overlay opens.
@@ -172,8 +146,6 @@ Default.parameters = {
172
146
  };
173
147
  var LargeContent = function LargeContent(args) {
174
148
  var state = (0, _hooks.useModalState)();
175
- var _useGetTheme2 = (0, _hooks.useGetTheme)(),
176
- isOnyx = _useGetTheme2.themeState.isOnyx;
177
149
  return (
178
150
  // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
179
151
  // readers when an overlay opens.
@@ -183,73 +155,11 @@ var LargeContent = function LargeContent(args) {
183
155
  }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, (0, _extends2["default"])({}, args, {
184
156
  isOpen: state.isOpen,
185
157
  onClose: state.close
186
- }), (0, _react2.jsx)(_index.Text, {
187
- pt: "lg",
188
- px: isOnyx && 'lg'
189
- }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, {
190
- pt: "lg",
191
- px: isOnyx && 'lg'
192
- }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, {
193
- pt: "lg",
194
- px: isOnyx && 'lg'
195
- }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, {
196
- pt: "lg",
197
- px: isOnyx && 'lg'
198
- }, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, {
199
- pt: "lg",
200
- px: isOnyx && 'lg'
201
- }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, {
202
- pt: "lg",
203
- px: isOnyx && 'lg'
204
- }, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, {
205
- pt: "lg",
206
- px: isOnyx && 'lg'
207
- }, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, {
208
- pt: "lg",
209
- px: isOnyx && 'lg'
210
- }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, {
211
- pt: "lg",
212
- px: isOnyx && 'lg'
213
- }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, {
214
- pt: "lg",
215
- px: isOnyx && 'lg'
216
- }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, {
217
- pt: "lg",
218
- px: isOnyx && 'lg'
219
- }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, {
220
- pt: "lg",
221
- px: isOnyx && 'lg'
222
- }, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, {
223
- pt: "lg",
224
- px: isOnyx && 'lg'
225
- }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, {
226
- pt: "lg",
227
- px: isOnyx && 'lg'
228
- }, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, {
229
- pt: "lg",
230
- px: isOnyx && 'lg'
231
- }, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, {
232
- pt: "lg",
233
- px: isOnyx && 'lg'
234
- }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, {
235
- pt: "lg",
236
- px: isOnyx && 'lg'
237
- }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, {
238
- pt: "lg",
239
- px: isOnyx && 'lg'
240
- }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, {
241
- pt: "lg",
242
- px: isOnyx && 'lg'
243
- }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, {
244
- pt: "lg",
245
- px: isOnyx && 'lg'
246
- }, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, {
247
- pt: "lg",
248
- px: isOnyx && 'lg'
249
- }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Box, {
158
+ }), (0, _react2.jsx)(_index.Box, {
159
+ gap: "lg"
160
+ }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, null, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, null, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, null, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, null, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, null, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, null, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, null, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.")), (0, _react2.jsx)(_index.Box, {
250
161
  isRow: true,
251
- variant: "modal.buttonsContainer",
252
- px: isOnyx && 'lg'
162
+ variant: "modal.buttonsContainer"
253
163
  }, (0, _react2.jsx)(_index.Button, {
254
164
  variant: "primary",
255
165
  onPress: state.close,
package/lib/cjs/components/Modal/Modal.styles.d.ts CHANGED
@@ -64,7 +64,7 @@ declare const _default: {
64
64
  pt: string;
65
65
  pr: string;
66
66
  pb: string;
67
- background: string;
67
+ backgroundColor: string;
68
68
  };
69
69
  buttonsContainer: {
70
70
  position: string;
package/lib/cjs/components/Modal/Modal.styles.js CHANGED
@@ -76,7 +76,7 @@ var headingContainer = {
76
76
  pt: 'md',
77
77
  pr: 'lg',
78
78
  pb: 'md',
79
- background: 'white'
79
+ backgroundColor: 'background.base'
80
80
  };
81
81
  var buttonsContainer = {
82
82
  position: 'sticky',
package/lib/cjs/styles/themes/next-gen/next-gen.d.ts CHANGED
@@ -2811,7 +2811,10 @@ declare const _default: {
2811
2811
  };
2812
2812
  modal: {
2813
2813
  content: {
2814
- p: number;
2814
+ boxShadow: string;
2815
+ px: string;
2816
+ pb: string;
2817
+ pt: number;
2815
2818
  borderRadius: string;
2816
2819
  opacity: number;
2817
2820
  top: string;
@@ -2853,20 +2856,9 @@ declare const _default: {
2853
2856
  justifyContent: string;
2854
2857
  };
2855
2858
  header: {
2856
- px: string;
2857
- py: string;
2858
- borderBottom: string;
2859
- borderBottomColor: string;
2859
+ pt: string;
2860
2860
  bg: string;
2861
- };
2862
- footer: {
2863
- borderTop: string;
2864
- borderTopColor: string;
2865
- px: string;
2866
- py: string;
2867
- };
2868
- buttonsContainer: {
2869
- bottom: number;
2861
+ mb: string;
2870
2862
  };
2871
2863
  };
2872
2864
  tab: {
package/lib/cjs/styles/themes/next-gen/variants/button.js CHANGED
@@ -357,7 +357,7 @@ var baseIconButton = {
357
357
  var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
358
358
  position: 'absolute',
359
359
  top: 32,
360
- right: 42
360
+ right: 18
361
361
  });
362
362
  var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {
363
363
  path: {
package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts CHANGED
@@ -410,7 +410,10 @@ declare const _default: {
410
410
  };
411
411
  modal: {
412
412
  content: {
413
- p: number;
413
+ boxShadow: string;
414
+ px: string;
415
+ pb: string;
416
+ pt: number;
414
417
  borderRadius: string;
415
418
  opacity: number;
416
419
  top: string;
@@ -452,20 +455,9 @@ declare const _default: {
452
455
  justifyContent: string;
453
456
  };
454
457
  header: {
455
- px: string;
456
- py: string;
457
- borderBottom: string;
458
- borderBottomColor: string;
458
+ pt: string;
459
459
  bg: string;
460
- };
461
- footer: {
462
- borderTop: string;
463
- borderTopColor: string;
464
- px: string;
465
- py: string;
466
- };
467
- buttonsContainer: {
468
- bottom: number;
460
+ mb: string;
469
461
  };
470
462
  };
471
463
  tab: {
package/lib/cjs/styles/themes/next-gen/variants/variants.js CHANGED
@@ -150,7 +150,10 @@ var modalSize = {
150
150
  };
151
151
  var modal = {
152
152
  content: {
153
- p: 0,
153
+ boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.5)',
154
+ px: 'lg',
155
+ pb: 'lg',
156
+ pt: 0,
154
157
  borderRadius: '4px',
155
158
  opacity: 0,
156
159
  top: '0',
@@ -192,20 +195,9 @@ var modal = {
192
195
  justifyContent: 'start'
193
196
  },
194
197
  header: {
195
- px: 'lg',
196
- py: 'md',
197
- borderBottom: '1px solid',
198
- borderBottomColor: 'border.base',
199
- bg: 'background.base'
200
- },
201
- footer: {
202
- borderTop: '1px solid',
203
- borderTopColor: 'border.base',
204
- px: 'lg',
205
- py: 'md'
206
- },
207
- buttonsContainer: {
208
- bottom: 0
198
+ pt: 'lg',
199
+ bg: 'background.base',
200
+ mb: 'lg'
209
201
  }
210
202
  };
211
203
  var listBox = {
package/lib/components/Modal/Modal.js CHANGED
@@ -118,7 +118,9 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
118
118
  title: {
119
119
  name: 'Close Icon'
120
120
  }
121
- }))), titleContent), children))));
121
+ }))), titleContent), ___EmotionJSX(Box, {
122
+ pt: "lg"
123
+ }, children)))));
122
124
  });
123
125
  Modal.defaultProps = {
124
126
  role: 'dialog',
package/lib/components/Modal/Modal.stories.js CHANGED
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
2
2
  import React from 'react';
3
3
  import { withDesign } from 'storybook-addon-designs';
4
4
  import DocsLayout from '../../../.storybook/storybookDocsLayout';
5
- import { useGetTheme, useModalState } from '../../hooks';
5
+ import { useModalState } from '../../hooks';
6
6
  import { Box, Button, Modal, OverlayProvider, Text } from '../../index';
7
7
  import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
8
8
  import { modalSizes } from '../../utils/devUtils/constants/modalSizes';
@@ -89,49 +89,23 @@ export default {
89
89
  };
90
90
  export var Default = function Default(args) {
91
91
  var state = useModalState();
92
- var _useGetTheme = useGetTheme(),
93
- isOnyx = _useGetTheme.themeState.isOnyx;
94
- var ModalBodyContent;
95
- if (isOnyx) {
96
- ModalBodyContent = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
97
- p: "lg"
98
- }, ___EmotionJSX(Text, {
99
- color: "text.primary"
100
- }, "Do you want to continue with this action that you\u2018re performing?")), ___EmotionJSX(Box, {
101
- isRow: true,
102
- variant: "modal.footer"
103
- }, ___EmotionJSX(Box, {
104
- isRow: true,
105
- ml: "auto"
106
- }, ___EmotionJSX(Button, {
107
- variant: "link",
108
- onPress: state.close,
109
- "aria-label": "Cancel"
110
- }, "Cancel"), ___EmotionJSX(Button, {
111
- variant: "primary",
112
- onPress: state.close,
113
- ml: "sm",
114
- "aria-label": "Save"
115
- }, "Save"))));
116
- } else {
117
- ModalBodyContent = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
118
- pt: "lg"
119
- }, "Do you want to continue with this action that you\u2018re performing?"), ___EmotionJSX(Box, {
120
- isRow: true,
121
- pt: "lg",
122
- mr: "auto",
123
- variant: "modal.buttonsContainer"
124
- }, ___EmotionJSX(Button, {
125
- variant: "primary",
126
- onPress: state.close,
127
- mr: "md",
128
- "aria-label": "Continue"
129
- }, "Continue"), ___EmotionJSX(Button, {
130
- variant: "link",
131
- onPress: state.close,
132
- "aria-label": "Cancel"
133
- }, "Cancel")));
134
- }
92
+ var ModalBodyContent = ___EmotionJSX(Box, {
93
+ gap: "lg"
94
+ }, ___EmotionJSX(Text, null, "Do you want to continue with this action that you\u2018re performing?"), ___EmotionJSX(Box, {
95
+ isRow: true,
96
+ pt: "lg",
97
+ mr: "auto",
98
+ variant: "modal.buttonsContainer"
99
+ }, ___EmotionJSX(Button, {
100
+ variant: "primary",
101
+ onPress: state.close,
102
+ mr: "md",
103
+ "aria-label": "Continue"
104
+ }, "Continue"), ___EmotionJSX(Button, {
105
+ variant: "link",
106
+ onPress: state.close,
107
+ "aria-label": "Cancel"
108
+ }, "Cancel")));
135
109
  return (
136
110
  // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
137
111
  // readers when an overlay opens.
@@ -162,8 +136,6 @@ Default.parameters = {
162
136
  };
163
137
  export var LargeContent = function LargeContent(args) {
164
138
  var state = useModalState();
165
- var _useGetTheme2 = useGetTheme(),
166
- isOnyx = _useGetTheme2.themeState.isOnyx;
167
139
  return (
168
140
  // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
169
141
  // readers when an overlay opens.
@@ -173,73 +145,11 @@ export var LargeContent = function LargeContent(args) {
173
145
  }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, _extends({}, args, {
174
146
  isOpen: state.isOpen,
175
147
  onClose: state.close
176
- }), ___EmotionJSX(Text, {
177
- pt: "lg",
178
- px: isOnyx && 'lg'
179
- }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, {
180
- pt: "lg",
181
- px: isOnyx && 'lg'
182
- }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
183
- pt: "lg",
184
- px: isOnyx && 'lg'
185
- }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, {
186
- pt: "lg",
187
- px: isOnyx && 'lg'
188
- }, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, {
189
- pt: "lg",
190
- px: isOnyx && 'lg'
191
- }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, {
192
- pt: "lg",
193
- px: isOnyx && 'lg'
194
- }, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, {
195
- pt: "lg",
196
- px: isOnyx && 'lg'
197
- }, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, {
198
- pt: "lg",
199
- px: isOnyx && 'lg'
200
- }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, {
201
- pt: "lg",
202
- px: isOnyx && 'lg'
203
- }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, {
204
- pt: "lg",
205
- px: isOnyx && 'lg'
206
- }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
207
- pt: "lg",
208
- px: isOnyx && 'lg'
209
- }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, {
210
- pt: "lg",
211
- px: isOnyx && 'lg'
212
- }, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, {
213
- pt: "lg",
214
- px: isOnyx && 'lg'
215
- }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, {
216
- pt: "lg",
217
- px: isOnyx && 'lg'
218
- }, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, {
219
- pt: "lg",
220
- px: isOnyx && 'lg'
221
- }, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, {
222
- pt: "lg",
223
- px: isOnyx && 'lg'
224
- }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, {
225
- pt: "lg",
226
- px: isOnyx && 'lg'
227
- }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, {
228
- pt: "lg",
229
- px: isOnyx && 'lg'
230
- }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
231
- pt: "lg",
232
- px: isOnyx && 'lg'
233
- }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, {
234
- pt: "lg",
235
- px: isOnyx && 'lg'
236
- }, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, {
237
- pt: "lg",
238
- px: isOnyx && 'lg'
239
- }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Box, {
148
+ }), ___EmotionJSX(Box, {
149
+ gap: "lg"
150
+ }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, null, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, null, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, null, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, null, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, null, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, null, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, null, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.")), ___EmotionJSX(Box, {
240
151
  isRow: true,
241
- variant: "modal.buttonsContainer",
242
- px: isOnyx && 'lg'
152
+ variant: "modal.buttonsContainer"
243
153
  }, ___EmotionJSX(Button, {
244
154
  variant: "primary",
245
155
  onPress: state.close,
package/lib/components/Modal/Modal.styles.js CHANGED
@@ -69,7 +69,7 @@ var headingContainer = {
69
69
  pt: 'md',
70
70
  pr: 'lg',
71
71
  pb: 'md',
72
- background: 'white'
72
+ backgroundColor: 'background.base'
73
73
  };
74
74
  var buttonsContainer = {
75
75
  position: 'sticky',
package/lib/styles/themes/next-gen/variants/button.js CHANGED
@@ -349,7 +349,7 @@ var baseIconButton = {
349
349
  var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
350
350
  position: 'absolute',
351
351
  top: 32,
352
- right: 42
352
+ right: 18
353
353
  });
354
354
  var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {
355
355
  path: {
package/lib/styles/themes/next-gen/variants/variants.js CHANGED
@@ -141,7 +141,10 @@ var modalSize = {
141
141
  };
142
142
  var modal = {
143
143
  content: {
144
- p: 0,
144
+ boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.5)',
145
+ px: 'lg',
146
+ pb: 'lg',
147
+ pt: 0,
145
148
  borderRadius: '4px',
146
149
  opacity: 0,
147
150
  top: '0',
@@ -183,20 +186,9 @@ var modal = {
183
186
  justifyContent: 'start'
184
187
  },
185
188
  header: {
186
- px: 'lg',
187
- py: 'md',
188
- borderBottom: '1px solid',
189
- borderBottomColor: 'border.base',
190
- bg: 'background.base'
191
- },
192
- footer: {
193
- borderTop: '1px solid',
194
- borderTopColor: 'border.base',
195
- px: 'lg',
196
- py: 'md'
197
- },
198
- buttonsContainer: {
199
- bottom: 0
189
+ pt: 'lg',
190
+ bg: 'background.base',
191
+ mb: 'lg'
200
192
  }
201
193
  };
202
194
  var listBox = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.130.3",
3
+ "version": "2.130.4-alpha.0",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",