@pingux/astro 1.27.0-alpha.13 → 1.27.0-alpha.14

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.
@@ -58,8 +58,6 @@ var _overlays = require("@react-stately/overlays");
58
58
 
59
59
  var _overlays2 = require("@react-aria/overlays");
60
60
 
61
- var _utils = require("@react-aria/utils");
62
-
63
61
  var _ArrowDropUpIcon = _interopRequireDefault(require("mdi-react/ArrowDropUpIcon"));
64
62
 
65
63
  var _ArrowDropDownIcon = _interopRequireDefault(require("mdi-react/ArrowDropDownIcon"));
@@ -76,7 +74,7 @@ var _index = require("../../index");
76
74
 
77
75
  var _react2 = require("@emotion/react");
78
76
 
79
- var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem", "popoverProps"];
77
+ var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"];
80
78
 
81
79
  function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
82
80
 
@@ -103,7 +101,6 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
103
101
  name = props.name,
104
102
  searchProps = props.searchProps,
105
103
  selectedItem = props.selectedItem,
106
- popoverProps = props.popoverProps,
107
104
  others = (0, _objectWithoutProperties2["default"])(props, _excluded);
108
105
 
109
106
  var _useState = (0, _react.useState)(''),
@@ -270,7 +267,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
270
267
  "aria-label": "".concat((typeof selectedItem === 'string' ? selectedItem : selectedValue) || 'Selected Item')
271
268
  }), selectedItem, (0, _react2.jsx)(_index.Icon, {
272
269
  icon: popoverState.isOpen ? _ArrowDropUpIcon["default"] : _ArrowDropDownIcon["default"]
273
- })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, (0, _utils.mergeProps)(overlayProps, positionProps, popoverProps), {
270
+ })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, {
274
271
  ref: overlayRef,
275
272
  isOpen: popoverState.isOpen,
276
273
  scrollRef: scrollBoxRef,
@@ -358,9 +355,6 @@ EnvironmentBreadcrumb.propTypes = {
358
355
  /** Callback function that fires when the dropdown is closed. */
359
356
  onPopoverClose: _propTypes["default"].func,
360
357
 
361
- /** Props object that is spread directly into the popover container component. */
362
- popoverProps: _propTypes["default"].shape({}),
363
-
364
358
  /** Props object that is spread directly into the SearchField element. */
365
359
  searchProps: _propTypes["default"].shape({}),
366
360
 
@@ -2,28 +2,10 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
4
 
5
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
-
7
- var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
8
-
9
- var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
10
-
11
- var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
12
-
13
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
14
-
15
- var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
16
-
17
- var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
18
-
19
- var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
20
-
21
5
  var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
22
6
 
23
7
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
24
8
 
25
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
26
-
27
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
28
10
 
29
11
  var _react = _interopRequireDefault(require("react"));
@@ -40,10 +22,6 @@ var _index = require("../../index");
40
22
 
41
23
  var _react2 = require("@emotion/react");
42
24
 
43
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
44
-
45
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
46
-
47
25
  var testEnvBreadcrumb = 'test-env-breadcrumb';
48
26
  var testName = 'test-name';
49
27
  var testSelectedItem = 'test-selected-item';
@@ -74,10 +52,6 @@ var defaultProps = {
74
52
  },
75
53
  items: items
76
54
  };
77
- var popoverProps = {
78
- maxWidth: '100px',
79
- 'data-testid': 'popover-container'
80
- };
81
55
  var defaultWithSectionsProps = {
82
56
  'data-testid': testEnvBreadcrumb,
83
57
  name: testName,
@@ -161,15 +135,6 @@ test('should display name', function () {
161
135
  getComponent();
162
136
  expect(_testWrapper.screen.getByText(testName)).toBeInTheDocument();
163
137
  });
164
- test('should spread props into popover container', function () {
165
- getComponent(_objectSpread(_objectSpread({}, popoverProps), {}, {
166
- isDefaultOpen: true
167
- }));
168
-
169
- _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
170
-
171
- expect(_testWrapper.screen.queryByTestId('popover-container')).toHaveStyle('max-width: 100px');
172
- });
173
138
  test('should display selectedItem', function () {
174
139
  getComponent();
175
140
  expect(_testWrapper.screen.getByText(testSelectedItem)).toBeInTheDocument();
@@ -38,17 +38,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
38
38
 
39
39
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
40
40
 
41
- /**
42
- * A `Page Header` is a composed component using text and icon button.
43
- * The component is separated from the body and appears at the top.
44
- * For customization,
45
- * please see [Page Header](./?path=/story/recipes-page-header--default) recipe docs.
46
- */
47
41
  var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
48
42
  var title = props.title,
49
43
  children = props.children,
50
44
  others = (0, _objectWithoutProperties2["default"])(props, _excluded);
51
- (0, _hooks.useDeprecationWarning)('The Page Header component will be deprecated in Astro-UI 2.0.0. Use Page Header recipe instead.');
45
+ (0, _hooks.useDeprecationWarning)('The Page Header component will be deprecated in Astro-UI 2.0.0.');
52
46
  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
53
47
  isRow: true,
54
48
  justifyContent: "space-between",
@@ -128,106 +128,44 @@ var items = [{
128
128
  avatar: _AccountIcon["default"],
129
129
  hasSeparator: false
130
130
  }];
131
- var sx = {
132
- wrapper: {
133
- px: 'lg',
134
- py: 'lg',
135
- bg: 'accent.99',
136
- height: '900px',
137
- overflowY: 'scroll'
138
- },
139
- searchField: {
140
- position: 'fixed',
141
- mb: 'sm',
142
- width: '400px'
143
- },
144
- listElementWrapper: {
145
- px: 'md',
146
- bg: 'accent.99',
147
- justifyContent: 'center'
148
- },
149
- separator: {
150
- bg: 'accent.90'
151
- },
152
- tabsWrapper: {
153
- px: 'lg',
154
- pt: 'xs'
155
- },
156
- iconButton: {
157
- position: 'absolute',
158
- top: 0,
159
- right: 0
160
- },
161
- itemLabel: {
162
- fontSize: 'sm',
163
- fontWeight: 3,
164
- lineHeight: '16px',
165
- mb: 'xs'
166
- },
167
- itemValue: {
168
- fontWeight: 0,
169
- lineHeight: '18px',
170
- variant: 'base',
171
- mb: 'md'
172
- },
173
- listElement: {
174
- wrapper: {
175
- minHeight: '60px'
176
- },
177
- iconWrapper: {
178
- mr: 'auto',
179
- alignItems: 'center'
180
- },
181
- icon: {
182
- mr: 'sm',
183
- alignSelf: 'center',
184
- color: 'accent.40'
185
- },
186
- avatar: {
187
- width: '25px',
188
- height: '25px',
189
- mr: 'md'
190
- },
191
- title: {
192
- alignSelf: 'start'
193
- },
194
- subtitle: {
195
- fontSize: 'sm',
196
- my: '1px',
197
- lineHeight: '16px',
198
- alignSelf: 'start'
199
- },
200
- menuWrapper: {
201
- alignSelf: 'center'
202
- }
203
- }
204
- };
205
131
 
206
132
  var ListElement = function ListElement(_ref) {
207
133
  var item = _ref.item,
208
134
  onClosePanel = _ref.onClosePanel;
209
135
  return (0, _react2.jsx)(_index.Box, {
210
136
  isRow: true,
211
- sx: sx.listElement.wrapper
137
+ minHeight: "60px"
212
138
  }, (0, _react2.jsx)(_index.Box, {
213
139
  isRow: true,
214
- sx: sx.listElement.iconWrapper
140
+ mr: "auto",
141
+ alignItems: "center"
215
142
  }, item.hasIcon ? (0, _react2.jsx)(_index.Icon, {
216
143
  icon: item.avatar,
144
+ alignSelf: "center",
217
145
  size: 24,
218
- sx: sx.listElement.icon
146
+ mr: "sm",
147
+ color: "accent.40"
219
148
  }) : (0, _react2.jsx)(_index.Avatar, {
220
- sx: sx.listElement.avatar,
149
+ mr: "md",
150
+ sx: {
151
+ width: '25px',
152
+ height: '25px'
153
+ },
221
154
  src: item.avatar
222
155
  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
223
156
  variant: "bodyStrong",
224
- sx: sx.listElement.title
157
+ alignSelf: "start"
225
158
  }, item.lastName, ", ", item.firstName), (0, _react2.jsx)(_index.Text, {
159
+ sx: {
160
+ fontSize: 'sm',
161
+ my: '1px',
162
+ lineHeight: '16px'
163
+ },
226
164
  variant: "subtitle",
227
- sx: sx.listElement.subtitle
165
+ alignSelf: "start"
228
166
  }, item.email))), (0, _react2.jsx)(_index.Box, {
229
167
  isRow: true,
230
- sx: sx.listElement.menuWrapper
168
+ alignSelf: "center"
231
169
  }, (0, _react2.jsx)(_index.SwitchField, {
232
170
  "aria-label": "active user",
233
171
  isDefaultSelected: true,
@@ -284,7 +222,11 @@ var Default = function Default() {
284
222
  };
285
223
 
286
224
  return (0, _react2.jsx)(_index.Box, {
287
- sx: sx.wrapper
225
+ px: "lg",
226
+ py: "lg",
227
+ bg: "accent.99",
228
+ height: "900px",
229
+ overflowY: "scroll"
288
230
  }, (0, _react2.jsx)(_index.SearchField, {
289
231
  position: "fixed",
290
232
  mb: "sm",
@@ -318,15 +260,18 @@ var Default = function Default() {
318
260
  restoreFocus: true,
319
261
  autoFocus: true
320
262
  }, (0, _react2.jsx)(_index.Box, {
321
- sx: sx.listElementWrapper
263
+ px: "md",
264
+ bg: "accent.99",
265
+ justifyContent: "center"
322
266
  }, (0, _react2.jsx)(ListElement, {
323
267
  item: selectedItemId >= 0 ? items[selectedItemId] : [],
324
268
  onClosePanel: closePanelHandler
325
269
  })), (0, _react2.jsx)(_index.Separator, {
326
270
  margin: 0,
327
- sx: sx.separator
271
+ bg: "accent.90"
328
272
  }), (0, _react2.jsx)(_index.Box, {
329
- sx: sx.tabsWrapper
273
+ px: "lg",
274
+ pt: "xs"
330
275
  }, (0, _react2.jsx)(_index.Tabs, {
331
276
  tabListProps: {
332
277
  justifyContent: 'center'
@@ -340,33 +285,73 @@ var Default = function Default() {
340
285
  title: "Profile"
341
286
  }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.IconButton, {
342
287
  variant: "inverted",
343
- sx: sx.iconButton
288
+ sx: {
289
+ position: 'absolute',
290
+ top: 0,
291
+ right: 0
292
+ }
344
293
  }, (0, _react2.jsx)(_PencilIcon["default"], {
345
294
  size: 20
346
295
  })), (0, _react2.jsx)(_index.Text, {
347
- sx: sx.itemLabel,
348
- variant: "base"
296
+ sx: {
297
+ fontSize: 'sm',
298
+ fontWeight: 3,
299
+ lineHeight: '16px'
300
+ },
301
+ variant: "base",
302
+ mb: "xs"
349
303
  }, "Full Name"), (0, _react2.jsx)(_index.Text, {
350
- sx: sx.itemValue,
351
- variant: "base"
304
+ sx: {
305
+ fontWeight: 0,
306
+ lineHeight: '18px'
307
+ },
308
+ variant: "base",
309
+ mb: "md"
352
310
  }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
353
- sx: sx.itemLabel,
354
- variant: "base"
311
+ sx: {
312
+ fontSize: 'sm',
313
+ fontWeight: 3,
314
+ lineHeight: '16px'
315
+ },
316
+ variant: "base",
317
+ mb: "xs"
355
318
  }, "First Name"), (0, _react2.jsx)(_index.Text, {
356
- sx: sx.itemValue,
357
- variant: "base"
319
+ sx: {
320
+ fontWeight: 0,
321
+ lineHeight: '18px'
322
+ },
323
+ variant: "base",
324
+ mb: "md"
358
325
  }, items[selectedItemId].firstName), (0, _react2.jsx)(_index.Text, {
359
- sx: sx.itemLabel,
360
- variant: "base"
326
+ sx: {
327
+ fontSize: 'sm',
328
+ fontWeight: 3,
329
+ lineHeight: '16px'
330
+ },
331
+ variant: "base",
332
+ mb: "xs"
361
333
  }, "Last Name"), (0, _react2.jsx)(_index.Text, {
362
- sx: sx.itemValue,
363
- variant: "base"
334
+ sx: {
335
+ fontWeight: 0,
336
+ lineHeight: '18px'
337
+ },
338
+ variant: "base",
339
+ mb: "md"
364
340
  }, items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
365
- sx: sx.itemLabel,
366
- variant: "base"
341
+ sx: {
342
+ fontSize: 'sm',
343
+ fontWeight: 3,
344
+ lineHeight: '16px'
345
+ },
346
+ variant: "base",
347
+ mb: "xs"
367
348
  }, "Email"), (0, _react2.jsx)(_index.Text, {
368
- sx: sx.itemValue,
369
- variant: "base"
349
+ sx: {
350
+ fontWeight: 0,
351
+ lineHeight: '18px'
352
+ },
353
+ variant: "base",
354
+ mb: "md"
370
355
  }, items[selectedItemId].email))), (0, _react2.jsx)(_index.Tab, {
371
356
  title: "Group Memberships"
372
357
  }, (0, _react2.jsx)(_index.Text, null, "Group Memberships")), (0, _react2.jsx)(_index.Tab, {
@@ -26,40 +26,36 @@ var _default = {
26
26
  title: 'Recipes/Selected Field Overlay'
27
27
  };
28
28
  exports["default"] = _default;
29
- var sx = {
30
- container: {
31
- padding: 'md',
32
- position: 'relative',
33
- borderWidth: 2,
34
- borderStyle: 'solid',
35
- borderColor: 'active',
36
- borderRadius: 4,
37
- cursor: 'pointer'
38
- },
39
- overlay: {
40
- position: 'absolute',
41
- width: '100%',
42
- height: '100%',
43
- top: 0,
44
- left: 0,
45
- alignItems: 'center',
46
- justifyContent: 'center',
47
- '&:focus': {
48
- outline: 'none'
49
- }
50
- }
51
- };
52
29
 
53
30
  var Default = function Default() {
54
31
  return (0, _react2.jsx)(_Box["default"], {
55
- sx: sx.container
32
+ p: 15,
33
+ sx: {
34
+ position: 'relative',
35
+ borderWidth: 2,
36
+ borderStyle: 'solid',
37
+ borderColor: 'active',
38
+ borderRadius: 4,
39
+ cursor: 'pointer'
40
+ }
56
41
  }, (0, _react2.jsx)(_TextField["default"], {
57
42
  label: "Name",
58
43
  controlProps: {
59
44
  tabIndex: '-1'
60
45
  }
61
46
  }), (0, _react2.jsx)(_Box["default"], {
62
- sx: sx.overlay,
47
+ sx: {
48
+ position: 'absolute',
49
+ width: '100%',
50
+ height: '100%',
51
+ top: 0,
52
+ left: 0,
53
+ alignItems: 'center',
54
+ justifyContent: 'center',
55
+ '&:focus': {
56
+ outline: 'none'
57
+ }
58
+ },
63
59
  tabIndex: "0"
64
60
  }, (0, _react2.jsx)(_Icon["default"], {
65
61
  icon: _VisibilityOffOutlineIcon["default"],
@@ -137,79 +137,6 @@ var data = [{
137
137
  title: 'View a workflow'
138
138
  }]
139
139
  }];
140
- var sx = {
141
- iconContainer: {
142
- backgroundColor: 'accent.80',
143
- alignItems: 'center',
144
- justifyContent: 'center',
145
- mr: 'sm',
146
- borderRadius: '50%',
147
- zIndex: 3
148
- },
149
- headingSeparator: {
150
- flexGrow: 1,
151
- backgroundColor: 'accent.80',
152
- maxHeight: '100%',
153
- width: '6px !important',
154
- zIndex: 2,
155
- m: '0px 5px 0px 17px !important'
156
- },
157
- title: {
158
- fontSize: 'md',
159
- color: 'accent.30',
160
- lineHeight: '18px',
161
- fontWeight: '3',
162
- m: '12px 0px 28px 5px',
163
- maxWidth: '195px'
164
- },
165
- linkRowIconButton: {
166
- '&.is-pressed': {
167
- backgroundColor: 'transparent'
168
- },
169
- '&.is-pressed > svg > path': {
170
- fill: 'accent.30'
171
- },
172
- '&.is-hovered': {
173
- backgroundColor: 'transparent'
174
- }
175
- },
176
- linkRowIconSelected: {
177
- zIndex: 3,
178
- 'path': {
179
- fill: 'accent.30'
180
- }
181
- },
182
- linkRowIconNotSelected: {
183
- zIndex: 3,
184
- 'path': {
185
- fill: 'accent.80'
186
- }
187
- },
188
- linkRowSeparator: {
189
- flexGrow: 1,
190
- backgroundColor: 'accent.30',
191
- maxHeight: '100%',
192
- width: '1px !important',
193
- zIndex: 2,
194
- m: '-5px 5px -5px 11.5px !important'
195
- },
196
- linkRowText: {
197
- fontSize: 'md',
198
- color: '#163CE3',
199
- lineHeight: '18px',
200
- fontWeight: '0',
201
- m: '3px 0px 20px 10px',
202
- maxWidth: '140px'
203
- },
204
- container: {
205
- p: '15px 15px 0px 15px',
206
- width: '280px',
207
- backgroundColor: 'accent.95',
208
- borderRadius: '8px',
209
- zIndex: 1,
210
- boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
211
- }
212
- };
213
140
 
214
141
  var Stage = function Stage(props) {
215
142
  var title = props.title,
@@ -245,7 +172,14 @@ var Stage = function Stage(props) {
245
172
  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
246
173
  minWidth: "39.5px",
247
174
  minHeight: "39.5px",
248
- sx: sx.iconContainer
175
+ sx: {
176
+ backgroundColor: 'accent.80',
177
+ alignItems: 'center',
178
+ justifyContent: 'center',
179
+ mr: '10px',
180
+ borderRadius: '50%',
181
+ zIndex: 3
182
+ }
249
183
  }, (0, _react2.jsx)(_index.Icon, {
250
184
  icon: icon,
251
185
  color: "accent.40",
@@ -254,10 +188,24 @@ var Stage = function Stage(props) {
254
188
  zIndex: 3
255
189
  }
256
190
  })), !isLastStage && (0, _react2.jsx)(_index.Separator, {
257
- sx: sx.headingSeparator,
191
+ sx: {
192
+ flexGrow: 1,
193
+ backgroundColor: 'accent.80',
194
+ maxHeight: '100%',
195
+ width: '6px !important',
196
+ zIndex: 2,
197
+ m: '0px 5px 0px 17px !important'
198
+ },
258
199
  orientation: "vertical"
259
200
  })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
260
- sx: sx.title
201
+ sx: {
202
+ fontSize: '15px',
203
+ color: 'accent.30',
204
+ lineHeight: '18px',
205
+ fontWeight: '3',
206
+ m: '12px 0px 28px 5px',
207
+ maxWidth: '195px'
208
+ }
261
209
  }, title), (0, _react2.jsx)(_index.Box, {
262
210
  pl: "0px",
263
211
  mb: "25px"
@@ -298,19 +246,53 @@ var LinkRow = function LinkRow(props) {
298
246
  }
299
247
  }, (0, _react2.jsx)(_index.IconButton, {
300
248
  onPress: onIconPress,
301
- sx: sx.linkRowIconButton,
249
+ sx: {
250
+ '&.is-pressed': {
251
+ backgroundColor: 'transparent'
252
+ },
253
+ '&.is-pressed > svg > path': {
254
+ fill: 'accent.30'
255
+ },
256
+ '&.is-hovered': {
257
+ backgroundColor: 'transparent'
258
+ }
259
+ },
302
260
  "aria-label": "completed step icon indicator"
303
261
  }, (0, _react2.jsx)(_index.Icon, {
304
262
  icon: isSelected ? _CheckCircleIcon["default"] : RadioButtonIcon,
305
263
  size: isSelected ? '20px' : '18px',
306
- sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected
264
+ sx: isSelected ? {
265
+ zIndex: 3,
266
+ 'path': {
267
+ fill: 'accent.30'
268
+ }
269
+ } : {
270
+ zIndex: 3,
271
+ 'path': {
272
+ fill: 'accent.80'
273
+ }
274
+ }
307
275
  }))), !isLastLink && isLinkSelected && (0, _react2.jsx)(_index.Separator, {
308
- sx: sx.linkRowSeparator,
276
+ sx: {
277
+ flexGrow: 1,
278
+ backgroundColor: 'accent.30',
279
+ maxHeight: '100%',
280
+ width: '1px !important',
281
+ zIndex: 2,
282
+ m: '-5px 5px -5px 11.5px !important'
283
+ },
309
284
  orientation: "vertical"
310
285
  })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, {
311
286
  href: "https://www.pingidentity.com",
312
287
  target: "_blank",
313
- sx: sx.linkRowText
288
+ sx: {
289
+ fontSize: '15px',
290
+ color: '#163CE3',
291
+ lineHeight: '18px',
292
+ fontWeight: '0',
293
+ m: '3px 0px 20px 10px',
294
+ maxWidth: '140px'
295
+ }
314
296
  }, title)));
315
297
  };
316
298
 
@@ -318,7 +300,16 @@ var Default = function Default() {
318
300
  // Open the `Story` addons tab to view the source code for full context.
319
301
  return (0, _react2.jsx)(_index.Box, {
320
302
  as: "nav",
321
- sx: sx.container
303
+ backgroundColor: "accent.95",
304
+ width: "280px",
305
+ sx: {
306
+ p: '15px 15px 0px 15px',
307
+ width: '280px',
308
+ backgroundColor: 'accent.95',
309
+ borderRadius: '8px',
310
+ zIndex: 1,
311
+ boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
312
+ }
322
313
  }, (0, _react2.jsx)(_index.Box, {
323
314
  paddingLeft: "0px"
324
315
  }, (0, _map["default"])(data).call(data, function (stage, index) {
@@ -12,7 +12,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
12
12
  import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
13
13
  import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
14
14
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
15
- var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem", "popoverProps"];
15
+ var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"];
16
16
 
17
17
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
18
18
 
@@ -25,7 +25,6 @@ import HomeIcon from 'mdi-react/HomeIcon';
25
25
  import PropTypes from 'prop-types';
26
26
  import { useOverlayTriggerState } from '@react-stately/overlays';
27
27
  import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
28
- import { mergeProps } from '@react-aria/utils';
29
28
  import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
30
29
  import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
31
30
  import { FocusScope } from '@react-aria/focus';
@@ -52,7 +51,6 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
52
51
  name = props.name,
53
52
  searchProps = props.searchProps,
54
53
  selectedItem = props.selectedItem,
55
- popoverProps = props.popoverProps,
56
54
  others = _objectWithoutProperties(props, _excluded);
57
55
 
58
56
  var _useState = useState(''),
@@ -217,7 +215,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
217
215
  "aria-label": "".concat((typeof selectedItem === 'string' ? selectedItem : selectedValue) || 'Selected Item')
218
216
  }), selectedItem, ___EmotionJSX(Icon, {
219
217
  icon: popoverState.isOpen ? ArrowDropUpIcon : ArrowDropDownIcon
220
- })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, mergeProps(overlayProps, positionProps, popoverProps), {
218
+ })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, {
221
219
  ref: overlayRef,
222
220
  isOpen: popoverState.isOpen,
223
221
  scrollRef: scrollBoxRef,
@@ -305,9 +303,6 @@ EnvironmentBreadcrumb.propTypes = {
305
303
  /** Callback function that fires when the dropdown is closed. */
306
304
  onPopoverClose: PropTypes.func,
307
305
 
308
- /** Props object that is spread directly into the popover container component. */
309
- popoverProps: PropTypes.shape({}),
310
-
311
306
  /** Props object that is spread directly into the SearchField element. */
312
307
  searchProps: PropTypes.shape({}),
313
308