@pingux/astro 2.14.1-alpha.1 → 2.14.1-alpha.3

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/components/NumberField/NumberField.js

@@ -15,7 +15,6 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
@@ -29,7 +28,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
 var _hooks = require("../../hooks");
-var _useHiddenNumberFieldValue = _interopRequireDefault(require("../../hooks/useHiddenNumberFieldValue"));
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
@@ -37,11 +35,10 @@ var _react2 = require("@emotion/react");
 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; }
 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+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) { (0, _defineProperty2["default"])(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; }
 var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var helperText = props.helperText,
-    status = props.status,
-    formatOptions = props.formatOptions;
+    status = props.status;
   var _useLocale = (0, _i18n.useLocale)(),
     locale = _useLocale.locale;
   var state = (0, _reactStately.useNumberFieldState)(_objectSpread(_objectSpread({}, props), {}, {
@@ -92,66 +89,40 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   // this needed to remove console warning in React 16
   // I believe once we update to 17 - we can remove this
-  var onInputFocus = (0, _react.useCallback)(function (e) {
+  var onInputFocus = function onInputFocus(e) {
     e.persist();
     fieldControlInputProps.onFocus(e);
     inputProps.onFocus(e);
-  }, [fieldControlInputProps, inputProps]);
-  var onInputBlur = (0, _react.useCallback)(function (e) {
+  };
+  var onInputBlur = function onInputBlur(e) {
     e.persist();
     fieldControlInputProps.onBlur(e);
     inputProps.onBlur(e);
-  }, [fieldControlInputProps, inputProps]);
-  var updatedFieldControlInputProps = (0, _react.useMemo)(function () {
-    return _objectSpread(_objectSpread({}, fieldControlInputProps), {}, {
-      onFocus: onInputFocus,
-      onBlur: onInputBlur
-    });
-  }, [fieldControlInputProps, onInputBlur, onInputFocus]);
-  var onInputChange = function onInputChange(e) {
-    var _context;
-    var minValue = props.minValue;
-    var trimmedInputValue = (0, _trim["default"])(_context = e.target.value).call(_context);
-    var trimmedValueEvent = _objectSpread(_objectSpread({}, e), {}, {
-      target: _objectSpread(_objectSpread({}, e.target), {}, {
-        value: trimmedInputValue
-      })
-    });
-    if (!trimmedInputValue && typeof minValue !== 'undefined') {
-      var minValueEvent = _objectSpread(_objectSpread({}, e), {}, {
-        target: _objectSpread(_objectSpread({}, e.target), {}, {
-          value: minValue.toString()
-        })
-      });
-      inputProps.onChange(minValueEvent);
-    } else {
-      inputProps.onChange(trimmedValueEvent);
-    }
   };
-  var hiddenInputValue = (0, _useHiddenNumberFieldValue["default"])({
-    numberValue: state.numberValue,
-    isCurrency: formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.currency
+  var updatedFieldControlInputProps = _objectSpread(_objectSpread({}, fieldControlInputProps), {}, {
+    onFocus: onInputFocus,
+    onBlur: onInputBlur
   });
-  inputProps['aria-roledescription'] = null;
-  var helperTextId = (0, _react.useMemo)(function () {
-    return (0, _uuid.v4)();
-  }, []);
-  return (0, _react2.jsx)(_.Box, fieldContainerProps, (0, _react2.jsx)(_.Label, (0, _reactAria.mergeProps)(fieldLabelProps, labelProps)), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+  var helperTextId = (0, _uuid.v4)();
+  var updatedLabelProps = _objectSpread({}, (0, _reactAria.mergeProps)(fieldLabelProps, labelProps));
+  var inputPropsValue = inputProps.value || 0;
+  return (0, _react2.jsx)(_.Box, fieldContainerProps, (0, _react2.jsx)(_.Label, updatedLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     variant: "forms.numberField.noDefaultArrows"
   }, groupProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     variant: "forms.numberField.arrowsWrapper"
-  }, fieldControlWrapperProps), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
+  }, fieldControlWrapperProps, {
+    role: "spinbutton",
+    "aria-valuetext": inputPropsValue,
+    "aria-valuenow": inputPropsValue,
+    "aria-labelledby": updatedLabelProps.id
+  }), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
     variant: "forms.input.numberField",
     ref: inputRef
     // we don't want to merge this props, we want to
     // overwrite them like defaultValue, value, ect.
-  }, updatedFieldControlInputProps, (0, _omit["default"])(inputProps, ['name', 'onFocus', 'onBlur']), {
-    onChange: onInputChange,
-    "aria-describedby": helperText && helperTextId,
-    role: "textbox"
-  })), ControlArrows), (0, _react2.jsx)(_reactAria.VisuallyHidden, {
-    "aria-live": "assertive"
-  }, hiddenInputValue), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+  }, updatedFieldControlInputProps, (0, _omit["default"])(inputProps, ['name', 'onFocus', 'onBlur', 'aria-roledescription']), {
+    "aria-describedby": helperText && helperTextId
+  })), ControlArrows), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status,
     id: helperTextId
   }, helperText)));

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

@@ -41,7 +41,7 @@ var getComponent = function getComponent() {
 });
 test('renders NumberField component', function () {
   getComponent();
-  expect(_testWrapper.screen.getByLabelText(testLabel)).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByLabelText(testLabel)[0]).toBeInTheDocument();
 });
 test('arrow up is adding step to the number value', function () {
   var mockOnChange = jest.fn();
@@ -68,7 +68,7 @@ test('value can be set from outside (controlled state)', function () {
   getComponent({
     value: controlledValue
   });
-  expect(_testWrapper.screen.getByLabelText(testLabel)).toHaveValue('11');
+  expect(_testWrapper.screen.queryAllByLabelText(testLabel)[1]).toHaveValue('11');
 });
 test('calling onChange with integer when input value changed (controlled state)', function () {
   var mockOnChange = jest.fn();
@@ -76,7 +76,7 @@ test('calling onChange with integer when input value changed (controlled state)'
   getComponent({
     onChange: mockOnChange
   });
-  var numberInput = _testWrapper.screen.getByLabelText(testLabel);
+  var numberInput = _testWrapper.screen.queryAllByLabelText(testLabel)[1];
   _userEvent["default"].clear(numberInput);
   _userEvent["default"].type(numberInput, newTestValue.toString());
   numberInput.blur();
@@ -101,12 +101,12 @@ test('should show helper text if appropriate prop passed', function () {
 test('should be able to be focused via keyboard', function () {
   getComponent();
   _userEvent["default"].tab();
-  expect(_testWrapper.screen.getByLabelText(testLabel)).toHaveFocus();
+  expect(_testWrapper.screen.queryAllByLabelText(testLabel)[1]).toHaveFocus();
 });
 test('should be able to interact with the keyboard', function () {
   getComponent();
   _userEvent["default"].tab();
-  var numberInput = _testWrapper.screen.getByLabelText(testLabel);
+  var numberInput = _testWrapper.screen.queryAllByLabelText(testLabel)[1];
   _userEvent["default"].type(numberInput, '{arrowup}');
   expect(numberInput).toHaveValue((testValue + 1).toString());
   _userEvent["default"].type(numberInput, '{arrowdown}{arrowdown}');
@@ -125,7 +125,7 @@ test('should show hintText text if prop is passed', function () {
 test('increment and decrement buttons should be able to be focused via keyboard', function () {
   getComponent();
   _userEvent["default"].tab();
-  expect(_testWrapper.screen.getByLabelText(testLabel)).toHaveFocus();
+  expect(_testWrapper.screen.queryAllByLabelText(testLabel)[1]).toHaveFocus();
   _userEvent["default"].tab();
   expect(_testWrapper.screen.getByLabelText('arrow-up')).toHaveFocus();
   _userEvent["default"].tab();
@@ -136,12 +136,12 @@ test('number field input receiving name attribute', function () {
   getComponent({
     name: testName
   });
-  expect(_testWrapper.screen.getByLabelText(testLabel)).toHaveAttribute('name', testName);
+  expect(_testWrapper.screen.queryAllByLabelText(testLabel)[1]).toHaveAttribute('name', testName);
 });
 test('number field can be focused', function () {
   getComponent();
   _userEvent["default"].tab();
-  expect(_testWrapper.screen.getByLabelText(testLabel)).toHaveClass('is-focused');
+  expect(_testWrapper.screen.queryAllByLabelText(testLabel)[1]).toHaveClass('is-focused');
 });
 test('passing helper text should display it and correct aria attributes on input', function () {
   var testHelperText = 'testHelperText';

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/components/NumberField/NumberField.js

@@ -8,11 +8,10 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
-import { mergeProps, useNumberField, VisuallyHidden } from 'react-aria';
+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, { forwardRef, useImperativeHandle } from 'react';
+import { mergeProps, useNumberField } from 'react-aria';
 import { useNumberFieldState } from 'react-stately';
 import MenuDown from '@pingux/mdi-react/MenuDownIcon';
 import MenuUp from '@pingux/mdi-react/MenuUpIcon';
@@ -22,15 +21,13 @@ import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../..';
 import { useField, usePropWarning } from '../../hooks';
-import useHiddenNumberFieldValue from '../../hooks/useHiddenNumberFieldValue';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
-    status = props.status,
-    formatOptions = props.formatOptions;
+    status = props.status;
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
   var state = useNumberFieldState(_objectSpread(_objectSpread({}, props), {}, {
@@ -81,66 +78,40 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   // this needed to remove console warning in React 16
   // I believe once we update to 17 - we can remove this
-  var onInputFocus = useCallback(function (e) {
+  var onInputFocus = function onInputFocus(e) {
     e.persist();
     fieldControlInputProps.onFocus(e);
     inputProps.onFocus(e);
-  }, [fieldControlInputProps, inputProps]);
-  var onInputBlur = useCallback(function (e) {
+  };
+  var onInputBlur = function onInputBlur(e) {
     e.persist();
     fieldControlInputProps.onBlur(e);
     inputProps.onBlur(e);
-  }, [fieldControlInputProps, inputProps]);
-  var updatedFieldControlInputProps = useMemo(function () {
-    return _objectSpread(_objectSpread({}, fieldControlInputProps), {}, {
-      onFocus: onInputFocus,
-      onBlur: onInputBlur
-    });
-  }, [fieldControlInputProps, onInputBlur, onInputFocus]);
-  var onInputChange = function onInputChange(e) {
-    var _context;
-    var minValue = props.minValue;
-    var trimmedInputValue = _trimInstanceProperty(_context = e.target.value).call(_context);
-    var trimmedValueEvent = _objectSpread(_objectSpread({}, e), {}, {
-      target: _objectSpread(_objectSpread({}, e.target), {}, {
-        value: trimmedInputValue
-      })
-    });
-    if (!trimmedInputValue && typeof minValue !== 'undefined') {
-      var minValueEvent = _objectSpread(_objectSpread({}, e), {}, {
-        target: _objectSpread(_objectSpread({}, e.target), {}, {
-          value: minValue.toString()
-        })
-      });
-      inputProps.onChange(minValueEvent);
-    } else {
-      inputProps.onChange(trimmedValueEvent);
-    }
   };
-  var hiddenInputValue = useHiddenNumberFieldValue({
-    numberValue: state.numberValue,
-    isCurrency: formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.currency
+  var updatedFieldControlInputProps = _objectSpread(_objectSpread({}, fieldControlInputProps), {}, {
+    onFocus: onInputFocus,
+    onBlur: onInputBlur
   });
-  inputProps['aria-roledescription'] = null;
-  var helperTextId = useMemo(function () {
-    return uuid();
-  }, []);
-  return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, mergeProps(fieldLabelProps, labelProps)), ___EmotionJSX(Box, _extends({
+  var helperTextId = uuid();
+  var updatedLabelProps = _objectSpread({}, mergeProps(fieldLabelProps, labelProps));
+  var inputPropsValue = inputProps.value || 0;
+  return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, updatedLabelProps), ___EmotionJSX(Box, _extends({
     variant: "forms.numberField.noDefaultArrows"
   }, groupProps), ___EmotionJSX(Box, _extends({
     variant: "forms.numberField.arrowsWrapper"
-  }, fieldControlWrapperProps), ___EmotionJSX(Input, _extends({
+  }, fieldControlWrapperProps, {
+    role: "spinbutton",
+    "aria-valuetext": inputPropsValue,
+    "aria-valuenow": inputPropsValue,
+    "aria-labelledby": updatedLabelProps.id
+  }), ___EmotionJSX(Input, _extends({
     variant: "forms.input.numberField",
     ref: inputRef
     // we don't want to merge this props, we want to
     // overwrite them like defaultValue, value, ect.
-  }, updatedFieldControlInputProps, omit(inputProps, ['name', 'onFocus', 'onBlur']), {
-    onChange: onInputChange,
-    "aria-describedby": helperText && helperTextId,
-    role: "textbox"
-  })), ControlArrows), ___EmotionJSX(VisuallyHidden, {
-    "aria-live": "assertive"
-  }, hiddenInputValue), helperText && ___EmotionJSX(FieldHelperText, {
+  }, updatedFieldControlInputProps, omit(inputProps, ['name', 'onFocus', 'onBlur', 'aria-roledescription']), {
+    "aria-describedby": helperText && helperTextId
+  })), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
     status: status,
     id: helperTextId
   }, helperText)));

package/lib/components/NumberField/NumberField.test.js

@@ -38,7 +38,7 @@ axeTest(getComponent, {
 });
 test('renders NumberField component', function () {
   getComponent();
-  expect(screen.getByLabelText(testLabel)).toBeInTheDocument();
+  expect(screen.queryAllByLabelText(testLabel)[0]).toBeInTheDocument();
 });
 test('arrow up is adding step to the number value', function () {
   var mockOnChange = jest.fn();
@@ -65,7 +65,7 @@ test('value can be set from outside (controlled state)', function () {
   getComponent({
     value: controlledValue
   });
-  expect(screen.getByLabelText(testLabel)).toHaveValue('11');
+  expect(screen.queryAllByLabelText(testLabel)[1]).toHaveValue('11');
 });
 test('calling onChange with integer when input value changed (controlled state)', function () {
   var mockOnChange = jest.fn();
@@ -73,7 +73,7 @@ test('calling onChange with integer when input value changed (controlled state)'
   getComponent({
     onChange: mockOnChange
   });
-  var numberInput = screen.getByLabelText(testLabel);
+  var numberInput = screen.queryAllByLabelText(testLabel)[1];
   userEvent.clear(numberInput);
   userEvent.type(numberInput, newTestValue.toString());
   numberInput.blur();
@@ -98,12 +98,12 @@ test('should show helper text if appropriate prop passed', function () {
 test('should be able to be focused via keyboard', function () {
   getComponent();
   userEvent.tab();
-  expect(screen.getByLabelText(testLabel)).toHaveFocus();
+  expect(screen.queryAllByLabelText(testLabel)[1]).toHaveFocus();
 });
 test('should be able to interact with the keyboard', function () {
   getComponent();
   userEvent.tab();
-  var numberInput = screen.getByLabelText(testLabel);
+  var numberInput = screen.queryAllByLabelText(testLabel)[1];
   userEvent.type(numberInput, '{arrowup}');
   expect(numberInput).toHaveValue((testValue + 1).toString());
   userEvent.type(numberInput, '{arrowdown}{arrowdown}');
@@ -122,7 +122,7 @@ test('should show hintText text if prop is passed', function () {
 test('increment and decrement buttons should be able to be focused via keyboard', function () {
   getComponent();
   userEvent.tab();
-  expect(screen.getByLabelText(testLabel)).toHaveFocus();
+  expect(screen.queryAllByLabelText(testLabel)[1]).toHaveFocus();
   userEvent.tab();
   expect(screen.getByLabelText('arrow-up')).toHaveFocus();
   userEvent.tab();
@@ -133,12 +133,12 @@ test('number field input receiving name attribute', function () {
   getComponent({
     name: testName
   });
-  expect(screen.getByLabelText(testLabel)).toHaveAttribute('name', testName);
+  expect(screen.queryAllByLabelText(testLabel)[1]).toHaveAttribute('name', testName);
 });
 test('number field can be focused', function () {
   getComponent();
   userEvent.tab();
-  expect(screen.getByLabelText(testLabel)).toHaveClass('is-focused');
+  expect(screen.queryAllByLabelText(testLabel)[1]).toHaveClass('is-focused');
 });
 test('passing helper text should display it and correct aria attributes on input', function () {
   var testHelperText = 'testHelperText';

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.1",
+  "version": "2.14.1-alpha.3",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",

package/lib/cjs/hooks/useHiddenNumberFieldValue/index.js

@@ -1,14 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-_Object$defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _useHiddenNumberFieldValue["default"];
-  }
-});
-var _useHiddenNumberFieldValue = _interopRequireDefault(require("./useHiddenNumberFieldValue"));

package/lib/cjs/hooks/useHiddenNumberFieldValue/useHiddenNumberFieldValue.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = require("react");
-/**
- * Returns integer or absolute value for screen reader announcement.
-*/
-
-var useHiddenNumberFieldValue = function useHiddenNumberFieldValue(_ref) {
-  var numberValue = _ref.numberValue,
-    isCurrency = _ref.isCurrency;
-  return (0, _react.useMemo)(function () {
-    if (!numberValue) return '';
-    if (!isCurrency) return numberValue;
-    return Math.abs(numberValue);
-  }, [numberValue, isCurrency]);
-};
-var _default = useHiddenNumberFieldValue;
-exports["default"] = _default;

package/lib/cjs/hooks/useHiddenNumberFieldValue/useHiddenNumberFieldValue.test.js

@@ -1,35 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-var _reactHooks = require("@testing-library/react-hooks");
-var _useHiddenNumberFieldValue = _interopRequireDefault(require("./useHiddenNumberFieldValue"));
-test('When number is not currency, negative values return negative values', function () {
-  var _renderHook = (0, _reactHooks.renderHook)(function () {
-      return (0, _useHiddenNumberFieldValue["default"])({
-        isCurrency: false,
-        numberValue: -1
-      });
-    }),
-    result = _renderHook.result;
-  expect(result.current).toBe(-1);
-});
-test('When number is currency, it always returns the absolute value', function () {
-  var _renderHook2 = (0, _reactHooks.renderHook)(function () {
-      return (0, _useHiddenNumberFieldValue["default"])({
-        isCurrency: true,
-        numberValue: -1
-      });
-    }),
-    result = _renderHook2.result;
-  expect(result.current).toBe(1);
-});
-test('When number is not currency, positive values return positive numbers', function () {
-  var _renderHook3 = (0, _reactHooks.renderHook)(function () {
-      return (0, _useHiddenNumberFieldValue["default"])({
-        isCurrency: false,
-        numberValue: 2
-      });
-    }),
-    result = _renderHook3.result;
-  expect(result.current).toBe(2);
-});

package/lib/hooks/useHiddenNumberFieldValue/index.js

@@ -1 +0,0 @@
-export { default } from './useHiddenNumberFieldValue';

package/lib/hooks/useHiddenNumberFieldValue/useHiddenNumberFieldValue.js

@@ -1,16 +0,0 @@
-import { useMemo } from 'react';
-
-/**
- * Returns integer or absolute value for screen reader announcement.
-*/
-
-var useHiddenNumberFieldValue = function useHiddenNumberFieldValue(_ref) {
-  var numberValue = _ref.numberValue,
-    isCurrency = _ref.isCurrency;
-  return useMemo(function () {
-    if (!numberValue) return '';
-    if (!isCurrency) return numberValue;
-    return Math.abs(numberValue);
-  }, [numberValue, isCurrency]);
-};
-export default useHiddenNumberFieldValue;

package/lib/hooks/useHiddenNumberFieldValue/useHiddenNumberFieldValue.test.js

@@ -1,32 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-import useHiddenNumberFieldValue from './useHiddenNumberFieldValue';
-test('When number is not currency, negative values return negative values', function () {
-  var _renderHook = renderHook(function () {
-      return useHiddenNumberFieldValue({
-        isCurrency: false,
-        numberValue: -1
-      });
-    }),
-    result = _renderHook.result;
-  expect(result.current).toBe(-1);
-});
-test('When number is currency, it always returns the absolute value', function () {
-  var _renderHook2 = renderHook(function () {
-      return useHiddenNumberFieldValue({
-        isCurrency: true,
-        numberValue: -1
-      });
-    }),
-    result = _renderHook2.result;
-  expect(result.current).toBe(1);
-});
-test('When number is not currency, positive values return positive numbers', function () {
-  var _renderHook3 = renderHook(function () {
-      return useHiddenNumberFieldValue({
-        isCurrency: false,
-        numberValue: 2
-      });
-    }),
-    result = _renderHook3.result;
-  expect(result.current).toBe(2);
-});