@pingux/astro 2.57.0-alpha.2 → 2.57.0-alpha.5

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 (7) hide show
  1. package/lib/cjs/components/Stepper/Stepper.mdx +20 -14
  2. package/lib/cjs/components/Stepper/Stepper.stories.js +115 -34
  3. package/lib/cjs/components/Stepper/Stepper.styles.js +2 -1
  4. package/lib/components/Stepper/Stepper.mdx +20 -14
  5. package/lib/components/Stepper/Stepper.stories.js +115 -34
  6. package/lib/components/Stepper/Stepper.styles.js +2 -1
  7. package/package.json +1 -1
package/lib/cjs/components/Stepper/Stepper.mdx CHANGED
@@ -1,13 +1,14 @@
1
- import { Meta } from '@storybook/addon-docs';
1
+ import { Meta } from "@storybook/addon-docs";
2
2
 
3
3
  <Meta title="Components/Stepper/Stepper" />
4
4
 
5
5
  # Stepper
6
6
 
7
- The Stepper component acts as a wrapper for individual step components.
7
+ The Stepper component acts as a wrapper for individual step components.
8
8
  It is used to display progress through a sequence of logical and numbered steps, usually within a configuration wizard.
9
9
 
10
10
  This component should be used:
11
+
11
12
  - To reveal or hide sections of content.
12
13
  - For progressive disclosure.
13
14
 
@@ -19,23 +20,28 @@ This component requires the Item originating from [react-stately/collections](ht
19
20
 
20
21
  ### Accessibility
21
22
 
22
- This component should adhere to the [WAI-ARIA Stepper](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) accessibility guidelines.
23
+ This component should adhere to the [WAI-ARIA Stepper](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) accessibility guidelines.
23
24
 
24
25
  #### Keyboard Navigation
25
26
 
26
- These keys provide additional functionality to the component.
27
+ These keys provide additional functionality to the component.
27
28
 
28
- | Keys | Function |
29
- | ---- | ---- |
30
- | Tab | The field is focusable using the Tab key and follows the page tab sequence. |
31
- | Arrow keys | When this field is focused, the arrow keys can be used to navigate through the steps. |
32
- | Shift + Tab | Moves focus to the previous focusable component. |
33
- | Home(Fn + Right Arrow Key) Or Control/Command + Home| Shifts the focus to the first step. |
34
- | End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last step. |
29
+ | Keys | Function |
30
+ | ---------------------------------------------------- | ------------------------------------------------------------------------------------- |
31
+ | Tab | The field is focusable using the Tab key and follows the page tab sequence. |
32
+ | Arrow keys | When this field is focused, the arrow keys can be used to navigate through the steps. |
33
+ | Shift + Tab | Moves focus to the previous focusable component. |
34
+ | Home(Fn + Right Arrow Key) Or Control/Command + Home | Shifts the focus to the first step. |
35
+ | End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last step. |
35
36
 
36
37
  #### Screen Readers
37
38
 
38
39
  This component uses the following attributes to assist screen readers:
39
- - The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous.
40
- - Each step uses the **`aria-selected`** attribute to indicate the selection status, and the **`aria-control`** attribute is supplied with the associated panel ID that displays the content.
41
- - Each step uses the **`aria-labelledby`** with the label ID to reference it.
40
+
41
+ - The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous.
42
+ - Each step uses the **`aria-selected`** attribute to indicate the selection status, and the **`aria-control`** attribute is supplied with the associated panel ID that displays the content.
43
+ - Each step uses the **`aria-labelledby`** with the label ID to reference it.
44
+
45
+ #### Usage
46
+
47
+ - The stepper component is always center-aligned in its context, whether it's in a page, a panel, or a popup.
package/lib/cjs/components/Stepper/Stepper.stories.js CHANGED
@@ -8,12 +8,14 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
8
8
  _Object$defineProperty(exports, "__esModule", {
9
9
  value: true
10
10
  });
11
- exports["default"] = exports.WithoutContent = exports.Default = exports.ControlledStepper = void 0;
11
+ exports["default"] = exports.Panel = exports.Default = exports.ControlledStepper = void 0;
12
12
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
13
13
  var _react = _interopRequireWildcard(require("react"));
14
14
  var _reactStately = require("react-stately");
15
+ var _CreationOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CreationOutlineIcon"));
15
16
  var _storybookAddonDesigns = require("storybook-addon-designs");
16
17
  var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
18
+ var _hooks = require("../../hooks");
17
19
  var _index = require("../../index");
18
20
  var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
19
21
  var _Stepper = _interopRequireDefault(require("./Stepper.mdx"));
@@ -70,30 +72,69 @@ var _default = {
70
72
  };
71
73
  exports["default"] = _default;
72
74
  var steps = [{
73
- label: 'Label 1',
74
- children: 'This is content for step 1',
75
+ label: 'Duis Aute',
76
+ children: 'Quis autem vel eum iure reprehenderit qui in ea voluptate',
77
+ title: 'Duis Aute',
75
78
  name: 'step1'
76
79
  }, {
77
- label: 'Label 2',
78
- children: 'This is content for step 2',
80
+ label: 'Lorem Ipsum',
81
+ children: 'Sed ut perspiciatis unde omnis',
82
+ title: 'Lorem Ipsum',
79
83
  name: 'step2'
80
84
  }, {
81
- label: 'Label 3',
82
- children: 'This is content for step 3',
85
+ label: 'Excepteur Sint',
86
+ children: 'Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam',
87
+ title: 'Excepteur Sint',
83
88
  name: 'step3'
84
89
  }];
90
+ var sx = {
91
+ overlayPanel: {
92
+ padding: '0px',
93
+ transition: 'width 500ms, right 500ms'
94
+ },
95
+ stepperContainer: {
96
+ padding: 'lg'
97
+ },
98
+ contentContainer: {
99
+ marginTop: 'lg',
100
+ gap: 'sm'
101
+ },
102
+ buttonStyle: {
103
+ margin: '50px 0px'
104
+ }
105
+ };
85
106
  var Default = function Default(args) {
86
107
  return (0, _react2.jsx)(_index.Stepper, args, (0, _react2.jsx)(_reactStately.Item, {
87
108
  key: "step1",
88
- textValue: "Step 1"
109
+ textValue: "Duis Aute"
110
+ }, (0, _react2.jsx)(_index.Box, {
111
+ sx: sx.contentContainer
89
112
  }, (0, _react2.jsx)(_index.Text, {
90
- pt: "lg"
91
- }, "This is content for step 1")), (0, _react2.jsx)(_reactStately.Item, {
113
+ fontSize: "md",
114
+ fontWeight: "3"
115
+ }, "Duis Aute"), (0, _react2.jsx)(_index.Text, {
116
+ fontSize: "md"
117
+ }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_reactStately.Item, {
92
118
  key: "step2",
93
- textValue: "Step 2"
119
+ textValue: "Lorem Ipsum"
120
+ }, (0, _react2.jsx)(_index.Box, {
121
+ sx: sx.contentContainer
122
+ }, (0, _react2.jsx)(_index.Text, {
123
+ fontSize: "md",
124
+ fontWeight: "3"
125
+ }, "Lorem Ipsum"), (0, _react2.jsx)(_index.Text, {
126
+ fontSize: "md"
127
+ }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_reactStately.Item, {
128
+ key: "step3",
129
+ textValue: "Excepteur Sint"
130
+ }, (0, _react2.jsx)(_index.Box, {
131
+ sx: sx.contentContainer
94
132
  }, (0, _react2.jsx)(_index.Text, {
95
- pt: "lg"
96
- }, "This is content for step 2")));
133
+ fontSize: "md",
134
+ fontWeight: "3"
135
+ }, "Excepteur Sint"), (0, _react2.jsx)(_index.Text, {
136
+ fontSize: "md"
137
+ }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
97
138
  };
98
139
  exports.Default = Default;
99
140
  Default.parameters = {
@@ -107,12 +148,6 @@ var ControlledStepper = function ControlledStepper() {
107
148
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
108
149
  activeStep = _useState2[0],
109
150
  setActiveStep = _useState2[1];
110
-
111
- // steps = [
112
- // { label: 'Label 1', children: 'This is content for step 1', name: 'step1' },
113
- // { label: 'Label 2', children: 'This is content for step 2', name: 'step2' },
114
- // { label: 'Label 3', children: 'This is content for step 3', name: 'step3' },
115
- // ];
116
151
  return (0, _react2.jsx)(_index.Stepper, {
117
152
  items: steps,
118
153
  activeStep: activeStep,
@@ -120,23 +155,69 @@ var ControlledStepper = function ControlledStepper() {
120
155
  }, function (item) {
121
156
  return (0, _react2.jsx)(_reactStately.Item, {
122
157
  key: item.name,
123
- textValue: item.name
158
+ textValue: item.title
159
+ }, (0, _react2.jsx)(_index.Box, {
160
+ sx: sx.contentContainer
124
161
  }, (0, _react2.jsx)(_index.Text, {
125
- pt: "lg"
126
- }, item.children));
162
+ fontSize: "md",
163
+ fontWeight: "3"
164
+ }, item.title), (0, _react2.jsx)(_index.Text, {
165
+ fontSize: "md"
166
+ }, item.children)));
127
167
  });
128
168
  };
129
169
  exports.ControlledStepper = ControlledStepper;
130
- var WithoutContent = function WithoutContent() {
131
- return (0, _react2.jsx)(_index.Stepper, null, (0, _react2.jsx)(_reactStately.Item, {
132
- key: "step1",
133
- textValue: "Step 1"
134
- }), (0, _react2.jsx)(_reactStately.Item, {
135
- key: "step2",
136
- textValue: "Step 2"
137
- }), (0, _react2.jsx)(_reactStately.Item, {
138
- key: "step3",
139
- textValue: "Step 3"
140
- }));
170
+ var Panel = function Panel() {
171
+ var _useState3 = (0, _react.useState)(1),
172
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
173
+ activeStep = _useState4[0],
174
+ setActiveStep = _useState4[1];
175
+ var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
176
+ state = _useOverlayPanelState.state,
177
+ onClose = _useOverlayPanelState.onClose;
178
+ var triggerRef = _react.useRef < HTMLButtonElement > null;
179
+ var onCloseHandler = function onCloseHandler() {
180
+ return onClose(state, triggerRef);
181
+ };
182
+ return (
183
+ // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
184
+ // readers when an overlay opens.
185
+ (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
186
+ onPress: state.open,
187
+ "aria-expanded": state.isOpen,
188
+ sx: sx.buttonStyle
189
+ }, "Open Panel"), (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.OverlayPanel, {
190
+ isTransitioning: state.isTransitioning,
191
+ isOpen: state.isOpen,
192
+ state: state,
193
+ triggerRef: triggerRef,
194
+ sx: sx.overlayPanel,
195
+ size: "full"
196
+ }, (0, _react2.jsx)(_index.PanelHeader, {
197
+ data: {
198
+ icon: _CreationOutlineIcon["default"],
199
+ text: 'Sed Ut Perspiciatis'
200
+ }
201
+ }, (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
202
+ onPress: onCloseHandler
203
+ })), (0, _react2.jsx)(_index.Stepper, {
204
+ items: steps,
205
+ activeStep: activeStep,
206
+ onStepChange: setActiveStep,
207
+ sx: sx.stepperContainer
208
+ }, function (item) {
209
+ return (0, _react2.jsx)(_reactStately.Item, {
210
+ key: item.name,
211
+ textValue: item.title
212
+ }, (0, _react2.jsx)(_index.Box, {
213
+ sx: sx.contentContainer
214
+ }, (0, _react2.jsx)(_index.Text, {
215
+ fontSize: "md",
216
+ fontWeight: "3"
217
+ }, item.title), (0, _react2.jsx)(_index.Text, {
218
+ fontSize: "md"
219
+ }, item.children)));
220
+ })))
221
+ );
141
222
  };
142
- exports.WithoutContent = WithoutContent;
223
+ exports.Panel = Panel;
package/lib/cjs/components/Stepper/Stepper.styles.js CHANGED
@@ -24,7 +24,8 @@ var tabs = {
24
24
  outline: 'none',
25
25
  borderBottom: 'none',
26
26
  mb: 0,
27
- width: '100%'
27
+ width: '100%',
28
+ justifyContent: 'center'
28
29
  };
29
30
  var tab = {
30
31
  mb: 0,
package/lib/components/Stepper/Stepper.mdx CHANGED
@@ -1,13 +1,14 @@
1
- import { Meta } from '@storybook/addon-docs';
1
+ import { Meta } from "@storybook/addon-docs";
2
2
 
3
3
  <Meta title="Components/Stepper/Stepper" />
4
4
 
5
5
  # Stepper
6
6
 
7
- The Stepper component acts as a wrapper for individual step components.
7
+ The Stepper component acts as a wrapper for individual step components.
8
8
  It is used to display progress through a sequence of logical and numbered steps, usually within a configuration wizard.
9
9
 
10
10
  This component should be used:
11
+
11
12
  - To reveal or hide sections of content.
12
13
  - For progressive disclosure.
13
14
 
@@ -19,23 +20,28 @@ This component requires the Item originating from [react-stately/collections](ht
19
20
 
20
21
  ### Accessibility
21
22
 
22
- This component should adhere to the [WAI-ARIA Stepper](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) accessibility guidelines.
23
+ This component should adhere to the [WAI-ARIA Stepper](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) accessibility guidelines.
23
24
 
24
25
  #### Keyboard Navigation
25
26
 
26
- These keys provide additional functionality to the component.
27
+ These keys provide additional functionality to the component.
27
28
 
28
- | Keys | Function |
29
- | ---- | ---- |
30
- | Tab | The field is focusable using the Tab key and follows the page tab sequence. |
31
- | Arrow keys | When this field is focused, the arrow keys can be used to navigate through the steps. |
32
- | Shift + Tab | Moves focus to the previous focusable component. |
33
- | Home(Fn + Right Arrow Key) Or Control/Command + Home| Shifts the focus to the first step. |
34
- | End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last step. |
29
+ | Keys | Function |
30
+ | ---------------------------------------------------- | ------------------------------------------------------------------------------------- |
31
+ | Tab | The field is focusable using the Tab key and follows the page tab sequence. |
32
+ | Arrow keys | When this field is focused, the arrow keys can be used to navigate through the steps. |
33
+ | Shift + Tab | Moves focus to the previous focusable component. |
34
+ | Home(Fn + Right Arrow Key) Or Control/Command + Home | Shifts the focus to the first step. |
35
+ | End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last step. |
35
36
 
36
37
  #### Screen Readers
37
38
 
38
39
  This component uses the following attributes to assist screen readers:
39
- - The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous.
40
- - Each step uses the **`aria-selected`** attribute to indicate the selection status, and the **`aria-control`** attribute is supplied with the associated panel ID that displays the content.
41
- - Each step uses the **`aria-labelledby`** with the label ID to reference it.
40
+
41
+ - The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous.
42
+ - Each step uses the **`aria-selected`** attribute to indicate the selection status, and the **`aria-control`** attribute is supplied with the associated panel ID that displays the content.
43
+ - Each step uses the **`aria-labelledby`** with the label ID to reference it.
44
+
45
+ #### Usage
46
+
47
+ - The stepper component is always center-aligned in its context, whether it's in a page, a panel, or a popup.
package/lib/components/Stepper/Stepper.stories.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
2
- import React, { useState } from 'react';
2
+ import React, { useRef, useState } from 'react';
3
3
  import { Item } from 'react-stately';
4
+ import CreationOutlineIcon from '@pingux/mdi-react/CreationOutlineIcon';
4
5
  import { withDesign } from 'storybook-addon-designs';
5
6
  import DocsLayout from '../../../.storybook/storybookDocsLayout';
6
- import { Stepper, Text } from '../../index';
7
+ import { useOverlayPanelState } from '../../hooks';
8
+ import { Box, Button, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, Stepper, Text } from '../../index';
7
9
  import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
8
10
  import StepperReadme from './Stepper.mdx';
9
11
  import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -56,30 +58,69 @@ export default {
56
58
  }
57
59
  };
58
60
  var steps = [{
59
- label: 'Label 1',
60
- children: 'This is content for step 1',
61
+ label: 'Duis Aute',
62
+ children: 'Quis autem vel eum iure reprehenderit qui in ea voluptate',
63
+ title: 'Duis Aute',
61
64
  name: 'step1'
62
65
  }, {
63
- label: 'Label 2',
64
- children: 'This is content for step 2',
66
+ label: 'Lorem Ipsum',
67
+ children: 'Sed ut perspiciatis unde omnis',
68
+ title: 'Lorem Ipsum',
65
69
  name: 'step2'
66
70
  }, {
67
- label: 'Label 3',
68
- children: 'This is content for step 3',
71
+ label: 'Excepteur Sint',
72
+ children: 'Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam',
73
+ title: 'Excepteur Sint',
69
74
  name: 'step3'
70
75
  }];
76
+ var sx = {
77
+ overlayPanel: {
78
+ padding: '0px',
79
+ transition: 'width 500ms, right 500ms'
80
+ },
81
+ stepperContainer: {
82
+ padding: 'lg'
83
+ },
84
+ contentContainer: {
85
+ marginTop: 'lg',
86
+ gap: 'sm'
87
+ },
88
+ buttonStyle: {
89
+ margin: '50px 0px'
90
+ }
91
+ };
71
92
  export var Default = function Default(args) {
72
93
  return ___EmotionJSX(Stepper, args, ___EmotionJSX(Item, {
73
94
  key: "step1",
74
- textValue: "Step 1"
95
+ textValue: "Duis Aute"
96
+ }, ___EmotionJSX(Box, {
97
+ sx: sx.contentContainer
75
98
  }, ___EmotionJSX(Text, {
76
- pt: "lg"
77
- }, "This is content for step 1")), ___EmotionJSX(Item, {
99
+ fontSize: "md",
100
+ fontWeight: "3"
101
+ }, "Duis Aute"), ___EmotionJSX(Text, {
102
+ fontSize: "md"
103
+ }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), ___EmotionJSX(Item, {
78
104
  key: "step2",
79
- textValue: "Step 2"
105
+ textValue: "Lorem Ipsum"
106
+ }, ___EmotionJSX(Box, {
107
+ sx: sx.contentContainer
80
108
  }, ___EmotionJSX(Text, {
81
- pt: "lg"
82
- }, "This is content for step 2")));
109
+ fontSize: "md",
110
+ fontWeight: "3"
111
+ }, "Lorem Ipsum"), ___EmotionJSX(Text, {
112
+ fontSize: "md"
113
+ }, "Sed ut perspiciatis unde omnis"))), ___EmotionJSX(Item, {
114
+ key: "step3",
115
+ textValue: "Excepteur Sint"
116
+ }, ___EmotionJSX(Box, {
117
+ sx: sx.contentContainer
118
+ }, ___EmotionJSX(Text, {
119
+ fontSize: "md",
120
+ fontWeight: "3"
121
+ }, "Excepteur Sint"), ___EmotionJSX(Text, {
122
+ fontSize: "md"
123
+ }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
83
124
  };
84
125
  Default.parameters = {
85
126
  design: {
@@ -92,12 +133,6 @@ export var ControlledStepper = function ControlledStepper() {
92
133
  _useState2 = _slicedToArray(_useState, 2),
93
134
  activeStep = _useState2[0],
94
135
  setActiveStep = _useState2[1];
95
-
96
- // steps = [
97
- // { label: 'Label 1', children: 'This is content for step 1', name: 'step1' },
98
- // { label: 'Label 2', children: 'This is content for step 2', name: 'step2' },
99
- // { label: 'Label 3', children: 'This is content for step 3', name: 'step3' },
100
- // ];
101
136
  return ___EmotionJSX(Stepper, {
102
137
  items: steps,
103
138
  activeStep: activeStep,
@@ -105,21 +140,67 @@ export var ControlledStepper = function ControlledStepper() {
105
140
  }, function (item) {
106
141
  return ___EmotionJSX(Item, {
107
142
  key: item.name,
108
- textValue: item.name
143
+ textValue: item.title
144
+ }, ___EmotionJSX(Box, {
145
+ sx: sx.contentContainer
109
146
  }, ___EmotionJSX(Text, {
110
- pt: "lg"
111
- }, item.children));
147
+ fontSize: "md",
148
+ fontWeight: "3"
149
+ }, item.title), ___EmotionJSX(Text, {
150
+ fontSize: "md"
151
+ }, item.children)));
112
152
  });
113
153
  };
114
- export var WithoutContent = function WithoutContent() {
115
- return ___EmotionJSX(Stepper, null, ___EmotionJSX(Item, {
116
- key: "step1",
117
- textValue: "Step 1"
118
- }), ___EmotionJSX(Item, {
119
- key: "step2",
120
- textValue: "Step 2"
121
- }), ___EmotionJSX(Item, {
122
- key: "step3",
123
- textValue: "Step 3"
124
- }));
154
+ export var Panel = function Panel() {
155
+ var _useState3 = useState(1),
156
+ _useState4 = _slicedToArray(_useState3, 2),
157
+ activeStep = _useState4[0],
158
+ setActiveStep = _useState4[1];
159
+ var _useOverlayPanelState = useOverlayPanelState(),
160
+ state = _useOverlayPanelState.state,
161
+ onClose = _useOverlayPanelState.onClose;
162
+ var triggerRef = useRef < HTMLButtonElement > null;
163
+ var onCloseHandler = function onCloseHandler() {
164
+ return onClose(state, triggerRef);
165
+ };
166
+ return (
167
+ // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
168
+ // readers when an overlay opens.
169
+ ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
170
+ onPress: state.open,
171
+ "aria-expanded": state.isOpen,
172
+ sx: sx.buttonStyle
173
+ }, "Open Panel"), (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, {
174
+ isTransitioning: state.isTransitioning,
175
+ isOpen: state.isOpen,
176
+ state: state,
177
+ triggerRef: triggerRef,
178
+ sx: sx.overlayPanel,
179
+ size: "full"
180
+ }, ___EmotionJSX(PanelHeader, {
181
+ data: {
182
+ icon: CreationOutlineIcon,
183
+ text: 'Sed Ut Perspiciatis'
184
+ }
185
+ }, ___EmotionJSX(PanelHeaderCloseButton, {
186
+ onPress: onCloseHandler
187
+ })), ___EmotionJSX(Stepper, {
188
+ items: steps,
189
+ activeStep: activeStep,
190
+ onStepChange: setActiveStep,
191
+ sx: sx.stepperContainer
192
+ }, function (item) {
193
+ return ___EmotionJSX(Item, {
194
+ key: item.name,
195
+ textValue: item.title
196
+ }, ___EmotionJSX(Box, {
197
+ sx: sx.contentContainer
198
+ }, ___EmotionJSX(Text, {
199
+ fontSize: "md",
200
+ fontWeight: "3"
201
+ }, item.title), ___EmotionJSX(Text, {
202
+ fontSize: "md"
203
+ }, item.children)));
204
+ })))
205
+ );
125
206
  };
package/lib/components/Stepper/Stepper.styles.js CHANGED
@@ -18,7 +18,8 @@ var tabs = {
18
18
  outline: 'none',
19
19
  borderBottom: 'none',
20
20
  mb: 0,
21
- width: '100%'
21
+ width: '100%',
22
+ justifyContent: 'center'
22
23
  };
23
24
  var tab = {
24
25
  mb: 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.57.0-alpha.2",
3
+ "version": "2.57.0-alpha.5",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",