@pingux/astro 2.14.1-alpha.0 → 2.14.1-alpha.2

package/lib/cjs/components/Bracket/Bracket.js

@@ -13,6 +13,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _uuid = require("uuid");
 var _index = require("../../index");
 var _colors = require("../../styles/colors");
 var _react2 = require("@emotion/react");
@@ -29,6 +30,15 @@ var Bracket = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return bracketRef.current;
   });
+  var bracketId = (0, _react.useMemo)(function () {
+    return (0, _uuid.v4)();
+  }, []);
+  var bracketFillOneId = (0, _react.useMemo)(function () {
+    return (0, _uuid.v4)();
+  }, []);
+  var bracketFillTwoId = (0, _react.useMemo)(function () {
+    return (0, _uuid.v4)();
+  }, []);
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "bracket.base"
   }, others), !isLast && (0, _react2.jsx)(_index.Box, {
@@ -47,9 +57,9 @@ var Bracket = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       flexGrow: 1
     },
     "data-testid": "isLastLayer",
-    "aria-labelledby": "bracket-fill-vertical-icon-title"
+    "aria-labelledby": "bracket-fill-vertical-icon-title-".concat(bracketId)
   }, (0, _react2.jsx)("title", {
-    id: "bracket-fill-vertical-icon-title"
+    id: "bracket-fill-vertical-icon-title-".concat(bracketId)
   }, "bracket-fill"), (0, _react2.jsx)("g", null, (0, _react2.jsx)("title", null, "Layer 3"), (0, _react2.jsx)("line", {
     strokeLinecap: "undefined",
     strokeLinejoin: "undefined",
@@ -69,9 +79,9 @@ var Bracket = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     style: {
       flexGrow: 1
     },
-    "aria-labelledby": "bracket-fill-1-icon-title"
+    "aria-labelledby": "bracket-fill-1-icon-title-".concat(bracketFillOneId)
   }, (0, _react2.jsx)("title", {
-    id: "bracket-fill-1-icon-title"
+    id: "bracket-fill-1-icon-title-".concat(bracketFillOneId)
   }, "bracket-fill"), (0, _react2.jsx)("g", null, (0, _react2.jsx)("title", null, "Layer 1"), (0, _react2.jsx)("line", {
     strokeLinecap: "undefined",
     strokeLinejoin: "undefined",
@@ -85,9 +95,9 @@ var Bracket = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     version: "1.1",
     height: "15",
-    "aria-labelledby": "bracket-fill-2-icon-title"
+    "aria-labelledby": "bracket-fill-2-icon-title-".concat(bracketFillTwoId)
   }, (0, _react2.jsx)("title", {
-    id: "bracket-fill-2-icon-title"
+    id: "bracket-fill-2-icon-title-".concat(bracketFillTwoId)
   }, "bracket-fill"), (0, _react2.jsx)("g", {
     transform: "translate(-1, 0)"
   }, (0, _react2.jsx)("title", null, "Layer 2"), (0, _react2.jsx)("path", {

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

@@ -18,7 +18,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _AddIcon = _interopRequireDefault(require("@pingux/mdi-react/AddIcon"));
 var _AlertCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleIcon"));
 var _CogsIcon = _interopRequireDefault(require("@pingux/mdi-react/CogsIcon"));
-var _CreateIcon = _interopRequireDefault(require("@pingux/mdi-react/CreateIcon"));
 var _DeleteIcon = _interopRequireDefault(require("@pingux/mdi-react/DeleteIcon"));
 var _uuid = require("uuid");
 var _index = require("../index");
@@ -36,33 +35,26 @@ var sx = {
     position: 'absolute',
     right: '4px',
     top: '4px',
-    fill: '#A31300'
-  },
-  attributeMappingTitle: {
-    fontSize: 'lg',
-    lineHeight: '21px',
-    fontWeight: 3,
-    color: 'text.primary'
-  },
-  attributeMappingTitleWrapper: {
-    marginBottom: 'md',
-    alignItems: 'center'
+    fill: 'critical.bright'
   },
   badge: {
-    width: 'xx',
-    height: '22px',
     alignSelf: 'center',
-    minWidth: 'fit-content',
     border: '1px solid',
     borderColor: 'neutral.80',
-    backgroundColor: 'white !important',
-    marginLeft: 8,
+    backgroundColor: 'white',
+    marginLeft: 'sm',
     '& span': {
-      fontSize: 'sm',
       lineHeight: 1,
-      color: '#253746'
+      color: 'text.primary'
     }
   },
+  container: {
+    px: 'sm',
+    pt: 'sm',
+    pb: 'lg',
+    width: '450px',
+    backgroundColor: 'accent.99'
+  },
   calloutSx: {
     width: '450px',
     marginBottom: 'xs',
@@ -71,11 +63,6 @@ var sx = {
   createIconButton: {
     marginLeft: 'xs'
   },
-  defaultFieldsWrapperBox: {
-    padding: '10px 10px 24px 10px',
-    width: '450px',
-    backgroundColor: 'accent.99'
-  },
   fieldColumnTitle: {
     fontWeight: 3,
     fontSize: 'md',
@@ -90,13 +77,8 @@ var sx = {
     marginTop: 'sm'
   },
   separator: {
-    width: '21px',
+    width: '20px',
     margin: '0 2px'
-  },
-  tooltipBox: {
-    marginLeft: 'xs',
-    height: 'md',
-    width: 'md'
   }
 };
 var editSx = {
@@ -165,7 +147,6 @@ var editSx = {
 var helperTextId = (0, _uuid.v4)();
 var Row = function Row(props) {
   var withBadge = props.withBadge,
-    withTooltip = props.withTooltip,
     withError = props.withError,
     leftValue = props.leftValue,
     rightValue = props.rightValue;
@@ -213,35 +194,11 @@ var Row = function Row(props) {
   }), withBadge && (0, _react2.jsx)(_index.Badge, {
     label: "Required",
     sx: sx.badge
-  }), withTooltip && (0, _react2.jsx)(_index.Box, {
-    sx: sx.tooltipBox
-  }, (0, _react2.jsx)(_index.HelpHint, {
-    tooltipProps: {
-      direction: 'bottom'
-    }
-  }, "Population set to default")));
-};
-var Title = function Title() {
-  return (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: sx.attributeMappingTitleWrapper
-  }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.attributeMappingTitle
-  }, "Attribute Mapping"), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
-    sx: sx.createIconButton,
-    variant: "inverted",
-    "aria-label": "edit header button"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _CreateIcon["default"],
-    size: "sm",
-    title: {
-      name: 'Create Icon'
-    }
-  }))));
+  }));
 };
 var Display = function Display() {
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(Title, null), (0, _react2.jsx)(_index.Box, {
-    sx: sx.defaultFieldsWrapperBox
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+    sx: sx.container
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: {
@@ -251,27 +208,23 @@ var Display = function Display() {
     sx: sx.fieldColumnTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.fieldColumnTitle
-  }, "PingOne")), (0, _react2.jsx)(_index.Box, {
+  }, "Application")), (0, _react2.jsx)(_index.Box, {
     sx: sx.fieldColumnTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.fieldColumnTitle
-  }, "Google Suites"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
+  }, "PingOne"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
     withBadge: true,
-    leftValue: "UserId",
-    rightValue: "mdorey"
+    leftValue: "username",
+    rightValue: "User ID"
   }), (0, _react2.jsx)(Row, {
-    leftValue: "givenName",
-    rightValue: "firstName"
+    leftValue: "firstName",
+    rightValue: "Given Name"
   }), (0, _react2.jsx)(Row, {
-    leftValue: "familyName",
-    rightValue: "lastName"
+    leftValue: "lastName",
+    rightValue: "Family Name"
   }), (0, _react2.jsx)(Row, {
-    withTooltip: true,
     leftValue: "population",
-    rightValue: "population"
-  }), (0, _react2.jsx)(Row, {
-    leftValue: "password",
-    rightValue: "password"
+    rightValue: "Population"
   })));
 };
 exports.Display = Display;
@@ -283,7 +236,7 @@ Display.parameters = {
 };
 var DisplayWithError = function DisplayWithError() {
   var withError = true;
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(Title, null), (0, _react2.jsx)(_index.Callout, {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Callout, {
     status: _statuses["default"].ERROR,
     sx: sx.calloutSx
   }, (0, _react2.jsx)(_index.Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them.", (0, _react2.jsx)(_index.Link, {
@@ -292,7 +245,7 @@ var DisplayWithError = function DisplayWithError() {
     "aria-label": "".concat(_statuses["default"].ERROR, "-callout"),
     variant: "app"
   }, ' ', "Read More"))), (0, _react2.jsx)(_index.Box, {
-    sx: sx.defaultFieldsWrapperBox
+    sx: sx.container
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: {
@@ -302,22 +255,24 @@ var DisplayWithError = function DisplayWithError() {
     sx: sx.fieldColumnTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.fieldColumnTitle
-  }, "PingOne")), (0, _react2.jsx)(_index.Box, {
+  }, "Application")), (0, _react2.jsx)(_index.Box, {
     sx: sx.fieldColumnTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.fieldColumnTitle
-  }, "Google Suites"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
+  }, "PingOne"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
     withBadge: true,
-    leftValue: "UserId",
-    rightValue: "mdorey"
+    leftValue: "username",
+    rightValue: "User ID"
   }), (0, _react2.jsx)(Row, {
-    withError: withError,
-    leftValue: "givenName",
-    rightValue: "firstName"
+    leftValue: "firstName",
+    rightValue: "Given Name"
+  }), (0, _react2.jsx)(Row, {
+    leftValue: "lastName",
+    rightValue: "Family Name"
   }), (0, _react2.jsx)(Row, {
     withError: withError,
-    leftValue: "familyName",
-    rightValue: "lastName"
+    leftValue: "population",
+    rightValue: "Population"
   })));
 };
 exports.DisplayWithError = DisplayWithError;

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

@@ -12,12 +12,10 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.Edit = exports.Display = void 0;
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
-var _CreateIcon = _interopRequireDefault(require("@pingux/mdi-react/CreateIcon"));
 var _TrashIcon = _interopRequireDefault(require("@pingux/mdi-react/TrashIcon"));
 var _index = require("../index");
 var _react2 = require("@emotion/react");
@@ -27,24 +25,33 @@ var _default = {
   title: 'Recipes/Condition Filter'
 };
 exports["default"] = _default;
-var sx = {
-  customBadgeStyles: {
-    marginRight: 'sm',
-    '& > span': {
-      fontWeight: '500',
-      textTransform: 'none'
-    },
-    ml: '3px',
-    minWidth: '65px',
-    'z-index': '1'
+var customBadgeStyles = {
+  marginRight: 'sm',
+  '& > span': {
+    fontWeight: 1,
+    textTransform: 'none'
   },
+  ml: '3px',
+  minWidth: '65px',
+  height: '20px',
+  'z-index': '1'
+};
+var sx = {
+  equalBadgeStyles: _objectSpread(_objectSpread({}, customBadgeStyles), {}, {
+    bg: 'accent.95',
+    textColor: 'neutral.10',
+    alignSelf: 'center',
+    height: '21px',
+    minWidth: '51px'
+  }),
   borderedBoxStyles: {
     '&::after': {
-      bg: 'decorative.7',
-      width: '2px'
+      bg: 'decorative.4',
+      width: '2px',
+      display: 'block'
     },
     borderColor: 'neutral.80',
-    borderRadius: '4px',
+    borderRadius: '3px 4px 4px 3px',
     borderStyle: 'solid',
     borderWidth: '1px 1px 1px 0px',
     padding: 'sm',
@@ -52,7 +59,7 @@ var sx = {
   },
   allConditionsBox: {
     '&::after': {
-      bg: 'decorative.7',
+      bg: 'decorative.4',
       width: '2px'
     },
     alignItems: 'center',
@@ -65,86 +72,52 @@ var sx = {
     color: 'inherit',
     fontSize: 'sm',
     fontWeight: '3'
+  },
+  textStyles: {
+    pl: 'md',
+    pr: 'sm'
   }
 };
-var Default = function Default() {
-  var allConditions = [{
-    field1: 'Family Name',
-    field3: 'John',
-    key: 'FamilyNameField'
-  }, {
-    field1: 'Full Name',
-    field3: 'Alex Smith',
-    key: 'FullNameField'
-  }];
-  var anyConditions = [{
-    field1: 'Group',
-    field3: 'Marketing',
-    key: 'Group1Field'
-  }, {
-    field1: 'Group',
-    field3: 'UX Team',
-    key: 'Group2Field'
-  }];
-  var noneConditions = [{
-    field1: 'Misc',
-    field3: 'Apple',
-    key: 'Miscellaneous1'
-  }, {
-    field1: 'Misc',
-    field3: 'Banana',
-    key: 'Miscellaneous2'
-  }];
-  var trashButton = (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "deleteButton",
-    sx: {
-      alignSelf: 'center'
-    }
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _TrashIcon["default"],
-    sx: {
-      '& > path': {
-        fill: 'neutral.40'
-      }
-    },
-    size: "md",
-    title: {
-      name: 'Trash Icon'
-    }
-  }));
-  var _React$useState = _react["default"].useState(false),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    editOverviewVisible = _React$useState2[0],
-    setEditOverviewVisible = _React$useState2[1];
-  return (0, _react2.jsx)(_index.Box, null, !editOverviewVisible ? (0, _react2.jsx)(_index.Box, {
+var allConditions = [{
+  field1: 'Family Name',
+  field3: 'John',
+  key: 'FamilyNameField'
+}, {
+  field1: 'Full Name',
+  field3: 'Alex Smith',
+  key: 'FullNameField'
+}];
+var anyConditions = [{
+  field1: 'Group',
+  field3: 'Marketing',
+  key: 'Group1Field'
+}, {
+  field1: 'Group',
+  field3: 'UX Team',
+  key: 'Group2Field'
+}];
+var noneConditions = [{
+  field1: 'Misc',
+  field3: 'Apple',
+  key: 'Miscellaneous1'
+}, {
+  field1: 'Misc',
+  field3: 'Banana',
+  key: 'Miscellaneous2'
+}];
+var Display = function Display() {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
     bg: "accent.99",
     maxWidth: "318px",
     p: "sm"
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle",
-    fontWeight: "0",
-    pb: "md"
-  }, "Branch Condition"), (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "edit",
-    variant: "inverted",
-    ml: "xs",
-    onPress: function onPress() {
-      return setEditOverviewVisible(true);
-    }
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _CreateIcon["default"],
-    size: "xs",
-    title: {
-      name: 'Create Icon'
-    }
-  }))), (0, _react2.jsx)(_index.Box, {
+  }), (0, _react2.jsx)(_index.Box, {
     isRow: true
   }, (0, _react2.jsx)(_index.Badge, {
     label: "All",
     bg: "decorative.4",
-    sx: sx.customBadgeStyles
+    sx: customBadgeStyles
   }), (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,
@@ -157,14 +130,11 @@ var Default = function Default() {
       isRow: true,
       sx: sx.allConditionsBox
     }, (0, _react2.jsx)(_index.Text, {
-      pl: "md",
-      pr: "sm"
+      sx: sx.textStyles
     }, item.field1), (0, _react2.jsx)(_index.Badge, {
       label: "Equals",
-      bg: "accent.90",
-      textColor: "neutral.10",
-      sx: sx.customBadgeStyles,
-      alignSelf: "center"
+      sx: sx.equalBadgeStyles,
+      textColor: "neutral.10"
     }), (0, _react2.jsx)(_index.Text, null, item.field3))));
   }), (0, _react2.jsx)(_index.Box, {
     isRow: true
@@ -177,7 +147,7 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Badge, {
     label: "Any",
     bg: "decorative.7",
-    sx: sx.customBadgeStyles,
+    sx: customBadgeStyles,
     alignSelf: "center"
   }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
     ml: "xs"
@@ -194,16 +164,18 @@ var Default = function Default() {
       bg: "white",
       isRow: true,
       width: "100%",
-      sx: sx.allConditionsBox
+      sx: _objectSpread(_objectSpread({}, sx.allConditionsBox), {}, {
+        '&::after': {
+          bg: 'decorative.7',
+          width: '2px'
+        }
+      })
     }, (0, _react2.jsx)(_index.Text, {
-      pl: "md",
-      pr: "sm"
+      sx: sx.textStyles
     }, item.field1), (0, _react2.jsx)(_index.Badge, {
       label: "Equals",
-      bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customBadgeStyles,
-      alignSelf: "center"
+      sx: sx.equalBadgeStyles
     }), (0, _react2.jsx)(_index.Text, null, item.field3)));
   })))), (0, _react2.jsx)(_index.Box, {
     isRow: true
@@ -218,7 +190,7 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Badge, {
     label: "None",
     bg: "accent.20",
-    sx: sx.customBadgeStyles,
+    sx: customBadgeStyles,
     alignSelf: "center"
   }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
     ml: "xs"
@@ -235,26 +207,45 @@ var Default = function Default() {
       bg: "white",
       isRow: true,
       width: "100%",
-      sx: sx.allConditionsBox
+      sx: _objectSpread(_objectSpread({}, sx.allConditionsBox), {}, {
+        '&::after': {
+          bg: 'accent.20',
+          width: '2px'
+        }
+      })
     }, (0, _react2.jsx)(_index.Text, {
-      pl: "md",
-      pr: "sm"
+      sx: sx.textStyles
     }, item.field1), (0, _react2.jsx)(_index.Badge, {
       label: "Equals",
-      bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customBadgeStyles,
-      alignSelf: "center"
+      sx: sx.equalBadgeStyles
     }), (0, _react2.jsx)(_index.Text, null, item.field3)));
-  }))))) : (0, _react2.jsx)(_index.Box, {
+  }))))));
+};
+exports.Display = Display;
+var Edit = function Edit() {
+  var trashButton = (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "deleteButton",
+    sx: {
+      alignSelf: 'center'
+    }
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _TrashIcon["default"],
+    sx: {
+      '& > path': {
+        fill: 'neutral.40'
+      }
+    },
+    size: "md",
+    title: {
+      name: 'Trash Icon'
+    }
+  }));
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
     bg: "accent.99",
     p: "md",
     maxWidth: "966px"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle",
-    fontWeight: "0",
-    pb: "md"
-  }, "Branch Condition"), (0, _react2.jsx)(_index.Box, {
+  }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",
     mb: "sm",
@@ -526,22 +517,6 @@ var Default = function Default() {
     })), trashButton);
   }))), (0, _react2.jsx)(_index.Box, {
     alignSelf: "start"
-  }, trashButton)), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    mt: "lg"
-  }, (0, _react2.jsx)(_index.Button, {
-    onPress: function onPress() {
-      return setEditOverviewVisible(false);
-    },
-    variant: "primary",
-    mr: "md",
-    "aria-label": "save"
-  }, "Save"), (0, _react2.jsx)(_index.Button, {
-    onPress: function onPress() {
-      return setEditOverviewVisible(false);
-    },
-    variant: "link",
-    "aria-label": "cancel"
-  }, "Cancel"))));
+  }, trashButton))));
 };
-exports.Default = Default;
+exports.Edit = Edit;

package/lib/components/Bracket/Bracket.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["isLast", "color"];
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
+import { v4 as uuid } from 'uuid';
 import { Box } from '../../index';
 import { line } from '../../styles/colors';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -16,6 +17,15 @@ var Bracket = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return bracketRef.current;
   });
+  var bracketId = useMemo(function () {
+    return uuid();
+  }, []);
+  var bracketFillOneId = useMemo(function () {
+    return uuid();
+  }, []);
+  var bracketFillTwoId = useMemo(function () {
+    return uuid();
+  }, []);
   return ___EmotionJSX(Box, _extends({
     variant: "bracket.base"
   }, others), !isLast && ___EmotionJSX(Box, {
@@ -34,9 +44,9 @@ var Bracket = /*#__PURE__*/forwardRef(function (props, ref) {
       flexGrow: 1
     },
     "data-testid": "isLastLayer",
-    "aria-labelledby": "bracket-fill-vertical-icon-title"
+    "aria-labelledby": "bracket-fill-vertical-icon-title-".concat(bracketId)
   }, ___EmotionJSX("title", {
-    id: "bracket-fill-vertical-icon-title"
+    id: "bracket-fill-vertical-icon-title-".concat(bracketId)
   }, "bracket-fill"), ___EmotionJSX("g", null, ___EmotionJSX("title", null, "Layer 3"), ___EmotionJSX("line", {
     strokeLinecap: "undefined",
     strokeLinejoin: "undefined",
@@ -56,9 +66,9 @@ var Bracket = /*#__PURE__*/forwardRef(function (props, ref) {
     style: {
       flexGrow: 1
     },
-    "aria-labelledby": "bracket-fill-1-icon-title"
+    "aria-labelledby": "bracket-fill-1-icon-title-".concat(bracketFillOneId)
   }, ___EmotionJSX("title", {
-    id: "bracket-fill-1-icon-title"
+    id: "bracket-fill-1-icon-title-".concat(bracketFillOneId)
   }, "bracket-fill"), ___EmotionJSX("g", null, ___EmotionJSX("title", null, "Layer 1"), ___EmotionJSX("line", {
     strokeLinecap: "undefined",
     strokeLinejoin: "undefined",
@@ -72,9 +82,9 @@ var Bracket = /*#__PURE__*/forwardRef(function (props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     version: "1.1",
     height: "15",
-    "aria-labelledby": "bracket-fill-2-icon-title"
+    "aria-labelledby": "bracket-fill-2-icon-title-".concat(bracketFillTwoId)
   }, ___EmotionJSX("title", {
-    id: "bracket-fill-2-icon-title"
+    id: "bracket-fill-2-icon-title-".concat(bracketFillTwoId)
   }, "bracket-fill"), ___EmotionJSX("g", {
     transform: "translate(-1, 0)"
   }, ___EmotionJSX("title", null, "Layer 2"), ___EmotionJSX("path", {

package/lib/recipes/AttributeMapping.stories.js

@@ -7,10 +7,9 @@ import React, { memo, useEffect, useRef, useState } from 'react';
 import AddIcon from '@pingux/mdi-react/AddIcon';
 import AlertCircleIcon from '@pingux/mdi-react/AlertCircleIcon';
 import CogsIcon from '@pingux/mdi-react/CogsIcon';
-import CreateIcon from '@pingux/mdi-react/CreateIcon';
 import DeleteIcon from '@pingux/mdi-react/DeleteIcon';
 import { v4 as uuid } from 'uuid';
-import { Badge, Box, Button, Callout, ComboBoxField, HelpHint, Icon, IconButton, Item, Link, ScrollBox, Separator, Text, TextField } from '../index';
+import { Badge, Box, Button, Callout, ComboBoxField, Icon, IconButton, Item, Link, ScrollBox, Separator, Text, TextField } from '../index';
 import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
 import statuses from '../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -22,33 +21,26 @@ var sx = {
     position: 'absolute',
     right: '4px',
     top: '4px',
-    fill: '#A31300'
-  },
-  attributeMappingTitle: {
-    fontSize: 'lg',
-    lineHeight: '21px',
-    fontWeight: 3,
-    color: 'text.primary'
-  },
-  attributeMappingTitleWrapper: {
-    marginBottom: 'md',
-    alignItems: 'center'
+    fill: 'critical.bright'
   },
   badge: {
-    width: 'xx',
-    height: '22px',
     alignSelf: 'center',
-    minWidth: 'fit-content',
     border: '1px solid',
     borderColor: 'neutral.80',
-    backgroundColor: 'white !important',
-    marginLeft: 8,
+    backgroundColor: 'white',
+    marginLeft: 'sm',
     '& span': {
-      fontSize: 'sm',
       lineHeight: 1,
-      color: '#253746'
+      color: 'text.primary'
     }
   },
+  container: {
+    px: 'sm',
+    pt: 'sm',
+    pb: 'lg',
+    width: '450px',
+    backgroundColor: 'accent.99'
+  },
   calloutSx: {
     width: '450px',
     marginBottom: 'xs',
@@ -57,11 +49,6 @@ var sx = {
   createIconButton: {
     marginLeft: 'xs'
   },
-  defaultFieldsWrapperBox: {
-    padding: '10px 10px 24px 10px',
-    width: '450px',
-    backgroundColor: 'accent.99'
-  },
   fieldColumnTitle: {
     fontWeight: 3,
     fontSize: 'md',
@@ -76,13 +63,8 @@ var sx = {
     marginTop: 'sm'
   },
   separator: {
-    width: '21px',
+    width: '20px',
     margin: '0 2px'
-  },
-  tooltipBox: {
-    marginLeft: 'xs',
-    height: 'md',
-    width: 'md'
   }
 };
 var editSx = {
@@ -151,7 +133,6 @@ var editSx = {
 var helperTextId = uuid();
 var Row = function Row(props) {
   var withBadge = props.withBadge,
-    withTooltip = props.withTooltip,
     withError = props.withError,
     leftValue = props.leftValue,
     rightValue = props.rightValue;
@@ -199,35 +180,11 @@ var Row = function Row(props) {
   }), withBadge && ___EmotionJSX(Badge, {
     label: "Required",
     sx: sx.badge
-  }), withTooltip && ___EmotionJSX(Box, {
-    sx: sx.tooltipBox
-  }, ___EmotionJSX(HelpHint, {
-    tooltipProps: {
-      direction: 'bottom'
-    }
-  }, "Population set to default")));
-};
-var Title = function Title() {
-  return ___EmotionJSX(Box, {
-    isRow: true,
-    sx: sx.attributeMappingTitleWrapper
-  }, ___EmotionJSX(Text, {
-    sx: sx.attributeMappingTitle
-  }, "Attribute Mapping"), ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
-    sx: sx.createIconButton,
-    variant: "inverted",
-    "aria-label": "edit header button"
-  }, ___EmotionJSX(Icon, {
-    icon: CreateIcon,
-    size: "sm",
-    title: {
-      name: 'Create Icon'
-    }
-  }))));
+  }));
 };
 export var Display = function Display() {
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Title, null), ___EmotionJSX(Box, {
-    sx: sx.defaultFieldsWrapperBox
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+    sx: sx.container
   }, ___EmotionJSX(Box, {
     isRow: true,
     sx: {
@@ -237,27 +194,23 @@ export var Display = function Display() {
     sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
-  }, "PingOne")), ___EmotionJSX(Box, {
+  }, "Application")), ___EmotionJSX(Box, {
     sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
-  }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
+  }, "PingOne"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
     withBadge: true,
-    leftValue: "UserId",
-    rightValue: "mdorey"
+    leftValue: "username",
+    rightValue: "User ID"
   }), ___EmotionJSX(Row, {
-    leftValue: "givenName",
-    rightValue: "firstName"
+    leftValue: "firstName",
+    rightValue: "Given Name"
   }), ___EmotionJSX(Row, {
-    leftValue: "familyName",
-    rightValue: "lastName"
+    leftValue: "lastName",
+    rightValue: "Family Name"
   }), ___EmotionJSX(Row, {
-    withTooltip: true,
     leftValue: "population",
-    rightValue: "population"
-  }), ___EmotionJSX(Row, {
-    leftValue: "password",
-    rightValue: "password"
+    rightValue: "Population"
   })));
 };
 Display.parameters = {
@@ -268,7 +221,7 @@ Display.parameters = {
 };
 export var DisplayWithError = function DisplayWithError() {
   var withError = true;
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Title, null), ___EmotionJSX(Callout, {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Callout, {
     status: statuses.ERROR,
     sx: sx.calloutSx
   }, ___EmotionJSX(Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them.", ___EmotionJSX(Link, {
@@ -277,7 +230,7 @@ export var DisplayWithError = function DisplayWithError() {
     "aria-label": "".concat(statuses.ERROR, "-callout"),
     variant: "app"
   }, ' ', "Read More"))), ___EmotionJSX(Box, {
-    sx: sx.defaultFieldsWrapperBox
+    sx: sx.container
   }, ___EmotionJSX(Box, {
     isRow: true,
     sx: {
@@ -287,22 +240,24 @@ export var DisplayWithError = function DisplayWithError() {
     sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
-  }, "PingOne")), ___EmotionJSX(Box, {
+  }, "Application")), ___EmotionJSX(Box, {
     sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
-  }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
+  }, "PingOne"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
     withBadge: true,
-    leftValue: "UserId",
-    rightValue: "mdorey"
+    leftValue: "username",
+    rightValue: "User ID"
   }), ___EmotionJSX(Row, {
-    withError: withError,
-    leftValue: "givenName",
-    rightValue: "firstName"
+    leftValue: "firstName",
+    rightValue: "Given Name"
+  }), ___EmotionJSX(Row, {
+    leftValue: "lastName",
+    rightValue: "Family Name"
   }), ___EmotionJSX(Row, {
     withError: withError,
-    leftValue: "familyName",
-    rightValue: "lastName"
+    leftValue: "population",
+    rightValue: "Population"
   })));
 };
 export var Edit = function Edit() {

package/lib/recipes/ConditionFilter.stories.js

@@ -1,8 +1,3 @@
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
@@ -11,32 +6,44 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
-import CreateIcon from '@pingux/mdi-react/CreateIcon';
 import TrashIcon from '@pingux/mdi-react/TrashIcon';
 import { Badge, Box, Bracket, Button, Icon, IconButton, Item, RockerButton, RockerButtonGroup, SelectField, Text, TextField } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Condition Filter'
 };
-var sx = {
-  customBadgeStyles: {
-    marginRight: 'sm',
-    '& > span': {
-      fontWeight: '500',
-      textTransform: 'none'
-    },
-    ml: '3px',
-    minWidth: '65px',
-    'z-index': '1'
+var customBadgeStyles = {
+  marginRight: 'sm',
+  '& > span': {
+    fontWeight: 1,
+    textTransform: 'none'
   },
+  ml: '3px',
+  minWidth: '65px',
+  height: '20px',
+  'z-index': '1'
+};
+var sx = {
+  equalBadgeStyles: _objectSpread(_objectSpread({}, customBadgeStyles), {}, {
+    bg: 'accent.95',
+    textColor: 'neutral.10',
+    alignSelf: 'center',
+    height: '21px',
+    minWidth: '51px'
+  }),
   borderedBoxStyles: {
     '&::after': {
-      bg: 'decorative.7',
-      width: '2px'
+      bg: 'decorative.4',
+      width: '2px',
+      display: 'block'
     },
     borderColor: 'neutral.80',
-    borderRadius: '4px',
+    borderRadius: '3px 4px 4px 3px',
     borderStyle: 'solid',
     borderWidth: '1px 1px 1px 0px',
     padding: 'sm',
@@ -44,7 +51,7 @@ var sx = {
   },
   allConditionsBox: {
     '&::after': {
-      bg: 'decorative.7',
+      bg: 'decorative.4',
       width: '2px'
     },
     alignItems: 'center',
@@ -57,86 +64,52 @@ var sx = {
     color: 'inherit',
     fontSize: 'sm',
     fontWeight: '3'
+  },
+  textStyles: {
+    pl: 'md',
+    pr: 'sm'
   }
 };
-export var Default = function Default() {
-  var allConditions = [{
-    field1: 'Family Name',
-    field3: 'John',
-    key: 'FamilyNameField'
-  }, {
-    field1: 'Full Name',
-    field3: 'Alex Smith',
-    key: 'FullNameField'
-  }];
-  var anyConditions = [{
-    field1: 'Group',
-    field3: 'Marketing',
-    key: 'Group1Field'
-  }, {
-    field1: 'Group',
-    field3: 'UX Team',
-    key: 'Group2Field'
-  }];
-  var noneConditions = [{
-    field1: 'Misc',
-    field3: 'Apple',
-    key: 'Miscellaneous1'
-  }, {
-    field1: 'Misc',
-    field3: 'Banana',
-    key: 'Miscellaneous2'
-  }];
-  var trashButton = ___EmotionJSX(IconButton, {
-    "aria-label": "deleteButton",
-    sx: {
-      alignSelf: 'center'
-    }
-  }, ___EmotionJSX(Icon, {
-    icon: TrashIcon,
-    sx: {
-      '& > path': {
-        fill: 'neutral.40'
-      }
-    },
-    size: "md",
-    title: {
-      name: 'Trash Icon'
-    }
-  }));
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    editOverviewVisible = _React$useState2[0],
-    setEditOverviewVisible = _React$useState2[1];
-  return ___EmotionJSX(Box, null, !editOverviewVisible ? ___EmotionJSX(Box, {
+var allConditions = [{
+  field1: 'Family Name',
+  field3: 'John',
+  key: 'FamilyNameField'
+}, {
+  field1: 'Full Name',
+  field3: 'Alex Smith',
+  key: 'FullNameField'
+}];
+var anyConditions = [{
+  field1: 'Group',
+  field3: 'Marketing',
+  key: 'Group1Field'
+}, {
+  field1: 'Group',
+  field3: 'UX Team',
+  key: 'Group2Field'
+}];
+var noneConditions = [{
+  field1: 'Misc',
+  field3: 'Apple',
+  key: 'Miscellaneous1'
+}, {
+  field1: 'Misc',
+  field3: 'Banana',
+  key: 'Miscellaneous2'
+}];
+export var Display = function Display() {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
     bg: "accent.99",
     maxWidth: "318px",
     p: "sm"
   }, ___EmotionJSX(Box, {
     isRow: true
-  }, ___EmotionJSX(Text, {
-    variant: "itemTitle",
-    fontWeight: "0",
-    pb: "md"
-  }, "Branch Condition"), ___EmotionJSX(IconButton, {
-    "aria-label": "edit",
-    variant: "inverted",
-    ml: "xs",
-    onPress: function onPress() {
-      return setEditOverviewVisible(true);
-    }
-  }, ___EmotionJSX(Icon, {
-    icon: CreateIcon,
-    size: "xs",
-    title: {
-      name: 'Create Icon'
-    }
-  }))), ___EmotionJSX(Box, {
+  }), ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(Badge, {
     label: "All",
     bg: "decorative.4",
-    sx: sx.customBadgeStyles
+    sx: customBadgeStyles
   }), ___EmotionJSX(Text, null, " of the conditions are true")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
     return ___EmotionJSX(Box, {
       isRow: true,
@@ -149,14 +122,11 @@ export var Default = function Default() {
       isRow: true,
       sx: sx.allConditionsBox
     }, ___EmotionJSX(Text, {
-      pl: "md",
-      pr: "sm"
+      sx: sx.textStyles
     }, item.field1), ___EmotionJSX(Badge, {
       label: "Equals",
-      bg: "accent.90",
-      textColor: "neutral.10",
-      sx: sx.customBadgeStyles,
-      alignSelf: "center"
+      sx: sx.equalBadgeStyles,
+      textColor: "neutral.10"
     }), ___EmotionJSX(Text, null, item.field3))));
   }), ___EmotionJSX(Box, {
     isRow: true
@@ -169,7 +139,7 @@ export var Default = function Default() {
   }, ___EmotionJSX(Badge, {
     label: "Any",
     bg: "decorative.7",
-    sx: sx.customBadgeStyles,
+    sx: customBadgeStyles,
     alignSelf: "center"
   }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
     ml: "xs"
@@ -186,16 +156,18 @@ export var Default = function Default() {
       bg: "white",
       isRow: true,
       width: "100%",
-      sx: sx.allConditionsBox
+      sx: _objectSpread(_objectSpread({}, sx.allConditionsBox), {}, {
+        '&::after': {
+          bg: 'decorative.7',
+          width: '2px'
+        }
+      })
     }, ___EmotionJSX(Text, {
-      pl: "md",
-      pr: "sm"
+      sx: sx.textStyles
     }, item.field1), ___EmotionJSX(Badge, {
       label: "Equals",
-      bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customBadgeStyles,
-      alignSelf: "center"
+      sx: sx.equalBadgeStyles
     }), ___EmotionJSX(Text, null, item.field3)));
   })))), ___EmotionJSX(Box, {
     isRow: true
@@ -210,7 +182,7 @@ export var Default = function Default() {
   }, ___EmotionJSX(Badge, {
     label: "None",
     bg: "accent.20",
-    sx: sx.customBadgeStyles,
+    sx: customBadgeStyles,
     alignSelf: "center"
   }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
     ml: "xs"
@@ -227,26 +199,44 @@ export var Default = function Default() {
       bg: "white",
       isRow: true,
       width: "100%",
-      sx: sx.allConditionsBox
+      sx: _objectSpread(_objectSpread({}, sx.allConditionsBox), {}, {
+        '&::after': {
+          bg: 'accent.20',
+          width: '2px'
+        }
+      })
     }, ___EmotionJSX(Text, {
-      pl: "md",
-      pr: "sm"
+      sx: sx.textStyles
     }, item.field1), ___EmotionJSX(Badge, {
       label: "Equals",
-      bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customBadgeStyles,
-      alignSelf: "center"
+      sx: sx.equalBadgeStyles
     }), ___EmotionJSX(Text, null, item.field3)));
-  }))))) : ___EmotionJSX(Box, {
+  }))))));
+};
+export var Edit = function Edit() {
+  var trashButton = ___EmotionJSX(IconButton, {
+    "aria-label": "deleteButton",
+    sx: {
+      alignSelf: 'center'
+    }
+  }, ___EmotionJSX(Icon, {
+    icon: TrashIcon,
+    sx: {
+      '& > path': {
+        fill: 'neutral.40'
+      }
+    },
+    size: "md",
+    title: {
+      name: 'Trash Icon'
+    }
+  }));
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
     bg: "accent.99",
     p: "md",
     maxWidth: "966px"
-  }, ___EmotionJSX(Text, {
-    variant: "itemTitle",
-    fontWeight: "0",
-    pb: "md"
-  }, "Branch Condition"), ___EmotionJSX(Box, {
+  }, ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center",
     mb: "sm",
@@ -518,21 +508,5 @@ export var Default = function Default() {
     })), trashButton);
   }))), ___EmotionJSX(Box, {
     alignSelf: "start"
-  }, trashButton)), ___EmotionJSX(Box, {
-    isRow: true,
-    mt: "lg"
-  }, ___EmotionJSX(Button, {
-    onPress: function onPress() {
-      return setEditOverviewVisible(false);
-    },
-    variant: "primary",
-    mr: "md",
-    "aria-label": "save"
-  }, "Save"), ___EmotionJSX(Button, {
-    onPress: function onPress() {
-      return setEditOverviewVisible(false);
-    },
-    variant: "link",
-    "aria-label": "cancel"
-  }, "Cancel"))));
+  }, trashButton))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.14.1-alpha.0",
+  "version": "2.14.1-alpha.2",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",