@pingux/astro 1.27.0-alpha.9 → 1.28.0

package/lib/cjs/index.js

@@ -4,7 +4,7 @@ var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69;
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
@@ -104,7 +104,13 @@ var _exportNames = {
   OverlayProvider: true,
   useOverlayPosition: true,
   useOverlayTrigger: true,
-  useOverlayTriggerState: true
+  useOverlayTriggerState: true,
+  DataTable: true,
+  DataTableCell: true,
+  DataTableColumn: true,
+  DataTableRow: true,
+  DataTableBody: true,
+  DataTableHeader: true
 };
 
 _Object$defineProperty(exports, "AccordionGridGroup", {
@@ -261,6 +267,48 @@ _Object$defineProperty(exports, "CopyText", {
   }
 });
 
+_Object$defineProperty(exports, "DataTable", {
+  enumerable: true,
+  get: function get() {
+    return _DataTable["default"];
+  }
+});
+
+_Object$defineProperty(exports, "DataTableBody", {
+  enumerable: true,
+  get: function get() {
+    return _table.TableBody;
+  }
+});
+
+_Object$defineProperty(exports, "DataTableCell", {
+  enumerable: true,
+  get: function get() {
+    return _table.Cell;
+  }
+});
+
+_Object$defineProperty(exports, "DataTableColumn", {
+  enumerable: true,
+  get: function get() {
+    return _table.Column;
+  }
+});
+
+_Object$defineProperty(exports, "DataTableHeader", {
+  enumerable: true,
+  get: function get() {
+    return _table.TableHeader;
+  }
+});
+
+_Object$defineProperty(exports, "DataTableRow", {
+  enumerable: true,
+  get: function get() {
+    return _table.Row;
+  }
+});
+
 _Object$defineProperty(exports, "EnvironmentBreadcrumb", {
   enumerable: true,
   get: function get() {
@@ -1741,6 +1789,23 @@ var _overlays = require("@react-aria/overlays");
 
 var _overlays2 = require("@react-stately/overlays");
 
+var _DataTable = _interopRequireWildcard(require("./components/DataTable"));
+
+_forEachInstanceProperty(_context69 = _Object$keys(_DataTable)).call(_context69, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DataTable[key]) return;
+
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DataTable[key];
+    }
+  });
+});
+
+var _table = require("@react-spectrum/table");
+
 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); }
 
 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; }

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/OneWayToBidirectionalArrow.stories.js

@@ -40,6 +40,29 @@ var items = [{
   name: 'Third Option',
   id: '3'
 }];
+var sx = {
+  actionIcon: {
+    color: 'neutral.30'
+  },
+  dragVerticalIcon: {
+    color: 'neutral.50'
+  },
+  iconButton: {
+    ml: 'xs'
+  },
+  iconButtonToggleContainer: {
+    mx: 'sm',
+    flexShrink: 0
+  },
+  iconContainer: {
+    alignItems: 'center',
+    ml: '12px',
+    mr: '12px'
+  },
+  outerContainer: {
+    alignItems: 'center'
+  }
+};
 
 var Default = function Default() {
   var CustomOnSvg = function CustomOnSvg(props) {
@@ -88,24 +111,22 @@ var Default = function Default() {
   };
 
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Box["default"], {
-    sx: {
-      alignItems: 'center'
-    },
+    sx: sx.outerContainer,
     isRow: true
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _DragVerticalIcon["default"],
     size: 25,
-    color: "neutral.50"
+    sx: sx.dragVerticalIcon
   }), (0, _react2.jsx)(_index.ComboBoxField, {
     items: items,
     defaultSelectedKey: "Last Name",
+    "aria-label": "Row one value",
     containerProps: {
       width: '275px'
     },
     labelProps: {
       mb: 0
     },
-    "aria-label": "Row one value",
     controlProps: {
       'aria-label': 'test'
     }
@@ -115,10 +136,7 @@ var Default = function Default() {
       "data-id": item.name
     }, item.name);
   }), (0, _react2.jsx)(_Box["default"], {
-    sx: {
-      mx: 'sm',
-      flexShrink: 0
-    }
+    sx: sx.iconButtonToggleContainer
   }, (0, _react2.jsx)(_index.IconButtonToggle, {
     toggledIcon: CustomOnSvg,
     defaultIcon: CustomOffSvg,
@@ -148,35 +166,29 @@ var Default = function Default() {
     }, item.name);
   }), (0, _react2.jsx)(_Box["default"], {
     isRow: true,
-    alignItems: "center",
-    sx: {
-      marginLeft: '12px',
-      marginRight: '12px'
-    }
+    sx: sx.iconContainer
   }, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "Edit"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CogsIcon["default"],
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "edit icon"
   })), (0, _react2.jsx)(_index.IconButton, {
-    ml: "5px",
+    sx: sx.iconButton,
     "aria-label": "Delete"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _DeleteIcon["default"],
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "delete icon"
   })))), (0, _react2.jsx)(_Box["default"], {
-    sx: {
-      alignItems: 'center'
-    },
+    sx: sx.outerContainer,
     isRow: true
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _DragVerticalIcon["default"],
     size: 25,
-    color: "neutral.50"
+    sx: sx.dragVerticalIcon
   }), (0, _react2.jsx)(_index.ComboBoxField, {
     items: items,
     defaultSelectedKey: "Last Name",
@@ -196,10 +208,7 @@ var Default = function Default() {
       "data-id": item.name
     }, item.name);
   }), (0, _react2.jsx)(_Box["default"], {
-    sx: {
-      mx: 'sm',
-      flexShrink: 0
-    }
+    sx: sx.iconButtonToggleContainer
   }, (0, _react2.jsx)(_index.IconButtonToggle, {
     toggledIcon: CustomRightSvg,
     defaultIcon: CustomRightSvg,
@@ -229,24 +238,20 @@ var Default = function Default() {
     }, item.name);
   }), (0, _react2.jsx)(_Box["default"], {
     isRow: true,
-    alignItems: "center",
-    sx: {
-      marginLeft: '12px',
-      marginRight: '12px'
-    }
+    sx: sx.iconContainer
   }, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "Edit"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CogsIcon["default"],
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "edit icon"
   })), (0, _react2.jsx)(_index.IconButton, {
-    ml: "5px",
+    sx: sx.iconButton,
     "aria-label": "Delete"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _DeleteIcon["default"],
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "delete icon"
   })))));

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, {