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

package/lib/recipes/FlippableCaretMenuButton.stories.js

@@ -31,40 +31,6 @@ export default {
   title: 'Recipes/FlippableCaretMenuButton'
 };
 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'
-  }
-};
 export var Default = function Default() {
   var buttonRef = useRef();
   var popoverRef = useRef();
@@ -123,9 +89,14 @@ export var Default = function Default() {
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, {
     ref: buttonRef,
+    mb: "sm",
     variant: "inline",
     onPress: onChange,
-    sx: sx.openButton
+    sx: {
+      height: '30px',
+      borderRadius: '15px',
+      fontSize: '13px'
+    }
   }, ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center"
@@ -148,15 +119,36 @@ export var Default = function Default() {
     onPress: function onPress() {
       return setIsOpen(false);
     },
-    sx: sx.closeIconButton
+    sx: {
+      position: 'absolute',
+      top: 14,
+      right: 10
+    }
   }, ___EmotionJSX(Icon, {
     icon: CloseIcon
   })), ___EmotionJSX(Box, {
-    sx: sx.buttonsContainer
+    sx: {
+      p: 'lg',
+      flexDirection: 'initial !important',
+      alignContent: 'space-between',
+      flexWrap: 'wrap'
+    }
   }, _mapInstanceProperty(buttonArray).call(buttonArray, function (item) {
     return ___EmotionJSX(Button, {
+      mb: "sm",
       variant: "inline",
-      sx: _includesInstanceProperty(selectedButtons).call(selectedButtons, item) ? sx.selectedButton : sx.unSelectedButton,
+      sx: _includesInstanceProperty(selectedButtons).call(selectedButtons, item) ? {
+        mr: '4px',
+        height: '30px',
+        borderRadius: '15px',
+        fontSize: '13px'
+      } : {
+        mr: '4px',
+        borderColor: 'neutral.80',
+        height: '30px',
+        borderRadius: '15px',
+        fontSize: '13px'
+      },
       key: item,
       onPress: function onPress() {
         return toggleButton(item);

package/lib/recipes/ListAndPanel.stories.js

@@ -92,106 +92,44 @@ var items = [{
   avatar: AccountIcon,
   hasSeparator: false
 }];
-var sx = {
-  wrapper: {
-    px: 'lg',
-    py: 'lg',
-    bg: 'accent.99',
-    height: '900px',
-    overflowY: 'scroll'
-  },
-  searchField: {
-    position: 'fixed',
-    mb: 'sm',
-    width: '400px'
-  },
-  listElementWrapper: {
-    px: 'md',
-    bg: 'accent.99',
-    justifyContent: 'center'
-  },
-  separator: {
-    bg: 'accent.90'
-  },
-  tabsWrapper: {
-    px: 'lg',
-    pt: 'xs'
-  },
-  iconButton: {
-    position: 'absolute',
-    top: 0,
-    right: 0
-  },
-  itemLabel: {
-    fontSize: 'sm',
-    fontWeight: 3,
-    lineHeight: '16px',
-    mb: 'xs'
-  },
-  itemValue: {
-    fontWeight: 0,
-    lineHeight: '18px',
-    variant: 'base',
-    mb: 'md'
-  },
-  listElement: {
-    wrapper: {
-      minHeight: '60px'
-    },
-    iconWrapper: {
-      mr: 'auto',
-      alignItems: 'center'
-    },
-    icon: {
-      mr: 'sm',
-      alignSelf: 'center',
-      color: 'accent.40'
-    },
-    avatar: {
-      width: '25px',
-      height: '25px',
-      mr: 'md'
-    },
-    title: {
-      alignSelf: 'start'
-    },
-    subtitle: {
-      fontSize: 'sm',
-      my: '1px',
-      lineHeight: '16px',
-      alignSelf: 'start'
-    },
-    menuWrapper: {
-      alignSelf: 'center'
-    }
-  }
-};
 
 var ListElement = function ListElement(_ref) {
   var item = _ref.item,
       onClosePanel = _ref.onClosePanel;
   return ___EmotionJSX(Box, {
     isRow: true,
-    sx: sx.listElement.wrapper
+    minHeight: "60px"
   }, ___EmotionJSX(Box, {
     isRow: true,
-    sx: sx.listElement.iconWrapper
+    mr: "auto",
+    alignItems: "center"
   }, item.hasIcon ? ___EmotionJSX(Icon, {
     icon: item.avatar,
+    alignSelf: "center",
     size: 24,
-    sx: sx.listElement.icon
+    mr: "sm",
+    color: "accent.40"
   }) : ___EmotionJSX(Avatar, {
-    sx: sx.listElement.avatar,
+    mr: "md",
+    sx: {
+      width: '25px',
+      height: '25px'
+    },
     src: item.avatar
   }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
     variant: "bodyStrong",
-    sx: sx.listElement.title
+    alignSelf: "start"
   }, item.lastName, ", ", item.firstName), ___EmotionJSX(Text, {
+    sx: {
+      fontSize: 'sm',
+      my: '1px',
+      lineHeight: '16px'
+    },
     variant: "subtitle",
-    sx: sx.listElement.subtitle
+    alignSelf: "start"
   }, item.email))), ___EmotionJSX(Box, {
     isRow: true,
-    sx: sx.listElement.menuWrapper
+    alignSelf: "center"
   }, ___EmotionJSX(SwitchField, {
     "aria-label": "active user",
     isDefaultSelected: true,
@@ -248,7 +186,11 @@ export var Default = function Default() {
   };
 
   return ___EmotionJSX(Box, {
-    sx: sx.wrapper
+    px: "lg",
+    py: "lg",
+    bg: "accent.99",
+    height: "900px",
+    overflowY: "scroll"
   }, ___EmotionJSX(SearchField, {
     position: "fixed",
     mb: "sm",
@@ -282,15 +224,18 @@ export var Default = function Default() {
     restoreFocus: true,
     autoFocus: true
   }, ___EmotionJSX(Box, {
-    sx: sx.listElementWrapper
+    px: "md",
+    bg: "accent.99",
+    justifyContent: "center"
   }, ___EmotionJSX(ListElement, {
     item: selectedItemId >= 0 ? items[selectedItemId] : [],
     onClosePanel: closePanelHandler
   })), ___EmotionJSX(Separator, {
     margin: 0,
-    sx: sx.separator
+    bg: "accent.90"
   }), ___EmotionJSX(Box, {
-    sx: sx.tabsWrapper
+    px: "lg",
+    pt: "xs"
   }, ___EmotionJSX(Tabs, {
     tabListProps: {
       justifyContent: 'center'
@@ -304,33 +249,73 @@ export var Default = function Default() {
     title: "Profile"
   }, selectedItemId >= 0 && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconButton, {
     variant: "inverted",
-    sx: sx.iconButton
+    sx: {
+      position: 'absolute',
+      top: 0,
+      right: 0
+    }
   }, ___EmotionJSX(PencilIcon, {
     size: 20
   })), ___EmotionJSX(Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
   }, "Full Name"), ___EmotionJSX(Text, {
-    sx: sx.itemValue,
-    variant: "base"
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
   }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), ___EmotionJSX(Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
   }, "First Name"), ___EmotionJSX(Text, {
-    sx: sx.itemValue,
-    variant: "base"
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
   }, items[selectedItemId].firstName), ___EmotionJSX(Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
   }, "Last Name"), ___EmotionJSX(Text, {
-    sx: sx.itemValue,
-    variant: "base"
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
   }, items[selectedItemId].lastName), ___EmotionJSX(Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
   }, "Email"), ___EmotionJSX(Text, {
-    sx: sx.itemValue,
-    variant: "base"
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
   }, items[selectedItemId].email))), ___EmotionJSX(Tab, {
     title: "Group Memberships"
   }, ___EmotionJSX(Text, null, "Group Memberships")), ___EmotionJSX(Tab, {

package/lib/recipes/MaskedValue.stories.js

@@ -23,13 +23,6 @@ export default {
     }
   }
 };
-var sx = {
-  showHideButton: {
-    width: 'fit-content',
-    marginLeft: 'sm',
-    alignSelf: 'auto'
-  }
-};
 export var Default = function Default(_ref) {
   var _context;
 
@@ -59,7 +52,11 @@ export var Default = function Default(_ref) {
     onPress: function onPress() {
       return setIsMasked(!isMasked);
     },
-    sx: sx.showHideButton
+    sx: {
+      width: 'fit-content',
+      marginLeft: 10,
+      alignSelf: 'auto'
+    }
   }, ___EmotionJSX(Icon, {
     icon: isMasked ? EyeOffIcon : EyeIcon
   }))));

package/lib/recipes/NeutralInput.stories.js

@@ -4,13 +4,10 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/NeutralCheckboxField'
 };
-var sx = {
-  checkboxColor: {
-    color: 'neutral.10'
-  }
-};
 export var Default = function Default() {
   return ___EmotionJSX(CheckboxField, {
-    sx: sx.checkboxColor
+    controlProps: {
+      color: 'neutral.10'
+    }
   }, "Click me");
 };

package/lib/recipes/RowLineChart.stories.js

@@ -138,34 +138,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'
-  }
-};
 export var Default = function Default() {
   var _useResizeObserver = useResizeObserver(),
       ref = _useResizeObserver.ref,
@@ -189,7 +161,10 @@ export var Default = function Default() {
 
   var EmptyData = ___EmotionJSX(Box, {
     isRow: true,
-    sx: sx.container,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
     ref: ref
   }, ___EmotionJSX(Box, {
     p: "md",
@@ -203,7 +178,8 @@ export var Default = function Default() {
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    ml: 20,
+    pr: 15
   }, hideIfMobile()), ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -216,7 +192,8 @@ export var Default = function Default() {
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
     variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
-    sx: sx.button,
+    ml: 15,
+    pr: 15,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -225,9 +202,11 @@ export var Default = function Default() {
   }, ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.chart"
   }, ___EmotionJSX(ResponsiveContainer, {
-    sx: sx.chartContainer
+    width: "100%",
+    height: "100%"
   }, ___EmotionJSX(LineChart, {
-    sx: sx.chart,
+    width: 50,
+    height: 18,
     data: chartData
   }, ___EmotionJSX(Line, {
     type: "monotone",
@@ -238,7 +217,8 @@ export var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "No data yet")), ___EmotionJSX(Box, {
     size: "sm",
-    sx: sx.chartTrendContainer
+    ml: 15,
+    width: 50
   }, ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
@@ -249,7 +229,10 @@ export var Default = function Default() {
 
   var FullData = ___EmotionJSX(Box, {
     isRow: true,
-    sx: sx.container,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
     mt: 20
   }, ___EmotionJSX(Box, {
     p: "md",
@@ -263,7 +246,8 @@ export var Default = function Default() {
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    ml: 20,
+    pr: 15
   }, hideIfMobile()), ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -276,7 +260,8 @@ export var Default = function Default() {
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
     variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
-    sx: sx.button,
+    ml: 15,
+    pr: 15,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -286,9 +271,11 @@ export var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
-    sx: sx.chartContainer
+    width: "100%",
+    height: "100%"
   }, ___EmotionJSX(LineChart, {
-    sx: sx.chart,
+    width: 50,
+    height: 18,
     data: chartData
   }, ___EmotionJSX(Line, {
     type: "monotone",
@@ -299,7 +286,8 @@ export var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
-    sx: sx.chartTrendContainer
+    ml: 15,
+    width: 50
   }, ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
@@ -310,7 +298,10 @@ export var Default = function Default() {
 
   var PartialData = ___EmotionJSX(Box, {
     isRow: true,
-    sx: sx.container,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
     mt: 20
   }, ___EmotionJSX(Box, {
     p: "md",
@@ -324,7 +315,8 @@ export var Default = function Default() {
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    ml: 20,
+    pr: 15
   }, hideIfMobile()), ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -337,7 +329,8 @@ export var Default = function Default() {
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
     variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
-    sx: sx.button,
+    ml: 15,
+    pr: 15,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -347,9 +340,11 @@ export var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
-    sx: sx.chartContainer
+    width: "100%",
+    height: "100%"
   }, ___EmotionJSX(LineChart, {
-    sx: sx.chart,
+    width: 50,
+    height: 18,
     data: partialDataData
   }, ___EmotionJSX(Line, {
     type: "monotone",
@@ -360,7 +355,8 @@ export var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
-    sx: sx.chartTrendContainer
+    ml: 15,
+    width: 50
   }, ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.trend"
   }, "- 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
@@ -371,7 +367,10 @@ export var Default = function Default() {
 
   var ZeroData = ___EmotionJSX(Box, {
     isRow: true,
-    sx: sx.container,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
     mt: 20
   }, ___EmotionJSX(Box, {
     p: "md",
@@ -385,7 +384,8 @@ export var Default = function Default() {
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    ml: 20,
+    pr: 15
   }, hideIfMobile()), ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -398,7 +398,8 @@ export var Default = function Default() {
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
     variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
-    sx: sx.button,
+    ml: 15,
+    pr: 15,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -408,9 +409,11 @@ export var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
-    sx: sx.chartContainer
+    width: "100%",
+    height: "100%"
   }, ___EmotionJSX(LineChart, {
-    sx: sx.chart,
+    width: 50,
+    height: 18,
     data: zeroData
   }, ___EmotionJSX(Line, {
     type: "monotone",
@@ -421,7 +424,8 @@ export var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
-    sx: sx.chartTrendContainer
+    ml: 15,
+    width: 50
   }, ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
@@ -432,7 +436,10 @@ export var Default = function Default() {
 
   var ZeroValues = ___EmotionJSX(Box, {
     isRow: true,
-    sx: sx.container,
+    bg: "accent.99",
+    alignItems: "center",
+    justifyContent: "space-between",
+    pr: 20,
     mt: 20
   }, ___EmotionJSX(Box, {
     p: "md",
@@ -446,7 +453,8 @@ export var Default = function Default() {
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
     variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    ml: 20,
+    pr: 15
   }, hideIfMobile()), ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
@@ -459,7 +467,8 @@ export var Default = function Default() {
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
     variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
-    sx: sx.button,
+    ml: 15,
+    pr: 15,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
     variant: "boxes.expandableRow.lineChart.divider"
@@ -469,9 +478,11 @@ export var Default = function Default() {
     variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
-    sx: sx.chartContainer
+    width: "100%",
+    height: "100%"
   }, ___EmotionJSX(LineChart, {
-    sx: sx.chart,
+    width: 50,
+    height: 18,
     data: zeroValuesData
   }, ___EmotionJSX(Line, {
     type: "monotone",
@@ -482,7 +493,8 @@ export var Default = function Default() {
     variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
-    sx: sx.chartTrendContainer
+    ml: 15,
+    width: 50
   }, ___EmotionJSX(Text, {
     variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {