@pingux/astro 2.199.1-alpha.0 → 2.200.0

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

@@ -474,7 +474,7 @@ declare const buttons: {
         transition: string;
     };
     link: {
-        color: string;
+        color: any;
         transition: string;
         fontSize: string;
         textDecoration: string;
@@ -1482,5 +1482,29 @@ declare const buttons: {
         };
         transition: string;
     };
+    selectLink: {
+        textDecoration: string;
+        px: string;
+        '&.is-hovered': {
+            textDecoration: string;
+        };
+        '&.is-pressed': {
+            textDecoration: string;
+        };
+        '&.is-focused': {
+            textDecoration: string;
+            outline: string;
+            'span.link-select-field-placeholder': {
+                textDecoration: string;
+            };
+            'span.material-symbols-outlined': {
+                textDecoration: string;
+            };
+        };
+        color: any;
+        transition: string;
+        fontSize: string;
+        py: any;
+    };
 };
 export default buttons;

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

@@ -233,7 +233,7 @@ var checkboxActiveButton = _objectSpread(_objectSpread({}, buttonBase), {}, {
   color: 'white'
 });
 var link = {
-  color: 'active',
+  color: _onyxTokens.astroTokens.color.font.link,
   transition: 'color, .15s, ease-in-and-out',
   fontSize: 'md',
   textDecoration: 'none',
@@ -249,6 +249,26 @@ var link = {
     outline: 'none'
   }
 };
+var selectLink = _objectSpread(_objectSpread({}, link), {}, {
+  textDecoration: 'none',
+  px: '0',
+  '&.is-hovered': {
+    textDecoration: 'none'
+  },
+  '&.is-pressed': {
+    textDecoration: 'none'
+  },
+  '&.is-focused': {
+    textDecoration: 'none',
+    outline: 'none',
+    'span.link-select-field-placeholder': {
+      textDecoration: 'underline'
+    },
+    'span.material-symbols-outlined': {
+      textDecoration: 'none'
+    }
+  }
+});
 var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
   px: '0px',
   py: '0px',
@@ -619,6 +639,7 @@ var buttons = {
   modalCloseButton: modalCloseButton,
   aiChat: aiChat,
   paginationMenu: paginationMenu,
-  ButtonInputGroupContentRight: ButtonInputGroupContentRight
+  ButtonInputGroupContentRight: ButtonInputGroupContentRight,
+  selectLink: selectLink
 };
 var _default = exports["default"] = buttons;

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

@@ -1,7 +1,5 @@
 export declare const menu: {
     p: string;
-    border: string;
-    borderColor: string;
 };
 export declare const menuSection: {
     sectionTitle: {

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

@@ -7,9 +7,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports.menuSection = exports.menuItem = exports.menu = void 0;
 var _onyxTokens = require("@pingux/onyx-tokens");
 var menu = exports.menu = {
-  p: 'sm',
-  border: '1px solid',
-  borderColor: 'border.base'
+  p: 'sm'
 };
 var menuSection = exports.menuSection = {
   sectionTitle: {

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

@@ -4,6 +4,9 @@ declare const _default: {
         maxWidth: string;
         boxShadow: string;
         transition: string;
+        border: string;
+        borderColor: any;
+        borderRadius: any;
         '&.animate': {
             opacity: number;
         };

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

@@ -9,8 +9,11 @@ var _onyxTokens = require("@pingux/onyx-tokens");
 var container = {
   minWidth: '150px',
   maxWidth: '260px',
-  boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.176)',
+  boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.18)',
   transition: 'opacity 200ms ease',
+  border: '1px solid',
+  borderColor: _onyxTokens.astroTokens.color.common.border,
+  borderRadius: _onyxTokens.astroTokens.radius.md,
   '&.animate': {
     opacity: 0
   },

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

@@ -54,6 +54,13 @@ export declare const text: {
         fontWeight: number;
         fontFamily: string;
     };
+    label: {
+        fontSize: any;
+    };
+    linkSelectFieldLabel: {
+        color: any;
+        fontSize: any;
+    };
     H1: {
         lineHeight: string;
         fontSize: any;

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

@@ -126,6 +126,9 @@ var stepperTabContentHeader = _objectSpread(_objectSpread({}, hTags.H2), {}, {
 var modalTitle = _objectSpread(_objectSpread({}, hTags.H3), {}, {
   lineHeight: '2rem'
 });
+var label = {
+  fontSize: fontSizes.label
+};
 var text = exports.text = _objectSpread(_objectSpread({
   base: {
     lineHeight: 'body'
@@ -248,5 +251,9 @@ var text = exports.text = _objectSpread(_objectSpread({
     lineHeight: 'body'
   },
   stepperTabContent: stepperTabContent,
-  stepperTabContentHeader: stepperTabContentHeader
+  stepperTabContentHeader: stepperTabContentHeader,
+  label: label,
+  linkSelectFieldLabel: _objectSpread(_objectSpread({}, label), {}, {
+    color: _onyxTokens.astroTokens.color.font.link
+  })
 });

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

@@ -824,34 +824,32 @@ declare const _default: {
     };
     listBox: {
         container: {
-            pl: string;
-            pr: number;
-            py: string;
+            p: any;
         };
         option: {
-            py: string;
-            pl: string;
-            pr: string;
-            mr: string;
+            py: any;
+            pl: any;
+            pr: any;
             justifyContent: string;
-            borderRadius: string;
+            borderRadius: any;
             lineHeight: string;
             color: string;
             '&.is-focused': {
                 color: string;
                 bg: string;
-                borderRadius: string;
+                borderRadius: any;
             };
             '&.is-focus-visible': {
                 boxShadow: string;
-                borderRadius: string;
+                borderRadius: any;
                 zIndex: number;
             };
             '&.is-selected': {
+                fontWeight: string;
                 color: string;
                 bg: string;
                 pl: string;
-                borderRadius: string;
+                borderRadius: any;
                 '&.is-focused': {
                     color: string;
                 };
@@ -864,7 +862,7 @@ declare const _default: {
                 bg: string;
             };
             '&.is-condensed': {
-                pl: string;
+                pl: any;
                 bg: string;
                 color: string;
                 '&.is-selected': {
@@ -1038,8 +1036,6 @@ declare const _default: {
     };
     menu: {
         p: string;
-        border: string;
-        borderColor: string;
     };
     menuItem: {
         item: {
@@ -1445,6 +1441,9 @@ declare const _default: {
             maxWidth: string;
             boxShadow: string;
             transition: string;
+            border: string;
+            borderColor: any;
+            borderRadius: any;
             '&.animate': {
                 opacity: number;
             };

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

@@ -160,34 +160,32 @@ var modal = {
 };
 var listBox = {
   container: {
-    pl: 'sm',
-    pr: 0,
-    py: 'xs'
+    p: _onyxTokens.astroTokens.spacing.sm
   },
   option: {
-    py: '.75rem',
-    pl: '.75rem',
-    pr: 'md',
-    mr: 'sm',
+    py: _onyxTokens.astroTokens.spacing['md-s'],
+    pl: _onyxTokens.astroTokens.spacing['md-s'],
+    pr: _onyxTokens.astroTokens.spacing.md,
     justifyContent: 'space-between',
-    borderRadius: '4px',
+    borderRadius: _onyxTokens.astroTokens.radius.md,
     lineHeight: 'body',
     color: 'gray-700',
     '&.is-focused': {
       color: 'font.hover',
       bg: 'gray-100',
-      borderRadius: '4px'
+      borderRadius: _onyxTokens.astroTokens.radius.md
     },
     '&.is-focus-visible': {
       boxShadow: 'inset 0 0 0 1px #1a73e8',
-      borderRadius: '4px',
+      borderRadius: _onyxTokens.astroTokens.radius.md,
       zIndex: 1
     },
     '&.is-selected': {
+      fontWeight: '0',
       color: 'black',
       bg: 'lightblue',
       pl: '.75rem',
-      borderRadius: '4px',
+      borderRadius: _onyxTokens.astroTokens.radius.md,
       '&.is-focused': {
         color: 'text.primary'
       },
@@ -200,7 +198,7 @@ var listBox = {
       bg: 'lightblue'
     },
     '&.is-condensed': {
-      pl: 'md',
+      pl: _onyxTokens.astroTokens.spacing.md,
       bg: 'backgroundBase',
       color: 'gray-700',
       '&.is-selected': {

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

@@ -174,6 +174,15 @@ export var link = _objectSpread(_objectSpread({}, text), {}, {
   },
   '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
+export var selectLink = _objectSpread(_objectSpread({}, link), {}, {
+  textDecoration: 'none',
+  '&.is-hovered': {
+    textDecoration: 'none'
+  },
+  '&.is-pressed': {
+    textDecoration: 'none'
+  }
+});
 var listBoxLink = _objectSpread({}, link);
 var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'white',
@@ -328,5 +337,6 @@ export default {
   success: success,
   withIcon: withIcon,
   filter: filter,
-  searchNavTabLabel: tabLabelButton
+  searchNavTabLabel: tabLabelButton,
+  selectLink: selectLink
 };

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -13,7 +13,6 @@ 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 React, { forwardRef } from 'react';
 import { VisuallyHidden } from 'react-aria';
-import MenuDown from '@pingux/mdi-react/MenuDownIcon';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, Button, Icon, Loader, Text } from '../..';
@@ -38,9 +37,10 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _getAriaAttributeProp = getAriaAttributeProps(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx,
     linkSelectFieldWidth = _useGetTheme.linkSelectFieldWidth,
-    themeState = _useGetTheme.themeState;
-  var isOnyx = themeState.isOnyx;
+    linkSelectFieldIcon = _useGetTheme.linkSelectFieldIcon,
+    MenuDown = _useGetTheme.icons.MenuDown;
   var helperTextId = uuid();
   usePropWarning(props, 'disabled', 'isDisabled');
   var _useSelectField = useSelectField(_objectSpread(_objectSpread({
@@ -60,13 +60,13 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var trigger = ___EmotionJSX(Button, _extends({
     className: fieldControlInputProps.className,
     ref: triggerRef,
-    variant: "link",
+    variant: "selectLink",
     tabIndex: isDisabled ? -1 : 0
   }, getPendoID(displayName), triggerProps, raTriggerProps, ariaProps, {
     "aria-describedby": helperText && helperTextId
   }), ___EmotionJSX(Text, {
-    variant: "label",
-    color: isOnyx ? 'font.link' : 'active'
+    variant: "linkSelectFieldLabel",
+    className: "link-select-field-placeholder"
   }, placeholder), ___EmotionJSX(Box, {
     isRow: true
   }, hasInlineLoader && isLoadingInitial && ___EmotionJSX(Loader, {
@@ -78,12 +78,15 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, ___EmotionJSX(Icon, _extends({
     icon: MenuDown,
     title: {
-      name: 'Menu Down Icon'
-    }
+      name: ''
+    },
+    color: isOnyx ? 'font.link' : 'active',
+    size: linkSelectFieldIcon
   }, iconProps, {
-    sx: state.isOpen ? {
-      transform: 'rotate(180deg)'
-    } : null
+    sx: _objectSpread({
+      transform: state.isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+      transition: 'transform 150ms ease'
+    }, iconProps === null || iconProps === void 0 ? void 0 : iconProps.sx)
   })))), ___EmotionJSX(VisuallyHidden, {
     "aria-live": "polite",
     id: helperTextId

package/lib/components/ListBox/ListBoxSection.js

@@ -30,9 +30,7 @@ var ListBoxSection = function ListBoxSection(props) {
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
     ref: headerRef,
     style: layoutInfoToStyle(header.layoutInfo, direction)
-  }, item.key !== state.collection.getFirstKey() && ___EmotionJSX(Separator, {
-    mt: "0px"
-  }), item.rendered && ___EmotionJSX(Box, _extends({}, headingProps, {
+  }, item.key !== state.collection.getFirstKey() && ___EmotionJSX(Separator, null), item.rendered && ___EmotionJSX(Box, _extends({}, headingProps, {
     variant: "listBox.sectionTitle"
   }), item.rendered)), ___EmotionJSX(Box, _extends({}, groupProps, {
     style: layoutInfoToStyle(reusableView.layoutInfo, direction)

package/lib/components/ListBox/Option.js

@@ -146,7 +146,7 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
       name: 'Check Icon'
     },
     color: "green-500",
-    size: isOnyx ? 'xsm' : 'md'
+    size: "xsm"
   }));
 });
 Option.defaultProps = {

package/lib/components/Separator/Separator.styles.js

@@ -13,12 +13,12 @@ var base = {
   bg: 'neutral.80',
   width: '100%',
   height: '1px',
-  my: '5px',
+  my: 'xs',
   flexShrink: 0,
   '&.is-vertical': {
     width: '1px',
     height: '100%',
-    mx: '5px'
+    mx: 'xs'
   }
 };
 var navBarSeparator = _objectSpread(_objectSpread({}, base), {}, {

package/lib/components/Text/Text.styles.js

@@ -170,6 +170,15 @@ var stepperTabContentHeader = {
   fontSize: 'lg',
   fontWeight: 3
 };
+var label = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  fontSize: 'sm',
+  color: 'text.secondary',
+  fontFamily: 'standard',
+  fontWeight: 1
+});
+var linkSelectFieldLabel = _objectSpread(_objectSpread({}, label), {}, {
+  color: 'active'
+});
 export var text = _objectSpread(_objectSpread(_objectSpread({
   base: base,
   bodyStrong: bodyStrong,
@@ -229,12 +238,7 @@ export var text = _objectSpread(_objectSpread(_objectSpread({
     color: 'text.secondary',
     fontFamily: 'standard'
   }),
-  label: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontSize: 'sm',
-    color: 'text.secondary',
-    fontFamily: 'standard',
-    fontWeight: 1
-  }),
+  label: label,
   listTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'md',
     fontWeight: 1,
@@ -296,5 +300,6 @@ export var text = _objectSpread(_objectSpread(_objectSpread({
   stepperLabel: stepperLabel,
   pageHeaderTitle: _objectSpread({}, HTags.H1),
   stepperTabContent: stepperTabContent,
-  stepperTabContentHeader: stepperTabContentHeader
+  stepperTabContentHeader: stepperTabContentHeader,
+  linkSelectFieldLabel: linkSelectFieldLabel
 });

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

@@ -271,7 +271,7 @@ var buttons = {
     }
   },
   link: {
-    color: astroTokensDark.color.blue[400],
+    color: astroTokensDark.color.font.link,
     '&.is-pressed': {
       textDecoration: 'underline',
       outline: 'none',

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

@@ -36,6 +36,5 @@ export var menuItem = {
   }
 };
 export var menu = {
-  backgroundColor: '#23282e',
-  borderColor: 'border.attachment'
+  backgroundColor: astroTokensDark.color.common.bg.base
 };

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

@@ -48,5 +48,8 @@ export var text = {
   },
   pageHeaderTitle: {
     color: astroTokensDark.color.gray[100]
+  },
+  linkSelectFieldLabel: {
+    color: astroTokensDark.color.font.link
   }
 };

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

@@ -14,9 +14,7 @@ import stepper from './stepper';
 var listBox = {
   container: {
     backgroundColor: 'backgroundBase',
-    border: '1px solid',
-    borderColor: 'border.attachment',
-    borderRadius: '4px'
+    borderRadius: astroTokensDark.radius.md
   },
   option: {
     color: astroTokensDark.color.gray[400],

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

@@ -24,6 +24,7 @@ var calendarIconSize = 25;
 var navBarIconSize = 18;
 var badgeTextFontSize = '';
 var modalCloseIconSize = 'sm';
+var linkSelectFieldIcon = 'sm';
 export var astroThemeValues = {
   accordionHoveredState: hoveredState,
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
@@ -57,5 +58,6 @@ export var astroThemeValues = {
   },
   linkSelectFieldWidth: linkSelectFieldWidth,
   badgeTextFontSize: badgeTextFontSize,
-  modalCloseIconSize: modalCloseIconSize
+  modalCloseIconSize: modalCloseIconSize,
+  linkSelectFieldIcon: linkSelectFieldIcon
 };

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

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

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

@@ -33,7 +33,7 @@ var badgeStyles = {
   blueText: '#155CBA',
   greyText: '#FFFFFF'
 };
-var linkSelectFieldWidth = '12em';
+var linkSelectFieldWidth = '200px';
 var calendarIconSize = 'sm';
 var badgeTextFontSize = '75%';
 var navBarIconSize = '20px';

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

@@ -39,10 +39,9 @@ export var select = {
     color: 'text.primary'
   },
   arrow: {
-    width: '20px',
-    height: '20px',
     alignItems: 'center',
     justifyContent: 'center',
+    ml: 'xs',
     '& > svg': {
       minWidth: tShirtSizes.xs,
       width: tShirtSizes.xs,

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

@@ -226,7 +226,7 @@ var checkboxActiveButton = _objectSpread(_objectSpread({}, buttonBase), {}, {
   color: 'white'
 });
 var link = {
-  color: 'active',
+  color: astroTokens.color.font.link,
   transition: 'color, .15s, ease-in-and-out',
   fontSize: 'md',
   textDecoration: 'none',
@@ -242,6 +242,26 @@ var link = {
     outline: 'none'
   }
 };
+var selectLink = _objectSpread(_objectSpread({}, link), {}, {
+  textDecoration: 'none',
+  px: '0',
+  '&.is-hovered': {
+    textDecoration: 'none'
+  },
+  '&.is-pressed': {
+    textDecoration: 'none'
+  },
+  '&.is-focused': {
+    textDecoration: 'none',
+    outline: 'none',
+    'span.link-select-field-placeholder': {
+      textDecoration: 'underline'
+    },
+    'span.material-symbols-outlined': {
+      textDecoration: 'none'
+    }
+  }
+});
 var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
   px: '0px',
   py: '0px',
@@ -612,6 +632,7 @@ var buttons = {
   modalCloseButton: modalCloseButton,
   aiChat: aiChat,
   paginationMenu: paginationMenu,
-  ButtonInputGroupContentRight: ButtonInputGroupContentRight
+  ButtonInputGroupContentRight: ButtonInputGroupContentRight,
+  selectLink: selectLink
 };
 export default buttons;

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

@@ -1,8 +1,6 @@
 import { astroTokens } from '@pingux/onyx-tokens';
 export var menu = {
-  p: 'sm',
-  border: '1px solid',
-  borderColor: 'border.base'
+  p: 'sm'
 };
 export var menuSection = {
   sectionTitle: {

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

@@ -2,8 +2,11 @@ import { astroTokens } from '@pingux/onyx-tokens';
 var container = {
   minWidth: '150px',
   maxWidth: '260px',
-  boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.176)',
+  boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.18)',
   transition: 'opacity 200ms ease',
+  border: '1px solid',
+  borderColor: astroTokens.color.common.border,
+  borderRadius: astroTokens.radius.md,
   '&.animate': {
     opacity: 0
   },

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

@@ -119,6 +119,9 @@ var stepperTabContentHeader = _objectSpread(_objectSpread({}, hTags.H2), {}, {
 var modalTitle = _objectSpread(_objectSpread({}, hTags.H3), {}, {
   lineHeight: '2rem'
 });
+var label = {
+  fontSize: fontSizes.label
+};
 export var text = _objectSpread(_objectSpread({
   base: {
     lineHeight: 'body'
@@ -241,5 +244,9 @@ export var text = _objectSpread(_objectSpread({
     lineHeight: 'body'
   },
   stepperTabContent: stepperTabContent,
-  stepperTabContentHeader: stepperTabContentHeader
+  stepperTabContentHeader: stepperTabContentHeader,
+  label: label,
+  linkSelectFieldLabel: _objectSpread(_objectSpread({}, label), {}, {
+    color: astroTokens.color.font.link
+  })
 });