@pingux/astro 2.202.1-alpha.0 → 2.203.0-alpha.0

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithLoading = exports.TextIconButton = exports.Primary = exports.LinkButton = exports.InlineButton = exports.Filter = exports.Disabled = exports.Default = exports.Critical = exports.ColorBlockButton = void 0;
+exports["default"] = exports.WithLoading = exports.TextIconButton = exports.Primary = exports.LinkButton = exports.InlineButton = exports.Filter = exports.Disabled = exports.Default = exports.CriticalLink = exports.Critical = exports.ColorBlockButton = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -75,6 +75,11 @@ Critical.parameters = {
     url: _figmaLinks.FIGMA_LINKS.button.critical
   }
 };
+var CriticalLink = exports.CriticalLink = function CriticalLink(args) {
+  return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, args, {
+    variant: "criticalLink"
+  }), "Button Text");
+};
 var InlineButton = exports.InlineButton = function InlineButton(args) {
   return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, args, {
     mb: "sm",

package/lib/cjs/components/Button/Buttons.styles.d.ts

@@ -126,6 +126,46 @@ export declare const link: {
     flexShrink: number;
     whiteSpace: string;
 };
+export declare const criticalLink: {
+    color: string;
+    lineHeight: string;
+    textDecoration: string;
+    display: string;
+    justifyContent: string;
+    width: string;
+    '&.is-current': {
+        cursor: string;
+        color: string;
+    };
+    '&.is-focused': {
+        boxShadow: string;
+        outline: string;
+        outlineColor: string;
+        outlineOffset: string;
+    };
+    bg: string;
+    border: string;
+    borderColor: string;
+    height: string;
+    padding: string;
+    '&.is-hovered': {
+        textDecoration: string;
+    };
+    fontSize: string;
+    fontWeight: number;
+    fontFamily: string;
+    overflowWrap: import("../..").overflowWrap;
+    maxWidth: string;
+    wordWrap: import("../..").wordWrap;
+    wordBreak: import("../..").wordBreak;
+    cursor: string;
+    minWidth: string;
+    outline: string;
+    alignItems: string;
+    borderRadius: string;
+    flexShrink: number;
+    whiteSpace: string;
+};
 export declare const selectLink: {
     textDecoration: string;
     '&.is-hovered': {
@@ -724,6 +764,46 @@ declare const _default: {
         flexShrink: number;
         whiteSpace: string;
     };
+    criticalLink: {
+        color: string;
+        lineHeight: string;
+        textDecoration: string;
+        display: string;
+        justifyContent: string;
+        width: string;
+        '&.is-current': {
+            cursor: string;
+            color: string;
+        };
+        '&.is-focused': {
+            boxShadow: string;
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        bg: string;
+        border: string;
+        borderColor: string;
+        height: string;
+        padding: string;
+        '&.is-hovered': {
+            textDecoration: string;
+        };
+        fontSize: string;
+        fontWeight: number;
+        fontFamily: string;
+        overflowWrap: import("../..").overflowWrap;
+        maxWidth: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
+        cursor: string;
+        minWidth: string;
+        outline: string;
+        alignItems: string;
+        borderRadius: string;
+        flexShrink: number;
+        whiteSpace: string;
+    };
     listBoxLink: {
         lineHeight: string;
         textDecoration: string;

package/lib/cjs/components/Button/Buttons.styles.js

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.text = exports.selectLink = exports.quiet = exports.link = exports.focusWithCroppedOutline = exports.defaultHover = exports.defaultFocus = exports.defaultActive = exports["default"] = exports.base = void 0;
+exports.text = exports.selectLink = exports.quiet = exports.link = exports.focusWithCroppedOutline = exports.defaultHover = exports.defaultFocus = exports.defaultActive = exports["default"] = exports.criticalLink = exports.base = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _Text = require("../Text/Text.styles");
 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; }
@@ -181,6 +181,9 @@ var link = exports.link = _objectSpread(_objectSpread({}, text), {}, {
   },
   '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
+var criticalLink = exports.criticalLink = _objectSpread(_objectSpread({}, link), {}, {
+  color: 'critical.bright'
+});
 var selectLink = exports.selectLink = _objectSpread(_objectSpread({}, link), {}, {
   textDecoration: 'none',
   '&.is-hovered': {
@@ -336,6 +339,7 @@ var _default = exports["default"] = {
   inlinePrimaryWithIcon: inlinePrimaryWithIcon,
   inlineWithIcon: inlineWithIcon,
   link: link,
+  criticalLink: criticalLink,
   listBoxLink: listBoxLink,
   paginationMenu: paginationMenu,
   primary: primary,

package/lib/cjs/components/Button/buttonAttributes.js

@@ -21,7 +21,7 @@ var _pressAttributes = require("../../utils/docUtils/pressAttributes");
 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; }
 // add designer approved variants for devs to use here
-var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
+var variantOptions = ['critical', 'criticalLink', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
 var descriptions = {
   children: 'Button text.',
   isDisabled: 'Whether the button is disabled.',

package/lib/cjs/components/ImageUploadField/ImagePreviewButton.js

@@ -13,10 +13,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
-var _CameraAltIcon = _interopRequireDefault(require("@pingux/mdi-react/CameraAltIcon"));
-var _ImageFilterHdrIcon = _interopRequireDefault(require("@pingux/mdi-react/ImageFilterHdrIcon"));
 var _interactions = require("@react-aria/interactions");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _Loader = _interopRequireDefault(require("../Loader"));
 var _react2 = require("@emotion/react");
@@ -44,9 +43,13 @@ var ImagePreviewButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
   var _useHover = (0, _interactions.useHover)(props),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    icons = _useGetTheme.icons;
+  var ImageOutlineIcon = icons.ImageOutlineIcon,
+    CameraOutlineIcon = icons.CameraOutlineIcon;
   var noImagePreview = defaultPreviewNode || (0, _react2.jsx)(_index.Icon, {
-    icon: _ImageFilterHdrIcon["default"],
-    color: "neutral.60",
+    icon: ImageOutlineIcon,
+    variant: "imageUpload.noImagePreview",
     size: 24,
     "data-testid": "image-upload-no-image-preview",
     title: {
@@ -82,7 +85,7 @@ var ImagePreviewButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     sx: widthHeightSx,
     "data-testid": "image-upload-hovered-preview"
   }, (0, _react2.jsx)(_index.Icon, {
-    icon: _CameraAltIcon["default"],
+    icon: CameraOutlineIcon,
     color: isFocusVisible || isMenuOpen ? 'active' : 'white',
     size: 24,
     sx: {

package/lib/cjs/components/ImageUploadField/imageUpload.js

@@ -33,6 +33,9 @@ var hoveredPreview = {
     borderRadius: 2
   }
 };
+var noImagePreview = {
+  fill: '#98a0a8 !important'
+};
 var button = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
   display: 'inline-flex',
   alignItems: 'center',
@@ -47,5 +50,6 @@ var button = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
 });
 var _default = exports["default"] = {
   hoveredPreview: hoveredPreview,
-  button: button
+  button: button,
+  noImagePreview: noImagePreview
 };

package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts

@@ -58,6 +58,8 @@ declare const useGetTheme: () => {
         SuccessCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
         userExperienceIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
         WarningIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        CameraOutlineIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        ImageOutlineIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
         helpHint: () => import("react/jsx-runtime").JSX.Element;
         ModalCloseIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
     };
@@ -156,6 +158,8 @@ declare const useGetTheme: () => {
         SuccessCircle: string;
         userExperienceIcon: string;
         WarningIcon: string;
+        CameraOutlineIcon: string;
+        ImageOutlineIcon: string;
         helpHint: string;
         ModalCloseIcon: string;
     };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.d.ts

@@ -68,6 +68,7 @@ export declare const colors: {
     text: {
         primary: any;
         secondary: any;
+        error: any;
         message: string;
         fieldHelper: any;
     };

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

@@ -153,6 +153,7 @@ var colors = exports.colors = _objectSpread(_objectSpread({
   text: {
     primary: _onyxTokens.astroTokensDark.color.font.base,
     secondary: _onyxTokens.astroTokensDark.color.font.light,
+    error: _onyxTokens.astroTokensDark.color.font.error,
     message: 'white',
     fieldHelper: _onyxTokens.astroTokensDark.color.gray[400]
   },

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/icons.d.ts

@@ -40,6 +40,8 @@ declare const _default: {
     SuccessCircle: string;
     userExperienceIcon: string;
     WarningIcon: string;
+    CameraOutlineIcon: string;
+    ImageOutlineIcon: string;
     helpHint: string;
     ModalCloseIcon: string;
 };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts

@@ -43,6 +43,8 @@ export declare const nextGenDarkThemeValues: {
         SuccessCircle: string;
         userExperienceIcon: string;
         WarningIcon: string;
+        CameraOutlineIcon: string;
+        ImageOutlineIcon: string;
         helpHint: string;
         ModalCloseIcon: string;
     };

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

@@ -189,6 +189,19 @@ declare const buttons: {
             outline: string;
         };
     };
+    criticalLink: {
+        color: any;
+        '&.is-pressed': {
+            textDecoration: string;
+            outline: string;
+            color: string;
+        };
+        '&.is-focused': {
+            textDecoration: string;
+            color: string;
+            outline: string;
+        };
+    };
     iconButtons: {
         base: {
             path: {

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

@@ -290,6 +290,19 @@ var buttons = {
       outline: 'none'
     }
   },
+  criticalLink: {
+    color: _onyxTokens.astroTokensDark.color.red[400],
+    '&.is-pressed': {
+      textDecoration: 'underline',
+      outline: 'none',
+      color: _chromaJs["default"].mix(_onyxTokens.astroTokensDark.color.red[500], 'white', 0.45, 'rgb').hex()
+    },
+    '&.is-focused': {
+      textDecoration: 'underline',
+      color: _chromaJs["default"].mix(_onyxTokens.astroTokensDark.color.red[500], 'white', 0.3, 'rgb').hex(),
+      outline: 'none'
+    }
+  },
   iconButtons: iconButtons,
   searchNavTabLabel: searchNavTabLabel,
   modalCloseButton: modalCloseButton,

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

@@ -762,5 +762,13 @@ declare const _default: {
             };
         };
     };
+    imageUpload: {
+        button: {
+            background: string;
+        };
+        noImagePreview: {
+            color: string;
+        };
+    };
 };
 export default _default;

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

@@ -272,7 +272,7 @@ var _default = exports["default"] = {
         color: 'text.fieldHelper'
       },
       '&.is-error': {
-        color: 'critical.bright'
+        color: 'text.error'
       },
       '&.is-warning': {
         color: 'warning.bright'
@@ -302,5 +302,13 @@ var _default = exports["default"] = {
         backgroundColor: '#2C323A'
       }
     }
+  },
+  imageUpload: {
+    button: {
+      background: 'transparent'
+    },
+    noImagePreview: {
+      color: "".concat(_onyxTokens.astroTokensDark.color.gray[100], " !important")
+    }
   }
 };

package/lib/cjs/styles/themeOverrides/onyxSideNav.d.ts

@@ -318,6 +318,8 @@ declare const _default: {
         SuccessCircle: string;
         userExperienceIcon: string;
         WarningIcon: string;
+        CameraOutlineIcon: string;
+        ImageOutlineIcon: string;
         helpHint: string;
         ModalCloseIcon: string;
     };

package/lib/cjs/styles/themes/astro/customProperties/icons.d.ts

@@ -41,6 +41,8 @@ declare const _default: {
     SuccessCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
     userExperienceIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
     WarningIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+    CameraOutlineIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+    ImageOutlineIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
     helpHint: () => import("react/jsx-runtime").JSX.Element;
     ModalCloseIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
 };

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

@@ -20,6 +20,7 @@ var _AlertOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertO
 var _ApplicationOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ApplicationOutlineIcon"));
 var _ArrowDownIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowDownIcon"));
 var _ArrowUpIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowUpIcon"));
+var _CameraAltIcon = _interopRequireDefault(require("@pingux/mdi-react/CameraAltIcon"));
 var _ChatIcon = _interopRequireDefault(require("@pingux/mdi-react/ChatIcon"));
 var _CheckboxBlankCircleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckboxBlankCircleOutlineIcon"));
 var _CheckCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCircleIcon"));
@@ -34,6 +35,7 @@ var _EmoticonHappyOutlineIcon = _interopRequireDefault(require("@pingux/mdi-reac
 var _FingerprintIcon = _interopRequireDefault(require("@pingux/mdi-react/FingerprintIcon"));
 var _GlobeIcon = _interopRequireDefault(require("@pingux/mdi-react/GlobeIcon"));
 var _HomeIcon = _interopRequireDefault(require("@pingux/mdi-react/HomeIcon"));
+var _ImageFilterHdrIcon = _interopRequireDefault(require("@pingux/mdi-react/ImageFilterHdrIcon"));
 var _InformationIcon = _interopRequireDefault(require("@pingux/mdi-react/InformationIcon"));
 var _InformationOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/InformationOutlineIcon"));
 var _KeyChainVariantIcon = _interopRequireDefault(require("@pingux/mdi-react/KeyChainVariantIcon"));
@@ -73,4 +75,4 @@ var HelpIcon = function HelpIcon() {
     fill: "#3B4A58"
   }));
 };
-var _default = exports["default"] = (_statuses$DEFAULT$sta = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, _statuses["default"].DEFAULT, _InformationIcon["default"]), _statuses["default"].ERROR, _AlertCircleIcon["default"]), _statuses["default"].SUCCESS, _CheckCircleIcon["default"]), _statuses["default"].WARNING, _AlertIcon["default"]), _statuses.statusIcon.CRITICAL, _AlertCircleOutlineIcon["default"]), _statuses.statusIcon.FATAL, _CloseOctagonOutlineIcon["default"]), _statuses.statusIcon.INFO, _InformationOutlineIcon["default"]), _statuses.statusIcon.MAJOR, _ArrowUpIcon["default"]), _statuses.statusIcon.MINOR, _ArrowDownIcon["default"]), _statuses.statusIcon.WARNING_NEUTRAL, _AlertOutlineIcon["default"]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "aic", _navBarIcons.Aic), "applicationsIcon", _ApplicationOutlineIcon["default"]), "Ascending", _MenuUpIcon["default"]), "authenticationIcon", _CheckCircleOutlineIcon["default"]), "clipboard", _ClipboardIcon["default"]), "CreateIcon", _CreateIcon["default"]), "daVinci", _navBarIcons.DaVinci), "DefaultCircle", _CheckboxBlankCircleOutlineIcon["default"]), "Descending", _MenuDownIcon["default"]), "popoverMenuIcon", _MoreVertIcon["default"]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "ErrorCircle", _AlertCircleIcon["default"]), "integrationsIcon", _ConnectionIcon["default"]), "listViewMenu", _MoreVertIcon["default"]), "mdiAccountCog", _AccountCogIcon["default"]), "mdiAccountMultiple", _AccountMultipleIcon["default"]), "mdiEarth", _EarthIcon["default"]), "mdiEmoticonHappyOutline", _EmoticonHappyOutlineIcon["default"]), "mdiFingerprint", _FingerprintIcon["default"]), "mdiPlayCircleIcon", _PlayCircleIcon["default"]), "mdiScaleBalance", _ScaleBalanceIcon["default"]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "mdiShoCard", _navBarIcons.Credentials), "mdiTransitConnectionVariant", _TransitConnectionVariantIcon["default"]), "mdiViewDashboard", _ViewDashboardIcon["default"]), "mdiWeb", _GlobeIcon["default"]), "MenuDown", _MenuDownIcon["default"]), "MenuUp", _MenuUpIcon["default"]), "monitoringIcon", _PulseIcon["default"]), "openInNew", _OpenInNewIcon["default"]), "overviewIcon", _WebIcon["default"]), "p1verify", _navBarIcons.Verify), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "pam", _navBarIcons.PamIcon), "PingAuthorize", _KeyChainVariantIcon["default"]), "HomeIcon", _HomeIcon["default"]), "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmallWhite), "protect", _navBarIcons.Protect), "rocketLaunchIcon", _RocketLaunchIcon["default"]), "shareFeedbackIcon", _ChatIcon["default"]), "shieldStar", _ShieldStarOutlineIcon["default"]), "SuccessCircle", _CheckCircleIcon["default"]), "userExperienceIcon", _MonitorScreenshotIcon["default"]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "WarningIcon", _AlertOutlineIcon["default"]), "helpHint", HelpIcon), "ModalCloseIcon", _CloseIcon["default"]));
+var _default = exports["default"] = (_statuses$DEFAULT$sta = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, _statuses["default"].DEFAULT, _InformationIcon["default"]), _statuses["default"].ERROR, _AlertCircleIcon["default"]), _statuses["default"].SUCCESS, _CheckCircleIcon["default"]), _statuses["default"].WARNING, _AlertIcon["default"]), _statuses.statusIcon.CRITICAL, _AlertCircleOutlineIcon["default"]), _statuses.statusIcon.FATAL, _CloseOctagonOutlineIcon["default"]), _statuses.statusIcon.INFO, _InformationOutlineIcon["default"]), _statuses.statusIcon.MAJOR, _ArrowUpIcon["default"]), _statuses.statusIcon.MINOR, _ArrowDownIcon["default"]), _statuses.statusIcon.WARNING_NEUTRAL, _AlertOutlineIcon["default"]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "aic", _navBarIcons.Aic), "applicationsIcon", _ApplicationOutlineIcon["default"]), "Ascending", _MenuUpIcon["default"]), "authenticationIcon", _CheckCircleOutlineIcon["default"]), "clipboard", _ClipboardIcon["default"]), "CreateIcon", _CreateIcon["default"]), "daVinci", _navBarIcons.DaVinci), "DefaultCircle", _CheckboxBlankCircleOutlineIcon["default"]), "Descending", _MenuDownIcon["default"]), "popoverMenuIcon", _MoreVertIcon["default"]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "ErrorCircle", _AlertCircleIcon["default"]), "integrationsIcon", _ConnectionIcon["default"]), "listViewMenu", _MoreVertIcon["default"]), "mdiAccountCog", _AccountCogIcon["default"]), "mdiAccountMultiple", _AccountMultipleIcon["default"]), "mdiEarth", _EarthIcon["default"]), "mdiEmoticonHappyOutline", _EmoticonHappyOutlineIcon["default"]), "mdiFingerprint", _FingerprintIcon["default"]), "mdiPlayCircleIcon", _PlayCircleIcon["default"]), "mdiScaleBalance", _ScaleBalanceIcon["default"]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "mdiShoCard", _navBarIcons.Credentials), "mdiTransitConnectionVariant", _TransitConnectionVariantIcon["default"]), "mdiViewDashboard", _ViewDashboardIcon["default"]), "mdiWeb", _GlobeIcon["default"]), "MenuDown", _MenuDownIcon["default"]), "MenuUp", _MenuUpIcon["default"]), "monitoringIcon", _PulseIcon["default"]), "openInNew", _OpenInNewIcon["default"]), "overviewIcon", _WebIcon["default"]), "p1verify", _navBarIcons.Verify), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "pam", _navBarIcons.PamIcon), "PingAuthorize", _KeyChainVariantIcon["default"]), "HomeIcon", _HomeIcon["default"]), "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmallWhite), "protect", _navBarIcons.Protect), "rocketLaunchIcon", _RocketLaunchIcon["default"]), "shareFeedbackIcon", _ChatIcon["default"]), "shieldStar", _ShieldStarOutlineIcon["default"]), "SuccessCircle", _CheckCircleIcon["default"]), "userExperienceIcon", _MonitorScreenshotIcon["default"]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_statuses$DEFAULT$sta, "WarningIcon", _AlertOutlineIcon["default"]), "CameraOutlineIcon", _CameraAltIcon["default"]), "ImageOutlineIcon", _ImageFilterHdrIcon["default"]), "helpHint", HelpIcon), "ModalCloseIcon", _CloseIcon["default"]));

package/lib/cjs/styles/themes/astro/customProperties/index.d.ts

@@ -52,6 +52,8 @@ export declare const astroThemeValues: {
         SuccessCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
         userExperienceIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
         WarningIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        CameraOutlineIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        ImageOutlineIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
         helpHint: () => import("react/jsx-runtime").JSX.Element;
         ModalCloseIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
     };

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

@@ -50,6 +50,7 @@ declare const colors: {
     text: {
         primary: any;
         secondary: any;
+        error: any;
         message: any;
         fieldHelper: any;
     };

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

@@ -94,6 +94,7 @@ var info = exports.info = {
 var text = {
   primary: _onyxTokens.astroTokens.color.font.base,
   secondary: _onyxTokens.astroTokens.color.font.light,
+  error: _onyxTokens.astroTokens.color.font.error,
   message: _onyxTokens.astroTokens.color.gray[700],
   fieldHelper: _onyxTokens.astroTokens.color.font.light
 };

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

@@ -41,6 +41,8 @@ declare const icons: {
     SuccessCircle: string;
     userExperienceIcon: string;
     WarningIcon: string;
+    CameraOutlineIcon: string;
+    ImageOutlineIcon: string;
     helpHint: string;
     ModalCloseIcon: string;
 };

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

@@ -20,5 +20,5 @@ var _statuses = _interopRequireWildcard(require("../../../../utils/devUtils/cons
 var _navBarIcons = require("../../astro/customProperties/navBarIcons");
 var _icons;
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var icons = (_icons = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, _statuses["default"].DEFAULT, 'info'), _statuses["default"].ERROR, 'error'), _statuses["default"].SUCCESS, 'check_circle'), _statuses["default"].WARNING, 'warning'), _statuses.statusIcon.CRITICAL, 'error'), _statuses.statusIcon.FATAL, 'dangerous'), _statuses.statusIcon.INFO, 'info'), _statuses.statusIcon.MAJOR, 'arrow_upward'), _statuses.statusIcon.MINOR, 'arrow_downward'), _statuses.statusIcon.WARNING_NEUTRAL, 'warning'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "aic", _navBarIcons.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'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "ErrorCircle", 'error'), "HomeIcon", 'home'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", _SettingsOutlineIcon["default"]), "mdiEmoticonHappyOutline", _EmoticonHappyOutlineIcon["default"]), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "mdiScaleBalance", 'balance'), "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", _TransitConnectionVariantIcon["default"]), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuUp", 'keyboard_arrow_up'), "monitoringIcon", _ShowChartIcon["default"]), "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "p1verify", 'person_check'), "pam", _navBarIcons.PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmall), "protect", _navBarIcons.Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", _ShieldStarOutlineIcon["default"]), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "WarningIcon", 'warning'), "helpHint", 'help_outline'), "ModalCloseIcon", 'close'));
+var icons = (_icons = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, _statuses["default"].DEFAULT, 'info'), _statuses["default"].ERROR, 'error'), _statuses["default"].SUCCESS, 'check_circle'), _statuses["default"].WARNING, 'warning'), _statuses.statusIcon.CRITICAL, 'error'), _statuses.statusIcon.FATAL, 'dangerous'), _statuses.statusIcon.INFO, 'info'), _statuses.statusIcon.MAJOR, 'arrow_upward'), _statuses.statusIcon.MINOR, 'arrow_downward'), _statuses.statusIcon.WARNING_NEUTRAL, 'warning'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "aic", _navBarIcons.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'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "ErrorCircle", 'error'), "HomeIcon", 'home'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", _SettingsOutlineIcon["default"]), "mdiEmoticonHappyOutline", _EmoticonHappyOutlineIcon["default"]), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "mdiScaleBalance", 'balance'), "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", _TransitConnectionVariantIcon["default"]), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuUp", 'keyboard_arrow_up'), "monitoringIcon", _ShowChartIcon["default"]), "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "p1verify", 'person_check'), "pam", _navBarIcons.PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmall), "protect", _navBarIcons.Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", _ShieldStarOutlineIcon["default"]), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "WarningIcon", 'warning'), "CameraOutlineIcon", 'photo_camera'), "ImageOutlineIcon", 'image'), "helpHint", 'help_outline'), "ModalCloseIcon", 'close'));
 var _default = exports["default"] = icons;

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

@@ -67,6 +67,8 @@ export declare const nextGenThemeValues: {
         SuccessCircle: string;
         userExperienceIcon: string;
         WarningIcon: string;
+        CameraOutlineIcon: string;
+        ImageOutlineIcon: string;
         helpHint: string;
         ModalCloseIcon: string;
     };

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

@@ -33,6 +33,7 @@ declare const _default: {
         text: {
             primary: any;
             secondary: any;
+            error: any;
             message: any;
             fieldHelper: any;
         };
@@ -793,6 +794,22 @@ declare const _default: {
                 outline: string;
             };
         };
+        criticalLink: {
+            color: string;
+            '&.is-pressed': {
+                textDecoration: string;
+                outline: string;
+            };
+            transition: string;
+            fontSize: string;
+            textDecoration: string;
+            px: string;
+            py: string;
+            '&.is-focused': {
+                textDecoration: string;
+                outline: string;
+            };
+        };
         listBoxLink: {
             color: string;
             transition: string;
@@ -3226,6 +3243,8 @@ declare const _default: {
         SuccessCircle: string;
         userExperienceIcon: string;
         WarningIcon: string;
+        CameraOutlineIcon: string;
+        ImageOutlineIcon: string;
         helpHint: string;
         ModalCloseIcon: string;
     };
@@ -6942,6 +6961,21 @@ declare const _default: {
                 };
             };
         };
+        imageUpload: {
+            button: {
+                border: string;
+                borderColor: string;
+                backgroundColor: string;
+            };
+            noImagePreview: {
+                color: string;
+            };
+            hoveredPreview: {
+                shaded: {
+                    opacity: number;
+                };
+            };
+        };
     };
     images: {
         avatar: {};

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

@@ -490,6 +490,22 @@ declare const buttons: {
             outline: string;
         };
     };
+    criticalLink: {
+        color: string;
+        '&.is-pressed': {
+            textDecoration: string;
+            outline: string;
+        };
+        transition: string;
+        fontSize: string;
+        textDecoration: string;
+        px: string;
+        py: string;
+        '&.is-focused': {
+            textDecoration: string;
+            outline: string;
+        };
+    };
     listBoxLink: {
         color: string;
         transition: string;

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

@@ -249,6 +249,13 @@ var link = {
     outline: 'none'
   }
 };
+var criticalLink = _objectSpread(_objectSpread({}, link), {}, {
+  color: 'critical.bright',
+  '&.is-pressed': {
+    textDecoration: 'underline',
+    outline: 'none'
+  }
+});
 var selectLink = _objectSpread(_objectSpread({}, link), {}, {
   textDecoration: 'none',
   px: '0',
@@ -628,6 +635,7 @@ var buttons = {
   searchNavTabLabel: searchNavTabLabel,
   outlineCritical: outlineCritical,
   link: link,
+  criticalLink: criticalLink,
   listBoxLink: listBoxLink,
   withIcon: withIcon,
   primaryWithIcon: primaryWithIcon,

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

@@ -2247,5 +2247,20 @@ declare const _default: {
             };
         };
     };
+    imageUpload: {
+        button: {
+            border: string;
+            borderColor: string;
+            backgroundColor: string;
+        };
+        noImagePreview: {
+            color: string;
+        };
+        hoveredPreview: {
+            shaded: {
+                opacity: number;
+            };
+        };
+    };
 };
 export default _default;

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

@@ -60,7 +60,7 @@ var fieldHelperText = {
       color: 'text.fieldHelper'
     },
     '&.is-error': {
-      color: 'critical.dark'
+      color: 'text.error'
     },
     '&.is-warning': {
       color: 'warning.bright'
@@ -440,6 +440,21 @@ var statusIcon = {
     }
   }
 };
+var imageUpload = {
+  button: {
+    border: '1px solid',
+    borderColor: 'common.border',
+    backgroundColor: 'gray-100'
+  },
+  noImagePreview: {
+    color: "".concat(_onyxTokens.astroTokens.color.gray[900], " !important")
+  },
+  hoveredPreview: {
+    shaded: {
+      opacity: 0.5
+    }
+  }
+};
 var _default = exports["default"] = {
   accordion: _accordion["default"],
   accordionGrid: _accordionGrid["default"],
@@ -486,5 +501,6 @@ var _default = exports["default"] = {
   table: _table.table,
   tableBase: _tableBase.tableBase,
   tabs: _tabs.tabs,
-  tooltip: _tooltip["default"]
+  tooltip: _tooltip["default"],
+  imageUpload: imageUpload
 };

package/lib/components/Button/Button.stories.js

@@ -68,6 +68,11 @@ Critical.parameters = {
     url: FIGMA_LINKS.button.critical
   }
 };
+export var CriticalLink = function CriticalLink(args) {
+  return ___EmotionJSX(Button, _extends({}, args, {
+    variant: "criticalLink"
+  }), "Button Text");
+};
 export var InlineButton = function InlineButton(args) {
   return ___EmotionJSX(Box, null, ___EmotionJSX(Button, _extends({}, args, {
     mb: "sm",

package/lib/components/Button/Buttons.styles.js

@@ -174,6 +174,9 @@ export var link = _objectSpread(_objectSpread({}, text), {}, {
   },
   '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
+export var criticalLink = _objectSpread(_objectSpread({}, link), {}, {
+  color: 'critical.bright'
+});
 export var selectLink = _objectSpread(_objectSpread({}, link), {}, {
   textDecoration: 'none',
   '&.is-hovered': {
@@ -329,6 +332,7 @@ export default {
   inlinePrimaryWithIcon: inlinePrimaryWithIcon,
   inlineWithIcon: inlineWithIcon,
   link: link,
+  criticalLink: criticalLink,
   listBoxLink: listBoxLink,
   paginationMenu: paginationMenu,
   primary: primary,

package/lib/components/Button/buttonAttributes.js

@@ -14,7 +14,7 @@ import { booleanArg } from '../../utils/docUtils/docArgTypes';
 import { onHoverArgTypes } from '../../utils/docUtils/hoverProps';
 import { onPressArgTypes } from '../../utils/docUtils/pressAttributes';
 // add designer approved variants for devs to use here
-var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
+var variantOptions = ['critical', 'criticalLink', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
 var descriptions = {
   children: 'Button text.',
   isDisabled: 'Whether the button is disabled.',

package/lib/components/ImageUploadField/ImagePreviewButton.js

@@ -3,10 +3,9 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["defaultPreviewImage", "defaultPreviewNode", "isImageType", "isLoading", "loaderSize", "isMenuOpen", "previewImage", "previewWidth", "widthHeightSx"];
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
-import CameraAltIcon from '@pingux/mdi-react/CameraAltIcon';
-import ImageFilterHdrIcon from '@pingux/mdi-react/ImageFilterHdrIcon';
 import { useHover } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
+import { useGetTheme } from '../../hooks';
 import { Box, Button, Icon, Image } from '../../index';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -32,9 +31,13 @@ var ImagePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useHover = useHover(props),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  var ImageOutlineIcon = icons.ImageOutlineIcon,
+    CameraOutlineIcon = icons.CameraOutlineIcon;
   var noImagePreview = defaultPreviewNode || ___EmotionJSX(Icon, {
-    icon: ImageFilterHdrIcon,
-    color: "neutral.60",
+    icon: ImageOutlineIcon,
+    variant: "imageUpload.noImagePreview",
     size: 24,
     "data-testid": "image-upload-no-image-preview",
     title: {
@@ -70,7 +73,7 @@ var ImagePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: widthHeightSx,
     "data-testid": "image-upload-hovered-preview"
   }, ___EmotionJSX(Icon, {
-    icon: CameraAltIcon,
+    icon: CameraOutlineIcon,
     color: isFocusVisible || isMenuOpen ? 'active' : 'white',
     size: 24,
     sx: {

package/lib/components/ImageUploadField/imageUpload.js

@@ -26,6 +26,9 @@ var hoveredPreview = {
     borderRadius: 2
   }
 };
+var noImagePreview = {
+  fill: '#98a0a8 !important'
+};
 var button = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
   alignItems: 'center',
@@ -40,5 +43,6 @@ var button = _objectSpread(_objectSpread({}, base), {}, {
 });
 export default {
   hoveredPreview: hoveredPreview,
-  button: button
+  button: button,
+  noImagePreview: noImagePreview
 };

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

@@ -146,6 +146,7 @@ export var colors = _objectSpread(_objectSpread({
   text: {
     primary: astroTokensDark.color.font.base,
     secondary: astroTokensDark.color.font.light,
+    error: astroTokensDark.color.font.error,
     message: 'white',
     fieldHelper: astroTokensDark.color.gray[400]
   },

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

@@ -283,6 +283,19 @@ var buttons = {
       outline: 'none'
     }
   },
+  criticalLink: {
+    color: astroTokensDark.color.red[400],
+    '&.is-pressed': {
+      textDecoration: 'underline',
+      outline: 'none',
+      color: chroma.mix(astroTokensDark.color.red[500], 'white', 0.45, 'rgb').hex()
+    },
+    '&.is-focused': {
+      textDecoration: 'underline',
+      color: chroma.mix(astroTokensDark.color.red[500], 'white', 0.3, 'rgb').hex(),
+      outline: 'none'
+    }
+  },
   iconButtons: iconButtons,
   searchNavTabLabel: searchNavTabLabel,
   modalCloseButton: modalCloseButton,

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

@@ -264,7 +264,7 @@ export default {
         color: 'text.fieldHelper'
       },
       '&.is-error': {
-        color: 'critical.bright'
+        color: 'text.error'
       },
       '&.is-warning': {
         color: 'warning.bright'
@@ -294,5 +294,13 @@ export default {
         backgroundColor: '#2C323A'
       }
     }
+  },
+  imageUpload: {
+    button: {
+      background: 'transparent'
+    },
+    noImagePreview: {
+      color: "".concat(astroTokensDark.color.gray[100], " !important")
+    }
   }
 };

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

@@ -10,6 +10,7 @@ import WarningIcon from '@pingux/mdi-react/AlertOutlineIcon';
 import ApplicationOutlineIcon from '@pingux/mdi-react/ApplicationOutlineIcon';
 import ArrowDownIcon from '@pingux/mdi-react/ArrowDownIcon';
 import ArrowUpIcon from '@pingux/mdi-react/ArrowUpIcon';
+import CameraAltIcon from '@pingux/mdi-react/CameraAltIcon';
 import ChatIcon from '@pingux/mdi-react/ChatIcon';
 import DefaultCircle from '@pingux/mdi-react/CheckboxBlankCircleOutlineIcon';
 import CheckCircleIcon from '@pingux/mdi-react/CheckCircleIcon';
@@ -24,6 +25,7 @@ import EmoticonHappy from '@pingux/mdi-react/EmoticonHappyOutlineIcon';
 import Fingerprint from '@pingux/mdi-react/FingerprintIcon';
 import GlobeIcon from '@pingux/mdi-react/GlobeIcon';
 import HomeIcon from '@pingux/mdi-react/HomeIcon';
+import ImageFilterHdrIcon from '@pingux/mdi-react/ImageFilterHdrIcon';
 import InformationIcon from '@pingux/mdi-react/InformationIcon';
 import InformationOutlineIcon from '@pingux/mdi-react/InformationOutlineIcon';
 import KeyChainVariant from '@pingux/mdi-react/KeyChainVariantIcon';
@@ -61,4 +63,4 @@ var HelpIcon = function HelpIcon() {
     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));
+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(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "WarningIcon", WarningIcon), "CameraOutlineIcon", CameraAltIcon), "ImageOutlineIcon", ImageFilterHdrIcon), "helpHint", HelpIcon), "ModalCloseIcon", CloseIcon));

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

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

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(_defineProperty(_defineProperty(_icons, "WarningIcon", 'warning'), "helpHint", 'help_outline'), "ModalCloseIcon", 'close'));
+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(_defineProperty(_defineProperty(_icons, "WarningIcon", 'warning'), "CameraOutlineIcon", 'photo_camera'), "ImageOutlineIcon", 'image'), "helpHint", 'help_outline'), "ModalCloseIcon", 'close'));
 export default icons;

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

@@ -242,6 +242,13 @@ var link = {
     outline: 'none'
   }
 };
+var criticalLink = _objectSpread(_objectSpread({}, link), {}, {
+  color: 'critical.bright',
+  '&.is-pressed': {
+    textDecoration: 'underline',
+    outline: 'none'
+  }
+});
 var selectLink = _objectSpread(_objectSpread({}, link), {}, {
   textDecoration: 'none',
   px: '0',
@@ -621,6 +628,7 @@ var buttons = {
   searchNavTabLabel: searchNavTabLabel,
   outlineCritical: outlineCritical,
   link: link,
+  criticalLink: criticalLink,
   listBoxLink: listBoxLink,
   withIcon: withIcon,
   primaryWithIcon: primaryWithIcon,

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

@@ -50,7 +50,7 @@ var fieldHelperText = {
       color: 'text.fieldHelper'
     },
     '&.is-error': {
-      color: 'critical.dark'
+      color: 'text.error'
     },
     '&.is-warning': {
       color: 'warning.bright'
@@ -430,6 +430,21 @@ var statusIcon = {
     }
   }
 };
+var imageUpload = {
+  button: {
+    border: '1px solid',
+    borderColor: 'common.border',
+    backgroundColor: 'gray-100'
+  },
+  noImagePreview: {
+    color: "".concat(astroTokens.color.gray[900], " !important")
+  },
+  hoveredPreview: {
+    shaded: {
+      opacity: 0.5
+    }
+  }
+};
 export default {
   accordion: accordion,
   accordionGrid: accordionGrid,
@@ -476,5 +491,6 @@ export default {
   table: table,
   tableBase: tableBase,
   tabs: tabs,
-  tooltip: tooltip
+  tooltip: tooltip,
+  imageUpload: imageUpload
 };

package/package.json

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