@pingux/astro 2.185.0-alpha.0 → 2.186.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/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/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: {

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

@@ -2881,6 +2881,7 @@ declare const _default: {
         xs: string;
         tiny: string;
         sm: string;
+        small: string;
         md: string;
         lg: string;
         xl: string;
@@ -5420,7 +5421,9 @@ declare const _default: {
                 lineHeight: string;
                 textTransform: string;
                 letterSpacing: string;
+                pl: string;
                 ml: string;
+                py: string;
             };
         };
         listView: {
@@ -5974,6 +5977,8 @@ declare const _default: {
         };
         popoverMenu: {
             container: {
+                minWidth: string;
+                boxShadow: string;
                 transition: string;
                 '&.animate': {
                     opacity: number;
@@ -6001,6 +6006,7 @@ declare const _default: {
             };
             arrow: {
                 color: string;
+                fontSize: string;
                 '&:before': {
                     content: string;
                     position: string;
@@ -6253,6 +6259,7 @@ declare const _default: {
         separator: {
             base: {
                 bg: string;
+                my: string;
                 '&.is-vertical': {
                     m: string;
                 };

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

@@ -8,6 +8,7 @@ export declare const fontSizes: {
     xs: string;
     tiny: string;
     sm: string;
+    small: string;
     md: string;
     lg: string;
     xl: string;

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

@@ -21,6 +21,7 @@ var fontSizes = exports.fontSizes = {
   'xs': '11px',
   'tiny': "".concat(fontSize.tiny, "px"),
   'sm': "".concat(fontSize.small || fontSize.sm, "px"),
+  'small': "".concat(fontSize.small, "px"),
   'md': "".concat(fontSizeBase * 1, "rem"),
   'lg': "".concat(fontSizeBase * 1.25, "rem"),
   'xl': "".concat(fontSizeBase * 1.5, "rem"),

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

@@ -10,6 +10,8 @@ var fontSizes = _onyxTokens.astroTokens["default"]['font-size'];
 var label = exports.label = {
   color: 'text.primary',
   fontSize: fontSizes.label,
+  mb: 'sm',
+  fontWeight: 'body',
   '&.is-float-label': {
     fontSize: fontSizes.label,
     fontWeight: 1,

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

@@ -1,5 +1,7 @@
 declare const _default: {
     container: {
+        minWidth: string;
+        boxShadow: string;
         transition: string;
         '&.animate': {
             opacity: number;
@@ -27,6 +29,7 @@ declare const _default: {
     };
     arrow: {
         color: string;
+        fontSize: string;
         '&:before': {
             content: string;
             position: string;

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

@@ -7,6 +7,8 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _onyxTokens = require("@pingux/onyx-tokens");
 var container = {
+  minWidth: '150px',
+  boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.176)',
   transition: 'opacity 200ms ease',
   '&.animate': {
     opacity: 0
@@ -34,6 +36,7 @@ var container = {
 };
 var arrow = {
   color: 'white',
+  fontSize: 'sm',
   '&:before': {
     content: '""',
     position: 'absolute',

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

@@ -841,7 +841,9 @@ declare const _default: {
             lineHeight: string;
             textTransform: string;
             letterSpacing: string;
+            pl: string;
             ml: string;
+            py: string;
         };
     };
     listView: {
@@ -1395,6 +1397,8 @@ declare const _default: {
     };
     popoverMenu: {
         container: {
+            minWidth: string;
+            boxShadow: string;
             transition: string;
             '&.animate': {
                 opacity: number;
@@ -1422,6 +1426,7 @@ declare const _default: {
         };
         arrow: {
             color: string;
+            fontSize: string;
             '&:before': {
                 content: string;
                 position: string;
@@ -1674,6 +1679,7 @@ declare const _default: {
     separator: {
         base: {
             bg: string;
+            my: string;
             '&.is-vertical': {
                 m: string;
             };

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

@@ -51,7 +51,7 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 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 fieldHelperText = {
   title: {
-    fontSize: 'sm',
+    fontSize: 'small',
     pt: '0px !important',
     mt: '.25rem',
     '&.is-default': {
@@ -174,7 +174,7 @@ var listBox = {
       zIndex: 1
     },
     '&.is-selected': {
-      color: 'text.primary',
+      color: 'black',
       bg: 'lightblue',
       pl: '.75rem',
       borderRadius: '4px',
@@ -204,17 +204,20 @@ var listBox = {
   },
   sectionTitle: {
     color: 'font.light',
-    fontWeight: '1',
+    fontWeight: '0',
     fontSize: 'tiny',
     lineHeight: 'xs',
     textTransform: 'uppercase',
     letterSpacing: '1px',
-    ml: 'md'
+    pl: 'xs',
+    ml: 'sm',
+    py: 'sm'
   }
 };
 var separator = {
   base: {
     bg: 'border.base',
+    my: 'sm',
     '&.is-vertical': {
       m: '0'
     }

package/lib/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -27,7 +27,8 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     state = _useAccordionGridCont.state;
   var cellRef = useRef();
   var _useGetTheme = useGetTheme(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
 
@@ -98,13 +99,16 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: {
       mr: '0px'
     }
-  }, ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(Icon, _extends({
     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/components/ColorField/ColorFieldPreviewButton.js

@@ -12,7 +12,8 @@ var ColorFieldPreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     colorValue = props.colorValue,
     others = _objectWithoutProperties(props, _excluded);
   var _useGetTheme = useGetTheme(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuUp = icons.MenuUp,
     MenuDown = icons.MenuDown;
   var buttonRef = useLocalOrForwardRef(ref);
@@ -40,12 +41,14 @@ var ColorFieldPreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
       ml: 'auto'
     },
     flexGrow: "1"
-  }, ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(Icon, _extends({
     ml: "auto",
     title: {
       name: isOpen ? 'menu-up' : 'menu-down'
     },
     icon: isOpen ? MenuUp : MenuDown
-  }))));
+  }, isOnyx && {
+    size: 'sm'
+  })))));
 });
 export default ColorFieldPreviewButton;

package/lib/components/ComboBox/ComboBoxInput.js

@@ -51,7 +51,8 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     containerProps: containerProps
   }, mergeProps(inputProps, others));
   var _useGetTheme = useGetTheme(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown;
 
   // istanbul ignore next
@@ -72,9 +73,11 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.comboBox.inputInContainerSlot"
   },
   // Render loader after delay if filtering or loading
-  isLoading && (isOpen || menuTrigger === 'manual' || loadingState === loadingStates.LOADING) && ___EmotionJSX(Loader, {
+  isLoading && (isOpen || menuTrigger === 'manual' || loadingState === loadingStates.LOADING) && ___EmotionJSX(Loader, _extends({
     variant: "loader.withinInput"
-  }), ___EmotionJSX(PressResponder, {
+  }, isOnyx && {
+    size: 'sm'
+  })), ___EmotionJSX(PressResponder, {
     preventFocusOnPress: true,
     isPressed: isOpen
   }, ___EmotionJSX(Button, _extends({
@@ -85,7 +88,7 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     tabIndex: -1
   }), ___EmotionJSX(Icon, {
     icon: MenuDown,
-    size: "md",
+    size: isOnyx ? 'sm' : 'md',
     sx: isOpen ? {
       transform: 'rotate(180deg)'
     } : null,

package/lib/components/ListBox/Option.js

@@ -132,7 +132,6 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
   }, ___EmotionJSX(Icon, {
     icon: isSelected ? CheckedIcon : UncheckedIcon,
     color: "active",
-    size: "24px",
     mr: "xs",
     className: classNames,
     variant: "listBox.checkboxIcon"
@@ -146,7 +145,8 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
     title: {
       name: 'Check Icon'
     },
-    color: "green-500"
+    color: "green-500",
+    size: isOnyx ? 'xsm' : 'md'
   }));
 });
 Option.defaultProps = {

package/lib/components/ListView/ListViewExpandableItem.js

@@ -21,7 +21,8 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
     isFocusable = props.isFocusable,
     className = props.className;
   var _useGetTheme = useGetTheme(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
   var _useContext = useContext(ListViewContext),
@@ -63,7 +64,7 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
       alignItems: 'center',
       width: '100%'
     }
-  }, item.rendered && item.rendered[0], ___EmotionJSX(Icon, {
+  }, item.rendered && item.rendered[0], ___EmotionJSX(Icon, _extends({
     sx: {
       ml: 'auto'
     },
@@ -72,7 +73,9 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
     title: {
       name: "".concat(key, " expand icon button")
     }
-  }))), ___EmotionJSX(Box, expandableItemState.gridCellProps, isExpanded && ___EmotionJSX(ListViewFocusWrapper, {
+  }, isOnyx && {
+    size: 'sm'
+  })))), ___EmotionJSX(Box, expandableItemState.gridCellProps, isExpanded && ___EmotionJSX(ListViewFocusWrapper, {
     isFocusEscaped: isFocusEscaped,
     containerProps: expandableContainerProps
   }, item.rendered && item.rendered[1])));

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

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

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -95,7 +95,8 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   var inputRef = useRef();
   var buttonRef = useRef();
   var _useGetTheme = useGetTheme(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
   var _useFocusWithin = useFocusWithin({
@@ -382,12 +383,15 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: {
       border: 'none'
     }
-  }, ___EmotionJSX(Icon, {
-    icon: isOpen ? MenuUp : MenuDown,
+  }, ___EmotionJSX(Icon, _extends({
+    icon: isOpen ? MenuUp : MenuDown
+  }, isOnyx && {
+    size: 'sm'
+  }, {
     title: {
       name: isOpen ? 'Menu Up Icon' : 'Menu Down Icon'
     }
-  })));
+  }))));
   return ___EmotionJSX(MultivaluesContext.Provider, {
     value: setActiveDescendant
   }, ___EmotionJSX(Box, mergeProps(containerProps, focusWithinProps), ___EmotionJSX(TextField, _extends({

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -29,7 +29,8 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
   var navBarState = useNavBarContext();
   var _useGetTheme = useGetTheme(),
     icons = _useGetTheme.icons,
-    navBarIconSize = _useGetTheme.navBarIconSize;
+    navBarIconSize = _useGetTheme.navBarIconSize,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
   var selectedKey = navBarState.selectedKey,
@@ -85,7 +86,7 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     }
   }, ___EmotionJSX(Icon, {
     icon: isExpanded ? MenuUp : MenuDown,
-    size: "xsm",
+    size: isOnyx ? 'sm' : 'xsm',
     sx: {
       color: getIconColor(),
       fill: getIconColor()

package/lib/components/NumberField/NumberField.js

@@ -20,7 +20,7 @@ import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../..';
-import { useField, usePropWarning } from '../../hooks';
+import { useField, useGetTheme, usePropWarning } from '../../hooks';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
@@ -31,6 +31,8 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     status = props.status;
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var state = useNumberFieldState(_objectSpread(_objectSpread({}, props), {}, {
     locale: locale
   }));
@@ -61,7 +63,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     p: 0
   }), ___EmotionJSX(Icon, {
     icon: MenuUp,
-    size: 18,
+    size: isOnyx ? 'sm' : 18,
     title: {
       name: 'Menu Up Icon'
     }
@@ -71,7 +73,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     p: 0
   }), ___EmotionJSX(Icon, {
     icon: MenuDown,
-    size: 18,
+    size: isOnyx ? 'sm' : 18,
     title: {
       name: 'Menu Down Icon'
     }

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -60,7 +60,8 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
   var _getAriaAttributeProp = getAriaAttributeProps(others),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = useGetTheme(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
   var helperTextId = useMemo(function () {
@@ -81,7 +82,7 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
     title: {
       name: 'Menu down'
     },
-    size: "md"
+    size: isOnyx ? 'sm' : 'md'
   }));
   var clearButton = hasClearButton && state.selectedKey && ___EmotionJSX(IconButton, _extends({
     tabIndex: 0,

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

@@ -0,0 +1,10 @@
+import { colors } from '../colors';
+var comboBox = {
+  input: {
+    bg: 'gray[900]',
+    '&.is-disabled, &.is-read-only': {
+      bg: "".concat(colors.disabled, " !important")
+    }
+  }
+};
+export default comboBox;

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

@@ -10,6 +10,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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) { _defineProperty(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; }
 import { astroTokensDark } from '@pingux/onyx-tokens';
+import comboBox from './comboBox';
 import { input } from './input';
 export var select = {
   backgroundColor: 'backgroundBase',
@@ -81,5 +82,6 @@ export default {
   select: _objectSpread(_objectSpread({}, select), {}, {
     option: _objectSpread({}, selectOption)
   }),
-  "switch": switchable
+  "switch": switchable,
+  comboBox: comboBox
 };

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

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

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

@@ -13,6 +13,7 @@ export var fontSizes = {
   'xs': '11px',
   'tiny': "".concat(fontSize.tiny, "px"),
   'sm': "".concat(fontSize.small || fontSize.sm, "px"),
+  'small': "".concat(fontSize.small, "px"),
   'md': "".concat(fontSizeBase * 1, "rem"),
   'lg': "".concat(fontSizeBase * 1.25, "rem"),
   'xl': "".concat(fontSizeBase * 1.5, "rem"),

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

@@ -3,6 +3,8 @@ var fontSizes = astroTokens["default"]['font-size'];
 export var label = {
   color: 'text.primary',
   fontSize: fontSizes.label,
+  mb: 'sm',
+  fontWeight: 'body',
   '&.is-float-label': {
     fontSize: fontSizes.label,
     fontWeight: 1,

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

@@ -1,5 +1,7 @@
 import { astroTokens } from '@pingux/onyx-tokens';
 var container = {
+  minWidth: '150px',
+  boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.176)',
   transition: 'opacity 200ms ease',
   '&.animate': {
     opacity: 0
@@ -27,6 +29,7 @@ var container = {
 };
 var arrow = {
   color: 'white',
+  fontSize: 'sm',
   '&:before': {
     content: '""',
     position: 'absolute',

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

@@ -41,7 +41,7 @@ import { menuTab, tab, tabs } from './tabs';
 import tooltip from './tooltip';
 var fieldHelperText = {
   title: {
-    fontSize: 'sm',
+    fontSize: 'small',
     pt: '0px !important',
     mt: '.25rem',
     '&.is-default': {
@@ -164,7 +164,7 @@ var listBox = {
       zIndex: 1
     },
     '&.is-selected': {
-      color: 'text.primary',
+      color: 'black',
       bg: 'lightblue',
       pl: '.75rem',
       borderRadius: '4px',
@@ -194,17 +194,20 @@ var listBox = {
   },
   sectionTitle: {
     color: 'font.light',
-    fontWeight: '1',
+    fontWeight: '0',
     fontSize: 'tiny',
     lineHeight: 'xs',
     textTransform: 'uppercase',
     letterSpacing: '1px',
-    ml: 'md'
+    pl: 'xs',
+    ml: 'sm',
+    py: 'sm'
   }
 };
 var separator = {
   base: {
     bg: 'border.base',
+    my: 'sm',
     '&.is-vertical': {
       m: '0'
     }

package/package.json

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