@pingux/astro 1.26.1-alpha.3 → 1.26.1-alpha.6

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

@@ -56,6 +56,36 @@ var _default = {
   title: 'Recipes/AttributesP1Mappings'
 };
 exports["default"] = _default;
+var sx = {
+  rowBox: {
+    mb: '24.95px'
+  },
+  textField: {
+    height: '40px !important'
+  },
+  comboBoxField: {
+    height: '40px !important',
+    pt: '5px !important'
+  },
+  headingText: {
+    fontSize: 'sm',
+    fontWeight: 400,
+    color: 'neutral.40'
+  },
+  firstRowTitle: {
+    fontWeight: 3,
+    fontSize: 'md',
+    maxWidth: '310px',
+    width: 'calc(50% - 26px)',
+    minWidth: '153px'
+  },
+  secondRowTitle: {
+    fontWeight: 3,
+    fontSize: 'md',
+    ml: '10px',
+    flexGrow: 1
+  }
+};
 var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
   var isDisabled = props.isDisabled,
       isNewRow = props.isNewRow,
@@ -93,9 +123,7 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
     ref: rowRef
   }, (0, _react2.jsx)(_index.Box, {
     width: "310px",
-    sx: !areRowsValid && isSubmitted && inputValue === '' && textValue !== '' ? {
-      mb: '24.95px'
-    } : {}
+    sx: !areRowsValid && isSubmitted && inputValue === '' && textValue !== '' ? sx.rowBox : {}
   }, (0, _react2.jsx)(_index.TextField, {
     name: "custom-name",
     "aria-label": "text field",
@@ -104,9 +132,7 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
       mb: 0
     },
     controlProps: {
-      sx: {
-        height: '40px !important'
-      }
+      sx: sx.textField
     },
     id: "textField ".concat(index),
     key: "textField ".concat(index),
@@ -123,9 +149,7 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
     ml: "12px",
     isRow: true,
     width: "378px",
-    sx: !areRowsValid && isSubmitted && textValue === '' && inputValue !== '' ? {
-      mb: '24.95px'
-    } : {}
+    sx: !areRowsValid && isSubmitted && textValue === '' && inputValue !== '' ? sx.rowBox : {}
   }, (0, _react2.jsx)(_index.Box, {
     flexGrow: "1",
     maxWidth: "310px"
@@ -143,10 +167,7 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (props) {
     "aria-label": "selection field",
     controlProps: {
       'aria-label': 'selection field',
-      sx: {
-        height: '40px !important',
-        pt: '5px !important'
-      }
+      sx: sx.comboBoxField
     },
     containerProps: {
       'aria-label': 'selection field',
@@ -259,11 +280,7 @@ var Default = function Default() {
     mb: "md",
     ml: "xs"
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 400,
-      color: 'neutral.40'
-    }
+    sx: sx.headingText
   }, "Create new attributes and map predefined attributes with their PingOne Mappings."), (0, _react2.jsx)(_index.Button, {
     variant: "inline",
     ml: "auto",
@@ -287,20 +304,9 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 3,
-      fontSize: 'md',
-      maxWidth: '310px',
-      width: 'calc(50% - 26px)',
-      minWidth: '153px'
-    }
+    sx: sx.firstRowTitle
   }, "Attributes"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 3,
-      fontSize: 'md',
-      ml: '10px',
-      flexGrow: 1
-    }
+    sx: sx.secondRowTitle
   }, "PingOne Mappings")), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(_index.ScrollBox, {
     mt: "md",
     maxHeight: "700px"

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

@@ -138,6 +138,33 @@ var data = [{
   subtitle: '',
   chipValue: '29'
 }];
+var sx = {
+  listViewItem: {
+    bg: 'white',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    '&.is-hovered': {
+      bg: 'accent.99'
+    }
+  },
+  defaultSelectedBox: {
+    border: '1px solid',
+    borderColor: 'neutral.80',
+    borderRadius: 5,
+    minHeight: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    p: 'xs',
+    maxWidth: '50%'
+  },
+  defaultSelectedTitle: {
+    fontSize: 'sm',
+    pl: 'xs',
+    maxHeight: 32,
+    overflow: 'hidden'
+  }
+};
 
 var Default = function Default() {
   var _useState = (0, _react.useState)(data),
@@ -257,15 +284,7 @@ var Default = function Default() {
       "data-id": item.key,
       listItemProps: {
         isRow: true,
-        sx: {
-          bg: 'white',
-          width: '100%',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          '&.is-hovered': {
-            bg: 'accent.99'
-          }
-        }
+        sx: sx.listViewItem
       }
     }, (0, _react2.jsx)(_.Box, {
       isRow: true
@@ -293,16 +312,7 @@ var Default = function Default() {
       variant: "listSubtitle"
     }, item.subtitle))), item.isDefaultSelected ? (0, _react2.jsx)(_.Box, {
       isRow: true,
-      sx: {
-        border: '1px solid',
-        borderColor: 'neutral.80',
-        borderRadius: 5,
-        minHeight: 22,
-        justifyContent: 'center',
-        alignItems: 'center',
-        p: 'xs',
-        maxWidth: '50%'
-      }
+      sx: sx.defaultSelectedBox
     }, (0, _react2.jsx)(_.Icon, {
       icon: _CheckIcon["default"],
       color: "neutral.20",
@@ -311,12 +321,7 @@ var Default = function Default() {
         flexShrink: 0
       }
     }), (0, _react2.jsx)(_.Text, {
-      sx: {
-        fontSize: 'sm',
-        pl: 'xs',
-        maxHeight: 32,
-        overflow: 'hidden'
-      }
+      sx: sx.defaultSelectedTitle
     }, "Added by Filter")) : (0, _react2.jsx)(_.CheckboxField, {
       controlProps: {
         color: 'neutral.10',

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

@@ -32,25 +32,42 @@ var _default = {
   title: 'Recipes/ConditionalFilter'
 };
 exports["default"] = _default;
-
-var Default = function Default() {
-  var customChipStyles = {
+var sx = {
+  customChipStyles: {
+    marginRight: 'sm',
     '& > span': {
       textTransform: 'none',
       fontWeight: '500'
     },
     minWidth: '65px',
     'z-index': '1'
-  };
-  var borderedBoxStyles = {
+  },
+  borderedBoxStyles: {
     '&::after': {
       bg: 'decorative.7'
     },
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: 'neutral.80',
-    borderRadius: '4px'
-  };
+    borderRadius: '4px',
+    padding: 'sm',
+    width: '100%'
+  },
+  allConditionsBox: {
+    '&::after': {
+      bg: 'decorative.7'
+    },
+    alignItems: 'center',
+    borderRadius: '4px',
+    marginTop: 'md'
+  },
+  defaultText: {
+    textTransform: 'none',
+    color: 'inherit'
+  }
+};
+
+var Default = function Default() {
   var allConditions = [{
     field1: 'Family Name',
     field3: 'John',
@@ -122,8 +139,7 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Chip, {
     label: "All",
     bg: "decorative.7",
-    mr: "sm",
-    sx: customChipStyles
+    sx: sx.customChipStyles
   }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _map["default"])(allConditions).call(allConditions, function (item) {
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
@@ -135,14 +151,7 @@ var Default = function Default() {
       variant: "forms.input.container",
       bg: "white",
       isRow: true,
-      alignItems: "center",
-      borderRadius: "4px",
-      sx: {
-        '&::after': {
-          bg: 'decorative.7'
-        }
-      },
-      mt: "15px"
+      sx: sx.allConditionsBox
     }, (0, _react2.jsx)(_index.Text, {
       pl: "md",
       pr: "sm"
@@ -150,8 +159,7 @@ var Default = function Default() {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: customChipStyles,
-      mr: "sm",
+      sx: sx.customChipStyles,
       alignSelf: "center"
     }), (0, _react2.jsx)(_index.Text, null, item.field3))));
   }), (0, _react2.jsx)(_index.Box, {
@@ -160,18 +168,14 @@ var Default = function Default() {
     isLast: true
   }), (0, _react2.jsx)(_index.Box, {
     variant: "forms.input.container",
-    borderRadius: "4px",
-    p: "sm",
     mt: "md",
-    sx: borderedBoxStyles,
-    width: "100%"
+    sx: sx.borderedBoxStyles
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true
   }, (0, _react2.jsx)(_index.Chip, {
     label: "Any",
     bg: "decorative.4",
-    mr: "sm",
-    sx: customChipStyles,
+    sx: sx.customChipStyles,
     alignSelf: "center"
   }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
     ml: "sm"
@@ -186,14 +190,8 @@ var Default = function Default() {
       variant: "forms.input.container",
       bg: "white",
       isRow: true,
-      alignItems: "center",
-      borderRadius: "4px",
       width: "100%",
-      sx: {
-        '&::after': {
-          bg: 'decorative.4'
-        }
-      }
+      sx: sx.allConditionsBox
     }, (0, _react2.jsx)(_index.Text, {
       pl: "md",
       pr: "sm"
@@ -201,8 +199,7 @@ var Default = function Default() {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: customChipStyles,
-      mr: "sm",
+      sx: sx.customChipStyles,
       alignSelf: "center"
     }), (0, _react2.jsx)(_index.Text, null, item.field3)));
   })))))), (0, _react2.jsx)(_index.Button, {
@@ -235,10 +232,7 @@ var Default = function Default() {
     },
     "aria-label": "temp-label"
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
+    sx: sx.defaultText
   }, "Any")), (0, _react2.jsx)(_index.RockerButton, {
     name: "all",
     key: "all",
@@ -247,10 +241,7 @@ var Default = function Default() {
     },
     "aria-label": "temp-label"
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
+    sx: sx.defaultText
   }, "All"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
     variant: "inline",
     width: "fit-content",
@@ -310,11 +301,7 @@ var Default = function Default() {
     mr: "sm"
   }), (0, _react2.jsx)(_index.Box, {
     variant: "forms.input.container",
-    borderRadius: "4px",
-    p: "sm",
-    width: "100%",
-    sx: borderedBoxStyles,
-    mr: "xs"
+    sx: sx.borderedBoxStyles
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",
@@ -330,10 +317,7 @@ var Default = function Default() {
     },
     "aria-label": "any"
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
+    sx: sx.defaultText
   }, "Any")), (0, _react2.jsx)(_index.RockerButton, {
     name: "all",
     key: "all",
@@ -342,10 +326,7 @@ var Default = function Default() {
     },
     "aria-label": "all"
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
+    sx: sx.defaultText
   }, "All"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
     variant: "inline",
     width: "fit-content",

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

@@ -46,6 +46,15 @@ var _default = {
   title: 'Recipes/DatePicker'
 };
 exports["default"] = _default;
+var sx = {
+  calendarIcon: {
+    position: 'absolute',
+    right: 5,
+    top: 8,
+    width: 28,
+    height: 28
+  }
+};
 
 var Default = function Default() {
   var dateFormat = 'YYYY-MM-DD';
@@ -120,13 +129,7 @@ var Default = function Default() {
     slots: {
       inContainer: (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
         "aria-label": "calendar-button",
-        sx: {
-          position: 'absolute',
-          right: 5,
-          top: 8,
-          width: 28,
-          height: 28
-        },
+        sx: sx.calendarIcon,
         onPress: handleCalendarIconPress,
         ref: triggerRef
       }, triggerProps), (0, _react2.jsx)(_index.Icon, {

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

@@ -24,18 +24,21 @@ var _default = {
   title: 'Recipes/StatsCircle'
 };
 exports["default"] = _default;
+var sx = {
+  statsCircle: {
+    border: '3px solid',
+    borderColor: _colors.active,
+    borderRadius: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+};
 
 var Default = function Default() {
   return (0, _react2.jsx)(_Box["default"], {
     width: "110px",
     height: "110px",
-    sx: {
-      'border': '3px solid',
-      'borderColor': _colors.active,
-      'borderRadius': '100%',
-      'alignItems': 'center',
-      'justifyContent': 'center'
-    }
+    sx: sx.statsCircle
   }, (0, _react2.jsx)(_Text["default"], {
     fontSize: 30
   }, "63"), (0, _react2.jsx)(_Text["default"], {

package/lib/recipes/AttributesAndPingOneMapping.stories.js

@@ -22,6 +22,36 @@ var items = [{
 export default {
   title: 'Recipes/AttributesP1Mappings'
 };
+var sx = {
+  rowBox: {
+    mb: '24.95px'
+  },
+  textField: {
+    height: '40px !important'
+  },
+  comboBoxField: {
+    height: '40px !important',
+    pt: '5px !important'
+  },
+  headingText: {
+    fontSize: 'sm',
+    fontWeight: 400,
+    color: 'neutral.40'
+  },
+  firstRowTitle: {
+    fontWeight: 3,
+    fontSize: 'md',
+    maxWidth: '310px',
+    width: 'calc(50% - 26px)',
+    minWidth: '153px'
+  },
+  secondRowTitle: {
+    fontWeight: 3,
+    fontSize: 'md',
+    ml: '10px',
+    flexGrow: 1
+  }
+};
 var Row = /*#__PURE__*/memo(function (props) {
   var isDisabled = props.isDisabled,
       isNewRow = props.isNewRow,
@@ -59,9 +89,7 @@ var Row = /*#__PURE__*/memo(function (props) {
     ref: rowRef
   }, ___EmotionJSX(Box, {
     width: "310px",
-    sx: !areRowsValid && isSubmitted && inputValue === '' && textValue !== '' ? {
-      mb: '24.95px'
-    } : {}
+    sx: !areRowsValid && isSubmitted && inputValue === '' && textValue !== '' ? sx.rowBox : {}
   }, ___EmotionJSX(TextField, {
     name: "custom-name",
     "aria-label": "text field",
@@ -70,9 +98,7 @@ var Row = /*#__PURE__*/memo(function (props) {
       mb: 0
     },
     controlProps: {
-      sx: {
-        height: '40px !important'
-      }
+      sx: sx.textField
     },
     id: "textField ".concat(index),
     key: "textField ".concat(index),
@@ -89,9 +115,7 @@ var Row = /*#__PURE__*/memo(function (props) {
     ml: "12px",
     isRow: true,
     width: "378px",
-    sx: !areRowsValid && isSubmitted && textValue === '' && inputValue !== '' ? {
-      mb: '24.95px'
-    } : {}
+    sx: !areRowsValid && isSubmitted && textValue === '' && inputValue !== '' ? sx.rowBox : {}
   }, ___EmotionJSX(Box, {
     flexGrow: "1",
     maxWidth: "310px"
@@ -109,10 +133,7 @@ var Row = /*#__PURE__*/memo(function (props) {
     "aria-label": "selection field",
     controlProps: {
       'aria-label': 'selection field',
-      sx: {
-        height: '40px !important',
-        pt: '5px !important'
-      }
+      sx: sx.comboBoxField
     },
     containerProps: {
       'aria-label': 'selection field',
@@ -226,11 +247,7 @@ export var Default = function Default() {
     mb: "md",
     ml: "xs"
   }, ___EmotionJSX(Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 400,
-      color: 'neutral.40'
-    }
+    sx: sx.headingText
   }, "Create new attributes and map predefined attributes with their PingOne Mappings."), ___EmotionJSX(Button, {
     variant: "inline",
     ml: "auto",
@@ -254,20 +271,9 @@ export var Default = function Default() {
   }, ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 3,
-      fontSize: 'md',
-      maxWidth: '310px',
-      width: 'calc(50% - 26px)',
-      minWidth: '153px'
-    }
+    sx: sx.firstRowTitle
   }, "Attributes"), ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 3,
-      fontSize: 'md',
-      ml: '10px',
-      flexGrow: 1
-    }
+    sx: sx.secondRowTitle
   }, "PingOne Mappings")), ___EmotionJSX(Separator, null), ___EmotionJSX(ScrollBox, {
     mt: "md",
     maxHeight: "700px"

package/lib/recipes/CollapsiblePanel.stories.js

@@ -95,6 +95,33 @@ var data = [{
   subtitle: '',
   chipValue: '29'
 }];
+var sx = {
+  listViewItem: {
+    bg: 'white',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    '&.is-hovered': {
+      bg: 'accent.99'
+    }
+  },
+  defaultSelectedBox: {
+    border: '1px solid',
+    borderColor: 'neutral.80',
+    borderRadius: 5,
+    minHeight: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    p: 'xs',
+    maxWidth: '50%'
+  },
+  defaultSelectedTitle: {
+    fontSize: 'sm',
+    pl: 'xs',
+    maxHeight: 32,
+    overflow: 'hidden'
+  }
+};
 export var Default = function Default() {
   var _useState = useState(data),
       _useState2 = _slicedToArray(_useState, 2),
@@ -213,15 +240,7 @@ export var Default = function Default() {
       "data-id": item.key,
       listItemProps: {
         isRow: true,
-        sx: {
-          bg: 'white',
-          width: '100%',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          '&.is-hovered': {
-            bg: 'accent.99'
-          }
-        }
+        sx: sx.listViewItem
       }
     }, ___EmotionJSX(Box, {
       isRow: true
@@ -249,16 +268,7 @@ export var Default = function Default() {
       variant: "listSubtitle"
     }, item.subtitle))), item.isDefaultSelected ? ___EmotionJSX(Box, {
       isRow: true,
-      sx: {
-        border: '1px solid',
-        borderColor: 'neutral.80',
-        borderRadius: 5,
-        minHeight: 22,
-        justifyContent: 'center',
-        alignItems: 'center',
-        p: 'xs',
-        maxWidth: '50%'
-      }
+      sx: sx.defaultSelectedBox
     }, ___EmotionJSX(Icon, {
       icon: CheckIcon,
       color: "neutral.20",
@@ -267,12 +277,7 @@ export var Default = function Default() {
         flexShrink: 0
       }
     }), ___EmotionJSX(Text, {
-      sx: {
-        fontSize: 'sm',
-        pl: 'xs',
-        maxHeight: 32,
-        overflow: 'hidden'
-      }
+      sx: sx.defaultSelectedTitle
     }, "Added by Filter")) : ___EmotionJSX(CheckboxField, {
       controlProps: {
         color: 'neutral.10',

package/lib/recipes/ConditionalFilter.stories.js

@@ -10,24 +10,41 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/ConditionalFilter'
 };
-export var Default = function Default() {
-  var customChipStyles = {
+var sx = {
+  customChipStyles: {
+    marginRight: 'sm',
     '& > span': {
       textTransform: 'none',
       fontWeight: '500'
     },
     minWidth: '65px',
     'z-index': '1'
-  };
-  var borderedBoxStyles = {
+  },
+  borderedBoxStyles: {
     '&::after': {
       bg: 'decorative.7'
     },
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: 'neutral.80',
-    borderRadius: '4px'
-  };
+    borderRadius: '4px',
+    padding: 'sm',
+    width: '100%'
+  },
+  allConditionsBox: {
+    '&::after': {
+      bg: 'decorative.7'
+    },
+    alignItems: 'center',
+    borderRadius: '4px',
+    marginTop: 'md'
+  },
+  defaultText: {
+    textTransform: 'none',
+    color: 'inherit'
+  }
+};
+export var Default = function Default() {
   var allConditions = [{
     field1: 'Family Name',
     field3: 'John',
@@ -100,8 +117,7 @@ export var Default = function Default() {
   }, ___EmotionJSX(Chip, {
     label: "All",
     bg: "decorative.7",
-    mr: "sm",
-    sx: customChipStyles
+    sx: sx.customChipStyles
   }), ___EmotionJSX(Text, null, " of the conditions are true")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
     return ___EmotionJSX(Box, {
       isRow: true,
@@ -113,14 +129,7 @@ export var Default = function Default() {
       variant: "forms.input.container",
       bg: "white",
       isRow: true,
-      alignItems: "center",
-      borderRadius: "4px",
-      sx: {
-        '&::after': {
-          bg: 'decorative.7'
-        }
-      },
-      mt: "15px"
+      sx: sx.allConditionsBox
     }, ___EmotionJSX(Text, {
       pl: "md",
       pr: "sm"
@@ -128,8 +137,7 @@ export var Default = function Default() {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: customChipStyles,
-      mr: "sm",
+      sx: sx.customChipStyles,
       alignSelf: "center"
     }), ___EmotionJSX(Text, null, item.field3))));
   }), ___EmotionJSX(Box, {
@@ -138,18 +146,14 @@ export var Default = function Default() {
     isLast: true
   }), ___EmotionJSX(Box, {
     variant: "forms.input.container",
-    borderRadius: "4px",
-    p: "sm",
     mt: "md",
-    sx: borderedBoxStyles,
-    width: "100%"
+    sx: sx.borderedBoxStyles
   }, ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(Chip, {
     label: "Any",
     bg: "decorative.4",
-    mr: "sm",
-    sx: customChipStyles,
+    sx: sx.customChipStyles,
     alignSelf: "center"
   }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
     ml: "sm"
@@ -164,14 +168,8 @@ export var Default = function Default() {
       variant: "forms.input.container",
       bg: "white",
       isRow: true,
-      alignItems: "center",
-      borderRadius: "4px",
       width: "100%",
-      sx: {
-        '&::after': {
-          bg: 'decorative.4'
-        }
-      }
+      sx: sx.allConditionsBox
     }, ___EmotionJSX(Text, {
       pl: "md",
       pr: "sm"
@@ -179,8 +177,7 @@ export var Default = function Default() {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: customChipStyles,
-      mr: "sm",
+      sx: sx.customChipStyles,
       alignSelf: "center"
     }), ___EmotionJSX(Text, null, item.field3)));
   })))))), ___EmotionJSX(Button, {
@@ -213,10 +210,7 @@ export var Default = function Default() {
     },
     "aria-label": "temp-label"
   }, ___EmotionJSX(Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
+    sx: sx.defaultText
   }, "Any")), ___EmotionJSX(RockerButton, {
     name: "all",
     key: "all",
@@ -225,10 +219,7 @@ export var Default = function Default() {
     },
     "aria-label": "temp-label"
   }, ___EmotionJSX(Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
+    sx: sx.defaultText
   }, "All"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
     variant: "inline",
     width: "fit-content",
@@ -288,11 +279,7 @@ export var Default = function Default() {
     mr: "sm"
   }), ___EmotionJSX(Box, {
     variant: "forms.input.container",
-    borderRadius: "4px",
-    p: "sm",
-    width: "100%",
-    sx: borderedBoxStyles,
-    mr: "xs"
+    sx: sx.borderedBoxStyles
   }, ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center",
@@ -308,10 +295,7 @@ export var Default = function Default() {
     },
     "aria-label": "any"
   }, ___EmotionJSX(Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
+    sx: sx.defaultText
   }, "Any")), ___EmotionJSX(RockerButton, {
     name: "all",
     key: "all",
@@ -320,10 +304,7 @@ export var Default = function Default() {
     },
     "aria-label": "all"
   }, ___EmotionJSX(Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
+    sx: sx.defaultText
   }, "All"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
     variant: "inline",
     width: "fit-content",

package/lib/recipes/DatePicker.stories.js

@@ -12,6 +12,15 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/DatePicker'
 };
+var sx = {
+  calendarIcon: {
+    position: 'absolute',
+    right: 5,
+    top: 8,
+    width: 28,
+    height: 28
+  }
+};
 export var Default = function Default() {
   var dateFormat = 'YYYY-MM-DD';
 
@@ -83,13 +92,7 @@ export var Default = function Default() {
     slots: {
       inContainer: ___EmotionJSX(IconButton, _extends({
         "aria-label": "calendar-button",
-        sx: {
-          position: 'absolute',
-          right: 5,
-          top: 8,
-          width: 28,
-          height: 28
-        },
+        sx: sx.calendarIcon,
         onPress: handleCalendarIconPress,
         ref: triggerRef
       }, triggerProps), ___EmotionJSX(Icon, {

package/lib/recipes/StatsCircle.stories.js

@@ -6,17 +6,20 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/StatsCircle'
 };
+var sx = {
+  statsCircle: {
+    border: '3px solid',
+    borderColor: active,
+    borderRadius: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+};
 export var Default = function Default() {
   return ___EmotionJSX(Box, {
     width: "110px",
     height: "110px",
-    sx: {
-      'border': '3px solid',
-      'borderColor': active,
-      'borderRadius': '100%',
-      'alignItems': 'center',
-      'justifyContent': 'center'
-    }
+    sx: sx.statsCircle
   }, ___EmotionJSX(Text, {
     fontSize: 30
   }, "63"), ___EmotionJSX(Text, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.26.1-alpha.3",
+  "version": "1.26.1-alpha.6",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",