@pingux/astro 2.0.0-alpha.7 → 2.0.0-beta.1

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

@@ -156,4 +156,14 @@ test('two menus can not be open at the same time', function () {
   expect(_testWrapper.screen.queryByRole('menuitem', {
     name: 'C'
   })).toBeInTheDocument();
+});
+test('holds a pressed state for menu trigger when isOpen is true', function () {
+  getComponent();
+  var button = _testWrapper.screen.getByRole('button');
+  expect(_testWrapper.screen.queryByRole('presentation')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('menu')).not.toBeInTheDocument();
+  expect(button).not.toHaveClass('is-pressed');
+  _userEvent["default"].click(button);
+  expect(_testWrapper.screen.queryByRole('menu')).toBeInTheDocument();
+  expect(button).toHaveClass('is-pressed');
 });

package/lib/cjs/components/SearchField/Search.styles.js

@@ -14,6 +14,9 @@ var wrapper = {
   justifyContent: 'center',
   '> input::-webkit-search-cancel-button, > input::-webkit-search-decoration': {
     WebkitAppearance: 'none'
+  },
+  '&.is-focused > *': {
+    zIndex: 1
   }
 };
 exports.wrapper = wrapper;

package/lib/cjs/{styles/theme-ui → docs/theme}/ThemeView.js

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactJsonTree = require("react-json-tree");
-var _theme = _interopRequireDefault(require("../theme"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
 var _react2 = require("@emotion/react");
 var _default = function _default() {
   return (0, _react2.jsx)(_reactJsonTree.JSONTree, {

package/lib/cjs/hooks/index.js

@@ -23,6 +23,12 @@ _Object$defineProperty(exports, "useComponentToggle", {
     return _useComponentToggle["default"];
   }
 });
+_Object$defineProperty(exports, "useCopyToClipboard", {
+  enumerable: true,
+  get: function get() {
+    return _useCopyToClipboard["default"];
+  }
+});
 _Object$defineProperty(exports, "useDebounce", {
   enumerable: true,
   get: function get() {
@@ -110,6 +116,7 @@ _Object$defineProperty(exports, "useTShirtSize", {
 var _useAriaLabelWarning = _interopRequireDefault(require("./useAriaLabelWarning"));
 var _useColumnStyles = _interopRequireDefault(require("./useColumnStyles"));
 var _useComponentToggle = _interopRequireDefault(require("./useComponentToggle"));
+var _useCopyToClipboard = _interopRequireDefault(require("./useCopyToClipboard"));
 var _useDebounce = _interopRequireDefault(require("./useDebounce"));
 var _useDeprecationWarning = _interopRequireDefault(require("./useDeprecationWarning"));
 var _useFallbackImage = _interopRequireDefault(require("./useFallbackImage"));

package/lib/cjs/patterns/AttributeMappingDisplayViewPattern.stories.hidden.js

@@ -77,7 +77,7 @@ var sx = {
     mb: 'auto',
     width: '21px'
   },
-  badgeStyles: {
+  badgeStyle: {
     width: '65px',
     height: '22px',
     minWidth: 'fit-content',
@@ -141,7 +141,7 @@ var Default = function Default() {
     }), hasBadge && (0, _react2.jsx)(_index.Badge, {
       label: "Required",
       textColor: "#253746",
-      sx: sx.badgeStyles
+      sx: sx.badgeStyle
     }));
   })));
 };

package/lib/cjs/patterns/AttributeMappingEditViewPattern.stories.hidden.js

@@ -23,17 +23,17 @@ var editFieldValues = [{
 }, {
   field1: 'firstName',
   field2: 'Given Name',
-  hasBadge: false,
+  hasChip: false,
   key: 2
 }, {
   field1: 'lastName',
   field2: 'Family Name',
-  hasBadge: false,
+  hasChip: false,
   key: 3
 }, {
   field1: 'population',
   field2: 'Population',
-  hasBadge: false,
+  hasChip: false,
   key: 4
 }];
 var sx = {

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

@@ -40,7 +40,7 @@ var sx = {
   comboBoxFieldWrapperClose: {
     position: 'absolute',
     transition: '0.2s width ease',
-    maxWidth: '110px'
+    width: '110px'
   },
   inputWrapper: {
     width: '100%',
@@ -106,7 +106,7 @@ var Default = function Default() {
     width: "100%",
     isOpen: isOpen,
     onOpenChange: setIsOpen,
-    containerProps: {
+    wrapperProps: {
       sx: isOpen ? sx.comboBoxFieldWrapperOpen : sx.comboBoxFieldWrapperClose
     },
     controlProps: {

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

@@ -15,49 +15,33 @@ var _default = {
 };
 exports["default"] = _default;
 var Default = function Default() {
-  var heading = 'Title of the Page';
-  var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
     align: "center",
     isRow: true,
     mb: "xs",
     role: "heading",
     "aria-level": "1"
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "title",
-    fontWeight: 3
-  }, heading), (0, _react2.jsx)(_index.Button, {
-    variant: "inlinePrimary",
-    ml: "sm"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _PlusIcon["default"],
-    color: "white",
-    size: 13,
-    mr: "4px"
-  }), "\xA0", "Add")), (0, _react2.jsx)(_index.Text, {
-    variant: "bodyWeak"
-  }, description)), (0, _react2.jsx)(_index.Box, {
-    mt: "xl"
-  }, (0, _react2.jsx)(_index.Box, {
-    align: "center",
-    isRow: true,
-    mb: "xs",
-    role: "heading",
-    "aria-level": "1"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "title",
-    fontWeight: 3
-  }, heading), (0, _react2.jsx)(_index.IconButton, {
+    fontSize: "xx",
+    fontWeight: "3",
+    fontColor: "text.primary"
+  }, "Title of the Page"), (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "icon button",
     ml: "sm",
-    mt: "3px",
     variant: "inverted"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
-    color: "white",
-    size: "xs"
+    size: "sm"
   }))), (0, _react2.jsx)(_index.Text, {
-    variant: "bodyWeak"
-  }, description)));
+    fontSize: "sm",
+    color: "text.secondary",
+    fontWeight: "0",
+    width: "800px"
+  }, "The description of the page. The description of the page. The description of the page. The description of the page.The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.\xA0", (0, _react2.jsx)(_index.Link, {
+    href: "https://uilibrary.ping-eng.com/",
+    sx: {
+      fontSize: 'sm'
+    }
+  }, "Learn more")));
 };
 exports.Default = Default;

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

@@ -87,7 +87,7 @@ var Default = function Default() {
       }
     }, "Permissions"), (0, _react2.jsx)(_index.IconButton, {
       onPress: onPress,
-      "aria-label": "close icon button"
+      "aria-label": "close"
     }, (0, _react2.jsx)(_index.Icon, {
       icon: _CloseIcon["default"],
       size: "sm"

package/lib/cjs/styles/themeOverrides/uiLibraryOverride.js

@@ -34,6 +34,17 @@ var buttons = {
   inline: {
     '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].buttons.inline), _theme["default"].buttons.defaultHover)
   },
+  inlinePrimary: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].buttons.inlinePrimary), _theme["default"].buttons.defaultHover)
+  },
+  text: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].buttons.text), _theme["default"].buttons.defaultHover)
+  },
+  inverted: _objectSpread(_objectSpread({}, _theme["default"].buttons.inverted), {}, {
+    ':focus': {
+      border: 'none'
+    }
+  }),
   primary: {
     '&:hover': _objectSpread({}, _theme["default"].buttons.primary)
   },
@@ -79,11 +90,16 @@ var forms = {
     wrapper: {
       '& input[type=search]': _objectSpread(_objectSpread({}, _theme["default"].text.inputValue), {}, {
         borderColor: 'neutral.80',
+        fontSize: '15px',
         bg: 'white',
         '::placeholder': _objectSpread(_objectSpread({}, _theme["default"].text.placeholder), {}, {
-          fontStyle: 'unset'
+          fontStyle: 'unset',
+          fontSize: '15px'
         })
-      })
+      }),
+      '& input[type=search]:focus': {
+        borderColor: 'neutral.80'
+      }
     }
   },
   label: {

package/lib/cjs/styles/themeOverrides/withUiLibraryCss.js

@@ -11,9 +11,10 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
 var _themeUi = require("theme-ui");
+var _theme = _interopRequireDefault(require("../theme"));
 var _uiLibraryOverride = _interopRequireDefault(require("./uiLibraryOverride"));
-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; }
 var UI_LIBRARY_CSS_LINK = 'https://assets.pingone.com/ux/ui-library/5.0.2/css/ui-library.css';
@@ -31,8 +32,9 @@ var WithUiLibraryCss = function WithUiLibraryCss(Story) {
       });
     };
   }, []);
-  return (0, _react2.jsx)(_themeUi.ThemeProvider, {
-    theme: _uiLibraryOverride["default"]
+  var theme = (0, _themeUi.merge)(_theme["default"], _uiLibraryOverride["default"]);
+  return (0, _react2.jsx)(_react2.ThemeProvider, {
+    theme: theme
   }, (0, _react2.jsx)(Story, null));
 };
 var _default = WithUiLibraryCss;

package/lib/cjs/styles/themes/end-user/end-user.js

@@ -107,7 +107,7 @@ var buttonBase = _objectSpread(_objectSpread({}, buttonText), {}, {
   },
   '&.is-focused': _objectSpread({}, buttonFocus)
 });
-var card = {
+var cards = {
   bg: 'cardBg',
   boxShadow: 'overlay',
   boxSizing: 'border-box',
@@ -152,16 +152,17 @@ var wordWrap = {
   wordWrap: 'break-word',
   wordBreak: 'break-word'
 };
-var fieldHelperText = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
-  fontSize: 'sm',
-  pb: 'sm',
-  '&.is-default': {
-    color: 'text.secondary'
-  },
-  '&.is-error': {
-    color: 'critical'
-  }
-});
+var fieldHelperText = {
+  title: _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
+    fontSize: 'sm',
+    '&.is-default': {
+      color: 'text.secondary'
+    },
+    '&.is-error': {
+      color: 'critical.dark'
+    }
+  })
+};
 var text = {
   base: {
     color: 'neutral.20',
@@ -188,8 +189,7 @@ var text = {
     fontSize: 15,
     fontWeight: 500,
     fontFamily: 'proxima-nova, sans-serif'
-  },
-  fieldHelperText: fieldHelperText
+  }
 };
 var activeFloatLabel = {
   fontWeight: 0,
@@ -250,8 +250,9 @@ var _default = {
     input: input,
     label: label
   },
+  cards: cards,
   variants: {
-    card: card
+    fieldHelperText: fieldHelperText
   }
 };
 exports["default"] = _default;

package/lib/components/Bracket/Bracket.stories.js

@@ -56,7 +56,6 @@ export var Default = function Default() {
       isLast: index === anyConditions.length - 1
     }), ___EmotionJSX(Box, {
       mt: "md",
-      ml: "xs",
       variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,

package/lib/components/Button/Button.js

@@ -14,7 +14,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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, useRef } from 'react';
 import { mergeProps, useButton, useFocusRing } from 'react-aria';
-import { Pressable, useHover } from '@react-aria/interactions';
+import { Pressable, useHover, usePress } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { Button as ThemeUIButton } from 'theme-ui';
 import { useAriaLabelWarning, usePropWarning, useStatusClasses } from '../../hooks';
@@ -45,6 +45,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useFocusRing = useFocusRing(),
     isFocusVisible = _useFocusRing.isFocusVisible,
     focusProps = _useFocusRing.focusProps;
+  var _usePress = usePress(buttonRef),
+    isPressedFromContext = _usePress.isPressed;
   var _useButton = useButton(_objectSpread({
       elementType: 'button'
     }, props), buttonRef),
@@ -55,7 +57,7 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     isHovered = _useHover.isHovered;
   var _useStatusClasses = useStatusClasses(className, {
       isHovered: isHovered,
-      isPressed: isPressed,
+      isPressed: isPressed || isPressedFromContext,
       isFocused: isFocusVisible,
       isDisabled: isDisabled
     }),

package/lib/components/CollapsiblePanel/CollapsiblePanel.stories.js

@@ -194,13 +194,17 @@ export var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args)
   }), ___EmotionJSX(Breadcrumbs, {
     icon: ChevronRightIcon
   }, ___EmotionJSX(Item, {
+    "aria-label": "Ed Nepomuceno",
+    "data-id": "home",
+    href: "https://www.pingidentity.com",
     key: "home",
-    variant: "link",
-    "data-id": "home"
+    variant: "buttons.link"
   }, "Ed Nepomuceno"), ___EmotionJSX(Item, {
+    "aria-label": "edit groups",
+    "data-id": "editGroups",
+    href: "https://www.pingidentity.com",
     key: "editGroups",
-    variant: "variants.collapsiblePanel.neutralText",
-    "data-id": "editGroups"
+    variant: "buttons.link"
   }, "Edit Groups"))), ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(IconButton, {

package/lib/components/ComboBox/ComboBoxInput.js

@@ -47,22 +47,19 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     onSelectionChange = props.onSelectionChange,
     wrapperProps = props.wrapperProps,
     others = _objectWithoutProperties(props, _excluded);
-  var _useHover = useHover({}),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
   var textFieldProps = _objectSpread({
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
-    containerProps: _objectSpread(_objectSpread({
-      sx: style,
-      variant: 'forms.comboBox.container'
-    }, hoverProps), containerProps)
+    containerProps: containerProps
   }, mergeProps(inputProps, others));
 
   // istanbul ignore next
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
+  var _useHover = useHover({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
 
   // START - minimum delay time for loading indicator = 500ms
   var _useState = useState(false),
@@ -127,10 +124,14 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     focusClass: "is-focused",
     focusRingClass: "focus-ring",
     autoFocus: hasAutoFocus
-  }, ___EmotionJSX(TextField, _extends({}, textFieldProps, {
-    wrapperProps: _objectSpread({
+  }, ___EmotionJSX(Box, _extends({
+    isRow: true,
+    style: style,
+    variant: "forms.comboBox.container"
+  }, hoverProps, wrapperProps), ___EmotionJSX(TextField, _extends({}, textFieldProps, {
+    wrapperProps: {
       ref: inputWrapperRef
-    }, wrapperProps),
+    },
     controlProps: _objectSpread({
       variant: 'forms.comboBox.input'
     }, controlProps),
@@ -141,7 +142,7 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     slots: {
       inContainer: button
     }
-  })));
+  }))));
 });
 ComboBoxInput.propTypes = _objectSpread({
   containerProps: PropTypes.shape({}),

package/lib/components/DataTable/DataTable.styles.js

@@ -35,12 +35,12 @@ var tableCell = _objectSpread(_objectSpread({}, text.tableData), {}, {
 });
 var tableCellContents = {
   flex: '1 1 0%',
-  minWidth: '0px',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
   fontWeight: '400',
-  justifyContent: 'center'
+  justifyContent: 'center',
+  maxWidth: '100%'
 };
 var tableRow = {
   position: 'relative',

package/lib/components/IconButton/IconButton.js

@@ -14,7 +14,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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, useContext, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useButton, useFocusRing } from 'react-aria';
-import { Pressable, useHover } from '@react-aria/interactions';
+import { Pressable, useHover, usePress } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { IconButton as ThemeUIIconButton } from 'theme-ui';
 import { BadgeContext } from '../../context/BadgeContext';
@@ -47,6 +47,8 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return buttonRef.current;
   });
+  var _usePress = usePress(buttonRef),
+    isPressedFromContext = _usePress.isPressed;
   var _useButton = useButton(_objectSpread({}, props), buttonRef),
     buttonProps = _useButton.buttonProps,
     isPressed = _useButton.isPressed;
@@ -60,7 +62,7 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
     focusProps = _useFocusRing.focusProps;
   var _useStatusClasses = useStatusClasses(className, {
       isHovered: isHovered,
-      isPressed: isPressed,
+      isPressed: isPressed || isPressedFromContext,
       isFocused: isFocusVisible,
       isDisabled: isDisabled
     }),

package/lib/components/ListItem/ListItem.stories.js

@@ -48,7 +48,9 @@ export var Default = function Default(args) {
   }, "Fons Vernall")), ___EmotionJSX(Box, {
     isRow: true,
     alignSelf: "center"
-  }, ___EmotionJSX(IconButton, null, ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "filter"
+  }, ___EmotionJSX(Icon, {
     icon: MoreVertIcon,
     size: "sm",
     color: "neutral.20"
@@ -77,7 +79,9 @@ export var WithSubtitle = function WithSubtitle(args) {
   }, "fvernall0@google.it"))), ___EmotionJSX(Box, {
     isRow: true,
     alignSelf: "center"
-  }, ___EmotionJSX(IconButton, null, ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "filter"
+  }, ___EmotionJSX(Icon, {
     icon: MoreVertIcon,
     size: "sm",
     color: "neutral.20"
@@ -126,7 +130,8 @@ export var WithHoverHandlers = function WithHoverHandlers(args) {
     isRow: true,
     alignSelf: "center"
   }, ___EmotionJSX(IconButton, {
-    size: 26
+    size: 26,
+    "aria-label": "filter"
   }, ___EmotionJSX(Icon, {
     icon: MoreVertIcon,
     size: 20,

package/lib/components/ListViewItem/ListViewItem.styles.js

@@ -17,11 +17,11 @@ var container = {
   justifyContent: 'center',
   bg: 'accent.99',
   outline: 'none',
-  '& li': {
-    bg: 'white'
-  },
   '&.is-selected': {
-    bg: 'white'
+    bg: 'white',
+    '& li': {
+      bg: 'white'
+    }
   },
   '&.is-hovered': {
     bg: 'white',

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -324,7 +324,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       label: item.name,
       slots: item.slots
     }, item.badgeProps), ___EmotionJSX(IconButton, _extends({
-      "aria-label": "delete",
+      "aria-label": "delete ".concat(item.name),
       onPress: function onPress() {
         return deleteItem(item.key);
       },

package/lib/components/NumberField/NumberField.js

@@ -67,14 +67,14 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.numberField.arrows"
   }, ___EmotionJSX(IconButton, _extends({}, incrementButtonProps, {
     ref: decRef,
-    tabIndex: "-1",
+    tabIndex: "0",
     p: 0
   }), ___EmotionJSX(Icon, {
     icon: MenuUp,
     size: 18
   })), ___EmotionJSX(IconButton, _extends({}, decrementButtonProps, {
     ref: incrRef,
-    tabIndex: "-1",
+    tabIndex: "0",
     p: 0
   }), ___EmotionJSX(Icon, {
     icon: MenuDown,

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

@@ -119,14 +119,14 @@ test('should show hintText text if prop is passed', function () {
   fireEvent.mouseEnter(helpHintButton);
   expect(screen.getByText(hintText)).toBeInTheDocument();
 });
-test('increment and decrement buttons shouldn\'t be able to be focused via keyboard', function () {
+test('increment and decrement buttons should be able to be focused via keyboard', function () {
   getComponent();
   userEvent.tab();
   expect(screen.getByLabelText(testLabel)).toHaveFocus();
   userEvent.tab();
-  expect(screen.getByLabelText('arrow-up')).not.toHaveFocus();
+  expect(screen.getByLabelText('arrow-up')).toHaveFocus();
   userEvent.tab();
-  expect(screen.getByLabelText('arrow-down')).not.toHaveFocus();
+  expect(screen.getByLabelText('arrow-down')).toHaveFocus();
 });
 test('number field input receiving name attribute', function () {
   var testName = 'testName';

package/lib/components/OverlayPanel/OverlayPanel.stories.js

@@ -1,14 +1,16 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React, { useRef, useState } from 'react';
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { useCallback, useRef, useState } from 'react';
+import { Item } from 'react-stately';
 import ArrowCollapse from 'mdi-react/ArrowCollapseIcon';
 import ArrowTopRightBottomLeft from 'mdi-react/ArrowTopRightBottomLeftIcon';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
 import CogIcon from 'mdi-react/CogIcon';
 import { useOverlayPanelState } from '../../hooks';
-import { Avatar, Box, Breadcrumbs, Button, ColorField, IconButton, Item, ListView, Messages, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
+import { Avatar, Box, Breadcrumbs, Button, ColorField, IconButton, ListView, Messages, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -280,6 +282,19 @@ export var Expandable = function Expandable() {
   var onCloseHandler = function onCloseHandler() {
     return onClose(state, triggerRef);
   };
+  var _useState5 = useState('#EACE91'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    color = _useState6[0],
+    setColor = _useState6[1];
+  var handleColorChange = useCallback(function (_ref3) {
+    var _context, _context2, _context3;
+    var rgb = _ref3.rgb;
+    var r = rgb.r,
+      b = rgb.b,
+      g = rgb.g,
+      a = rgb.a;
+    setColor(_concatInstanceProperty(_context = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
+  }, []);
   var header = ___EmotionJSX(Box, {
     sx: sx.header
   }, ___EmotionJSX(Box, {
@@ -339,11 +354,12 @@ export var Expandable = function Expandable() {
     label: "Node Description",
     defaultValue: "The Value of the Text Input"
   }), ___EmotionJSX(ColorField, {
-    value: "#EACE91",
+    value: color,
     label: "Node Background Color",
     buttonProps: {
       sx: sx.colorField
-    }
+    },
+    onChange: handleColorChange
   }), ___EmotionJSX(SwitchField, {
     hintText: "Example Hint",
     labelProps: {

package/lib/components/OverlayPanel/OverlayPanel.styles.js

@@ -11,6 +11,7 @@ var container = {
   borderLeft: '1px solid',
   borderLeftColor: 'neutral.80',
   boxShadow: '-2px 0px 2px 1px rgba(37, 55, 70, 0.15)',
+  display: 'none !important',
   p: '25px',
   transition: 'right 500ms',
   maxWidth: '100%',