@pingux/astro 2.185.0-alpha.0 → 2.187.0-alpha.0

package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -39,7 +39,8 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     state = _useAccordionGridCont.state;
   var cellRef = (0, _react.useRef)();
   var _useGetTheme = (0, _hooks.useGetTheme)(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
 
@@ -110,13 +111,16 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     sx: {
       mr: '0px'
     }
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_Icon["default"], (0, _extends2["default"])({
     color: "text.primary",
-    icon: isSelected ? upArrow : downArrow,
+    icon: isSelected ? upArrow : downArrow
+  }, isOnyx && {
+    size: 'sm'
+  }, {
     title: {
       name: isSelected ? 'Menu Up Icon' : 'Menu Down Icon'
     }
-  }))));
+  })))));
 });
 AccordionGridItemHeader.defaultProps = {
   hasCaret: true

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

@@ -222,21 +222,23 @@ var BadgeWithLeftSlotAndIcon = exports.BadgeWithLeftSlotAndIcon = function Badge
 };
 var StatusBadgeVariants = exports.StatusBadgeVariants = function StatusBadgeVariants(_ref6) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref6), _ref6));
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_index.Box, {
+    gap: "md"
+  }, (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({}, args, {
     variant: "criticalStatusBadge",
-    label: "Critical",
-    mb: "lg"
+    label: "Critical"
   })), (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({}, args, {
     variant: "warningStatusBadge",
-    label: "Warning",
-    mb: "lg"
+    label: "Warning"
   })), (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({}, args, {
     variant: "healthyStatusBadge",
-    label: "Healthy",
-    mb: "lg"
+    label: "Healthy"
   })), (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({}, args, {
     variant: "activeStatusBadge",
     label: "Active"
+  })), (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({}, args, {
+    variant: "selected",
+    label: "Selected"
   })));
 };
 StatusBadgeVariants.parameters = {

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

@@ -542,6 +542,35 @@ declare const _default: {
             };
         };
     };
+    selected: {
+        backgroundColor: string;
+        '& span': {
+            fontWeight: number;
+            color: string;
+        };
+        cursor: string;
+        p: string;
+        alignItems: string;
+        justifyContent: string;
+        minWidth: string;
+        alignSelf: string;
+        display: string;
+        borderRadius: string;
+        fontWeight: number;
+        '& button': {
+            backgroundColor: string;
+            marginLeft: string;
+            marginTop: string;
+            padding: string;
+            '&.is-hovered': {
+                backgroundColor: string;
+            };
+            '& .mdi-icon': {
+                marginLeft: string;
+                padding: string;
+            };
+        };
+    };
     selectedItemBadge: {
         bg: string;
         py: number;

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

@@ -159,6 +159,7 @@ var convenienceDefault = _objectSpread(_objectSpread({}, baseBadge), {}, {
     color: 'white'
   }
 });
+var selected = convenienceDefault;
 var calloutBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#FFF !important',
   border: 'solid 1px',
@@ -272,6 +273,7 @@ var _default = exports["default"] = {
   itemBadgeWithSlot: itemBadgeWithSlot,
   multivaluesBadge: multivaluesBadge,
   readOnlyBadge: readOnlyBadge,
+  selected: selected,
   selectedItemBadge: selectedItemBadge,
   invertedBadgeDeleteButton: invertedBadgeDeleteButton,
   successCalloutBadge: successCalloutBadge,

package/lib/cjs/components/ColorField/ColorFieldPreviewButton.js

@@ -24,7 +24,8 @@ var ColorFieldPreviewButton = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     colorValue = props.colorValue,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useGetTheme = (0, _hooks.useGetTheme)(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuUp = icons.MenuUp,
     MenuDown = icons.MenuDown;
   var buttonRef = (0, _hooks.useLocalOrForwardRef)(ref);
@@ -52,12 +53,14 @@ var ColorFieldPreviewButton = /*#__PURE__*/(0, _react.forwardRef)(function (prop
       ml: 'auto'
     },
     flexGrow: "1"
-  }, (0, _react2.jsx)(_index.Icon, {
+  }, (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
     ml: "auto",
     title: {
       name: isOpen ? 'menu-up' : 'menu-down'
     },
     icon: isOpen ? MenuUp : MenuDown
-  }))));
+  }, isOnyx && {
+    size: 'sm'
+  })))));
 });
 var _default = exports["default"] = ColorFieldPreviewButton;

package/lib/cjs/components/ComboBox/ComboBoxInput.js

@@ -61,7 +61,8 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     containerProps: containerProps
   }, (0, _reactAria.mergeProps)(inputProps, others));
   var _useGetTheme = (0, _useGetTheme2["default"])(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown;
 
   // istanbul ignore next
@@ -82,9 +83,11 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "forms.comboBox.inputInContainerSlot"
   },
   // Render loader after delay if filtering or loading
-  isLoading && (isOpen || menuTrigger === 'manual' || loadingState === _loadingStates["default"].LOADING) && (0, _react2.jsx)(_.Loader, {
+  isLoading && (isOpen || menuTrigger === 'manual' || loadingState === _loadingStates["default"].LOADING) && (0, _react2.jsx)(_.Loader, (0, _extends2["default"])({
     variant: "loader.withinInput"
-  }), (0, _react2.jsx)(_interactions.PressResponder, {
+  }, isOnyx && {
+    size: 'sm'
+  })), (0, _react2.jsx)(_interactions.PressResponder, {
     preventFocusOnPress: true,
     isPressed: isOpen
   }, (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
@@ -95,7 +98,7 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     tabIndex: -1
   }), (0, _react2.jsx)(_.Icon, {
     icon: MenuDown,
-    size: "md",
+    size: isOnyx ? 'sm' : 'md',
     sx: isOpen ? {
       transform: 'rotate(180deg)'
     } : null,

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

@@ -142,7 +142,6 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: isSelected ? CheckedIcon : UncheckedIcon,
     color: "active",
-    size: "24px",
     mr: "xs",
     className: classNames,
     variant: "listBox.checkboxIcon"
@@ -156,7 +155,8 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     title: {
       name: 'Check Icon'
     },
-    color: "green-500"
+    color: "green-500",
+    size: isOnyx ? 'xsm' : 'md'
   }));
 });
 Option.defaultProps = {

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

@@ -33,7 +33,8 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
     isFocusable = props.isFocusable,
     className = props.className;
   var _useGetTheme = (0, _useGetTheme2["default"])(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
   var _useContext = (0, _react.useContext)(_ListViewContext.ListViewContext),
@@ -75,7 +76,7 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
       alignItems: 'center',
       width: '100%'
     }
-  }, item.rendered && item.rendered[0], (0, _react2.jsx)(_index.Icon, {
+  }, item.rendered && item.rendered[0], (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
     sx: {
       ml: 'auto'
     },
@@ -84,7 +85,9 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
     title: {
       name: "".concat(key, " expand icon button")
     }
-  }))), (0, _react2.jsx)(_index.Box, expandableItemState.gridCellProps, isExpanded && (0, _react2.jsx)(_ListViewFocusWrapper["default"], {
+  }, isOnyx && {
+    size: 'sm'
+  })))), (0, _react2.jsx)(_index.Box, expandableItemState.gridCellProps, isExpanded && (0, _react2.jsx)(_ListViewFocusWrapper["default"], {
     isFocusEscaped: isFocusEscaped,
     containerProps: expandableContainerProps
   }, item.rendered && item.rendered[1])));

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

@@ -33,7 +33,7 @@ var withinInput = {
 var withinListbox = {
   color: 'active',
   fontSize: '6px',
-  padding: 'md',
+  padding: 'sm',
   alignItems: 'center',
   justifyContent: 'center'
 };

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

@@ -106,7 +106,8 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
   var inputRef = (0, _react.useRef)();
   var buttonRef = (0, _react.useRef)();
   var _useGetTheme = (0, _hooks.useGetTheme)(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
   var _useFocusWithin = (0, _interactions.useFocusWithin)({
@@ -393,12 +394,15 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     sx: {
       border: 'none'
     }
-  }, (0, _react2.jsx)(_.Icon, {
-    icon: isOpen ? MenuUp : MenuDown,
+  }, (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
+    icon: isOpen ? MenuUp : MenuDown
+  }, isOnyx && {
+    size: 'sm'
+  }, {
     title: {
       name: isOpen ? 'Menu Up Icon' : 'Menu Down Icon'
     }
-  })));
+  }))));
   return (0, _react2.jsx)(_MultivaluesContext.MultivaluesContext.Provider, {
     value: setActiveDescendant
   }, (0, _react2.jsx)(_.Box, (0, _reactAria.mergeProps)(containerProps, focusWithinProps), (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({

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

@@ -41,7 +41,8 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
   var navBarState = (0, _NavBarContext.useNavBarContext)();
   var _useGetTheme = (0, _useGetTheme3["default"])(),
     icons = _useGetTheme.icons,
-    navBarIconSize = _useGetTheme.navBarIconSize;
+    navBarIconSize = _useGetTheme.navBarIconSize,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
   var selectedKey = navBarState.selectedKey,
@@ -97,7 +98,7 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     }
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isExpanded ? MenuUp : MenuDown,
-    size: "xsm",
+    size: isOnyx ? 'sm' : 'xsm',
     sx: {
       color: getIconColor(),
       fill: getIconColor()

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

@@ -41,6 +41,8 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     status = props.status;
   var _useLocale = (0, _i18n.useLocale)(),
     locale = _useLocale.locale;
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var state = (0, _reactStately.useNumberFieldState)(_objectSpread(_objectSpread({}, props), {}, {
     locale: locale
   }));
@@ -71,7 +73,7 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     p: 0
   }), (0, _react2.jsx)(_.Icon, {
     icon: _MenuUpIcon["default"],
-    size: 18,
+    size: isOnyx ? 'sm' : 18,
     title: {
       name: 'Menu Up Icon'
     }
@@ -81,7 +83,7 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     p: 0
   }), (0, _react2.jsx)(_.Icon, {
     icon: _MenuDownIcon["default"],
-    size: 18,
+    size: isOnyx ? 'sm' : 18,
     title: {
       name: 'Menu Down Icon'
     }

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js

@@ -69,7 +69,8 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = (0, _useGetTheme2["default"])(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
   var helperTextId = (0, _react.useMemo)(function () {
@@ -90,7 +91,7 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     title: {
       name: 'Menu down'
     },
-    size: "md"
+    size: isOnyx ? 'sm' : 'md'
   }));
   var clearButton = hasClearButton && state.selectedKey && (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
     tabIndex: 0,

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/badges.d.ts

@@ -1,54 +1,86 @@
 declare const badges: {
     baseBadge: {
-        color: string;
+        '& span': {
+            color: string;
+        };
     };
     primary: {
         backgroundColor: string;
-        color: string;
+        '& span': {
+            color: string;
+        };
     };
     secondary: {
         backgroundColor: string;
-        color: any;
+        '& span': {
+            color: any;
+        };
     };
     success: {
         backgroundColor: string;
-        color: string;
+        '& span': {
+            color: string;
+        };
     };
     danger: {
         backgroundColor: string;
-        color: string;
+        '& span': {
+            color: string;
+        };
     };
     warning: {
         backgroundColor: string;
-        color: string;
+        '& span': {
+            color: string;
+        };
     };
     info: {
         backgroundColor: string;
-        color: any;
+        '& span': {
+            color: any;
+        };
     };
     dark: {
         backgroundColor: string;
-        color: any;
+        '& span': {
+            color: any;
+        };
     };
     activeStatusBadge: {
         backgroundColor: string;
-        color: string;
+        '& span': {
+            color: string;
+        };
+    };
+    selected: {
+        backgroundColor: string;
+        '& span': {
+            color: string;
+        };
     };
     warningStatusBadge: {
         backgroundColor: string;
-        color: string;
+        '& span': {
+            color: string;
+        };
     };
     criticalStatusBadge: {
         backgroundColor: string;
-        color: string;
+        '& span': {
+            color: string;
+        };
     };
     healthyStatusBadge: {
         backgroundColor: string;
-        color: string;
+        '& span': {
+            color: string;
+        };
     };
     secondaryStatusBadge: {
         backgroundColor: string;
-        color: any;
+        '& span': {
+            color: any;
+        };
     };
     countBadge: {
         backgroundColor: string;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/badges.js

@@ -18,35 +18,51 @@ var _onyxTokens = require("@pingux/onyx-tokens");
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var baseBadge = {
-  color: 'badge.textColor'
+  '& span': {
+    color: 'badge.textColor'
+  }
 };
 var primary = {
   backgroundColor: '#1a73e8 !important',
-  color: 'black'
+  '& span': {
+    color: 'black'
+  }
 };
 var secondary = {
   backgroundColor: '#324054 !important',
-  color: _onyxTokens.astroTokensDark.color.gray[100]
+  '& span': {
+    color: _onyxTokens.astroTokensDark.color.gray[100]
+  }
 };
 var success = {
   backgroundColor: '#22a75f !important',
-  color: 'black'
+  '& span': {
+    color: 'black'
+  }
 };
 var danger = {
   backgroundColor: '#da3a2b !important',
-  color: 'black'
+  '& span': {
+    color: 'black'
+  }
 };
 var warning = {
   backgroundColor: '#ffb946 !important',
-  color: 'black'
+  '& span': {
+    color: 'black'
+  }
 };
 var info = {
   backgroundColor: '#324054 !important',
-  color: _onyxTokens.astroTokensDark.color.gray[100]
+  '& span': {
+    color: _onyxTokens.astroTokensDark.color.gray[100]
+  }
 };
 var dark = {
   backgroundColor: '#c0c9d5 !important',
-  color: _onyxTokens.astroTokensDark.color.gray[100]
+  '& span': {
+    color: _onyxTokens.astroTokensDark.color.gray[100]
+  }
 };
 var activeStatusBadge = _objectSpread({}, primary);
 var warningStatusBadge = _objectSpread({}, warning);
@@ -104,6 +120,7 @@ var badges = {
   info: info,
   dark: dark,
   activeStatusBadge: activeStatusBadge,
+  selected: activeStatusBadge,
   warningStatusBadge: warningStatusBadge,
   criticalStatusBadge: criticalStatusBadge,
   healthyStatusBadge: healthyStatusBadge,

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/comboBox.d.ts

@@ -0,0 +1,9 @@
+declare const comboBox: {
+    input: {
+        bg: string;
+        '&.is-disabled, &.is-read-only': {
+            bg: string;
+        };
+    };
+};
+export default comboBox;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/comboBox.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _colors = require("../colors");
+var comboBox = {
+  input: {
+    bg: 'gray[900]',
+    '&.is-disabled, &.is-read-only': {
+      bg: "".concat(_colors.colors.disabled, " !important")
+    }
+  }
+};
+var _default = exports["default"] = comboBox;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/forms.d.ts

@@ -85,5 +85,13 @@ declare const _default: {
             };
         };
     };
+    comboBox: {
+        input: {
+            bg: string;
+            '&.is-disabled, &.is-read-only': {
+                bg: string;
+            };
+        };
+    };
 };
 export default _default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/forms.js

@@ -15,6 +15,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports.select = exports.radio = exports["default"] = exports.checkbox = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _onyxTokens = require("@pingux/onyx-tokens");
+var _comboBox = _interopRequireDefault(require("./comboBox"));
 var _input = require("./input");
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -88,5 +89,6 @@ var _default = exports["default"] = {
   select: _objectSpread(_objectSpread({}, select), {}, {
     option: _objectSpread({}, selectOption)
   }),
-  "switch": switchable
+  "switch": switchable,
+  comboBox: _comboBox["default"]
 };

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

@@ -23,7 +23,7 @@ var listBox = {
   container: {
     backgroundColor: 'backgroundBase',
     border: '1px solid',
-    borderColor: 'transparent',
+    borderColor: 'border.attachment',
     borderRadius: '4px'
   },
   option: {