@pingux/astro 2.202.2-alpha.0 → 2.204.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/LinkSelectField/LinkSelectField.js

@@ -15,6 +15,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
@@ -31,6 +32,7 @@ var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _SelectFieldBase = _interopRequireDefault(require("../SelectFieldBase"));
 var _react2 = require("@emotion/react");
+var _excluded = ["sx"];
 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 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; }
@@ -40,10 +42,11 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     isDisabled = props.isDisabled,
     status = props.status,
     helperText = props.helperText,
-    iconProps = props.iconProps,
     hasInlineLoader = props.hasInlineLoader,
     popoverWidth = props.popoverWidth,
-    triggerProps = props.triggerProps;
+    iconProps = props.iconProps,
+    triggerProps = props.triggerProps,
+    triggerProp = props.trigger;
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = (0, _hooks.useGetTheme)(),
@@ -67,7 +70,10 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     state = selectFieldProps.state,
     raTriggerProps = selectFieldProps.triggerProps,
     triggerRef = selectFieldProps.triggerRef;
-  var trigger = (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
+  var _ref = iconProps || {},
+    iconPropsSx = _ref.sx,
+    restIconProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var triggerNode = (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
     className: fieldControlInputProps.className,
     ref: triggerRef,
     variant: "selectLink",
@@ -87,23 +93,25 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     variant: "forms.select.arrow"
   }, (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
     icon: MenuDown,
+    title: {
+      name: 'Menu Down Icon'
+    },
+    sx: _objectSpread(_objectSpread({}, state.isOpen ? {
+      transform: 'rotate(180deg)'
+    } : null), iconPropsSx)
+  }, restIconProps, {
     title: {
       name: ''
     },
     color: isOnyx ? 'font.link' : 'active',
     size: linkSelectFieldIcon,
     "aria-hidden": "true"
-  }, iconProps, {
-    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
   }, helperText));
   return (0, _react2.jsx)(_SelectFieldBase["default"], (0, _extends2["default"])({}, props, selectFieldProps, {
-    trigger: trigger
+    trigger: triggerProp || triggerNode
   }));
 });
 LinkSelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
@@ -172,8 +180,19 @@ LinkSelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   onSelectionChange: _propTypes["default"].func,
   /** Display an inline loader inside the select trigger while loading. */
   hasInlineLoader: _propTypes["default"].bool,
+  /**
+   * Props object that is spread directly into the Icon inside the default trigger button.
+   * Supports all IconProps (icon, title, size, color, sx, etc.).
+   * The sx prop is merged with the rotation style.
+   */
+  iconProps: _propTypes["default"].shape({}),
   /** Width of the popover menu. Accepts any valid CSS unit. */
-  popoverWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+  popoverWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  /**
+   * A ReactNode that replaces the default Button trigger entirely.
+   * When provided, the local Button element is not rendered.
+   */
+  trigger: _propTypes["default"].node
 }, _statusProp.statusPropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes), _ariaAttributes.ariaAttributesBasePropTypes);
 LinkSelectField.defaultProps = _objectSpread({
   placeholder: 'Select',

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

@@ -23,7 +23,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithPopoverWidth = exports.WithNoneOption = exports.NoOptionsAvailable = exports.LeftLabel = exports.HelperText = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
+exports["default"] = exports.WithPopoverWidth = exports.WithNoneOption = exports.WithIconProps = exports.WithCustomTrigger = exports.NoOptionsAvailable = exports.LeftLabel = exports.HelperText = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
@@ -32,6 +32,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
+var _EarthIcon = _interopRequireDefault(require("@pingux/mdi-react/EarthIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _users = require("../../api/users");
 var _index = require("../../index");
@@ -94,6 +95,14 @@ var _default = exports["default"] = {
     isRequired: {},
     selectedKey: {
       control: false
+    },
+    iconProps: {
+      control: false,
+      description: 'Props object spread into the Icon inside the default trigger button. Supports icon, title, size, color, sx, and other IconProps. The sx prop is merged with the rotation style.'
+    },
+    trigger: {
+      control: false,
+      description: 'A ReactNode that replaces the default Button trigger entirely. When provided, the local Button element is not rendered.'
     }
   }, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes),
   args: {
@@ -352,4 +361,49 @@ WithPopoverWidth.parameters = {
       story: 'The `popoverWidth` prop can be used to set a custom width for the dropdown/popover.'
     }
   }
+};
+var WithIconProps = exports.WithIconProps = function WithIconProps() {
+  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.LinkSelectField, {
+    label: "What's your favorite color?",
+    iconProps: {
+      icon: _EarthIcon["default"],
+      sx: {
+        color: 'accent.40'
+      }
+    }
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow")));
+};
+WithIconProps.parameters = {
+  docs: {
+    description: {
+      story: 'Use the `iconProps` prop to customize the icon inside the default trigger button. Here a different icon and custom `sx` color are passed via `iconProps`.'
+    }
+  }
+};
+var WithCustomTrigger = exports.WithCustomTrigger = function WithCustomTrigger() {
+  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.LinkSelectField, {
+    label: "What's your favorite color?",
+    trigger: (0, _react2.jsx)(_index.Button, {
+      variant: "primary"
+    }, "Open menu")
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow")));
+};
+WithCustomTrigger.parameters = {
+  docs: {
+    description: {
+      story: 'Use the `trigger` prop to supply a fully custom ReactNode trigger, replacing the default `Button` element entirely.'
+    }
+  }
 };

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

@@ -15,6 +15,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _EarthIcon = _interopRequireDefault(require("@pingux/mdi-react/EarthIcon"));
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _index = require("../../index");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -231,23 +232,47 @@ test('passing helper text should display it and correct aria attributes on input
   var helperTextID = helper.getAttribute('id');
   expect(_testWrapper.screen.getByRole('button')).toHaveAttribute('aria-describedby', helperTextID);
 });
-test('iconProps are spread to the icon element', function () {
-  var iconTestId = 'custom-icon';
+test('iconProps data-testid is applied to the inner Icon element', function () {
   getComponent({
     iconProps: {
-      'data-testid': iconTestId
+      'data-testid': 'custom-icon',
+      sx: {
+        color: 'red'
+      }
     }
   });
-  expect(_testWrapper.screen.getByTestId(iconTestId)).toBeInTheDocument();
+  var icon = _testWrapper.screen.getByTestId('custom-icon');
+  expect(icon).toBeInTheDocument();
+  expect(icon).toBeInstanceOf(SVGSVGElement);
 });
-test('triggerProps are spread to the trigger button', function () {
+test('iconProps with a custom icon renders the substitute icon without throwing', function () {
   getComponent({
-    triggerProps: {
-      'data-custom': 'custom-trigger'
+    iconProps: {
+      icon: _EarthIcon["default"]
     }
   });
+  // The default trigger button is still present when only iconProps is provided
+  var button = _testWrapper.screen.getByRole('button');
+  expect(button).toBeInTheDocument();
+});
+test('trigger prop replaces the default Button trigger', function () {
+  getComponent({
+    trigger: (0, _react2.jsx)("button", {
+      type: "button",
+      "data-testid": "custom-trigger"
+    }, "Custom")
+  });
+  expect(_testWrapper.screen.getByTestId('custom-trigger')).toBeInTheDocument();
+  // The default Button trigger (identified by its pendo data attribute) should not be rendered
+  expect(document.querySelector('[data-pendo-id="LinkSelectField"]')).not.toBeInTheDocument();
+});
+test('default render is unchanged when neither iconProps nor trigger is provided', function () {
+  getComponent();
+  // The default trigger button is present via getByRole
   var button = _testWrapper.screen.getByRole('button');
-  expect(button).toHaveAttribute('data-custom', 'custom-trigger');
+  expect(button).toBeInTheDocument();
+  // The default button has the pendo ID set by the component
+  expect(document.querySelector('[data-pendo-id="LinkSelectField"]')).toBeInTheDocument();
 });
 
 // Needs to be added to each components test file

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/onyxDarkUiLibraryOverride.js

@@ -118,7 +118,9 @@ var forms = {
       '& input[type=search]': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].text.inputValue), {}, {
         borderColor: _onyxTokens.astroTokensDark.color.gray[500],
         fontSize: '15px',
-        bg: 'white',
+        bg: _onyxTokens.astroTokensDark.color.gray[900],
+        height: '50px',
+        borderRadius: '4px',
         '::placeholder': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].text.placeholder), {}, {
           fontStyle: 'unset',
           fontSize: '15px'

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

@@ -794,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;

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/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/LinkSelectField/LinkSelectField.js

@@ -6,9 +6,11 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 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 _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+var _excluded = ["sx"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { forwardRef } from 'react';
@@ -30,10 +32,11 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     isDisabled = props.isDisabled,
     status = props.status,
     helperText = props.helperText,
-    iconProps = props.iconProps,
     hasInlineLoader = props.hasInlineLoader,
     popoverWidth = props.popoverWidth,
-    triggerProps = props.triggerProps;
+    iconProps = props.iconProps,
+    triggerProps = props.triggerProps,
+    triggerProp = props.trigger;
   var _getAriaAttributeProp = getAriaAttributeProps(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = useGetTheme(),
@@ -57,7 +60,10 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     state = selectFieldProps.state,
     raTriggerProps = selectFieldProps.triggerProps,
     triggerRef = selectFieldProps.triggerRef;
-  var trigger = ___EmotionJSX(Button, _extends({
+  var _ref = iconProps || {},
+    iconPropsSx = _ref.sx,
+    restIconProps = _objectWithoutProperties(_ref, _excluded);
+  var triggerNode = ___EmotionJSX(Button, _extends({
     className: fieldControlInputProps.className,
     ref: triggerRef,
     variant: "selectLink",
@@ -77,23 +83,25 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.select.arrow"
   }, ___EmotionJSX(Icon, _extends({
     icon: MenuDown,
+    title: {
+      name: 'Menu Down Icon'
+    },
+    sx: _objectSpread(_objectSpread({}, state.isOpen ? {
+      transform: 'rotate(180deg)'
+    } : null), iconPropsSx)
+  }, restIconProps, {
     title: {
       name: ''
     },
     color: isOnyx ? 'font.link' : 'active',
     size: linkSelectFieldIcon,
     "aria-hidden": "true"
-  }, iconProps, {
-    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
   }, helperText));
   return ___EmotionJSX(SelectFieldBase, _extends({}, props, selectFieldProps, {
-    trigger: trigger
+    trigger: triggerProp || triggerNode
   }));
 });
 LinkSelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
@@ -162,8 +170,19 @@ LinkSelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   onSelectionChange: PropTypes.func,
   /** Display an inline loader inside the select trigger while loading. */
   hasInlineLoader: PropTypes.bool,
+  /**
+   * Props object that is spread directly into the Icon inside the default trigger button.
+   * Supports all IconProps (icon, title, size, color, sx, etc.).
+   * The sx prop is merged with the rotation style.
+   */
+  iconProps: PropTypes.shape({}),
   /** Width of the popover menu. Accepts any valid CSS unit. */
-  popoverWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  popoverWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * A ReactNode that replaces the default Button trigger entirely.
+   * When provided, the local Button element is not rendered.
+   */
+  trigger: PropTypes.node
 }, statusPropTypes), inputFieldAttributesBasePropTypes), ariaAttributesBasePropTypes);
 LinkSelectField.defaultProps = _objectSpread({
   placeholder: 'Select',

package/lib/components/LinkSelectField/LinkSelectField.stories.js

@@ -36,9 +36,10 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useCallback, useEffect, useState } from 'react';
 import { OverlayProvider } from 'react-aria';
+import EarthIcon from '@pingux/mdi-react/EarthIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { getAllUsers } from '../../api/users';
-import { Box, Item, LinkSelectField, Section } from '../../index';
+import { Box, Button, Item, LinkSelectField, Section } from '../../index';
 import { LIMIT } from '../../mocks/constants';
 import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
@@ -85,6 +86,14 @@ export default {
     isRequired: {},
     selectedKey: {
       control: false
+    },
+    iconProps: {
+      control: false,
+      description: 'Props object spread into the Icon inside the default trigger button. Supports icon, title, size, color, sx, and other IconProps. The sx prop is merged with the rotation style.'
+    },
+    trigger: {
+      control: false,
+      description: 'A ReactNode that replaces the default Button trigger entirely. When provided, the local Button element is not rendered.'
     }
   }, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes),
   args: {
@@ -343,4 +352,49 @@ WithPopoverWidth.parameters = {
       story: 'The `popoverWidth` prop can be used to set a custom width for the dropdown/popover.'
     }
   }
+};
+export var WithIconProps = function WithIconProps() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(LinkSelectField, {
+    label: "What's your favorite color?",
+    iconProps: {
+      icon: EarthIcon,
+      sx: {
+        color: 'accent.40'
+      }
+    }
+  }, ___EmotionJSX(Item, {
+    key: "red"
+  }, "Red"), ___EmotionJSX(Item, {
+    key: "blue"
+  }, "Blue"), ___EmotionJSX(Item, {
+    key: "yellow"
+  }, "Yellow")));
+};
+WithIconProps.parameters = {
+  docs: {
+    description: {
+      story: 'Use the `iconProps` prop to customize the icon inside the default trigger button. Here a different icon and custom `sx` color are passed via `iconProps`.'
+    }
+  }
+};
+export var WithCustomTrigger = function WithCustomTrigger() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(LinkSelectField, {
+    label: "What's your favorite color?",
+    trigger: ___EmotionJSX(Button, {
+      variant: "primary"
+    }, "Open menu")
+  }, ___EmotionJSX(Item, {
+    key: "red"
+  }, "Red"), ___EmotionJSX(Item, {
+    key: "blue"
+  }, "Blue"), ___EmotionJSX(Item, {
+    key: "yellow"
+  }, "Yellow")));
+};
+WithCustomTrigger.parameters = {
+  docs: {
+    description: {
+      story: 'Use the `trigger` prop to supply a fully custom ReactNode trigger, replacing the default `Button` element entirely.'
+    }
+  }
 };

package/lib/components/LinkSelectField/LinkSelectField.test.js

@@ -21,6 +21,7 @@ function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present,
 function _regeneratorDefine2(e, r, n, t) { var i = _Object$defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function _OverloadYield(e, d) { this.v = e, this.k = d; }
 import React from 'react';
+import EarthIcon from '@pingux/mdi-react/EarthIcon';
 import userEvent from '@testing-library/user-event';
 import { Item, LinkSelectField } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
@@ -228,23 +229,47 @@ test('passing helper text should display it and correct aria attributes on input
   var helperTextID = helper.getAttribute('id');
   expect(screen.getByRole('button')).toHaveAttribute('aria-describedby', helperTextID);
 });
-test('iconProps are spread to the icon element', function () {
-  var iconTestId = 'custom-icon';
+test('iconProps data-testid is applied to the inner Icon element', function () {
   getComponent({
     iconProps: {
-      'data-testid': iconTestId
+      'data-testid': 'custom-icon',
+      sx: {
+        color: 'red'
+      }
     }
   });
-  expect(screen.getByTestId(iconTestId)).toBeInTheDocument();
+  var icon = screen.getByTestId('custom-icon');
+  expect(icon).toBeInTheDocument();
+  expect(icon).toBeInstanceOf(SVGSVGElement);
 });
-test('triggerProps are spread to the trigger button', function () {
+test('iconProps with a custom icon renders the substitute icon without throwing', function () {
   getComponent({
-    triggerProps: {
-      'data-custom': 'custom-trigger'
+    iconProps: {
+      icon: EarthIcon
     }
   });
+  // The default trigger button is still present when only iconProps is provided
+  var button = screen.getByRole('button');
+  expect(button).toBeInTheDocument();
+});
+test('trigger prop replaces the default Button trigger', function () {
+  getComponent({
+    trigger: ___EmotionJSX("button", {
+      type: "button",
+      "data-testid": "custom-trigger"
+    }, "Custom")
+  });
+  expect(screen.getByTestId('custom-trigger')).toBeInTheDocument();
+  // The default Button trigger (identified by its pendo data attribute) should not be rendered
+  expect(document.querySelector('[data-pendo-id="LinkSelectField"]')).not.toBeInTheDocument();
+});
+test('default render is unchanged when neither iconProps nor trigger is provided', function () {
+  getComponent();
+  // The default trigger button is present via getByRole
   var button = screen.getByRole('button');
-  expect(button).toHaveAttribute('data-custom', 'custom-trigger');
+  expect(button).toBeInTheDocument();
+  // The default button has the pendo ID set by the component
+  expect(document.querySelector('[data-pendo-id="LinkSelectField"]')).toBeInTheDocument();
 });
 
 // Needs to be added to each components test file

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/onyxDarkUiLibraryOverride.js

@@ -111,7 +111,9 @@ var forms = {
       '& input[type=search]': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
         borderColor: astroTokensDark.color.gray[500],
         fontSize: '15px',
-        bg: 'white',
+        bg: astroTokensDark.color.gray[900],
+        height: '50px',
+        borderRadius: '4px',
         '::placeholder': _objectSpread(_objectSpread({}, theme.text.placeholder), {}, {
           fontStyle: 'unset',
           fontSize: '15px'

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/package.json

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