@pingux/astro 2.177.2 → 2.177.6-alpha.0

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

@@ -78,7 +78,17 @@ var iconButtons = {
     '&.is-hovered': {
       backgroundColor: _onyxTokens.astroTokensDark.color.gray.light
     }
-  })
+  }),
+  tooltip: {
+    button: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+      '&.is-hovered': {
+        path: {
+          fill: _onyxTokens.astroTokensDark.color.gray[400]
+        },
+        backgroundColor: _onyxTokens.astroTokensDark.color.common.light
+      }
+    })
+  }
 };
 var searchNavTabLabel = {
   color: _onyxTokens.astroTokensDark.color.gray[400],

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

@@ -122,7 +122,10 @@ var attachment = {
 };
 var tooltip = {
   inline: {
-    color: _onyxTokens.astroTokensDark.color.blue[400]
+    color: _onyxTokens.astroTokensDark.color.font.link,
+    '&.is-hovered': {
+      color: _onyxTokens.astroTokensDark.color.blue[300]
+    }
   }
 };
 var statusIcon = {

package/lib/cjs/styles/themeOverrides/uiLibraryOverride.js

@@ -182,6 +182,7 @@ var variants = {
   },
   navBar: {
     sectionButton: _objectSpread(_objectSpread({}, _theme["default"].variants.navBar.sectionButton), {}, {
+      fontFamily: '"Helvetica Neue", Helvetica, sans-serif !important',
       height: 'unset',
       fontWeight: '500',
       minHeight: '36px',
@@ -193,6 +194,7 @@ var variants = {
     itemButton: _objectSpread(_objectSpread({
       height: 'unset'
     }, _theme["default"].variants.navBar.itemButton), {}, {
+      fontFamily: '"Helvetica Neue", Helvetica, sans-serif !important',
       fontWeight: '500',
       '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].variants.navBar.itemButton), {}, {
         fontWeight: '500'

package/lib/cjs/styles/themeOverrides/withUiLibraryCss.js

@@ -16,7 +16,16 @@ var _themeUi = require("theme-ui");
 var _theme = _interopRequireDefault(require("../theme"));
 var _uiLibraryOverride = _interopRequireDefault(require("./uiLibraryOverride"));
 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); }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 var UI_LIBRARY_CSS_LINK = 'https://assets.pingone.com/ux/ui-library/5.0.2/css/ui-library.css';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "u0lwwy",
+  styles: "body{font-family:\"Helvetica Neue\",Helvetica,sans-serif!important;}"
+} : {
+  name: "1lthfkl-WithUiLibraryCss",
+  styles: "body{font-family:\"Helvetica Neue\",Helvetica,sans-serif!important;};label:WithUiLibraryCss;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYXN0cm8vc3JjL3N0eWxlcy90aGVtZU92ZXJyaWRlcy93aXRoVWlMaWJyYXJ5Q3NzLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0Qm1CIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYXN0cm8vc3JjL3N0eWxlcy90aGVtZU92ZXJyaWRlcy93aXRoVWlMaWJyYXJ5Q3NzLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MsIEdsb2JhbCwgVGhlbWVQcm92aWRlciB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IG1lcmdlIH0gZnJvbSAndGhlbWUtdWknO1xuXG5pbXBvcnQgYXN0cm9UaGVtZSBmcm9tICcuLi90aGVtZSc7XG5cbmltcG9ydCB1aUxpYnJhcnlPdmVycmlkZSBmcm9tICcuL3VpTGlicmFyeU92ZXJyaWRlJztcblxuY29uc3QgVUlfTElCUkFSWV9DU1NfTElOSyA9ICdodHRwczovL2Fzc2V0cy5waW5nb25lLmNvbS91eC91aS1saWJyYXJ5LzUuMC4yL2Nzcy91aS1saWJyYXJ5LmNzcyc7XG5cbmNvbnN0IFdpdGhVaUxpYnJhcnlDc3MgPSBTdG9yeSA9PiB7XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgdWlMaWJyYXJ5Q3NzID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnbGluaycpO1xuICAgIHVpTGlicmFyeUNzcy5yZWwgPSAnc3R5bGVzaGVldCc7XG4gICAgdWlMaWJyYXJ5Q3NzLmNsYXNzTmFtZSA9ICd1aUxpYnJhcnlDc3NMaW5rJztcbiAgICB1aUxpYnJhcnlDc3MuaHJlZiA9IFVJX0xJQlJBUllfQ1NTX0xJTks7XG4gICAgZG9jdW1lbnQuZ2V0RWxlbWVudHNCeVRhZ05hbWUoJ2hlYWQnKVswXS5hcHBlbmRDaGlsZCh1aUxpYnJhcnlDc3MpO1xuXG4gICAgcmV0dXJuICgpID0+IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoJy51aUxpYnJhcnlDc3NMaW5rJykuZm9yRWFjaChsaW5rID0+IHtcbiAgICAgIGxpbmsucmVtb3ZlKCk7XG4gICAgfSk7XG4gIH0sIFtdKTtcblxuICBjb25zdCB0aGVtZSA9IG1lcmdlKGFzdHJvVGhlbWUsIHVpTGlicmFyeU92ZXJyaWRlKTtcblxuICByZXR1cm4gKFxuICAgIDxUaGVtZVByb3ZpZGVyIHRoZW1lPXt0aGVtZX0+XG4gICAgICA8R2xvYmFsXG4gICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgZm9udC1mYW1pbHk6IFwiSGVsdmV0aWNhIE5ldWVcIiwgSGVsdmV0aWNhLCBzYW5zLXNlcmlmICFpbXBvcnRhbnQ7XG4gICAgICAgICAgfVxuICAgICAgICBgfVxuICAgICAgLz5cbiAgICAgIDxTdG9yeSAvPlxuICAgIDwvVGhlbWVQcm92aWRlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFdpdGhVaUxpYnJhcnlDc3M7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var WithUiLibraryCss = function WithUiLibraryCss(Story) {
   (0, _react.useEffect)(function () {
     var uiLibraryCss = document.createElement('link');
@@ -34,6 +43,8 @@ var WithUiLibraryCss = function WithUiLibraryCss(Story) {
   var theme = (0, _themeUi.merge)(_theme["default"], _uiLibraryOverride["default"]);
   return (0, _react2.jsx)(_react2.ThemeProvider, {
     theme: theme
-  }, (0, _react2.jsx)(Story, null));
+  }, (0, _react2.jsx)(_react2.Global, {
+    styles: _ref
+  }), (0, _react2.jsx)(Story, null));
 };
 var _default = exports["default"] = WithUiLibraryCss;

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

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

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

@@ -542,7 +542,17 @@ var iconButtons = {
       outlineOffset: '2px',
       outlineColor: _onyxTokens.astroTokens.color.gray[700]
     }
-  })
+  }),
+  tooltip: {
+    button: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+      '&.is-hovered': {
+        path: {
+          fill: 'dark'
+        },
+        backgroundColor: _onyxTokens.astroTokens.color.common.light
+      }
+    })
+  }
 };
 var listBoxLink = {
   color: 'active',

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

@@ -5,14 +5,31 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _onyxTokens = require("@pingux/onyx-tokens");
 var container = {
-  minWidth: '150px',
   transition: 'opacity 200ms ease',
   '&.animate': {
     opacity: 0
   },
   '&.animate.is-mounted.is-transitioning': {
     opacity: '100%'
+  },
+  '&.is-dark-mode': {
+    color: 'white',
+    alignItems: 'center',
+    bg: _onyxTokens.astroTokens.color.tooltip.container.bg,
+    '&[data-popover-placement^=top] > [data-popover-arrow="arrow"]:before': {
+      borderTopColor: _onyxTokens.astroTokens.color.tooltip.container.bg
+    },
+    '&[data-popover-placement^=bottom] > [data-popover-arrow="arrow"]:before': {
+      borderBottomColor: _onyxTokens.astroTokens.color.tooltip.container.bg
+    },
+    '&[data-popover-placement^=left] > [data-popover-arrow="arrow"]:before': {
+      borderLeftColor: _onyxTokens.astroTokens.color.tooltip.container.bg
+    },
+    '&[data-popover-placement^=right] > [data-popover-arrow="arrow"]:before': {
+      borderRightColor: _onyxTokens.astroTokens.color.tooltip.container.bg
+    }
   }
 };
 var arrow = {

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

@@ -1,16 +1,53 @@
 "use strict";
 
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _onyxTokens = require("@pingux/onyx-tokens");
+var _button = require("./button");
+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 container = {
-  backgroundColor: 'tooltip',
+  backgroundColor: _onyxTokens.astroTokens.color.tooltip.container.bg,
+  borderRadius: '3px',
+  fontSize: 'sm',
+  fontFamily: 'standard',
+  lineHeight: 'body',
+  p: '0',
+  px: 'sm',
+  py: 'xs'
+};
+var badge = {
   borderRadius: '4px',
-  fontSize: 'xs',
-  fontFamily: 'standard'
+  position: 'relative',
+  '&.is-focused:before': {
+    position: 'absolute',
+    content: '""',
+    width: '100%',
+    height: '100%',
+    padding: '2px',
+    borderRadius: '2px',
+    border: '1px solid',
+    borderColor: 'focus'
+  }
+};
+var inline = {
+  color: _onyxTokens.astroTokens.color.font.base,
+  '&.is-focused': _objectSpread({}, _button.defaultFocus)
 };
 var _default = exports["default"] = {
-  container: container
+  container: container,
+  badge: badge,
+  inline: inline
 };

package/lib/components/TooltipTrigger/Tooltip.js

@@ -16,8 +16,7 @@ var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
   var tooltipRef = useLocalOrForwardRef(ref);
   return ___EmotionJSX(Text, _extends({
     ref: tooltipRef,
-    variant: "variants.tooltip.container",
-    p: "sm"
+    variant: "variants.tooltip.container"
   }, tooltipProps, others), children);
 });
 export default Tooltip;

package/lib/components/TooltipTrigger/Tooltip.styles.js

@@ -16,6 +16,7 @@ export var container = {
   overflow: 'visible',
   wordBreak: 'break-word',
   display: 'flex',
+  p: 'sm',
   '.is-right > * > &, .is-left > * > &': {
     maxWidth: '24em',
     maxHeight: '6.5em',
@@ -37,11 +38,7 @@ var badge = _objectSpread(_objectSpread({}, baseBadge), {}, {
 export var button = {
   cursor: 'default',
   '&.is-hovered, &.is-pressed': {
-    backgroundColor: 'inherit',
-    cursor: 'default',
-    path: {
-      fill: 'neutral.20'
-    }
+    cursor: 'default'
   }
 };
 var inline = _objectSpread(_objectSpread({}, text), {}, {

package/lib/components/TooltipTrigger/TooltipTrigger.stories.js

@@ -1,8 +1,11 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _reverseInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reverse";
 import React from 'react';
-import AccountIcon from '@pingux/mdi-react/AccountIcon';
+import AccountOutlineIcon from '@pingux/mdi-react/AccountOutlineIcon';
 import Earth from '@pingux/mdi-react/EarthIcon';
+import { astroTokens, astroTokensDark } from '@pingux/onyx-tokens';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { useGetTheme } from '../../hooks';
 import { Box, Button, Icon, IconButton, Text, Tooltip, TooltipTrigger } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import TooltipTriggerReadme from './TooltipTrigger.mdx';
@@ -58,25 +61,41 @@ export var IconWithTooltip = function IconWithTooltip(args) {
   }, ___EmotionJSX(TooltipTrigger, args, ___EmotionJSX(IconButton, {
     variant: "tooltip.button"
   }, ___EmotionJSX(Icon, {
-    icon: AccountIcon,
+    icon: AccountOutlineIcon,
     title: {
       name: 'Account Icon'
     }
   })), ___EmotionJSX(Tooltip, null, "Useful tooltip")));
 };
 export var BadgeWithTooltip = function BadgeWithTooltip(args) {
+  var _useGetTheme = useGetTheme(),
+    _useGetTheme$themeSta = _useGetTheme.themeState,
+    isAstro = _useGetTheme$themeSta.isAstro,
+    isOnyxDark = _useGetTheme$themeSta.isOnyxDark;
+  var getBackground = function getBackground() {
+    if (isAstro) {
+      return 'neutral.10';
+    }
+    return isOnyxDark ? astroTokens.color.gray.light : astroTokens.color.gray.dark;
+  };
+  var getTextColor = function getTextColor() {
+    if (isAstro) {
+      return 'white';
+    }
+    return isOnyxDark ? _reverseInstanceProperty(astroTokensDark.color.font) : _reverseInstanceProperty(astroTokens.color.font);
+  };
   return ___EmotionJSX(Box, {
     pl: 50
   }, ___EmotionJSX(TooltipTrigger, args, ___EmotionJSX(Button, {
     variant: "variants.tooltip.badge",
-    bg: "neutral.10"
+    bg: getBackground()
   }, ___EmotionJSX(Text, {
     variant: "label",
-    sx: {
+    sx: isAstro ? {
       textTransform: 'uppercase'
-    },
-    color: "white"
-  }, "Some text")), ___EmotionJSX(Tooltip, {
+    } : {},
+    color: getTextColor()
+  }, "Some Text")), ___EmotionJSX(Tooltip, {
     variant: "variants.tooltip.badgeTooltipContainer"
   }, "Useful tooltip")));
 };

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

@@ -71,7 +71,17 @@ var iconButtons = {
     '&.is-hovered': {
       backgroundColor: astroTokensDark.color.gray.light
     }
-  })
+  }),
+  tooltip: {
+    button: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+      '&.is-hovered': {
+        path: {
+          fill: astroTokensDark.color.gray[400]
+        },
+        backgroundColor: astroTokensDark.color.common.light
+      }
+    })
+  }
 };
 var searchNavTabLabel = {
   color: astroTokensDark.color.gray[400],

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

@@ -114,7 +114,10 @@ var attachment = {
 };
 var tooltip = {
   inline: {
-    color: astroTokensDark.color.blue[400]
+    color: astroTokensDark.color.font.link,
+    '&.is-hovered': {
+      color: astroTokensDark.color.blue[300]
+    }
   }
 };
 var statusIcon = {

package/lib/styles/themeOverrides/uiLibraryOverride.js

@@ -175,6 +175,7 @@ var variants = {
   },
   navBar: {
     sectionButton: _objectSpread(_objectSpread({}, theme.variants.navBar.sectionButton), {}, {
+      fontFamily: '"Helvetica Neue", Helvetica, sans-serif !important',
       height: 'unset',
       fontWeight: '500',
       minHeight: '36px',
@@ -186,6 +187,7 @@ var variants = {
     itemButton: _objectSpread(_objectSpread({
       height: 'unset'
     }, theme.variants.navBar.itemButton), {}, {
+      fontFamily: '"Helvetica Neue", Helvetica, sans-serif !important',
       fontWeight: '500',
       '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.variants.navBar.itemButton), {}, {
         fontWeight: '500'

package/lib/styles/themeOverrides/withUiLibraryCss.js

@@ -1,11 +1,20 @@
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 import React, { useEffect } from 'react';
-import { ThemeProvider } from '@emotion/react';
+import { css, Global, ThemeProvider } from '@emotion/react';
 import { merge } from 'theme-ui';
 import astroTheme from '../theme';
 import uiLibraryOverride from './uiLibraryOverride';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var UI_LIBRARY_CSS_LINK = 'https://assets.pingone.com/ux/ui-library/5.0.2/css/ui-library.css';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "u0lwwy",
+  styles: "body{font-family:\"Helvetica Neue\",Helvetica,sans-serif!important;}"
+} : {
+  name: "1lthfkl-WithUiLibraryCss",
+  styles: "body{font-family:\"Helvetica Neue\",Helvetica,sans-serif!important;};label:WithUiLibraryCss;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvYXN0cm8vc3JjL3N0eWxlcy90aGVtZU92ZXJyaWRlcy93aXRoVWlMaWJyYXJ5Q3NzLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0Qm1CIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uL2xpYnMvYXN0cm8vc3JjL3N0eWxlcy90aGVtZU92ZXJyaWRlcy93aXRoVWlMaWJyYXJ5Q3NzLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MsIEdsb2JhbCwgVGhlbWVQcm92aWRlciB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IG1lcmdlIH0gZnJvbSAndGhlbWUtdWknO1xuXG5pbXBvcnQgYXN0cm9UaGVtZSBmcm9tICcuLi90aGVtZSc7XG5cbmltcG9ydCB1aUxpYnJhcnlPdmVycmlkZSBmcm9tICcuL3VpTGlicmFyeU92ZXJyaWRlJztcblxuY29uc3QgVUlfTElCUkFSWV9DU1NfTElOSyA9ICdodHRwczovL2Fzc2V0cy5waW5nb25lLmNvbS91eC91aS1saWJyYXJ5LzUuMC4yL2Nzcy91aS1saWJyYXJ5LmNzcyc7XG5cbmNvbnN0IFdpdGhVaUxpYnJhcnlDc3MgPSBTdG9yeSA9PiB7XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgdWlMaWJyYXJ5Q3NzID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnbGluaycpO1xuICAgIHVpTGlicmFyeUNzcy5yZWwgPSAnc3R5bGVzaGVldCc7XG4gICAgdWlMaWJyYXJ5Q3NzLmNsYXNzTmFtZSA9ICd1aUxpYnJhcnlDc3NMaW5rJztcbiAgICB1aUxpYnJhcnlDc3MuaHJlZiA9IFVJX0xJQlJBUllfQ1NTX0xJTks7XG4gICAgZG9jdW1lbnQuZ2V0RWxlbWVudHNCeVRhZ05hbWUoJ2hlYWQnKVswXS5hcHBlbmRDaGlsZCh1aUxpYnJhcnlDc3MpO1xuXG4gICAgcmV0dXJuICgpID0+IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoJy51aUxpYnJhcnlDc3NMaW5rJykuZm9yRWFjaChsaW5rID0+IHtcbiAgICAgIGxpbmsucmVtb3ZlKCk7XG4gICAgfSk7XG4gIH0sIFtdKTtcblxuICBjb25zdCB0aGVtZSA9IG1lcmdlKGFzdHJvVGhlbWUsIHVpTGlicmFyeU92ZXJyaWRlKTtcblxuICByZXR1cm4gKFxuICAgIDxUaGVtZVByb3ZpZGVyIHRoZW1lPXt0aGVtZX0+XG4gICAgICA8R2xvYmFsXG4gICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgZm9udC1mYW1pbHk6IFwiSGVsdmV0aWNhIE5ldWVcIiwgSGVsdmV0aWNhLCBzYW5zLXNlcmlmICFpbXBvcnRhbnQ7XG4gICAgICAgICAgfVxuICAgICAgICBgfVxuICAgICAgLz5cbiAgICAgIDxTdG9yeSAvPlxuICAgIDwvVGhlbWVQcm92aWRlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFdpdGhVaUxpYnJhcnlDc3M7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var WithUiLibraryCss = function WithUiLibraryCss(Story) {
   useEffect(function () {
     var uiLibraryCss = document.createElement('link');
@@ -23,6 +32,8 @@ var WithUiLibraryCss = function WithUiLibraryCss(Story) {
   var theme = merge(astroTheme, uiLibraryOverride);
   return ___EmotionJSX(ThemeProvider, {
     theme: theme
-  }, ___EmotionJSX(Story, null));
+  }, ___EmotionJSX(Global, {
+    styles: _ref
+  }), ___EmotionJSX(Story, null));
 };
 export default WithUiLibraryCss;

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

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

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

@@ -535,7 +535,17 @@ var iconButtons = {
       outlineOffset: '2px',
       outlineColor: astroTokens.color.gray[700]
     }
-  })
+  }),
+  tooltip: {
+    button: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+      '&.is-hovered': {
+        path: {
+          fill: 'dark'
+        },
+        backgroundColor: astroTokens.color.common.light
+      }
+    })
+  }
 };
 var listBoxLink = {
   color: 'active',

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

@@ -1,11 +1,28 @@
+import { astroTokens } from '@pingux/onyx-tokens';
 var container = {
-  minWidth: '150px',
   transition: 'opacity 200ms ease',
   '&.animate': {
     opacity: 0
   },
   '&.animate.is-mounted.is-transitioning': {
     opacity: '100%'
+  },
+  '&.is-dark-mode': {
+    color: 'white',
+    alignItems: 'center',
+    bg: astroTokens.color.tooltip.container.bg,
+    '&[data-popover-placement^=top] > [data-popover-arrow="arrow"]:before': {
+      borderTopColor: astroTokens.color.tooltip.container.bg
+    },
+    '&[data-popover-placement^=bottom] > [data-popover-arrow="arrow"]:before': {
+      borderBottomColor: astroTokens.color.tooltip.container.bg
+    },
+    '&[data-popover-placement^=left] > [data-popover-arrow="arrow"]:before': {
+      borderLeftColor: astroTokens.color.tooltip.container.bg
+    },
+    '&[data-popover-placement^=right] > [data-popover-arrow="arrow"]:before': {
+      borderRightColor: astroTokens.color.tooltip.container.bg
+    }
   }
 };
 var arrow = {

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

@@ -1,9 +1,46 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { astroTokens } from '@pingux/onyx-tokens';
+import { defaultFocus } from './button';
 var container = {
-  backgroundColor: 'tooltip',
+  backgroundColor: astroTokens.color.tooltip.container.bg,
+  borderRadius: '3px',
+  fontSize: 'sm',
+  fontFamily: 'standard',
+  lineHeight: 'body',
+  p: '0',
+  px: 'sm',
+  py: 'xs'
+};
+var badge = {
   borderRadius: '4px',
-  fontSize: 'xs',
-  fontFamily: 'standard'
+  position: 'relative',
+  '&.is-focused:before': {
+    position: 'absolute',
+    content: '""',
+    width: '100%',
+    height: '100%',
+    padding: '2px',
+    borderRadius: '2px',
+    border: '1px solid',
+    borderColor: 'focus'
+  }
+};
+var inline = {
+  color: astroTokens.color.font.base,
+  '&.is-focused': _objectSpread({}, defaultFocus)
 };
 export default {
-  container: container
+  container: container,
+  badge: badge,
+  inline: inline
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.177.2",
+  "version": "2.177.6-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -111,7 +111,7 @@
     "globals": "^13.19.0",
     "listbox-layout": "npm:@react-stately/layout@3.9.0",
     "listbox-virtualizer": "npm:@react-aria/virtualizer@3.6.0",
-    "lodash": "^4.17.21",
+    "lodash": "^4.17.23",
     "markdown-to-jsx": "^7.7.4",
     "moment": "^2.29.4",
     "monaco-editor": "0.34.1",