@pingux/astro 2.199.1-alpha.0 → 2.200.0

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

@@ -126,6 +126,49 @@ export declare const link: {
     flexShrink: number;
     whiteSpace: string;
 };
+export declare const selectLink: {
+    textDecoration: string;
+    '&.is-hovered': {
+        textDecoration: string;
+    };
+    '&.is-pressed': {
+        textDecoration: string;
+    };
+    lineHeight: 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;
+    color: string;
+    height: string;
+    padding: 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;
+};
 declare const _default: {
     colorBlock: {
         bg: string;
@@ -1877,5 +1920,48 @@ declare const _default: {
         variant?: string;
         label?: string;
     };
+    selectLink: {
+        textDecoration: string;
+        '&.is-hovered': {
+            textDecoration: string;
+        };
+        '&.is-pressed': {
+            textDecoration: string;
+        };
+        lineHeight: 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;
+        color: string;
+        height: string;
+        padding: 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 default _default;

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.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.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,15 @@ var link = exports.link = _objectSpread(_objectSpread({}, text), {}, {
   },
   '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
+var selectLink = exports.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',
@@ -335,5 +344,6 @@ var _default = exports["default"] = {
   success: success,
   withIcon: withIcon,
   filter: filter,
-  searchNavTabLabel: tabLabelButton
+  searchNavTabLabel: tabLabelButton,
+  selectLink: selectLink
 };

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -20,7 +20,6 @@ var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
-var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
@@ -48,9 +47,10 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx,
     linkSelectFieldWidth = _useGetTheme.linkSelectFieldWidth,
-    themeState = _useGetTheme.themeState;
-  var isOnyx = themeState.isOnyx;
+    linkSelectFieldIcon = _useGetTheme.linkSelectFieldIcon,
+    MenuDown = _useGetTheme.icons.MenuDown;
   var helperTextId = (0, _uuid.v4)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   var _useSelectField = (0, _hooks.useSelectField)(_objectSpread(_objectSpread({
@@ -70,13 +70,13 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var trigger = (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
     className: fieldControlInputProps.className,
     ref: triggerRef,
-    variant: "link",
+    variant: "selectLink",
     tabIndex: isDisabled ? -1 : 0
   }, (0, _pendoID.getPendoID)(displayName), triggerProps, raTriggerProps, ariaProps, {
     "aria-describedby": helperText && helperTextId
   }), (0, _react2.jsx)(_.Text, {
-    variant: "label",
-    color: isOnyx ? 'font.link' : 'active'
+    variant: "linkSelectFieldLabel",
+    className: "link-select-field-placeholder"
   }, placeholder), (0, _react2.jsx)(_.Box, {
     isRow: true
   }, hasInlineLoader && isLoadingInitial && (0, _react2.jsx)(_.Loader, {
@@ -86,14 +86,17 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     "aria-hidden": "true",
     variant: "forms.select.arrow"
   }, (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
-    icon: _MenuDownIcon["default"],
+    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)
   })))), (0, _react2.jsx)(_reactAria.VisuallyHidden, {
     "aria-live": "polite",
     id: helperTextId

package/lib/cjs/components/ListBox/ListBoxSection.js

@@ -42,9 +42,7 @@ var ListBoxSection = function ListBoxSection(props) {
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Box["default"], {
     ref: headerRef,
     style: (0, _virtualizer.layoutInfoToStyle)(header.layoutInfo, direction)
-  }, item.key !== state.collection.getFirstKey() && (0, _react2.jsx)(_Separator["default"], {
-    mt: "0px"
-  }), item.rendered && (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, headingProps, {
+  }, item.key !== state.collection.getFirstKey() && (0, _react2.jsx)(_Separator["default"], null), item.rendered && (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, headingProps, {
     variant: "listBox.sectionTitle"
   }), item.rendered)), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, groupProps, {
     style: (0, _virtualizer.layoutInfoToStyle)(reusableView.layoutInfo, direction)

package/lib/cjs/components/ListBox/Option.js

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

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

@@ -20,12 +20,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/cjs/components/Text/Text.styles.d.ts

@@ -6460,6 +6460,17 @@ export declare const text: {
         fontSize: string;
         fontWeight: number;
     };
+    linkSelectFieldLabel: {
+        color: string;
+        fontSize: string;
+        fontFamily: string;
+        fontWeight: number;
+        display: string;
+        overflowWrap: overflowWrap;
+        maxWidth: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
+    };
     H1: {
         lineHeight: string;
         fontWeight: number;

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

@@ -177,6 +177,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'
+});
 var text = exports.text = _objectSpread(_objectSpread(_objectSpread({
   base: base,
   bodyStrong: bodyStrong,
@@ -236,12 +245,7 @@ var text = exports.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,
@@ -303,5 +307,6 @@ var text = exports.text = _objectSpread(_objectSpread(_objectSpread({
   stepperLabel: stepperLabel,
   pageHeaderTitle: _objectSpread({}, HTags.H1),
   stepperTabContent: stepperTabContent,
-  stepperTabContentHeader: stepperTabContentHeader
+  stepperTabContentHeader: stepperTabContentHeader,
+  linkSelectFieldLabel: linkSelectFieldLabel
 });

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

@@ -102,6 +102,7 @@ declare const useGetTheme: () => {
     linkSelectFieldWidth: string;
     badgeTextFontSize: string;
     modalCloseIconSize: import("../..").IconSize;
+    linkSelectFieldIcon: import("../..").IconSize;
     themeState: {
         isAstro: boolean;
         isOnyx: boolean;
@@ -173,6 +174,7 @@ declare const useGetTheme: () => {
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
     modalCloseIconSize: import("../..").IconSize;
+    linkSelectFieldIcon: import("../..").IconSize;
     accordionHoveredState: {
         '&.is-hovered': {
             color: string;

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

@@ -62,6 +62,7 @@ export declare const nextGenDarkThemeValues: {
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
     modalCloseIconSize: import("../../../..").IconSize;
+    linkSelectFieldIcon: import("../../../..").IconSize;
     accordionHoveredState: {
         '&.is-hovered': {
             color: string;

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

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

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

@@ -35,6 +35,5 @@ export declare const menuItem: {
     };
 };
 export declare const menu: {
-    backgroundColor: string;
-    borderColor: string;
+    backgroundColor: any;
 };

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

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

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

@@ -48,4 +48,7 @@ export declare const text: {
     pageHeaderTitle: {
         color: any;
     };
+    linkSelectFieldLabel: {
+        color: any;
+    };
 };

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

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

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

@@ -180,8 +180,7 @@ declare const _default: {
         };
     };
     menu: {
-        backgroundColor: string;
-        borderColor: string;
+        backgroundColor: any;
     };
     menuItem: {
         item: {
@@ -418,9 +417,7 @@ declare const _default: {
     listBox: {
         container: {
             backgroundColor: string;
-            border: string;
-            borderColor: string;
-            borderRadius: string;
+            borderRadius: any;
         };
         option: {
             color: any;

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

@@ -22,9 +22,7 @@ var _stepper = _interopRequireDefault(require("./stepper"));
 var listBox = {
   container: {
     backgroundColor: 'backgroundBase',
-    border: '1px solid',
-    borderColor: 'border.attachment',
-    borderRadius: '4px'
+    borderRadius: _onyxTokens.astroTokensDark.radius.md
   },
   option: {
     color: _onyxTokens.astroTokensDark.color.gray[400],

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

@@ -96,4 +96,5 @@ export declare const astroThemeValues: {
     linkSelectFieldWidth: string;
     badgeTextFontSize: string;
     modalCloseIconSize: IconSize;
+    linkSelectFieldIcon: IconSize;
 };

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

@@ -36,6 +36,7 @@ var calendarIconSize = 25;
 var navBarIconSize = 18;
 var badgeTextFontSize = '';
 var modalCloseIconSize = 'sm';
+var linkSelectFieldIcon = 'sm';
 var astroThemeValues = exports.astroThemeValues = {
   accordionHoveredState: _Accordion.hoveredState,
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
@@ -69,5 +70,6 @@ var astroThemeValues = exports.astroThemeValues = {
   },
   linkSelectFieldWidth: linkSelectFieldWidth,
   badgeTextFontSize: badgeTextFontSize,
-  modalCloseIconSize: modalCloseIconSize
+  modalCloseIconSize: modalCloseIconSize,
+  linkSelectFieldIcon: linkSelectFieldIcon
 };

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

@@ -9,5 +9,6 @@ declare const _default: {
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
     modalCloseIconSize: IconSize;
+    linkSelectFieldIcon: IconSize;
 };
 export default _default;

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

@@ -14,6 +14,7 @@ var pageHeaderAddIconMargin = 'md';
 var pageHeaderAddIconSize = 'md';
 var defaultLoaderSize = 32;
 var modalCloseIconSize = 'md';
+var linkSelectFieldIcon = 'sm';
 var _default = exports["default"] = {
   copyButtonSize: copyButtonSize,
   breadcrumbIconSize: breadcrumbIconSize,
@@ -23,5 +24,6 @@ var _default = exports["default"] = {
   pageHeaderAddIconMargin: pageHeaderAddIconMargin,
   pageHeaderAddIconSize: pageHeaderAddIconSize,
   defaultLoaderSize: defaultLoaderSize,
-  modalCloseIconSize: modalCloseIconSize
+  modalCloseIconSize: modalCloseIconSize,
+  linkSelectFieldIcon: linkSelectFieldIcon
 };

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

@@ -10,6 +10,7 @@ export declare const nextGenThemeValues: {
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
     modalCloseIconSize: IconSize;
+    linkSelectFieldIcon: IconSize;
     accordionHoveredState: {
         '&.is-hovered': {
             color: string;

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

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

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

@@ -21,10 +21,9 @@ export declare const select: {
         color: string;
     };
     arrow: {
-        width: string;
-        height: string;
         alignItems: string;
         justifyContent: string;
+        ml: string;
         '& > svg': {
             minWidth: string;
             width: string;
@@ -1087,10 +1086,9 @@ declare const _default: {
             color: string;
         };
         arrow: {
-            width: string;
-            height: string;
             alignItems: string;
             justifyContent: string;
+            ml: string;
             '& > svg': {
                 minWidth: string;
                 width: string;

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

@@ -46,10 +46,9 @@ var select = exports.select = {
     color: 'text.primary'
   },
   arrow: {
-    width: '20px',
-    height: '20px',
     alignItems: 'center',
     justifyContent: 'center',
+    ml: 'xs',
     '& > svg': {
       minWidth: _tShirtSizes["default"].xs,
       width: _tShirtSizes["default"].xs,

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

@@ -777,7 +777,7 @@ declare const _default: {
             transition: string;
         };
         link: {
-            color: string;
+            color: any;
             transition: string;
             fontSize: string;
             textDecoration: string;
@@ -1785,6 +1785,30 @@ declare const _default: {
             };
             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;
+        };
     };
     forms: {
         input: import("theme-ui").ThemeUICSSObject;
@@ -1823,10 +1847,9 @@ declare const _default: {
                 color: string;
             };
             arrow: {
-                width: string;
-                height: string;
                 alignItems: string;
                 justifyContent: string;
+                ml: string;
                 '& > svg': {
                     minWidth: string;
                     width: string;
@@ -2964,6 +2987,13 @@ declare const _default: {
             fontWeight: number;
             fontFamily: string;
         };
+        label: {
+            fontSize: any;
+        };
+        linkSelectFieldLabel: {
+            color: any;
+            fontSize: any;
+        };
         H1: {
             lineHeight: string;
             fontSize: any;
@@ -5479,34 +5509,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;
                     };
@@ -5519,7 +5547,7 @@ declare const _default: {
                     bg: string;
                 };
                 '&.is-condensed': {
-                    pl: string;
+                    pl: any;
                     bg: string;
                     color: string;
                     '&.is-selected': {
@@ -5693,8 +5721,6 @@ declare const _default: {
         };
         menu: {
             p: string;
-            border: string;
-            borderColor: string;
         };
         menuItem: {
             item: {
@@ -6100,6 +6126,9 @@ declare const _default: {
                 maxWidth: string;
                 boxShadow: string;
                 transition: string;
+                border: string;
+                borderColor: any;
+                borderRadius: any;
                 '&.animate': {
                     opacity: number;
                 };