@pingux/astro 1.42.0 → 2.0.0-alpha.1

package/lib/cjs/components/MultivaluesField/MultivaluesField.stories.js

@@ -40,6 +40,8 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _react2 = require("@emotion/react");
@@ -55,7 +57,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = {
   title: 'Form/MultivaluesField',
   component: _.MultivaluesField,
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     direction: {
       defaultValue: 'bottom'
     },
@@ -102,7 +104,7 @@ var _default = {
         type: 'text'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes),
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes),
   parameters: {
     docs: {
       source: {
@@ -248,11 +250,11 @@ var itemsWithSlots = [{
   name: 'Aardvark',
   key: 'Aardvark',
   chipProps: {
-    variant: 'variants.boxes.itemChipWithSlot',
+    variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'buttons.chipWithSlotDeleteButton'
+    variant: 'chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: (0, _react2.jsx)(_.Icon, {
@@ -265,11 +267,11 @@ var itemsWithSlots = [{
   name: 'Kangaroo',
   key: 'Kangaroo',
   chipProps: {
-    variant: 'variants.boxes.itemChipWithSlot',
+    variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'buttons.chipWithSlotDeleteButton'
+    variant: 'chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: (0, _react2.jsx)(_.Icon, {
@@ -282,11 +284,11 @@ var itemsWithSlots = [{
   name: 'Snake',
   key: 'Snake',
   chipProps: {
-    variant: 'variants.boxes.itemChipWithSlot',
+    variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'buttons.chipWithSlotDeleteButton'
+    variant: 'chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: (0, _react2.jsx)(_.Icon, {

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

@@ -616,13 +616,13 @@ test('default selected keys', function () {
 
   expect(listbox).not.toBeInTheDocument();
 
-  var firstChip = _testWrapper.screen.getByText(items[1].name);
+  var firstBadge = _testWrapper.screen.getByText(items[1].name);
 
-  expect(firstChip).toBeInTheDocument();
+  expect(firstBadge).toBeInTheDocument();
 
-  var secondChip = _testWrapper.screen.getByText(items[2].name);
+  var secondBadge = _testWrapper.screen.getByText(items[2].name);
 
-  expect(secondChip).toBeInTheDocument();
+  expect(secondBadge).toBeInTheDocument();
 });
 test('selected keys', function () {
   getComponent({
@@ -633,13 +633,13 @@ test('selected keys', function () {
 
   expect(listbox).not.toBeInTheDocument();
 
-  var firstChip = _testWrapper.screen.getByText(items[1].name);
+  var firstBadge = _testWrapper.screen.getByText(items[1].name);
 
-  expect(firstChip).toBeInTheDocument();
+  expect(firstBadge).toBeInTheDocument();
 
-  var secondChip = _testWrapper.screen.getByText(items[2].name);
+  var secondBadge = _testWrapper.screen.getByText(items[2].name);
 
-  expect(secondChip).toBeInTheDocument();
+  expect(secondBadge).toBeInTheDocument();
 });
 test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
   var _getComponent, container, results;
@@ -673,16 +673,16 @@ test('read only keys', function () {
 
   expect(listbox).not.toBeInTheDocument();
 
-  var firstChip = _testWrapper.screen.getByText(items[1].name);
+  var firstBadge = _testWrapper.screen.getByText(items[1].name);
 
-  var deleteButton1 = firstChip.nextSibling;
-  expect(firstChip).toBeInTheDocument();
+  var deleteButton1 = firstBadge.nextSibling;
+  expect(firstBadge).toBeInTheDocument();
   expect(deleteButton1).toBeNull();
 
-  var secondChip = _testWrapper.screen.getByText(items[2].name);
+  var secondBadge = _testWrapper.screen.getByText(items[2].name);
 
-  expect(secondChip).toBeInTheDocument();
-  var deleteButton2 = firstChip.nextSibling;
+  expect(secondBadge).toBeInTheDocument();
+  var deleteButton2 = firstBadge.nextSibling;
   expect(deleteButton2).toBeNull();
 });
 test('passing helper text should display it and correct aria attributes on input', function () {

package/lib/cjs/components/NavBar/NavBar.stories.js

@@ -147,7 +147,7 @@ var data = [{
   children: [(0, _react2.jsx)(_index.NavBarItemLink, {
     key: "Dashboard Link Group",
     id: "Dashboard Link Group",
-    variant: "buttons.navItemButton",
+    variant: "variants.navBar.itemButton",
     href: "https://pingidentity.com/"
   }, "Group"), (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Dashboard Link Populations",

package/lib/cjs/{styles/variants/navBar.js → components/NavBar/NavBar.styles.js}

@@ -26,7 +26,11 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _accordion = _interopRequireDefault(require("./accordion"));
+var _AccordionGrid = _interopRequireDefault(require("../AccordionGridGroup/AccordionGrid.styles"));
+
+var _Buttons = require("../Button/Buttons.styles");
+
+var _Text = require("../Text/Text.styles");
 
 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; }
 
@@ -87,16 +91,70 @@ var sectionContainer = {
   }
 };
 
-var sectionBody = _objectSpread(_objectSpread({}, _accordion["default"].accordionGridBody), {}, {
+var sectionBody = _objectSpread(_objectSpread({}, _AccordionGrid["default"].body), {}, {
   pl: '0'
 });
 
-var navItem = {
+var itemButton = {
+  textDecoration: 'none',
+  outline: 'none',
+  cursor: 'pointer',
+  borderRadius: 0,
+  backgroundColor: 'transparent',
+  paddingTop: 'sm',
+  paddingBottom: 'sm',
+  display: 'block',
+  color: 'neutral.90',
+  fontSize: 'md',
+  fontWeight: 0,
+  flexGrow: '1',
+  width: '100%',
+  textAlign: 'left',
+  whiteSpace: 'break-spaces',
+  overflowWrap: 'break-word',
+  maxWidth: '100%',
+  wordWrap: 'break-word',
+  wordBreak: 'break-word',
+  '&.is-focused': {
+    outline: '1px solid',
+    outlineColor: 'focus'
+  },
+  '&.is-hovered': {
+    bg: 'accent.10'
+  },
+  '&.is-selected': {
+    bg: 'accent.5',
+    boxShadow: 'inset 2px 0 0 0 white'
+  },
+  '&.is-pressed': {
+    bg: 'accent.5'
+  }
+};
+var subtitle = {
+  ml: 'md',
+  my: 'sm',
+  fontWeight: 1,
+  fontSize: 'sm',
+  color: 'accent.80',
+  zIndex: '100'
+};
+
+var headerText = _objectSpread(_objectSpread({}, _Text.wordWrap), {}, {
+  whiteSpace: 'break-spaces',
+  lineHeight: 1,
+  fontSize: 'md',
+  fontWeight: 1,
+  maxWidth: '150px',
+  color: 'neutral.95',
+  '.is-selected &': {
+    color: 'white'
+  }
+});
+
+var headerNav = {
   cursor: 'pointer',
   minHeight: '40px',
   lineHeight: '30px',
-  py: 'sm',
-  px: 'md',
   outline: 'none',
   display: 'flex',
   justifyContent: 'flex-start',
@@ -106,26 +164,54 @@ var navItem = {
   color: 'neutral.95',
   flexGrow: 1,
   fontWeight: 0,
+  fontSize: '16px',
   '&.is-focused': {
-    outline: '1px solid',
-    outlineColor: 'focus'
+    outline: 'none',
+    boxShadow: 'focus',
+    WebkitBoxShadow: 'focus',
+    MozBoxShadow: 'focus'
   },
   '&.is-hovered': {
     backgroundColor: 'accent.10'
   },
   '&.is-pressed': {
     backgroundColor: 'accent.5'
-  },
+  }
+};
+
+var item = _objectSpread(_objectSpread({}, headerNav), {}, {
+  py: 'sm',
+  px: 'md',
   '&.is-selected': {
     backgroundColor: 'accent.5',
     boxShadow: 'inset 2px 0 0 0 white'
   }
-};
+});
+
+var sectionButton = _objectSpread(_objectSpread({}, _Buttons.quiet), {}, {
+  width: '100%',
+  '&.is-focused': {
+    outline: '1px solid',
+    outlineColor: 'focus'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.10'
+  },
+  '&.is-pressed': {
+    backgroundColor: 'accent.5'
+  }
+});
+
 var _default = {
   container: container,
   itemHeaderContainer: itemHeaderContainer,
   sectionContainer: sectionContainer,
   sectionBody: sectionBody,
-  navItem: navItem
+  sectionButton: sectionButton,
+  itemButton: itemButton,
+  subtitle: subtitle,
+  headerText: headerText,
+  headerNav: headerNav,
+  item: item
 };
 exports["default"] = _default;

package/lib/cjs/components/NavBarSection/NavBarItem.js

@@ -24,11 +24,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _interactions = require("@react-aria/interactions");
-
-var _utils = require("@react-aria/utils");
+var _reactAria = require("react-aria");
 
-var _focus = require("@react-aria/focus");
+var _interactions = require("@react-aria/interactions");
 
 var _index = require("../../index");
 
@@ -62,12 +60,12 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       hoverProps = _useHover.hoverProps,
       isHovered = _useHover.isHovered;
 
-  var _useFocusRing = (0, _focus.useFocusRing)({
+  var _useFocusRing = (0, _reactAria.useFocusRing)({
     within: true
   }),
       focusWithinProps = _useFocusRing.focusProps;
 
-  var _useFocusRing2 = (0, _focus.useFocusRing)(),
+  var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
       focusProps = _useFocusRing2.focusProps,
       isFocusVisible = _useFocusRing2.isFocusVisible;
 
@@ -87,7 +85,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       pressProps = _usePress.pressProps,
       isPressed = _usePress.isPressed;
 
-  var mergedProps = (0, _utils.mergeProps)(pressProps, hoverProps, focusWithinProps, focusProps, others);
+  var mergedProps = (0, _reactAria.mergeProps)(pressProps, hoverProps, focusWithinProps, focusProps, others);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isPressed: isPressed,
@@ -100,7 +98,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var color = isSelected ? 'white' : 'neutral.95';
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     id: key,
-    variant: "navBar.navItem",
+    variant: "navBar.item",
     isRow: true,
     tabIndex: 0,
     className: classNames,
@@ -124,7 +122,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       fill: color
     }
   }), (0, _react2.jsx)(_index.Text, {
-    variant: "navBarHeaderText"
+    variant: "variants.navBar.headerText"
   }, text)));
 });
 NavBarItem.propTypes = {

package/lib/cjs/components/NavBarSection/NavBarItemBody.js

@@ -52,7 +52,7 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
       key: "text".concat(subTitle),
       ml: "45px",
       mt: hasSeparator ? '0' : undefined,
-      variant: "text.navBarSubtitle"
+      variant: "variants.navBar.subtitle"
     }, subTitle));
   };
 

package/lib/cjs/components/NavBarSection/NavBarItemButton.js

@@ -70,7 +70,7 @@ var NavBarItemButton = function NavBarItemButton(props) {
 
   return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     id: key,
-    variant: "navItemButton",
+    variant: "variants.navBar.itemButton",
     onPress: onNavPress,
     className: classNames,
     color: isSelected ? 'white' : undefined

package/lib/cjs/components/NavBarSection/NavBarItemHeader.js

@@ -88,7 +88,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     },
     "aria-hidden": "true"
   }), (0, _react2.jsx)(_index.Text, {
-    variant: "navBarHeaderText"
+    variant: "variants.navBar.headerText"
   }, heading), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",

package/lib/cjs/components/NavBarSection/NavBarItemLink.js

@@ -69,7 +69,7 @@ var NavBarItemLink = function NavBarItemLink(props) {
 
   return (0, _react2.jsx)(_index.Link, (0, _extends2["default"])({
     id: key,
-    variant: "buttons.navItemButton",
+    variant: "variants.navBar.itemButton",
     className: classNames,
     onPress: onNavPress,
     color: isSelected ? 'white' : undefined

package/lib/cjs/components/NavBarSection/NavBarSection.js

@@ -70,7 +70,7 @@ var NavBarSection = function NavBarSection(_ref) {
   return (0, _react2.jsx)(_react["default"].Fragment, null, hasSeparator && (0, _react2.jsx)(_.Separator, {
     variant: "separator.navBarSeparator"
   }), title && (0, _react2.jsx)(_.Text, {
-    variant: "text.navBarSubtitle",
+    variant: "variants.navBar.subtitle",
     mt: hasSeparator ? '0' : undefined
   }, title), (0, _react2.jsx)("ul", (0, _extends2["default"])({
     ref: ref,
@@ -170,7 +170,7 @@ var SectionItem = function SectionItem(_ref2) {
 
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
     ref: headerButtonRef,
-    variant: "navBarSectionButton",
+    variant: "variants.navBar.sectionButton",
     onPress: function onPress() {
       return onExpandedChange(!isExpanded);
     }

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

@@ -38,21 +38,19 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _omit = _interopRequireDefault(require("lodash/omit"));
 
-var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
 
-var _numberfield = require("@react-aria/numberfield");
-
-var _numberfield2 = require("@react-stately/numberfield");
+var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
 
-var _i18n = require("@react-aria/i18n");
+var _reactAria = require("react-aria");
 
-var _utils = require("@react-aria/utils");
+var _reactStately = require("react-stately");
 
-var _omit = _interopRequireDefault(require("lodash/omit"));
+var _i18n = require("@react-aria/i18n");
 
 var _uuid = require("uuid");
 
@@ -60,6 +58,8 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _hooks = require("../../hooks");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -89,7 +89,7 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useLocale = (0, _i18n.useLocale)(),
       locale = _useLocale.locale;
 
-  var state = (0, _numberfield2.useNumberFieldState)(_objectSpread(_objectSpread({}, props), {}, {
+  var state = (0, _reactStately.useNumberFieldState)(_objectSpread(_objectSpread({}, props), {}, {
     locale: locale
   }));
 
@@ -99,7 +99,7 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var decRef = _react["default"].useRef();
 
-  var _useNumberField = (0, _numberfield.useNumberField)(props, state, inputRef),
+  var _useNumberField = (0, _reactAria.useNumberField)(props, state, inputRef),
       labelProps = _useNumberField.labelProps,
       groupProps = _useNumberField.groupProps,
       inputProps = _useNumberField.inputProps,
@@ -108,7 +108,8 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var _useField = (0, _hooks.useField)(props),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
@@ -118,7 +119,7 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return inputRef.current;
   });
   var ControlArrows = (0, _react2.jsx)(_.Box, {
-    variant: "numberField.arrows"
+    variant: "forms.numberField.arrows"
   }, (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({}, incrementButtonProps, {
     ref: decRef,
     tabIndex: "-1",
@@ -138,20 +139,20 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var onInputFocus = (0, _react.useCallback)(function (e) {
     e.persist();
-    fieldControlProps.onFocus(e);
+    fieldControlInputProps.onFocus(e);
     inputProps.onFocus(e);
-  }, [fieldControlProps, inputProps]);
+  }, [fieldControlInputProps, inputProps]);
   var onInputBlur = (0, _react.useCallback)(function (e) {
     e.persist();
-    fieldControlProps.onBlur(e);
+    fieldControlInputProps.onBlur(e);
     inputProps.onBlur(e);
-  }, [fieldControlProps, inputProps]);
-  var updatedFieldControlProps = (0, _react.useMemo)(function () {
-    return _objectSpread(_objectSpread({}, fieldControlProps), {}, {
+  }, [fieldControlInputProps, inputProps]);
+  var updatedFieldControlInputProps = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, fieldControlInputProps), {}, {
       onFocus: onInputFocus,
       onBlur: onInputBlur
     });
-  }, [fieldControlProps, onInputBlur, onInputFocus]);
+  }, [fieldControlInputProps, onInputBlur, onInputFocus]);
 
   var onInputChange = function onInputChange(e) {
     var _context;
@@ -179,18 +180,19 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
 
   inputProps['aria-roledescription'] = null;
-  var helperTextId = (0, _uuid.v4)();
-  return (0, _react2.jsx)(_.Box, fieldContainerProps, (0, _react2.jsx)(_.Label, (0, _utils.mergeProps)(fieldLabelProps, labelProps)), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    variant: "numberField.noDefaultArrows"
-  }, groupProps), (0, _react2.jsx)(_.Box, {
-    variant: "numberField.arrowsWrapper",
-    className: fieldControlProps.className
-  }, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
+  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"])({
+    variant: "forms.numberField.noDefaultArrows"
+  }, groupProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    variant: "forms.numberField.arrowsWrapper"
+  }, fieldControlWrapperProps), (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.
 
-  }, updatedFieldControlProps, (0, _omit["default"])(inputProps, ['name', 'onFocus', 'onBlur']), {
+  }, updatedFieldControlInputProps, (0, _omit["default"])(inputProps, ['name', 'onFocus', 'onBlur']), {
     onChange: onInputChange,
     "aria-describedby": helperText && helperTextId,
     role: "textbox"
@@ -201,7 +203,7 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 });
 var _default = NumberField;
 exports["default"] = _default;
-NumberField.propTypes = _objectSpread({
+NumberField.propTypes = _objectSpread(_objectSpread({
   /** A custom aria-label for the decrement button.
    * If not provided, the localized string "Decrement" is used. */
   decrementAriaLabel: _propTypes["default"].string,
@@ -286,4 +288,4 @@ NumberField.propTypes = _objectSpread({
 
   /** The current value (controlled). */
   value: _propTypes["default"].number
-}, _ariaAttributes.ariaAttributesBasePropTypes);
+}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);

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

@@ -36,6 +36,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _NumberField = _interopRequireDefault(require("./NumberField"));
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -60,7 +62,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -133,7 +135,7 @@ var _default = {
         type: 'none'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 

package/lib/cjs/{styles/variants/numberField.js → components/NumberField/NumberField.styles.js}

@@ -26,7 +26,11 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _input = require("../forms/input");
+var _Input = require("../Input/Input.styles");
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _objectSpread2;
 
 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; }
 
@@ -44,11 +48,17 @@ var noDefaultArrows = {
   }
 };
 
-var arrowsWrapper = _objectSpread({
+var arrowsWrapper = _objectSpread(_objectSpread({
   display: 'flex',
   justifyContent: 'center',
   position: 'relative'
-}, _input.input.container);
+}, _Input.input.fieldControlWrapper), {}, (_objectSpread2 = {}, (0, _defineProperty2["default"])(_objectSpread2, "&.is-".concat(_statuses["default"].ERROR, "::after"), {
+  bg: 'critical.bright'
+}), (0, _defineProperty2["default"])(_objectSpread2, "&.is-".concat(_statuses["default"].SUCCESS, "::after"), {
+  bg: 'success.bright'
+}), (0, _defineProperty2["default"])(_objectSpread2, "&.is-".concat(_statuses["default"].WARNING, "::after"), {
+  bg: 'warning.bright'
+}), _objectSpread2));
 
 var arrows = {
   position: 'absolute',

package/lib/cjs/components/OverlayPanel/OverlayPanel.js

@@ -28,7 +28,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _focus = require("@react-aria/focus");
+var _reactAria = require("react-aria");
 
 var _ = require("../../");
 
@@ -86,16 +86,16 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   };
 
-  return (0, _react2.jsx)(_focus.FocusScope, {
+  return (0, _react2.jsx)(_reactAria.FocusScope, {
     autoFocus: true
   }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    variant: "overlayPanel.overlayPanel",
+    variant: "overlayPanel.container",
     ref: overlayPanelRef
   }, others, {
     className: classNames,
     onKeyUp: handleClose
   }), (0, _react2.jsx)(_.Box, {
-    variant: "overlayPanel.overlayPanelBody",
+    variant: "overlayPanel.body",
     className: classNames
   }, children)));
 });