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

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -58,6 +58,8 @@ var _overlays = require("@react-stately/overlays");
 
 var _overlays2 = require("@react-aria/overlays");
 
+var _utils = require("@react-aria/utils");
+
 var _ArrowDropUpIcon = _interopRequireDefault(require("mdi-react/ArrowDropUpIcon"));
 
 var _ArrowDropDownIcon = _interopRequireDefault(require("mdi-react/ArrowDropDownIcon"));
@@ -74,7 +76,7 @@ var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"];
+var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem", "popoverProps"];
 
 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); }
 
@@ -101,6 +103,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
       name = props.name,
       searchProps = props.searchProps,
       selectedItem = props.selectedItem,
+      popoverProps = props.popoverProps,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   var _useState = (0, _react.useState)(''),
@@ -267,7 +270,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     "aria-label": "".concat((typeof selectedItem === 'string' ? selectedItem : selectedValue) || 'Selected Item')
   }), selectedItem, (0, _react2.jsx)(_index.Icon, {
     icon: popoverState.isOpen ? _ArrowDropUpIcon["default"] : _ArrowDropDownIcon["default"]
-  })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, {
+  })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, (0, _utils.mergeProps)(overlayProps, positionProps, popoverProps), {
     ref: overlayRef,
     isOpen: popoverState.isOpen,
     scrollRef: scrollBoxRef,
@@ -355,6 +358,9 @@ EnvironmentBreadcrumb.propTypes = {
   /** Callback function that fires when the dropdown is closed. */
   onPopoverClose: _propTypes["default"].func,
 
+  /** Props object that is spread directly into the popover container component. */
+  popoverProps: _propTypes["default"].shape({}),
+
   /** Props object that is spread directly into the SearchField element. */
   searchProps: _propTypes["default"].shape({}),
 

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

@@ -2,10 +2,28 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
 var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -22,6 +40,10 @@ var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
 
+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) { (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; }
+
 var testEnvBreadcrumb = 'test-env-breadcrumb';
 var testName = 'test-name';
 var testSelectedItem = 'test-selected-item';
@@ -52,6 +74,10 @@ var defaultProps = {
   },
   items: items
 };
+var popoverProps = {
+  maxWidth: '100px',
+  'data-testid': 'popover-container'
+};
 var defaultWithSectionsProps = {
   'data-testid': testEnvBreadcrumb,
   name: testName,
@@ -135,6 +161,15 @@ test('should display name', function () {
   getComponent();
   expect(_testWrapper.screen.getByText(testName)).toBeInTheDocument();
 });
+test('should spread props into popover container', function () {
+  getComponent(_objectSpread(_objectSpread({}, popoverProps), {}, {
+    isDefaultOpen: true
+  }));
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
+
+  expect(_testWrapper.screen.queryByTestId('popover-container')).toHaveStyle('max-width: 100px');
+});
 test('should display selectedItem', function () {
   getComponent();
   expect(_testWrapper.screen.getByText(testSelectedItem)).toBeInTheDocument();

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

@@ -73,6 +73,40 @@ var _default = {
 };
 exports["default"] = _default;
 var buttonArray = ['Web App', 'Native App', 'Single Page App', 'Non-Interactive', 'Worker', 'Advanced Configuration', 'Built-in admin console for this environment', 'Built-in Application portal'];
+var sx = {
+  openButton: {
+    height: '30px',
+    borderRadius: 'md',
+    fontSize: '13px',
+    mb: 'sm'
+  },
+  closeIconButton: {
+    position: 'absolute',
+    top: '14px',
+    right: 'sm'
+  },
+  buttonsContainer: {
+    p: 'lg',
+    flexDirection: 'initial !important',
+    alignContent: 'space-between',
+    flexWrap: 'wrap'
+  },
+  selectedButton: {
+    mb: 'sm',
+    mr: '4px',
+    height: '30px',
+    borderRadius: '15px',
+    fontSize: '13px'
+  },
+  unSelectedButton: {
+    mb: 'sm',
+    mr: '4px',
+    borderColor: 'neutral.80',
+    height: '30px',
+    borderRadius: '15px',
+    fontSize: '13px'
+  }
+};
 
 var Default = function Default() {
   var buttonRef = (0, _react.useRef)();
@@ -131,14 +165,9 @@ var Default = function Default() {
 
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Button, {
     ref: buttonRef,
-    mb: "sm",
     variant: "inline",
     onPress: onChange,
-    sx: {
-      height: '30px',
-      borderRadius: '15px',
-      fontSize: '13px'
-    }
+    sx: sx.openButton
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
@@ -161,36 +190,15 @@ var Default = function Default() {
     onPress: function onPress() {
       return setIsOpen(false);
     },
-    sx: {
-      position: 'absolute',
-      top: 14,
-      right: 10
-    }
+    sx: sx.closeIconButton
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CloseIcon["default"]
   })), (0, _react2.jsx)(_index.Box, {
-    sx: {
-      p: 'lg',
-      flexDirection: 'initial !important',
-      alignContent: 'space-between',
-      flexWrap: 'wrap'
-    }
+    sx: sx.buttonsContainer
   }, (0, _map["default"])(buttonArray).call(buttonArray, function (item) {
     return (0, _react2.jsx)(_index.Button, {
-      mb: "sm",
       variant: "inline",
-      sx: (0, _includes["default"])(selectedButtons).call(selectedButtons, item) ? {
-        mr: '4px',
-        height: '30px',
-        borderRadius: '15px',
-        fontSize: '13px'
-      } : {
-        mr: '4px',
-        borderColor: 'neutral.80',
-        height: '30px',
-        borderRadius: '15px',
-        fontSize: '13px'
-      },
+      sx: (0, _includes["default"])(selectedButtons).call(selectedButtons, item) ? sx.selectedButton : sx.unSelectedButton,
       key: item,
       onPress: function onPress() {
         return toggleButton(item);

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

@@ -54,6 +54,13 @@ var _default = {
   }
 };
 exports["default"] = _default;
+var sx = {
+  showHideButton: {
+    width: 'fit-content',
+    marginLeft: 'sm',
+    alignSelf: 'auto'
+  }
+};
 
 var Default = function Default(_ref) {
   var _context;
@@ -84,11 +91,7 @@ var Default = function Default(_ref) {
     onPress: function onPress() {
       return setIsMasked(!isMasked);
     },
-    sx: {
-      width: 'fit-content',
-      marginLeft: 10,
-      alignSelf: 'auto'
-    }
+    sx: sx.showHideButton
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isMasked ? _EyeOffOutlineIcon["default"] : _EyeOutlineIcon["default"]
   }))));

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

@@ -20,12 +20,15 @@ var _default = {
   title: 'Recipes/NeutralCheckboxField'
 };
 exports["default"] = _default;
+var sx = {
+  checkboxColor: {
+    color: 'neutral.10'
+  }
+};
 
 var Default = function Default() {
   return (0, _react2.jsx)(_CheckboxField["default"], {
-    controlProps: {
-      color: 'neutral.10'
-    }
+    sx: sx.checkboxColor
   }, "Click me");
 };
 

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

@@ -170,6 +170,34 @@ 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"])(),
@@ -193,10 +221,7 @@ var Default = function Default() {
   }, [isMobile]);
   var EmptyData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     ref: ref
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -210,8 +235,7 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -224,8 +248,7 @@ 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'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -234,11 +257,9 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.chart"
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: chartData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -249,8 +270,7 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "No data yet")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -260,10 +280,7 @@ var Default = function Default() {
   }))));
   var FullData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -277,8 +294,7 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -291,8 +307,7 @@ 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'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -302,11 +317,9 @@ var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: chartData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -317,8 +330,7 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, (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, {
@@ -328,10 +340,7 @@ var Default = function Default() {
   }))));
   var PartialData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -345,8 +354,7 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -359,8 +367,7 @@ 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'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -370,11 +377,9 @@ var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: partialDataData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -385,8 +390,7 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, (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, {
@@ -396,10 +400,7 @@ var Default = function Default() {
   }))));
   var ZeroData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -413,8 +414,7 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -427,8 +427,7 @@ 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'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -438,11 +437,9 @@ var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: zeroData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -453,8 +450,7 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
@@ -464,10 +460,7 @@ var Default = function Default() {
   }))));
   var ZeroValues = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
+    sx: sx.container,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
     p: "md",
@@ -481,8 +474,7 @@ var Default = function Default() {
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    ml: 20,
-    pr: 15
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -495,8 +487,7 @@ 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'),
-    ml: 15,
-    pr: 15,
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -506,11 +497,9 @@ var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+    sx: sx.chartContainer
   }, (0, _react2.jsx)(_recharts.LineChart, {
-    width: 50,
-    height: 18,
+    sx: sx.chart,
     data: zeroValuesData
   }, (0, _react2.jsx)(_recharts.Line, {
     type: "monotone",
@@ -521,8 +510,7 @@ var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
-    ml: 15,
-    width: 50
+    sx: sx.chartTrendContainer
   }, (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,36 +26,40 @@ 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"], {
-    p: 15,
-    sx: {
-      position: 'relative',
-      borderWidth: 2,
-      borderStyle: 'solid',
-      borderColor: 'active',
-      borderRadius: 4,
-      cursor: 'pointer'
-    }
+    sx: sx.container
   }, (0, _react2.jsx)(_TextField["default"], {
     label: "Name",
     controlProps: {
       tabIndex: '-1'
     }
   }), (0, _react2.jsx)(_Box["default"], {
-    sx: {
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      top: 0,
-      left: 0,
-      alignItems: 'center',
-      justifyContent: 'center',
-      '&:focus': {
-        outline: 'none'
-      }
-    },
+    sx: sx.overlay,
     tabIndex: "0"
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _VisibilityOffOutlineIcon["default"],