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

package/lib/cjs/recipes/RowLineChart.stories.js

@@ -170,34 +170,6 @@ var zeroData = [{
   id: 12,
   value: 0
 }];
-var sx = {
-  container: {
-    backgroundColor: 'accent.99',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    pr: '20px'
-  },
-  button: {
-    ml: 'md',
-    pr: 'md'
-  },
-  chartTitleContainer: {
-    ml: '20px',
-    pr: 'md'
-  },
-  chartContainer: {
-    width: '100%',
-    height: '100%'
-  },
-  chart: {
-    width: '50',
-    height: '18'
-  },
-  chartTrendContainer: {
-    ml: 'md',
-    width: '50px'
-  }
-};
 
 var Default = function Default() {
   var _useResizeObserver = (0, _useResizeObserver2["default"])(),
@@ -221,7 +193,10 @@ var Default = function Default() {
   }, [isMobile]);
   var EmptyData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    sx: sx.container,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
     ref: ref
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -235,7 +210,8 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    ml: 20,
+    pr: 15
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -248,7 +224,8 @@ var Default = function Default() {
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    sx: sx.button,
+    ml: 15,
+    pr: 15,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -257,9 +234,11 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.chart"
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    sx: sx.chartContainer
+    width: "100%",
+    height: "100%"
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    sx: sx.chart,
+    width: 50,
+    height: 18,
     data: chartData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -270,7 +249,8 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "No data yet")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    sx: sx.chartTrendContainer
+    ml: 15,
+    width: 50
   }, (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -280,7 +260,10 @@ var Default = function Default() {
   }))));
   var FullData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    sx: sx.container,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -294,7 +277,8 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    ml: 20,
+    pr: 15
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -307,7 +291,8 @@ var Default = function Default() {
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    sx: sx.button,
+    ml: 15,
+    pr: 15,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -317,9 +302,11 @@ var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    sx: sx.chartContainer
+    width: "100%",
+    height: "100%"
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    sx: sx.chart,
+    width: 50,
+    height: 18,
     data: chartData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -330,7 +317,8 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    sx: sx.chartTrendContainer
+    ml: 15,
+    width: 50
   }, (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 8.6%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -340,7 +328,10 @@ var Default = function Default() {
   }))));
   var PartialData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    sx: sx.container,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -354,7 +345,8 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    ml: 20,
+    pr: 15
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -367,7 +359,8 @@ var Default = function Default() {
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    sx: sx.button,
+    ml: 15,
+    pr: 15,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -377,9 +370,11 @@ var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    sx: sx.chartContainer
+    width: "100%",
+    height: "100%"
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    sx: sx.chart,
+    width: 50,
+    height: 18,
     data: partialDataData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -390,7 +385,8 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    sx: sx.chartTrendContainer
+    ml: 15,
+    width: 50
   }, (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.trend"
   }, "- 8.6%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -400,7 +396,10 @@ var Default = function Default() {
   }))));
   var ZeroData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    sx: sx.container,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -414,7 +413,8 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    ml: 20,
+    pr: 15
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -427,7 +427,8 @@ var Default = function Default() {
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    sx: sx.button,
+    ml: 15,
+    pr: 15,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -437,9 +438,11 @@ var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    sx: sx.chartContainer
+    width: "100%",
+    height: "100%"
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    sx: sx.chart,
+    width: 50,
+    height: 18,
     data: zeroData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -450,7 +453,8 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    sx: sx.chartTrendContainer
+    ml: 15,
+    width: 50
   }, (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -460,7 +464,10 @@ var Default = function Default() {
   }))));
   var ZeroValues = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    sx: sx.container,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -474,7 +481,8 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    ml: 20,
+    pr: 15
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -487,7 +495,8 @@ var Default = function Default() {
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    sx: sx.button,
+    ml: 15,
+    pr: 15,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -497,9 +506,11 @@ var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    sx: sx.chartContainer
+    width: "100%",
+    height: "100%"
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    sx: sx.chart,
+    width: 50,
+    height: 18,
     data: zeroValuesData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -510,7 +521,8 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    sx: sx.chartTrendContainer
+    ml: 15,
+    width: 50
   }, (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {

package/lib/cjs/recipes/SelectedFieldOverlay.story.js

@@ -26,40 +26,36 @@ var _default = {
   title: 'Recipes/Selected Field Overlay'
 };
 exports["default"] = _default;
-var sx = {
-  container: {
-    padding: 'md',
-    position: 'relative',
-    borderWidth: 2,
-    borderStyle: 'solid',
-    borderColor: 'active',
-    borderRadius: 4,
-    cursor: 'pointer'
-  },
-  overlay: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    top: 0,
-    left: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-    '&:focus': {
-      outline: 'none'
-    }
-  }
-};
 
 var Default = function Default() {
   return (0, _react2.jsx)(_Box["default"], {
-    sx: sx.container
+    p: 15,
+    sx: {
+      position: 'relative',
+      borderWidth: 2,
+      borderStyle: 'solid',
+      borderColor: 'active',
+      borderRadius: 4,
+      cursor: 'pointer'
+    }
   }, (0, _react2.jsx)(_TextField["default"], {
     label: "Name",
     controlProps: {
       tabIndex: '-1'
     }
   }), (0, _react2.jsx)(_Box["default"], {
-    sx: sx.overlay,
+    sx: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      top: 0,
+      left: 0,
+      alignItems: 'center',
+      justifyContent: 'center',
+      '&:focus': {
+        outline: 'none'
+      }
+    },
     tabIndex: "0"
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _VisibilityOffOutlineIcon["default"],

package/lib/cjs/recipes/TrialExperienceStatusBar.stories.js

@@ -137,79 +137,6 @@ var data = [{
     title: 'View a workflow'
   }]
 }];
-var sx = {
-  iconContainer: {
-    backgroundColor: 'accent.80',
-    alignItems: 'center',
-    justifyContent: 'center',
-    mr: 'sm',
-    borderRadius: '50%',
-    zIndex: 3
-  },
-  headingSeparator: {
-    flexGrow: 1,
-    backgroundColor: 'accent.80',
-    maxHeight: '100%',
-    width: '6px !important',
-    zIndex: 2,
-    m: '0px 5px 0px 17px !important'
-  },
-  title: {
-    fontSize: 'md',
-    color: 'accent.30',
-    lineHeight: '18px',
-    fontWeight: '3',
-    m: '12px 0px 28px 5px',
-    maxWidth: '195px'
-  },
-  linkRowIconButton: {
-    '&.is-pressed': {
-      backgroundColor: 'transparent'
-    },
-    '&.is-pressed > svg > path': {
-      fill: 'accent.30'
-    },
-    '&.is-hovered': {
-      backgroundColor: 'transparent'
-    }
-  },
-  linkRowIconSelected: {
-    zIndex: 3,
-    'path': {
-      fill: 'accent.30'
-    }
-  },
-  linkRowIconNotSelected: {
-    zIndex: 3,
-    'path': {
-      fill: 'accent.80'
-    }
-  },
-  linkRowSeparator: {
-    flexGrow: 1,
-    backgroundColor: 'accent.30',
-    maxHeight: '100%',
-    width: '1px !important',
-    zIndex: 2,
-    m: '-5px 5px -5px 11.5px !important'
-  },
-  linkRowText: {
-    fontSize: 'md',
-    color: '#163CE3',
-    lineHeight: '18px',
-    fontWeight: '0',
-    m: '3px 0px 20px 10px',
-    maxWidth: '140px'
-  },
-  container: {
-    p: '15px 15px 0px 15px',
-    width: '280px',
-    backgroundColor: 'accent.95',
-    borderRadius: '8px',
-    zIndex: 1,
-    boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
-  }
-};
 
 var Stage = function Stage(props) {
   var title = props.title,
@@ -245,7 +172,14 @@ var Stage = function Stage(props) {
   }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
     minWidth: "39.5px",
     minHeight: "39.5px",
-    sx: sx.iconContainer
+    sx: {
+      backgroundColor: 'accent.80',
+      alignItems: 'center',
+      justifyContent: 'center',
+      mr: '10px',
+      borderRadius: '50%',
+      zIndex: 3
+    }
   }, (0, _react2.jsx)(_index.Icon, {
     icon: icon,
     color: "accent.40",
@@ -254,10 +188,24 @@ var Stage = function Stage(props) {
       zIndex: 3
     }
   })), !isLastStage && (0, _react2.jsx)(_index.Separator, {
-    sx: sx.headingSeparator,
+    sx: {
+      flexGrow: 1,
+      backgroundColor: 'accent.80',
+      maxHeight: '100%',
+      width: '6px !important',
+      zIndex: 2,
+      m: '0px 5px 0px 17px !important'
+    },
     orientation: "vertical"
   })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
-    sx: sx.title
+    sx: {
+      fontSize: '15px',
+      color: 'accent.30',
+      lineHeight: '18px',
+      fontWeight: '3',
+      m: '12px 0px 28px 5px',
+      maxWidth: '195px'
+    }
   }, title), (0, _react2.jsx)(_index.Box, {
     pl: "0px",
     mb: "25px"
@@ -298,19 +246,53 @@ var LinkRow = function LinkRow(props) {
     }
   }, (0, _react2.jsx)(_index.IconButton, {
     onPress: onIconPress,
-    sx: sx.linkRowIconButton,
+    sx: {
+      '&.is-pressed': {
+        backgroundColor: 'transparent'
+      },
+      '&.is-pressed > svg > path': {
+        fill: 'accent.30'
+      },
+      '&.is-hovered': {
+        backgroundColor: 'transparent'
+      }
+    },
     "aria-label": "completed step icon indicator"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isSelected ? _CheckCircleIcon["default"] : RadioButtonIcon,
     size: isSelected ? '20px' : '18px',
-    sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected
+    sx: isSelected ? {
+      zIndex: 3,
+      'path': {
+        fill: 'accent.30'
+      }
+    } : {
+      zIndex: 3,
+      'path': {
+        fill: 'accent.80'
+      }
+    }
   }))), !isLastLink && isLinkSelected && (0, _react2.jsx)(_index.Separator, {
-    sx: sx.linkRowSeparator,
+    sx: {
+      flexGrow: 1,
+      backgroundColor: 'accent.30',
+      maxHeight: '100%',
+      width: '1px !important',
+      zIndex: 2,
+      m: '-5px 5px -5px 11.5px !important'
+    },
     orientation: "vertical"
   })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, {
     href: "https://www.pingidentity.com",
     target: "_blank",
-    sx: sx.linkRowText
+    sx: {
+      fontSize: '15px',
+      color: '#163CE3',
+      lineHeight: '18px',
+      fontWeight: '0',
+      m: '3px 0px 20px 10px',
+      maxWidth: '140px'
+    }
   }, title)));
 };
 
@@ -318,7 +300,16 @@ var Default = function Default() {
   // Open the `Story` addons tab to view the source code for full context.
   return (0, _react2.jsx)(_index.Box, {
     as: "nav",
-    sx: sx.container
+    backgroundColor: "accent.95",
+    width: "280px",
+    sx: {
+      p: '15px 15px 0px 15px',
+      width: '280px',
+      backgroundColor: 'accent.95',
+      borderRadius: '8px',
+      zIndex: 1,
+      boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
+    }
   }, (0, _react2.jsx)(_index.Box, {
     paddingLeft: "0px"
   }, (0, _map["default"])(data).call(data, function (stage, index) {

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -12,7 +12,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem", "popoverProps"];
+var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"];
 
 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; }
 
@@ -25,7 +25,6 @@ import HomeIcon from 'mdi-react/HomeIcon';
 import PropTypes from 'prop-types';
 import { useOverlayTriggerState } from '@react-stately/overlays';
 import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
-import { mergeProps } from '@react-aria/utils';
 import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
 import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
 import { FocusScope } from '@react-aria/focus';
@@ -52,7 +51,6 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
       name = props.name,
       searchProps = props.searchProps,
       selectedItem = props.selectedItem,
-      popoverProps = props.popoverProps,
       others = _objectWithoutProperties(props, _excluded);
 
   var _useState = useState(''),
@@ -217,7 +215,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-label": "".concat((typeof selectedItem === 'string' ? selectedItem : selectedValue) || 'Selected Item')
   }), selectedItem, ___EmotionJSX(Icon, {
     icon: popoverState.isOpen ? ArrowDropUpIcon : ArrowDropDownIcon
-  })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, mergeProps(overlayProps, positionProps, popoverProps), {
+  })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, {
     ref: overlayRef,
     isOpen: popoverState.isOpen,
     scrollRef: scrollBoxRef,
@@ -305,9 +303,6 @@ EnvironmentBreadcrumb.propTypes = {
   /** Callback function that fires when the dropdown is closed. */
   onPopoverClose: PropTypes.func,
 
-  /** Props object that is spread directly into the popover container component. */
-  popoverProps: PropTypes.shape({}),
-
   /** Props object that is spread directly into the SearchField element. */
   searchProps: PropTypes.shape({}),
 

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js

@@ -1,20 +1,6 @@
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-
-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; }
-
-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) { _defineProperty(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; }
-
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { Section } from '@react-stately/collections';
@@ -52,10 +38,6 @@ var defaultProps = {
   },
   items: items
 };
-var popoverProps = {
-  maxWidth: '100px',
-  'data-testid': 'popover-container'
-};
 var defaultWithSectionsProps = {
   'data-testid': testEnvBreadcrumb,
   name: testName,
@@ -133,13 +115,6 @@ test('should display name', function () {
   getComponent();
   expect(screen.getByText(testName)).toBeInTheDocument();
 });
-test('should spread props into popover container', function () {
-  getComponent(_objectSpread(_objectSpread({}, popoverProps), {}, {
-    isDefaultOpen: true
-  }));
-  userEvent.click(screen.getByText(testSelectedItem));
-  expect(screen.queryByTestId('popover-container')).toHaveStyle('max-width: 100px');
-});
 test('should display selectedItem', function () {
   getComponent();
   expect(screen.getByText(testSelectedItem)).toBeInTheDocument();

package/lib/components/PageHeader/PageHeader.js

@@ -6,20 +6,13 @@ import PropTypes from 'prop-types';
 import Text from '../Text/Text';
 import Box from '../Box/Box';
 import { useDeprecationWarning } from '../../hooks';
-/**
- * A `Page Header` is a composed component using text and icon button.
- * The component is separated from the body and appears at the top.
- * For customization,
- * please see [Page Header](./?path=/story/recipes-page-header--default) recipe docs.
- */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var PageHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var title = props.title,
       children = props.children,
       others = _objectWithoutProperties(props, _excluded);
 
-  useDeprecationWarning('The Page Header component will be deprecated in Astro-UI 2.0.0. Use Page Header recipe instead.');
+  useDeprecationWarning('The Page Header component will be deprecated in Astro-UI 2.0.0.');
   return ___EmotionJSX(Box, _extends({
     isRow: true,
     justifyContent: "space-between",