@pingux/astro 2.197.0-alpha.0 → 2.198.7-alpha.0

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

@@ -48,7 +48,7 @@ var nextGenTheme = {
   fontWeights: _text2.fontWeights,
   lineHeights: {
     body: _onyxTokens.astroTokens["default"]['line-height'].base,
-    xs: '1.2',
+    xs: _onyxTokens.astroTokens["default"]['line-height'].xs,
     sm: '1.4',
     md: '1.75'
   },

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

@@ -1239,6 +1239,9 @@ declare const buttons: {
             alignSelf: string;
         };
         hintButton: {
+            maxWidth: string;
+            maxHeight: string;
+            borderRadius: string;
             backgroundColor: string;
             path: {
                 fill: string;

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

@@ -410,6 +410,9 @@ var onyxIconButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
 var hintButton = {
+  maxWidth: 'unset',
+  maxHeight: 'unset',
+  borderRadius: '28px',
   backgroundColor: 'transparent',
   path: {
     fill: 'dark'

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

@@ -1,5 +1,7 @@
 declare const _default: {
     xs: {
+        justifyContent: string;
+        alignItems: string;
         '&.is-circle': {
             borderRadius: string;
         };
@@ -11,6 +13,8 @@ declare const _default: {
         fontSize: any;
     };
     sm: {
+        justifyContent: string;
+        alignItems: string;
         '&.is-circle': {
             borderRadius: string;
         };
@@ -22,6 +26,8 @@ declare const _default: {
         fontSize: any;
     };
     md: {
+        justifyContent: string;
+        alignItems: string;
         '&.is-circle': {
             borderRadius: string;
         };
@@ -33,6 +39,8 @@ declare const _default: {
         fontSize: any;
     };
     lg: {
+        justifyContent: string;
+        alignItems: string;
         '&.is-circle': {
             borderRadius: string;
         };
@@ -44,6 +52,8 @@ declare const _default: {
         fontSize: any;
     };
     xl: {
+        justifyContent: string;
+        alignItems: string;
         '&.is-circle': {
             borderRadius: string;
         };

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

@@ -18,6 +18,8 @@ var _sizes = _interopRequireDefault(require("../sizes"));
 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 circle = {
+  justifyContent: 'center',
+  alignItems: 'center',
   '&.is-circle': {
     borderRadius: '50%'
   }

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

@@ -1,7 +1,6 @@
 export declare const message: {
     wrapper: {
         gap: string;
-        right: string;
     };
     item: {
         maxWidth: number;

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

@@ -8,8 +8,7 @@ exports.message = void 0;
 var _onyxTokens = require("@pingux/onyx-tokens");
 var message = exports.message = {
   wrapper: {
-    gap: 'md',
-    right: 'unset'
+    gap: 'md'
   },
   item: {
     maxWidth: 400,

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

@@ -11,8 +11,5 @@ declare const _default: {
         alignSelf: string;
         mr: string;
     };
-    wrapper: {
-        mr: string;
-    };
 };
 export default _default;

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

@@ -17,11 +17,7 @@ var controls = {
   alignSelf: 'start',
   mr: '0'
 };
-var wrapper = {
-  mr: 'md'
-};
 var _default = exports["default"] = {
   container: container,
-  controls: controls,
-  wrapper: wrapper
+  controls: controls
 };

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

@@ -145,6 +145,13 @@ export declare const text: {
     base: {
         lineHeight: string;
     };
+    modalTitle: {
+        lineHeight: string;
+        fontSize: any;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+    };
     buttonSubtitle: {
         fontSize: string;
         fontWeight: number;

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

@@ -123,10 +123,14 @@ var stepperTabContent = {
 var stepperTabContentHeader = _objectSpread(_objectSpread({}, hTags.H2), {}, {
   color: 'font.base'
 });
+var modalTitle = _objectSpread(_objectSpread({}, hTags.H3), {}, {
+  lineHeight: '2rem'
+});
 var text = exports.text = _objectSpread(_objectSpread({
   base: {
     lineHeight: 'body'
   },
+  modalTitle: modalTitle,
   buttonSubtitle: buttonSubtitle,
   buttonTitle: buttonTitle,
   pageHeaderBody: {

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

@@ -757,6 +757,8 @@ declare const _default: {
     };
     iconWrapper: {
         xs: {
+            justifyContent: string;
+            alignItems: string;
             '&.is-circle': {
                 borderRadius: string;
             };
@@ -768,6 +770,8 @@ declare const _default: {
             fontSize: any;
         };
         sm: {
+            justifyContent: string;
+            alignItems: string;
             '&.is-circle': {
                 borderRadius: string;
             };
@@ -779,6 +783,8 @@ declare const _default: {
             fontSize: any;
         };
         md: {
+            justifyContent: string;
+            alignItems: string;
             '&.is-circle': {
                 borderRadius: string;
             };
@@ -790,6 +796,8 @@ declare const _default: {
             fontSize: any;
         };
         lg: {
+            justifyContent: string;
+            alignItems: string;
             '&.is-circle': {
                 borderRadius: string;
             };
@@ -801,6 +809,8 @@ declare const _default: {
             fontSize: any;
         };
         xl: {
+            justifyContent: string;
+            alignItems: string;
             '&.is-circle': {
                 borderRadius: string;
             };
@@ -814,13 +824,15 @@ declare const _default: {
     };
     listBox: {
         container: {
-            px: string;
+            pl: string;
+            pr: number;
             py: string;
         };
         option: {
             py: string;
             pl: string;
             pr: string;
+            mr: string;
             justifyContent: string;
             borderRadius: string;
             lineHeight: string;
@@ -1088,7 +1100,6 @@ declare const _default: {
     message: {
         wrapper: {
             gap: string;
-            right: string;
         };
         item: {
             maxWidth: number;
@@ -1207,6 +1218,7 @@ declare const _default: {
             borderTopColor: string;
             borderRadius: string;
             p: string;
+            flexDirection: string;
         };
         footerContainer: {
             borderTop: string;
@@ -1426,9 +1438,6 @@ declare const _default: {
             alignSelf: string;
             mr: string;
         };
-        wrapper: {
-            mr: string;
-        };
     };
     popoverMenu: {
         container: {

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

@@ -149,7 +149,8 @@ var modal = {
     borderTop: '1px solid',
     borderTopColor: 'gray-200',
     borderRadius: '0px 0px 1em 1em',
-    p: 'lg'
+    p: 'lg',
+    flexDirection: 'row-reverse !important'
   },
   footerContainer: {
     borderTop: '1px solid',
@@ -159,13 +160,15 @@ var modal = {
 };
 var listBox = {
   container: {
-    px: 'sm',
+    pl: 'sm',
+    pr: 0,
     py: 'xs'
   },
   option: {
     py: '.75rem',
     pl: '.75rem',
     pr: 'md',
+    mr: 'sm',
     justifyContent: 'space-between',
     borderRadius: '4px',
     lineHeight: 'body',

package/lib/cjs/types/Modal.d.ts

@@ -3,6 +3,7 @@ import { AstroOverlayTriggerState } from '../hooks/useModalState/useModalState';
 import { DOMAttributes } from './shared/dom';
 import { ModalSizeProps, StyleProps } from './shared/style';
 import { TestingAttributes } from './shared/test';
+import { IconButtonProps } from './iconButton';
 export interface ModalProps extends DOMAttributes, TestingAttributes {
     /** Used in tandem with `hasCloseButton` to customize how the close button is rendered. */
     closeButton?: ReactNode;
@@ -70,6 +71,7 @@ export interface ModalHeaderProps extends StyleProps {
     onClose?: () => void;
     title?: ReactNode;
     hasNoSeparator?: boolean;
+    closeButtonProps?: IconButtonProps;
 }
 export type ModalFooterProps = {
     onSubmit?: () => void;

package/lib/components/ComboBox/ComboBoxInput.js

@@ -93,8 +93,9 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
       transform: 'rotate(180deg)'
     } : null,
     title: {
-      name: 'Menu Down'
-    }
+      name: ''
+    },
+    "aria-hidden": "true"
   }))));
   return ___EmotionJSX(FocusRing, {
     within: true,

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -273,7 +273,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     onChange: function onChange(val) {
       return setSearchValue(val);
     },
-    p: "10px"
+    p: "sm"
   }, searchProps)), ___EmotionJSX(VisuallyHidden, {
     role: "alert",
     "aria-live": "polite",

package/lib/components/HelpHint/HelpHint.js

@@ -9,27 +9,10 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { FocusScope, mergeProps, useFocusRing, useFocusWithin, useOverlayPosition, useOverlayTrigger } from 'react-aria';
 import { useOverlayTriggerState } from 'react-stately';
 import { useHover } from '@react-aria/interactions';
-import { v4 as uuid } from 'uuid';
 import { Box, Icon, IconButton, PopoverContainer } from '../..';
-import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
+import { useGetTheme, useLocalOrForwardRef, useStatusClasses } from '../../hooks';
 import { isSafari } from '../../styles/safariAgent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var HelpIcon = function HelpIcon() {
-  var uid = uuid();
-  return ___EmotionJSX("svg", {
-    width: "7",
-    height: "9",
-    viewBox: "0 0 7 9",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": uid
-  }, ___EmotionJSX("title", {
-    id: uid
-  }, "Help Icon"), ___EmotionJSX("path", {
-    d: "M2.56685 7.306V9H4.29385V7.306H2.56685ZM0.795848 3.676H2.41285C2.41285 3.478 2.43485 3.29467 2.47885 3.126C2.52285 2.95 2.58885 2.79967 2.67685 2.675C2.77218 2.543 2.88951 2.44033 3.02885 2.367C3.17551 2.28633 3.34785 2.246 3.54585 2.246C3.83918 2.246 4.06651 2.32667 4.22785 2.488C4.39651 2.64933 4.48085 2.89867 4.48085 3.236C4.48818 3.434 4.45151 3.599 4.37085 3.731C4.29751 3.863 4.19851 3.984 4.07385 4.094C3.94918 4.204 3.81351 4.314 3.66685 4.424C3.52018 4.534 3.38085 4.666 3.24885 4.82C3.11685 4.96667 2.99951 5.14633 2.89685 5.359C2.80151 5.57167 2.74285 5.83567 2.72085 6.151V6.646H4.20585V6.228C4.23518 6.008 4.30485 5.82467 4.41485 5.678C4.53218 5.53133 4.66418 5.403 4.81085 5.293C4.95751 5.17567 5.11151 5.062 5.27285 4.952C5.44151 4.83467 5.59185 4.69533 5.72385 4.534C5.86318 4.37267 5.97685 4.17833 6.06485 3.951C6.16018 3.72367 6.20785 3.434 6.20785 3.082C6.20785 2.86933 6.16018 2.642 6.06485 2.4C5.97685 2.15067 5.82651 1.91967 5.61385 1.707C5.40118 1.49433 5.11885 1.31833 4.76685 1.179C4.42218 1.03233 3.98951 0.959 3.46885 0.959C3.06551 0.959 2.69885 1.02867 2.36885 1.168C2.04618 1.3 1.76751 1.487 1.53285 1.729C1.30551 1.971 1.12585 2.257 0.993848 2.587C0.869181 2.917 0.803181 3.28 0.795848 3.676Z",
-    fill: "#3B4A58"
-  }));
-};
 var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
   var align = props.align,
@@ -45,6 +28,8 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     popoverProps = props.popoverProps,
     tooltipProps = props.tooltipProps,
     others = _objectWithoutProperties(props, _excluded);
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocusWithinOverlay = _useState2[0],
@@ -133,7 +118,7 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     "data-testid": "help-hint__button",
     variant: "hintButton"
   }, mergeProps(triggerProps, iconButtonProps, focusProps, hoverProps)), ___EmotionJSX(Icon, {
-    icon: HelpIcon
+    icon: icons.helpHint
   })), ___EmotionJSX(PopoverContainer, _extends({
     arrowCrossOffset: arrowCrossOffset,
     arrowProps: {

package/lib/components/IconWrapper/IconWrapper.js

@@ -53,9 +53,7 @@ var IconWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: _objectSpread({
       backgroundColor: "iconWrapper.wrapper.".concat(finalColor)
     }, sx),
-    className: classNames,
-    justifyContent: "center",
-    alignItems: "center"
+    className: classNames
   }, wrapperProps), ___EmotionJSX(Icon, _extends({
     icon: icon,
     size: sizeProps.size,

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

@@ -69,9 +69,7 @@ export var closeButton = {
   position: 'absolute',
   top: 0,
   right: -14,
-  alignSelf: 'auto',
-  width: '22px',
-  height: '22px'
+  alignSelf: 'auto'
 };
 var bodyContainer = {
   px: 'lg'

package/lib/components/Modal/ModalHeader.js

@@ -9,11 +9,11 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["closeButton", "hasCloseButton", "title", "onClose", "containerProps", "titleProps", "hasNoSeparator"];
+var _excluded = ["closeButton", "hasCloseButton", "title", "onClose", "containerProps", "titleProps", "hasNoSeparator", "closeButtonProps"];
 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 React, { forwardRef } from 'react';
-import CloseIcon from '@pingux/mdi-react/CloseIcon';
+import { useGetTheme } from '../../hooks';
 import Box from '../Box';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
@@ -27,10 +27,17 @@ var ModalHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     containerProps = props.containerProps,
     titleProps = props.titleProps,
     hasNoSeparator = props.hasNoSeparator,
+    closeButtonProps = props.closeButtonProps,
     rest = _objectWithoutProperties(props, _excluded);
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons,
+    modalCloseIconSize = _useGetTheme.modalCloseIconSize;
+  var ModalCloseIcon = icons.ModalCloseIcon;
   var titleContent = typeof title === 'string' && title ? ___EmotionJSX(Box, {
     flex: "1"
-  }, ___EmotionJSX(Text, _extends({}, titleProps, {
+  }, ___EmotionJSX(Text, _extends({
+    as: "h3"
+  }, titleProps, {
     variant: "modalTitle",
     role: "heading",
     "aria-level": 1
@@ -45,16 +52,17 @@ var ModalHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: _objectSpread({
       borderBottomWidth: hasNoSeparator ? '0px' : '1px'
     }, rest.sx)
-  }, containerProps, rest), titleContent, hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, {
+  }, containerProps, rest), titleContent, hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, _extends({
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",
     variant: "modalHeaderCloseButton",
     onPress: onClose
-  }, ___EmotionJSX(Icon, {
-    icon: CloseIcon,
+  }, closeButtonProps), ___EmotionJSX(Icon, {
+    icon: ModalCloseIcon,
     title: {
       name: 'Close Icon'
-    }
+    },
+    size: modalCloseIconSize
   }))));
 });
 ModalHeader.displayName = 'ModalHeader';

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -382,15 +382,15 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     onClick: handleButtonPress,
     sx: {
       border: 'none'
+    },
+    title: {
+      name: ''
     }
   }, ___EmotionJSX(Icon, _extends({
     icon: isOpen ? MenuUp : MenuDown
   }, isOnyx && {
     size: 'sm'
   }, {
-    title: {
-      name: ''
-    },
     "aria-hidden": "true"
   }))));
   return ___EmotionJSX(MultivaluesContext.Provider, {

package/lib/components/PanelHeader/PanelHeader.js

@@ -53,9 +53,9 @@ var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var renderAvatar = ___EmotionJSX(Avatar, _extends({
     src: image === null || image === void 0 ? void 0 : image.src,
     isSquare: !!(image !== null && image !== void 0 && image.src),
-    size: "avatar.lg",
+    size: "sm",
     defaultText: avatarDefaultText,
-    mr: "lg"
+    mr: "md"
   }, avatarProps));
   var renderImage = !icon && image && ___EmotionJSX(Box, {
     variant: "panelHeader.iconWrapper"

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

@@ -144,8 +144,8 @@ export var colors = _objectSpread(_objectSpread({
   darkteal: astroTokensDark.color.teal[100],
   darkcyan: astroTokensDark.color.cyan[100],
   text: {
-    primary: astroTokensDark.color.gray[400],
-    secondary: astroTokensDark.color.gray[100],
+    primary: astroTokensDark.color.font.base,
+    secondary: astroTokensDark.color.font.light,
     message: 'white',
     fieldHelper: astroTokensDark.color.gray[400]
   },

package/lib/styles/themes/astro/customProperties/icons.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _statuses$DEFAULT$sta;
+import React from 'react';
 import mdiAccountCog from '@pingux/mdi-react/AccountCogIcon';
 import AccountMultiple from '@pingux/mdi-react/AccountMultipleIcon';
 import AlertCircleIcon from '@pingux/mdi-react/AlertCircleIcon';
@@ -14,6 +15,7 @@ import DefaultCircle from '@pingux/mdi-react/CheckboxBlankCircleOutlineIcon';
 import CheckCircleIcon from '@pingux/mdi-react/CheckCircleIcon';
 import CheckCircleOutlineIcon from '@pingux/mdi-react/CheckCircleOutlineIcon';
 import Clipboard from '@pingux/mdi-react/ClipboardIcon';
+import CloseIcon from '@pingux/mdi-react/CloseIcon';
 import CloseOctagonOutlineIcon from '@pingux/mdi-react/CloseOctagonOutlineIcon';
 import ConnectionIcon from '@pingux/mdi-react/ConnectionIcon';
 import CreateIcon from '@pingux/mdi-react/CreateIcon';
@@ -38,7 +40,25 @@ import ShieldStarOutlineIcon from '@pingux/mdi-react/ShieldStarOutlineIcon';
 import TransitConnection from '@pingux/mdi-react/TransitConnectionVariantIcon';
 import ViewDashboard from '@pingux/mdi-react/ViewDashboardIcon';
 import WebIcon from '@pingux/mdi-react/WebIcon';
+import { v4 as uuid } from 'uuid';
 import { pingLogoHorizontalSmallWhite } from '../../../../utils/devUtils/constants/logos';
 import statuses, { statusIcon } from '../../../../utils/devUtils/constants/statuses';
 import { Aic, Credentials, DaVinci, PamIcon, Protect, Verify } from './navBarIcons';
-export default (_statuses$DEFAULT$sta = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, statuses.DEFAULT, InformationIcon), statuses.ERROR, AlertCircleIcon), statuses.SUCCESS, CheckCircleIcon), statuses.WARNING, AlertIcon), statusIcon.CRITICAL, AlertCircleOutlineIcon), statusIcon.FATAL, CloseOctagonOutlineIcon), statusIcon.INFO, InformationOutlineIcon), statusIcon.MAJOR, ArrowUpIcon), statusIcon.MINOR, ArrowDownIcon), statusIcon.WARNING_NEUTRAL, WarningIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "aic", Aic), "applicationsIcon", ApplicationOutlineIcon), "Ascending", MenuUp), "authenticationIcon", CheckCircleOutlineIcon), "clipboard", Clipboard), "CreateIcon", CreateIcon), "daVinci", DaVinci), "DefaultCircle", DefaultCircle), "Descending", MenuDown), "popoverMenuIcon", MoreVertIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "ErrorCircle", AlertCircleIcon), "integrationsIcon", ConnectionIcon), "listViewMenu", MoreVertIcon), "mdiAccountCog", mdiAccountCog), "mdiAccountMultiple", AccountMultiple), "mdiEarth", Earth), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", Fingerprint), "mdiPlayCircleIcon", PlayCircle), "mdiScaleBalance", ScaleBalance), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "mdiShoCard", Credentials), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", ViewDashboard), "mdiWeb", GlobeIcon), "MenuDown", MenuDown), "MenuUp", MenuUp), "monitoringIcon", PulseIcon), "openInNew", OpenInNew), "overviewIcon", WebIcon), "p1verify", Verify), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "pam", PamIcon), "PingAuthorize", KeyChainVariant), "HomeIcon", HomeIcon), "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), "protect", Protect), "rocketLaunchIcon", RocketLaunchIcon), "shareFeedbackIcon", ChatIcon), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", CheckCircleIcon), "userExperienceIcon", MonitorScreenshotIcon), _defineProperty(_statuses$DEFAULT$sta, "WarningIcon", WarningIcon));
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var HelpIcon = function HelpIcon() {
+  var uid = uuid();
+  return ___EmotionJSX("svg", {
+    width: "7",
+    height: "9",
+    viewBox: "0 0 7 9",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": uid
+  }, ___EmotionJSX("title", {
+    id: uid
+  }, "Help Icon"), ___EmotionJSX("path", {
+    d: "M2.56685 7.306V9H4.29385V7.306H2.56685ZM0.795848 3.676H2.41285C2.41285 3.478 2.43485 3.29467 2.47885 3.126C2.52285 2.95 2.58885 2.79967 2.67685 2.675C2.77218 2.543 2.88951 2.44033 3.02885 2.367C3.17551 2.28633 3.34785 2.246 3.54585 2.246C3.83918 2.246 4.06651 2.32667 4.22785 2.488C4.39651 2.64933 4.48085 2.89867 4.48085 3.236C4.48818 3.434 4.45151 3.599 4.37085 3.731C4.29751 3.863 4.19851 3.984 4.07385 4.094C3.94918 4.204 3.81351 4.314 3.66685 4.424C3.52018 4.534 3.38085 4.666 3.24885 4.82C3.11685 4.96667 2.99951 5.14633 2.89685 5.359C2.80151 5.57167 2.74285 5.83567 2.72085 6.151V6.646H4.20585V6.228C4.23518 6.008 4.30485 5.82467 4.41485 5.678C4.53218 5.53133 4.66418 5.403 4.81085 5.293C4.95751 5.17567 5.11151 5.062 5.27285 4.952C5.44151 4.83467 5.59185 4.69533 5.72385 4.534C5.86318 4.37267 5.97685 4.17833 6.06485 3.951C6.16018 3.72367 6.20785 3.434 6.20785 3.082C6.20785 2.86933 6.16018 2.642 6.06485 2.4C5.97685 2.15067 5.82651 1.91967 5.61385 1.707C5.40118 1.49433 5.11885 1.31833 4.76685 1.179C4.42218 1.03233 3.98951 0.959 3.46885 0.959C3.06551 0.959 2.69885 1.02867 2.36885 1.168C2.04618 1.3 1.76751 1.487 1.53285 1.729C1.30551 1.971 1.12585 2.257 0.993848 2.587C0.869181 2.917 0.803181 3.28 0.795848 3.676Z",
+    fill: "#3B4A58"
+  }));
+};
+export default (_statuses$DEFAULT$sta = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, statuses.DEFAULT, InformationIcon), statuses.ERROR, AlertCircleIcon), statuses.SUCCESS, CheckCircleIcon), statuses.WARNING, AlertIcon), statusIcon.CRITICAL, AlertCircleOutlineIcon), statusIcon.FATAL, CloseOctagonOutlineIcon), statusIcon.INFO, InformationOutlineIcon), statusIcon.MAJOR, ArrowUpIcon), statusIcon.MINOR, ArrowDownIcon), statusIcon.WARNING_NEUTRAL, WarningIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "aic", Aic), "applicationsIcon", ApplicationOutlineIcon), "Ascending", MenuUp), "authenticationIcon", CheckCircleOutlineIcon), "clipboard", Clipboard), "CreateIcon", CreateIcon), "daVinci", DaVinci), "DefaultCircle", DefaultCircle), "Descending", MenuDown), "popoverMenuIcon", MoreVertIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "ErrorCircle", AlertCircleIcon), "integrationsIcon", ConnectionIcon), "listViewMenu", MoreVertIcon), "mdiAccountCog", mdiAccountCog), "mdiAccountMultiple", AccountMultiple), "mdiEarth", Earth), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", Fingerprint), "mdiPlayCircleIcon", PlayCircle), "mdiScaleBalance", ScaleBalance), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "mdiShoCard", Credentials), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", ViewDashboard), "mdiWeb", GlobeIcon), "MenuDown", MenuDown), "MenuUp", MenuUp), "monitoringIcon", PulseIcon), "openInNew", OpenInNew), "overviewIcon", WebIcon), "p1verify", Verify), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "pam", PamIcon), "PingAuthorize", KeyChainVariant), "HomeIcon", HomeIcon), "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), "protect", Protect), "rocketLaunchIcon", RocketLaunchIcon), "shareFeedbackIcon", ChatIcon), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", CheckCircleIcon), "userExperienceIcon", MonitorScreenshotIcon), _defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "WarningIcon", WarningIcon), "helpHint", HelpIcon), "ModalCloseIcon", CloseIcon));

package/lib/styles/themes/astro/customProperties/index.js

@@ -23,6 +23,7 @@ var linkSelectFieldWidth = '10em';
 var calendarIconSize = 25;
 var navBarIconSize = 18;
 var badgeTextFontSize = '';
+var modalCloseIconSize = 'sm';
 export var astroThemeValues = {
   accordionHoveredState: hoveredState,
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
@@ -55,5 +56,6 @@ export var astroThemeValues = {
     greyText: '#FFFFFF'
   },
   linkSelectFieldWidth: linkSelectFieldWidth,
-  badgeTextFontSize: badgeTextFontSize
+  badgeTextFontSize: badgeTextFontSize,
+  modalCloseIconSize: modalCloseIconSize
 };

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

@@ -86,7 +86,7 @@ export var info = {
 };
 var text = {
   primary: astroTokens.color.font.base,
-  secondary: astroTokens.color.gray[500],
+  secondary: astroTokens.color.font.light,
   message: astroTokens.color.gray[700],
   fieldHelper: astroTokens.color.gray[500]
 };

package/lib/styles/themes/next-gen/customProperties/customSizes.js

@@ -6,6 +6,7 @@ var pageHeaderTitleMargin = 'sm';
 var pageHeaderAddIconMargin = 'md';
 var pageHeaderAddIconSize = 'md';
 var defaultLoaderSize = 32;
+var modalCloseIconSize = 'md';
 export default {
   copyButtonSize: copyButtonSize,
   breadcrumbIconSize: breadcrumbIconSize,
@@ -14,5 +15,6 @@ export default {
   pageHeaderTitleMargin: pageHeaderTitleMargin,
   pageHeaderAddIconMargin: pageHeaderAddIconMargin,
   pageHeaderAddIconSize: pageHeaderAddIconSize,
-  defaultLoaderSize: defaultLoaderSize
+  defaultLoaderSize: defaultLoaderSize,
+  modalCloseIconSize: modalCloseIconSize
 };

package/lib/styles/themes/next-gen/customProperties/icons.js

@@ -8,5 +8,5 @@ import TransitConnection from '@pingux/mdi-react/TransitConnectionVariantIcon';
 import { pingLogoHorizontalSmall } from '../../../../utils/devUtils/constants/logos';
 import statuses, { statusIcon } from '../../../../utils/devUtils/constants/statuses';
 import { Aic, PamIcon, Protect } from '../../astro/customProperties/navBarIcons';
-var icons = (_icons = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, statuses.DEFAULT, 'info'), statuses.ERROR, 'error'), statuses.SUCCESS, 'check_circle'), statuses.WARNING, 'warning'), statusIcon.CRITICAL, 'error'), statusIcon.FATAL, 'dangerous'), statusIcon.INFO, 'info'), statusIcon.MAJOR, 'arrow_upward'), statusIcon.MINOR, 'arrow_downward'), statusIcon.WARNING_NEUTRAL, 'warning'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "aic", Aic), "applicationsIcon", 'apps'), "Ascending", 'arrow_upward'), "authenticationIcon", 'check_circle'), "clipboard", 'content_paste'), "CreateIcon", 'edit'), "daVinci", 'account_tree'), "DefaultCircle", 'circle'), "Descending", 'arrow_downward'), "popoverMenuIcon", 'more_horiz'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "ErrorCircle", 'error'), "HomeIcon", 'home'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", Settings), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "mdiScaleBalance", 'balance'), "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuUp", 'keyboard_arrow_up'), "monitoringIcon", ShowChartIcon), "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "p1verify", 'person_check'), "pam", PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", pingLogoHorizontalSmall), "protect", Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), _defineProperty(_icons, "WarningIcon", 'warning'));
+var icons = (_icons = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, statuses.DEFAULT, 'info'), statuses.ERROR, 'error'), statuses.SUCCESS, 'check_circle'), statuses.WARNING, 'warning'), statusIcon.CRITICAL, 'error'), statusIcon.FATAL, 'dangerous'), statusIcon.INFO, 'info'), statusIcon.MAJOR, 'arrow_upward'), statusIcon.MINOR, 'arrow_downward'), statusIcon.WARNING_NEUTRAL, 'warning'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "aic", Aic), "applicationsIcon", 'apps'), "Ascending", 'arrow_upward'), "authenticationIcon", 'check_circle'), "clipboard", 'content_paste'), "CreateIcon", 'edit'), "daVinci", 'account_tree'), "DefaultCircle", 'circle'), "Descending", 'arrow_downward'), "popoverMenuIcon", 'more_horiz'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "ErrorCircle", 'error'), "HomeIcon", 'home'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", Settings), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "mdiScaleBalance", 'balance'), "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuUp", 'keyboard_arrow_up'), "monitoringIcon", ShowChartIcon), "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "p1verify", 'person_check'), "pam", PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", pingLogoHorizontalSmall), "protect", Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), _defineProperty(_defineProperty(_defineProperty(_icons, "WarningIcon", 'warning'), "helpHint", 'help_outline'), "ModalCloseIcon", 'close'));
 export default icons;

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

@@ -41,7 +41,7 @@ var nextGenTheme = {
   fontWeights: fontWeights,
   lineHeights: {
     body: astroTokens["default"]['line-height'].base,
-    xs: '1.2',
+    xs: astroTokens["default"]['line-height'].xs,
     sm: '1.4',
     md: '1.75'
   },

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

@@ -403,6 +403,9 @@ var onyxIconButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
 var hintButton = {
+  maxWidth: 'unset',
+  maxHeight: 'unset',
+  borderRadius: '28px',
   backgroundColor: 'transparent',
   path: {
     fill: 'dark'

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

@@ -11,6 +11,8 @@ 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) { _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 sizes from '../sizes';
 var circle = {
+  justifyContent: 'center',
+  alignItems: 'center',
   '&.is-circle': {
     borderRadius: '50%'
   }