@pingux/astro 2.90.0 → 2.91.0-alpha.1

package/lib/cjs/components/ListBox/Option.js

@@ -91,7 +91,8 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isDisabled = _useOption.isDisabled,
     isSelected = _useOption.isSelected,
     isFocused = _useOption.isFocused,
-    isFocusVisible = _useOption.isFocusVisible;
+    isFocusVisible = _useOption.isFocusVisible,
+    isPressed = _useOption.isPressed;
   var focused = isFocused || (state === null || state === void 0 || (_state$selectionManag = state.selectionManager) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.focusedKey) === item.key;
   var setFocusOnHover = function setFocusOnHover() {
     if (!focused && !isCondensed) {
@@ -103,7 +104,8 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isFocused: focused,
       isSelected: isSelected,
       isCondensed: isCondensed,
-      isFocusVisible: isFocusVisible
+      isFocusVisible: isFocusVisible,
+      isPressed: isPressed
     }),
     classNames = _useStatusClasses.classNames;
   var updateActiveDescendant = (0, _MultivaluesContext.useMultivaluesContext)();

package/lib/cjs/components/ListView/ListViewItem.js

@@ -75,7 +75,8 @@ var ListViewItem = function ListViewItem(props) {
       isVirtualized: true
     }, state, rowRef),
     raRowProps = _useGridListItem.rowProps,
-    gridCellProps = _useGridListItem.gridCellProps;
+    gridCellProps = _useGridListItem.gridCellProps,
+    isPressed = _useGridListItem.isPressed;
   var isSelected = state.selectionManager.isSelected(item.key);
   var mergedProps = (0, _reactAria.mergeProps)(raRowProps, hoverProps, isFocusable ? _objectSpread(_objectSpread({}, focusProps), focusWithinProps) : {}, {
     onPointerLeave: onPointerLeaveFunction
@@ -85,7 +86,8 @@ var ListViewItem = function ListViewItem(props) {
       isSelected: isSelected,
       isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
       hasSeparator: hasSeparator,
-      hasInsetSeparator: hasInsetSeparator
+      hasInsetSeparator: hasInsetSeparator,
+      isPressed: isPressed
     }),
     classNames = _useStatusClasses.classNames;
 

package/lib/cjs/components/Modal/Modal.js

@@ -122,7 +122,8 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }), title), children))));
 });
 Modal.defaultProps = {
-  role: 'dialog'
+  role: 'dialog',
+  size: 'small'
 };
 Modal.displayName = 'Modal';
 var _default = Modal;

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

@@ -130,5 +130,13 @@ Default.parameters = {
   design: {
     type: 'figma',
     url: _figmaLinks.FIGMA_LINKS.modal["default"]
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'aria-hidden-focus',
+        enabled: false
+      }]
+    }
   }
 };

package/lib/cjs/components/Modal/Modal.styles.d.ts

@@ -30,7 +30,6 @@ declare const _default: {
         pr: string;
         pb: string;
         pl: string;
-        maxWidth: string;
         boxShadow: string;
         borderRadius: number;
         '&.is-extra-small': {

package/lib/cjs/components/Modal/Modal.styles.js

@@ -41,7 +41,6 @@ var content = {
   pr: 'lg',
   pb: 'lg',
   pl: 'lg',
-  maxWidth: '400px',
   boxShadow: 'standard',
   borderRadius: 3,
   '&.is-extra-small': {

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

@@ -31,19 +31,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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) { (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 MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var component = (0, _react.useMemo)(function () {
-    switch (props.mode) {
-      case 'condensed':
-        return (0, _react2.jsx)(_CondensedMultivaluesField["default"], (0, _extends2["default"])({
-          ref: ref
-        }, props));
-      default:
-        return (0, _react2.jsx)(_DefaultMultivaluesField["default"], (0, _extends2["default"])({
-          ref: ref
-        }, props));
-    }
-  }, [props.mode]);
-  return component;
+  var Component = props.mode === 'condensed' ? _CondensedMultivaluesField["default"] : _DefaultMultivaluesField["default"];
+  return (0, _react2.jsx)(Component, (0, _extends2["default"])({
+    ref: ref
+  }, props));
 });
 MultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** The initial selected keys in the collection (uncontrolled). */

package/lib/cjs/styles/themes/next-gen/convertedComponentList.js

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nextGenComponents = exports["default"] = void 0;
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'CodeView'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'ComboBoxField', 'CodeView'];
 var nextGenComponents = ['NavigationHeader'];
 exports.nextGenComponents = nextGenComponents;
 var _default = nextGenConvertedComponents;

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -1668,6 +1668,9 @@ declare const _default: {
                 top: string;
                 transform: string;
                 transition: string;
+                m: string[];
+                overflow: string;
+                maxHeight: string;
                 '&.is-open-no-transition': {
                     opacity: string;
                     transform: string;
@@ -1676,6 +1679,26 @@ declare const _default: {
                     opacity: string;
                     transform: string;
                 };
+                '&.is-extra-small': {
+                    width: string;
+                    maxWidth: string[];
+                };
+                '&.is-small': {
+                    width: string;
+                    maxWidth: string[];
+                };
+                '&.is-medium': {
+                    width: string;
+                    maxWidth: string[];
+                };
+                '&.is-large': {
+                    width: string;
+                    maxWidth: string[];
+                };
+                '&.is-full': {
+                    width: string;
+                    maxWidth: string[];
+                };
             };
             container: {
                 justifyContent: string;
@@ -1727,6 +1750,10 @@ declare const _default: {
                         color: string;
                     };
                 };
+                '&.is-pressed': {
+                    color: string;
+                    bg: string;
+                };
             };
         };
         separator: {
@@ -1828,6 +1855,9 @@ declare const _default: {
                     boxShadow: string;
                     bg: string;
                 };
+                '&.is-pressed': {
+                    bg: string;
+                };
             };
             styledContainer: {
                 py: string;
@@ -2031,6 +2061,11 @@ declare const _default: {
             p: string;
             border: string;
             borderColor: string;
+            item: {
+                '&.is-pressed': {
+                    bg: string;
+                };
+            };
         };
     };
     images: {

package/lib/cjs/styles/themes/next-gen/variants/input.js

@@ -120,7 +120,7 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
   pl: 12,
   borderRadius: '4px',
   alignItems: 'center',
-  height: '50px',
+  minHeight: '50px',
   '> input': {
     border: 'none',
     flex: 1,

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -371,6 +371,9 @@ declare const _default: {
             top: string;
             transform: string;
             transition: string;
+            m: string[];
+            overflow: string;
+            maxHeight: string;
             '&.is-open-no-transition': {
                 opacity: string;
                 transform: string;
@@ -379,6 +382,26 @@ declare const _default: {
                 opacity: string;
                 transform: string;
             };
+            '&.is-extra-small': {
+                width: string;
+                maxWidth: string[];
+            };
+            '&.is-small': {
+                width: string;
+                maxWidth: string[];
+            };
+            '&.is-medium': {
+                width: string;
+                maxWidth: string[];
+            };
+            '&.is-large': {
+                width: string;
+                maxWidth: string[];
+            };
+            '&.is-full': {
+                width: string;
+                maxWidth: string[];
+            };
         };
         container: {
             justifyContent: string;
@@ -430,6 +453,10 @@ declare const _default: {
                     color: string;
                 };
             };
+            '&.is-pressed': {
+                color: string;
+                bg: string;
+            };
         };
     };
     separator: {
@@ -531,6 +558,9 @@ declare const _default: {
                 boxShadow: string;
                 bg: string;
             };
+            '&.is-pressed': {
+                bg: string;
+            };
         };
         styledContainer: {
             py: string;
@@ -734,6 +764,11 @@ declare const _default: {
         p: string;
         border: string;
         borderColor: string;
+        item: {
+            '&.is-pressed': {
+                bg: string;
+            };
+        };
     };
 };
 export default _default;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -159,14 +159,24 @@ var badges = {
   badgeDeleteButton: badgeDeleteButton
 };
 exports.badges = badges;
+var modalSize = {
+  xs: ['100%', '300px', '300px', '300px', '300px', '300px'],
+  sm: ['100%', '500px', '500px', '500px', '500px', '500px'],
+  md: ['100%', '500px', '500px', '500px', '800px', '800px'],
+  lg: ['100%', '500px', '500px', '500px', '800px', '1140px'],
+  full: ['100%', '100%', '100%', '100%', '100%', '100%']
+};
 var modal = {
   content: {
     pt: '15px',
     borderRadius: '4px',
     opacity: 0,
-    top: '15px',
+    top: '0',
     transform: 'translate(0, -50px)',
     transition: 'opacity 300ms ease, transform 500ms ease-out',
+    m: ['sm', 'sm', '1.75rem auto'],
+    overflow: 'hidden',
+    maxHeight: 'calc(100vh - 3.5rem)',
     '&.is-open-no-transition': {
       opacity: '100%',
       transform: 'none'
@@ -174,6 +184,26 @@ var modal = {
     '&.is-open.is-transitioning': {
       opacity: '100%',
       transform: 'none'
+    },
+    '&.is-extra-small': {
+      width: '100%',
+      maxWidth: modalSize.xs
+    },
+    '&.is-small': {
+      width: '100%',
+      maxWidth: modalSize.sm
+    },
+    '&.is-medium': {
+      width: '100%',
+      maxWidth: modalSize.md
+    },
+    '&.is-large': {
+      width: '100%',
+      maxWidth: modalSize.lg
+    },
+    '&.is-full': {
+      width: '100%',
+      maxWidth: modalSize.full
     }
   },
   container: {
@@ -225,6 +255,10 @@ var listBox = {
       '&.is-focused': {
         color: 'text.primary'
       }
+    },
+    '&.is-pressed': {
+      color: 'text.primary',
+      bg: 'lightblue'
     }
   }
 };
@@ -338,6 +372,9 @@ var listViewItem = {
     '&.is-focused': {
       boxShadow: '0 0 0 3px inset #1a73e8',
       bg: 'gray-100'
+    },
+    '&.is-pressed': {
+      bg: 'gray-200'
     }
   },
   styledContainer: {
@@ -383,7 +420,7 @@ var navBar = {
       backgroundColor: 'light'
     },
     '&.is-pressed': {
-      backgroundColor: 'gray-200'
+      backgroundColor: 'light'
     },
     '&.is-focused': _objectSpread({}, navBarFocus)
   },
@@ -394,7 +431,7 @@ var navBar = {
       backgroundColor: 'light'
     },
     '&.is-pressed': {
-      backgroundColor: 'gray-200',
+      backgroundColor: 'light',
       color: 'text.primary'
     },
     '&.is-selected': {
@@ -528,7 +565,12 @@ var tabs = {
 var menu = {
   p: 'sm',
   border: '1px solid',
-  borderColor: 'gray-300'
+  borderColor: 'gray-300',
+  item: {
+    '&.is-pressed': {
+      bg: 'blue-100'
+    }
+  }
 };
 var _default = {
   navBar: navBar,

package/lib/components/ListBox/Option.js

@@ -80,7 +80,8 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
     isDisabled = _useOption.isDisabled,
     isSelected = _useOption.isSelected,
     isFocused = _useOption.isFocused,
-    isFocusVisible = _useOption.isFocusVisible;
+    isFocusVisible = _useOption.isFocusVisible,
+    isPressed = _useOption.isPressed;
   var focused = isFocused || (state === null || state === void 0 || (_state$selectionManag = state.selectionManager) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.focusedKey) === item.key;
   var setFocusOnHover = function setFocusOnHover() {
     if (!focused && !isCondensed) {
@@ -92,7 +93,8 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
       isFocused: focused,
       isSelected: isSelected,
       isCondensed: isCondensed,
-      isFocusVisible: isFocusVisible
+      isFocusVisible: isFocusVisible,
+      isPressed: isPressed
     }),
     classNames = _useStatusClasses.classNames;
   var updateActiveDescendant = useMultivaluesContext();

package/lib/components/ListView/ListViewItem.js

@@ -63,7 +63,8 @@ var ListViewItem = function ListViewItem(props) {
       isVirtualized: true
     }, state, rowRef),
     raRowProps = _useGridListItem.rowProps,
-    gridCellProps = _useGridListItem.gridCellProps;
+    gridCellProps = _useGridListItem.gridCellProps,
+    isPressed = _useGridListItem.isPressed;
   var isSelected = state.selectionManager.isSelected(item.key);
   var mergedProps = mergeProps(raRowProps, hoverProps, isFocusable ? _objectSpread(_objectSpread({}, focusProps), focusWithinProps) : {}, {
     onPointerLeave: onPointerLeaveFunction
@@ -73,7 +74,8 @@ var ListViewItem = function ListViewItem(props) {
       isSelected: isSelected,
       isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
       hasSeparator: hasSeparator,
-      hasInsetSeparator: hasInsetSeparator
+      hasInsetSeparator: hasInsetSeparator,
+      isPressed: isPressed
     }),
     classNames = _useStatusClasses.classNames;
 

package/lib/components/Modal/Modal.js

@@ -111,7 +111,8 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   }), title), children))));
 });
 Modal.defaultProps = {
-  role: 'dialog'
+  role: 'dialog',
+  size: 'small'
 };
 Modal.displayName = 'Modal';
 export default Modal;

package/lib/components/Modal/Modal.stories.js

@@ -120,5 +120,13 @@ Default.parameters = {
   design: {
     type: 'figma',
     url: FIGMA_LINKS.modal["default"]
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'aria-hidden-focus',
+        enabled: false
+      }]
+    }
   }
 };

package/lib/components/Modal/Modal.styles.js

@@ -34,7 +34,6 @@ var content = {
   pr: 'lg',
   pb: 'lg',
   pl: 'lg',
-  maxWidth: '400px',
   boxShadow: 'standard',
   borderRadius: 3,
   '&.is-extra-small': {

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -10,7 +10,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 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, { forwardRef, useMemo } from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
@@ -20,19 +20,10 @@ import CondensedMultivaluesField from './CondensedMultivaluesField';
 import DefaultMultivaluesField from './DefaultMultivaluesField';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var component = useMemo(function () {
-    switch (props.mode) {
-      case 'condensed':
-        return ___EmotionJSX(CondensedMultivaluesField, _extends({
-          ref: ref
-        }, props));
-      default:
-        return ___EmotionJSX(DefaultMultivaluesField, _extends({
-          ref: ref
-        }, props));
-    }
-  }, [props.mode]);
-  return component;
+  var Component = props.mode === 'condensed' ? CondensedMultivaluesField : DefaultMultivaluesField;
+  return ___EmotionJSX(Component, _extends({
+    ref: ref
+  }, props));
 });
 MultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** The initial selected keys in the collection (uncontrolled). */

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,3 +1,3 @@
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'CodeView'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'ComboBoxField', 'CodeView'];
 export var nextGenComponents = ['NavigationHeader'];
 export default nextGenConvertedComponents;

package/lib/styles/themes/next-gen/variants/input.js

@@ -111,7 +111,7 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
   pl: 12,
   borderRadius: '4px',
   alignItems: 'center',
-  height: '50px',
+  minHeight: '50px',
   '> input': {
     border: 'none',
     flex: 1,

package/lib/styles/themes/next-gen/variants/variants.js

@@ -150,14 +150,24 @@ export var badges = {
   },
   badgeDeleteButton: badgeDeleteButton
 };
+var modalSize = {
+  xs: ['100%', '300px', '300px', '300px', '300px', '300px'],
+  sm: ['100%', '500px', '500px', '500px', '500px', '500px'],
+  md: ['100%', '500px', '500px', '500px', '800px', '800px'],
+  lg: ['100%', '500px', '500px', '500px', '800px', '1140px'],
+  full: ['100%', '100%', '100%', '100%', '100%', '100%']
+};
 var modal = {
   content: {
     pt: '15px',
     borderRadius: '4px',
     opacity: 0,
-    top: '15px',
+    top: '0',
     transform: 'translate(0, -50px)',
     transition: 'opacity 300ms ease, transform 500ms ease-out',
+    m: ['sm', 'sm', '1.75rem auto'],
+    overflow: 'hidden',
+    maxHeight: 'calc(100vh - 3.5rem)',
     '&.is-open-no-transition': {
       opacity: '100%',
       transform: 'none'
@@ -165,6 +175,26 @@ var modal = {
     '&.is-open.is-transitioning': {
       opacity: '100%',
       transform: 'none'
+    },
+    '&.is-extra-small': {
+      width: '100%',
+      maxWidth: modalSize.xs
+    },
+    '&.is-small': {
+      width: '100%',
+      maxWidth: modalSize.sm
+    },
+    '&.is-medium': {
+      width: '100%',
+      maxWidth: modalSize.md
+    },
+    '&.is-large': {
+      width: '100%',
+      maxWidth: modalSize.lg
+    },
+    '&.is-full': {
+      width: '100%',
+      maxWidth: modalSize.full
     }
   },
   container: {
@@ -216,6 +246,10 @@ var listBox = {
       '&.is-focused': {
         color: 'text.primary'
       }
+    },
+    '&.is-pressed': {
+      color: 'text.primary',
+      bg: 'lightblue'
     }
   }
 };
@@ -329,6 +363,9 @@ var listViewItem = {
     '&.is-focused': {
       boxShadow: '0 0 0 3px inset #1a73e8',
       bg: 'gray-100'
+    },
+    '&.is-pressed': {
+      bg: 'gray-200'
     }
   },
   styledContainer: {
@@ -374,7 +411,7 @@ var navBar = {
       backgroundColor: 'light'
     },
     '&.is-pressed': {
-      backgroundColor: 'gray-200'
+      backgroundColor: 'light'
     },
     '&.is-focused': _objectSpread({}, navBarFocus)
   },
@@ -385,7 +422,7 @@ var navBar = {
       backgroundColor: 'light'
     },
     '&.is-pressed': {
-      backgroundColor: 'gray-200',
+      backgroundColor: 'light',
       color: 'text.primary'
     },
     '&.is-selected': {
@@ -519,7 +556,12 @@ var tabs = {
 var menu = {
   p: 'sm',
   border: '1px solid',
-  borderColor: 'gray-300'
+  borderColor: 'gray-300',
+  item: {
+    '&.is-pressed': {
+      bg: 'blue-100'
+    }
+  }
 };
 export default {
   navBar: navBar,

package/package.json

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