@pingux/astro 2.123.0 → 2.124.0-alpha.0

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

@@ -156,10 +156,18 @@ declare const _default: {
             backgroundColor: string;
             borderColor: string;
             color: string;
+            path: {
+                fill: string;
+            };
         };
         '&.is-hovered': {
+            boxShadow: string;
             backgroundColor: string;
+            borderColor: string;
             color: string;
+            path: {
+                fill: string;
+            };
         };
         alignItems: string;
         justifyContent: string;
@@ -199,7 +207,14 @@ declare const _default: {
             borderColor: string;
         };
         '&.is-hovered': {
+            boxShadow: string;
+            backgroundColor: string;
+            borderColor: string;
+        };
+        '&.is-focused': {
             backgroundColor: string;
+            borderColor: string;
+            outline: string;
         };
         alignItems: string;
         justifyContent: string;
@@ -222,11 +237,6 @@ declare const _default: {
         '&.is-disabled': {
             opacity: number;
         };
-        '&.is-focused': {
-            outline: string;
-            outlineColor: string;
-            outlineOffset: string;
-        };
         transition: string;
     };
     navBarLogoLink: {

package/lib/components/MultivaluesField/DefaultMultivaluesField.js

@@ -12,7 +12,7 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["items"],
   _excluded2 = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isNotFlippable", "isReadOnly", "isRequired", "label", "loadingState", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onLoadMore", "onLoadPrev", "onOpenChange", "onSelectionChange", "placeholder", "readOnlyKeys", "selectedKeys", "scrollBoxProps", "status"];
 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 _context11, _context12; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context11 = ownKeys(Object(source), !0)).call(_context11, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context12 = ownKeys(Object(source))).call(_context12, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context13, _context14; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context13 = ownKeys(Object(source), !0)).call(_context13, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context14 = ownKeys(Object(source))).call(_context14, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -42,7 +42,7 @@ import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusP
 import ListBox from '../ListBox';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context8, _listBoxRef$current2;
+  var _context10, _listBoxRef$current2;
   var initialItems = props.items,
     otherProps = _objectWithoutProperties(props, _excluded);
   var defaultSelectedKeys = otherProps.defaultSelectedKeys,
@@ -195,17 +195,33 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     minWidth: menuWidth
   });
   useEffect(function () {
-    if (defaultSelectedKeys) selectionManager.setSelectedKeys(defaultSelectedKeys);
+    if (defaultSelectedKeys) {
+      selectionManager.setSelectedKeys(defaultSelectedKeys);
+      setItems(function (prevItems) {
+        return _filterInstanceProperty(prevItems).call(prevItems, function (item) {
+          var _context3;
+          return !_includesInstanceProperty(_context3 = _Array$from(defaultSelectedKeys)).call(_context3, item.key);
+        });
+      });
+    }
   }, []);
   useEffect(function () {
-    if (selectedKeys) selectionManager.setSelectedKeys(selectedKeys);
+    if (selectedKeys) {
+      selectionManager.setSelectedKeys(selectedKeys);
+      setItems(function (prevItems) {
+        return _filterInstanceProperty(prevItems).call(prevItems, function (item) {
+          var _context4;
+          return !_includesInstanceProperty(_context4 = _Array$from(selectedKeys)).call(_context4, item.key);
+        });
+      });
+    }
   }, []);
   useEffect(function () {
     if (onOpenChange) onOpenChange(isOpen);
     if (!isOpen) setActiveDescendant('');
   }, [isOpen]);
   var addNewBadgeFromInput = function addNewBadgeFromInput(inputValue) {
-    var _context3, _context4;
+    var _context5, _context6;
     var key = _trimInstanceProperty(inputValue).call(inputValue);
     if (key === '') {
       return;
@@ -213,8 +229,8 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     if (state.selectionManager.isSelected(key)) {
       return;
     }
-    selectionManager.setSelectedKeys(_concatInstanceProperty(_context3 = []).call(_context3, _Array$from(selectionManager.state.selectedKeys), [key]));
-    setCustomItems(_concatInstanceProperty(_context4 = []).call(_context4, customItems, [{
+    selectionManager.setSelectedKeys(_concatInstanceProperty(_context5 = []).call(_context5, _Array$from(selectionManager.state.selectedKeys), [key]));
+    setCustomItems(_concatInstanceProperty(_context6 = []).call(_context6, customItems, [{
       id: key,
       key: key,
       name: key
@@ -292,8 +308,8 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     if (onKeyDown) onKeyDown(e.nativeEvent);
   };
   var deleteItem = function deleteItem(key, e) {
-    var _context5;
-    var activeBadgesKeys = _reduceInstanceProperty(_context5 = closeBadgeRefs.current).call(_context5, function (result, item) {
+    var _context7;
+    var activeBadgesKeys = _reduceInstanceProperty(_context7 = closeBadgeRefs.current).call(_context7, function (result, item) {
       if (item) {
         result.push(item.dataset.item);
       }
@@ -328,8 +344,8 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     }, name);
   };
   var readOnlyInputEntry = isReadOnly && (readOnlyKeys.length ? _mapInstanceProperty(readOnlyKeys).call(readOnlyKeys, function (key) {
-    var _context6, _context7;
-    var item = _findInstanceProperty(_context6 = _concatInstanceProperty(_context7 = []).call(_context7, initialItems, customItems)).call(_context6, function (el) {
+    var _context8, _context9;
+    var item = _findInstanceProperty(_context8 = _concatInstanceProperty(_context9 = []).call(_context9, initialItems, customItems)).call(_context8, function (el) {
       return el.key === key;
     });
     if (item) {
@@ -393,9 +409,9 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }))));
   };
-  var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context8 = _Array$from(selectionManager.selectedKeys)).call(_context8, function (key, i) {
-    var _context9, _context10;
-    var item = _findInstanceProperty(_context9 = _concatInstanceProperty(_context10 = []).call(_context10, initialItems, customItems)).call(_context9, function (el) {
+  var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context10 = _Array$from(selectionManager.selectedKeys)).call(_context10, function (key, i) {
+    var _context11, _context12;
+    var item = _findInstanceProperty(_context11 = _concatInstanceProperty(_context12 = []).call(_context12, initialItems, customItems)).call(_context11, function (el) {
       return el.key === key;
     });
     if (item) {

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

@@ -675,6 +675,20 @@ test('default selected keys', function () {
   var secondBadge = screen.getByText(items[2].name);
   expect(secondBadge).toBeInTheDocument();
 });
+test('default selected keys are removed from the list', function () {
+  getComponent({
+    defaultSelectedKeys: [items[1].key, items[2].key]
+  });
+  var input = screen.getByRole('combobox');
+  userEvent.click(input);
+  var listbox = screen.queryByRole('listbox');
+  userEvent.type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+  var options = within(listbox).getAllByRole('option');
+  expect(options.length).toBe(1);
+  expect(within(options[0]).getByText(items[0].key)).toBeInTheDocument();
+});
 test('selected keys', function () {
   getComponent({
     selectedKeys: [items[1].key, items[2].key]
@@ -686,6 +700,20 @@ test('selected keys', function () {
   var secondBadge = screen.getByText(items[2].name);
   expect(secondBadge).toBeInTheDocument();
 });
+test('selected keys are removed from the list', function () {
+  getComponent({
+    selectedKeys: [items[1].key, items[2].key]
+  });
+  var input = screen.getByRole('combobox');
+  userEvent.click(input);
+  var listbox = screen.queryByRole('listbox');
+  userEvent.type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+  var options = within(listbox).getAllByRole('option');
+  expect(options.length).toBe(1);
+  expect(within(options[0]).getByText(items[0].key)).toBeInTheDocument();
+});
 test('read only keys', function () {
   getComponent({
     readOnlyKeys: [items[1].key, items[2].key]

package/lib/styles/themeOverrides/nextGenDarkMode/variants/buttons.js

@@ -81,13 +81,156 @@ var buttons = {
       color: 'black'
     }
   },
-  "default": {
+  inline: {
+    color: 'blue-400',
+    borderColor: 'blue-400',
+    '&.is-hovered': {
+      backgroundColor: 'active_hover',
+      color: 'black',
+      borderColor: 'blue'
+    },
+    '&.is-pressed': {
+      color: 'black',
+      borderColor: 'blue'
+    }
+  },
+  inlinePrimary: {
+    color: 'black',
+    '&.is-hovered': {
+      color: 'black'
+    },
+    '&.is-pressed': {
+      color: 'black'
+    }
+  },
+  withIcon: {
+    color: 'blue-400',
     borderColor: 'blue-400',
+    '&.is-hovered': {
+      backgroundColor: 'active_hover',
+      borderColor: 'blue',
+      color: 'black',
+      path: {
+        fill: 'black'
+      }
+    },
+    '&.is-pressed': {
+      color: 'black',
+      borderColor: 'blue',
+      path: {
+        fill: 'black'
+      }
+    }
+  },
+  primaryWithIcon: {
+    color: 'black',
+    path: {
+      fill: 'black'
+    },
+    '&.is-hovered': {
+      color: 'black',
+      path: {
+        fill: 'black'
+      }
+    },
+    '&.is-pressed': {
+      color: 'black',
+      path: {
+        fill: 'black'
+      }
+    }
+  },
+  inlineWithIcon: {
     color: 'blue-400',
+    borderColor: 'blue-400',
+    '&.is-hovered': {
+      color: 'black',
+      backgroundColor: 'active_hover',
+      borderColor: 'blue',
+      path: {
+        fill: 'black'
+      }
+    },
     '&.is-pressed': {
+      color: 'black',
+      borderColor: 'blue',
+      path: {
+        fill: 'black'
+      }
+    }
+  },
+  inlinePrimaryWithIcon: {
+    color: 'black',
+    path: {
+      fill: 'black'
+    },
+    '&.is-hovered': {
+      color: 'black',
+      path: {
+        fill: 'black'
+      }
+    },
+    '&.is-pressed': {
+      color: 'black',
+      path: {
+        fill: 'black'
+      }
+    }
+  },
+  colorBlock: {
+    bg: 'gray-200',
+    borderColor: 'gray-200',
+    path: {
+      fill: 'black'
+    },
+    '& span': {
+      color: 'black'
+    },
+    '&.is-hovered': {
+      bg: 'blue-100',
+      borderColor: 'blue-100'
+    },
+    '&.is-pressed': {
+      bg: 'blue-100',
+      borderColor: 'blue-100'
+    },
+    '&>svg': {
+      color: 'black',
+      fill: 'black'
+    }
+  },
+  colorBlockPrimary: {
+    path: {
+      fill: 'black'
+    },
+    '& span': {
       color: 'black'
     },
     '&.is-hovered': {
+      path: {
+        fill: 'black'
+      }
+    },
+    '&.is-pressed': {
+      path: {
+        fill: 'black'
+      }
+    },
+    '&>svg': {
+      color: 'black',
+      fill: 'black'
+    }
+  },
+  "default": {
+    color: 'blue-400',
+    borderColor: 'blue-400',
+    '&.is-pressed': {
+      color: 'black',
+      borderColor: 'blue'
+    },
+    '&.is-hovered': {
+      backgroundColor: 'active_hover',
+      borderColor: 'blue',
       color: 'black'
     }
   },

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

@@ -2,7 +2,6 @@ var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'Ic
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],
-  Button: ['Color Block Button', 'Text Icon Button'],
   Messages: ['Customization'],
   MultivaluesField: ['Condensed', 'Condensed With Section'],
   PasswordField: ['Success'],

package/lib/styles/themes/next-gen/tokens/colorTokens.js

@@ -124,10 +124,14 @@ export var nextGenColors = {
     'label': '#5e6d82'
   },
   'active': '#1a73e8',
+  'active_hover': '#1462C8',
+  'active_pressed': '#135CBC',
   'active_light': '#eaf2fd',
   'success': '#22a75f',
   'success_light': '#d3eddf',
   'critical': '#da3a2b',
+  'critical_hover': '#BE2F21',
+  'critical_pressed': '#B32C1F',
   'critical_light': '#f8d8d5',
   'warning': '#984c0c',
   'warning_light': '#ffe5d0'

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

@@ -13,14 +13,20 @@ import chroma from 'chroma-js';
 import { copyButton } from '../codeView/codeView';
 import colors from '../colors/colors';
 var primaryBlue = colors.primary,
-  criticalRed = colors.critical;
+  primaryBlueHover = colors.active_hover,
+  primaryBluePress = colors.active_pressed,
+  criticalRedHover = colors.critical_hover,
+  criticalRedPress = colors.critical_pressed;
 var transitions = {
   transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out'
 };
+var boxShadowNone = {
+  boxShadow: 'none !important'
+};
 export var defaultFocus = {
   outline: '2px solid',
   outlineColor: 'active',
-  outlineOffset: '3px'
+  outlineOffset: '2px'
 };
 var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   alignItems: 'center',
@@ -46,7 +52,8 @@ var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   '&.is-disabled': {
     opacity: 0.65
   },
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': boxShadowNone
 });
 var neutral = _objectSpread(_objectSpread(_objectSpread({
   color: 'gray-600'
@@ -63,11 +70,17 @@ var primary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'primary',
   borderColor: 'primary',
   '&.is-pressed': {
-    backgroundColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
-    borderColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+    backgroundColor: primaryBluePress,
+    borderColor: primaryBluePress
   },
-  '&.is-hovered': {
-    backgroundColor: chroma.mix(primaryBlue, 'black', 0.075, 'rgb').hex()
+  '&.is-hovered': _objectSpread({
+    backgroundColor: primaryBlueHover,
+    borderColor: primaryBlueHover
+  }, boxShadowNone),
+  '&.is-focused': {
+    backgroundColor: primaryBluePress,
+    borderColor: primaryBluePress,
+    outline: '2px solid'
   }
 });
 var secondary = _objectSpread(_objectSpread({}, buttonBase), {}, {
@@ -75,19 +88,27 @@ var secondary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   borderColor: 'primary',
   color: 'primary',
   '&.is-pressed': {
-    backgroundColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
-    borderColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
-    color: 'white'
+    backgroundColor: primaryBluePress,
+    borderColor: primaryBluePress,
+    color: 'white',
+    path: {
+      fill: 'white'
+    }
   },
-  '&.is-hovered': {
-    backgroundColor: chroma.mix(primaryBlue, 'black', 0.075, 'rgb').hex(),
-    color: 'white'
-  }
+  '&.is-hovered': _objectSpread({
+    backgroundColor: primaryBlue,
+    borderColor: primaryBlue,
+    color: 'white',
+    path: {
+      fill: 'white'
+    }
+  }, boxShadowNone)
 });
 var tertiary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'transparent',
   borderColor: 'border.base',
-  color: 'text.secondary'
+  color: 'text.secondary',
+  '&.is-hovered': _objectSpread({}, boxShadowNone)
 });
 var outlineCritical = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'transparent',
@@ -105,19 +126,74 @@ var inverse = _objectSpread(_objectSpread({}, buttonBase), {}, {
 });
 var critical = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'critical.bright',
-  borderColor: 'critical',
+  borderColor: 'critical.bright',
   color: 'white',
   '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
     outlineColor: 'critical.bright',
     backgroundColor: 'critical.dark'
   }),
   '&.is-pressed': {
-    backgroundColor: chroma.mix(criticalRed.bright, 'black', 0.125, 'rgb').hex(),
-    borderColor: chroma.mix(criticalRed.bright, 'black', 0.125, 'rgb').hex()
+    backgroundColor: criticalRedPress,
+    borderColor: criticalRedPress
   },
-  '&.is-hovered': {
-    backgroundColor: chroma.mix(criticalRed.bright, 'black', 0.075, 'rgb').hex(),
+  '&.is-hovered': _objectSpread({
+    backgroundColor: criticalRedHover,
+    borderColor: criticalRedHover,
+    color: 'white'
+  }, boxShadowNone)
+});
+var inline = _objectSpread(_objectSpread({}, buttonBase), {}, {
+  display: 'inline-flex',
+  height: '29px',
+  lineHeight: 1,
+  fontSize: 'sm',
+  borderRadius: '15px',
+  border: '1px solid',
+  alignSelf: 'center',
+  paddingTop: '0px',
+  paddingBottom: '0px',
+  backgroundColor: 'transparent',
+  color: primaryBlue,
+  borderColor: primaryBlue,
+  '&.is-pressed': {
+    backgroundColor: primaryBluePress,
+    borderColor: primaryBluePress,
     color: 'white'
+  },
+  '&.is-hovered': _objectSpread({
+    backgroundColor: primaryBlue,
+    borderColor: primaryBlue,
+    color: 'white',
+    path: {
+      fill: 'white'
+    }
+  }, boxShadowNone)
+});
+var inlinePrimary = _objectSpread(_objectSpread({}, buttonBase), {}, {
+  display: 'inline-flex',
+  height: '29px',
+  lineHeight: 1,
+  fontSize: 'sm',
+  borderRadius: '15px',
+  border: '1px solid',
+  alignSelf: 'center',
+  paddingTop: '0px',
+  paddingBottom: '0px',
+  backgroundColor: 'primary',
+  color: 'white',
+  borderColor: 'primary',
+  '&.is-pressed': {
+    backgroundColor: primaryBluePress,
+    borderColor: primaryBluePress
+  },
+  '&.is-hovered': _objectSpread({
+    backgroundColor: primaryBlueHover,
+    borderColor: primaryBlueHover
+  }, boxShadowNone),
+  '&.is-focused': {
+    backgroundColor: primaryBluePress,
+    borderColor: primaryBluePress,
+    outline: '2px solid'
   }
 });
 var checkboxButton = _objectSpread(_objectSpread({}, buttonBase), {}, {
@@ -152,12 +228,68 @@ var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
   color: 'text.primary'
 });
 var withIcon = _objectSpread(_objectSpread({}, secondary), {}, {
-  display: 'inline-flex'
+  display: 'inline-flex',
+  path: {
+    fill: primaryBlue
+  }
 });
 var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
   display: 'inline-flex',
   color: 'white'
 });
+var inlineWithIcon = _objectSpread(_objectSpread({}, inline), {}, {
+  display: 'inline-flex',
+  path: {
+    fill: primaryBlue
+  }
+});
+var inlinePrimaryWithIcon = _objectSpread(_objectSpread({}, inlinePrimary), {}, {
+  display: 'inline-flex',
+  color: 'white'
+});
+var colorBlock = {
+  bg: 'gray-200',
+  borderColor: 'gray-200',
+  borderRadius: '1.75rem',
+  width: 150,
+  height: 50,
+  p: '5px 15px 5px 20px',
+  '&.is-hovered': _objectSpread({
+    bg: 'blue-100',
+    borderColor: 'blue-100'
+  }, boxShadowNone),
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'blue-100',
+    borderColor: 'blue-100'
+  },
+  '&>svg': {
+    color: 'text.primary',
+    fill: 'text.primary'
+  }
+};
+var colorBlockPrimary = _objectSpread(_objectSpread({}, colorBlock), {}, {
+  bg: primaryBlue,
+  borderColor: primaryBlue,
+  '& span': {
+    color: 'white',
+    textAlign: 'left'
+  },
+  '&.is-hovered': _objectSpread({
+    backgroundColor: primaryBlueHover,
+    borderColor: primaryBlueHover,
+    color: 'white'
+  }, boxShadowNone),
+  '&.is-pressed': {
+    backgroundColor: primaryBluePress,
+    borderColor: primaryBluePress
+  },
+  '&.is-focused': {
+    backgroundColor: primaryBluePress,
+    borderColor: primaryBluePress,
+    outline: '2px solid'
+  }
+});
 var aiChat = _objectSpread(_objectSpread({}, withIcon), {}, {
   maxWidth: 'fit-content',
   gap: 'sm',
@@ -325,12 +457,11 @@ var iconButtons = {
       backgroundColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
       borderColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex()
     },
-    '&.is-hovered': {
+    '&.is-hovered': _objectSpread(_objectSpread({}, boxShadowNone), {}, {
       border: 'none !important',
-      boxShadow: 'none !important',
       borderColor: 'none !important',
       backgroundColor: chroma.mix(primaryBlue, 'black', 0.075, 'rgb').hex()
-    },
+    }),
     '&.is-disabled': {
       backgroundColor: 'gray-300'
     }
@@ -354,12 +485,18 @@ var buttons = {
   tertiary: tertiary,
   inverse: inverse,
   critical: critical,
+  inline: inline,
+  inlinePrimary: inlinePrimary,
   checkboxButton: checkboxButton,
   checkboxActiveButton: checkboxActiveButton,
   outlineCritical: outlineCritical,
   link: link,
   withIcon: withIcon,
   primaryWithIcon: primaryWithIcon,
+  inlineWithIcon: inlineWithIcon,
+  inlinePrimaryWithIcon: inlinePrimaryWithIcon,
+  colorBlock: colorBlock,
+  colorBlockPrimary: colorBlockPrimary,
   iconButtons: iconButtons,
   modalCloseButton: modalCloseButton,
   aiChat: aiChat,

package/package.json

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