@pingux/astro 2.196.0 → 2.198.7-alpha.0

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

@@ -1542,6 +1542,9 @@ declare const _default: {
                 alignSelf: string;
             };
             hintButton: {
+                maxWidth: string;
+                maxHeight: string;
+                borderRadius: string;
                 backgroundColor: string;
                 path: {
                     fill: string;
@@ -2901,7 +2904,7 @@ declare const _default: {
     };
     lineHeights: {
         body: any;
-        xs: string;
+        xs: any;
         sm: string;
         md: string;
     };
@@ -3052,6 +3055,13 @@ declare const _default: {
         base: {
             lineHeight: string;
         };
+        modalTitle: {
+            lineHeight: string;
+            fontSize: any;
+            fontWeight: number;
+            color: string;
+            fontFamily: string;
+        };
         buttonSubtitle: {
             fontSize: string;
             fontWeight: number;
@@ -3176,6 +3186,8 @@ declare const _default: {
         SuccessCircle: string;
         userExperienceIcon: string;
         WarningIcon: string;
+        helpHint: string;
+        ModalCloseIcon: string;
     };
     fonts: {
         standard: string;
@@ -5400,6 +5412,8 @@ declare const _default: {
         };
         iconWrapper: {
             xs: {
+                justifyContent: string;
+                alignItems: string;
                 '&.is-circle': {
                     borderRadius: string;
                 };
@@ -5411,6 +5425,8 @@ declare const _default: {
                 fontSize: any;
             };
             sm: {
+                justifyContent: string;
+                alignItems: string;
                 '&.is-circle': {
                     borderRadius: string;
                 };
@@ -5422,6 +5438,8 @@ declare const _default: {
                 fontSize: any;
             };
             md: {
+                justifyContent: string;
+                alignItems: string;
                 '&.is-circle': {
                     borderRadius: string;
                 };
@@ -5433,6 +5451,8 @@ declare const _default: {
                 fontSize: any;
             };
             lg: {
+                justifyContent: string;
+                alignItems: string;
                 '&.is-circle': {
                     borderRadius: string;
                 };
@@ -5444,6 +5464,8 @@ declare const _default: {
                 fontSize: any;
             };
             xl: {
+                justifyContent: string;
+                alignItems: string;
                 '&.is-circle': {
                     borderRadius: string;
                 };
@@ -5457,13 +5479,15 @@ declare const _default: {
         };
         listBox: {
             container: {
-                px: string;
+                pl: string;
+                pr: number;
                 py: string;
             };
             option: {
                 py: string;
                 pl: string;
                 pr: string;
+                mr: string;
                 justifyContent: string;
                 borderRadius: string;
                 lineHeight: string;
@@ -5731,7 +5755,6 @@ declare const _default: {
         message: {
             wrapper: {
                 gap: string;
-                right: string;
             };
             item: {
                 maxWidth: number;
@@ -5850,6 +5873,7 @@ declare const _default: {
                 borderTopColor: string;
                 borderRadius: string;
                 p: string;
+                flexDirection: string;
             };
             footerContainer: {
                 borderTop: string;
@@ -6069,9 +6093,6 @@ declare const _default: {
                 alignSelf: string;
                 mr: string;
             };
-            wrapper: {
-                mr: string;
-            };
         };
         popoverMenu: {
             container: {

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

@@ -48,7 +48,7 @@ var nextGenTheme = {
   fontWeights: _text2.fontWeights,
   lineHeights: {
     body: _onyxTokens.astroTokens["default"]['line-height'].base,
-    xs: '1.2',
+    xs: _onyxTokens.astroTokens["default"]['line-height'].xs,
     sm: '1.4',
     md: '1.75'
   },

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

@@ -1239,6 +1239,9 @@ declare const buttons: {
             alignSelf: string;
         };
         hintButton: {
+            maxWidth: string;
+            maxHeight: string;
+            borderRadius: string;
             backgroundColor: string;
             path: {
                 fill: string;

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

@@ -410,6 +410,9 @@ var onyxIconButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
 var hintButton = {
+  maxWidth: 'unset',
+  maxHeight: 'unset',
+  borderRadius: '28px',
   backgroundColor: 'transparent',
   path: {
     fill: 'dark'

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

@@ -1,5 +1,7 @@
 declare const _default: {
     xs: {
+        justifyContent: string;
+        alignItems: string;
         '&.is-circle': {
             borderRadius: string;
         };
@@ -11,6 +13,8 @@ declare const _default: {
         fontSize: any;
     };
     sm: {
+        justifyContent: string;
+        alignItems: string;
         '&.is-circle': {
             borderRadius: string;
         };
@@ -22,6 +26,8 @@ declare const _default: {
         fontSize: any;
     };
     md: {
+        justifyContent: string;
+        alignItems: string;
         '&.is-circle': {
             borderRadius: string;
         };
@@ -33,6 +39,8 @@ declare const _default: {
         fontSize: any;
     };
     lg: {
+        justifyContent: string;
+        alignItems: string;
         '&.is-circle': {
             borderRadius: string;
         };
@@ -44,6 +52,8 @@ declare const _default: {
         fontSize: any;
     };
     xl: {
+        justifyContent: string;
+        alignItems: string;
         '&.is-circle': {
             borderRadius: string;
         };

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

@@ -18,6 +18,8 @@ var _sizes = _interopRequireDefault(require("../sizes"));
 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 circle = {
+  justifyContent: 'center',
+  alignItems: 'center',
   '&.is-circle': {
     borderRadius: '50%'
   }

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

@@ -1,7 +1,6 @@
 export declare const message: {
     wrapper: {
         gap: string;
-        right: string;
     };
     item: {
         maxWidth: number;

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

@@ -8,8 +8,7 @@ exports.message = void 0;
 var _onyxTokens = require("@pingux/onyx-tokens");
 var message = exports.message = {
   wrapper: {
-    gap: 'md',
-    right: 'unset'
+    gap: 'md'
   },
   item: {
     maxWidth: 400,

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

@@ -11,8 +11,5 @@ declare const _default: {
         alignSelf: string;
         mr: string;
     };
-    wrapper: {
-        mr: string;
-    };
 };
 export default _default;

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

@@ -17,11 +17,7 @@ var controls = {
   alignSelf: 'start',
   mr: '0'
 };
-var wrapper = {
-  mr: 'md'
-};
 var _default = exports["default"] = {
   container: container,
-  controls: controls,
-  wrapper: wrapper
+  controls: controls
 };

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

@@ -145,6 +145,13 @@ export declare const text: {
     base: {
         lineHeight: string;
     };
+    modalTitle: {
+        lineHeight: string;
+        fontSize: any;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+    };
     buttonSubtitle: {
         fontSize: string;
         fontWeight: number;

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

@@ -123,10 +123,14 @@ var stepperTabContent = {
 var stepperTabContentHeader = _objectSpread(_objectSpread({}, hTags.H2), {}, {
   color: 'font.base'
 });
+var modalTitle = _objectSpread(_objectSpread({}, hTags.H3), {}, {
+  lineHeight: '2rem'
+});
 var text = exports.text = _objectSpread(_objectSpread({
   base: {
     lineHeight: 'body'
   },
+  modalTitle: modalTitle,
   buttonSubtitle: buttonSubtitle,
   buttonTitle: buttonTitle,
   pageHeaderBody: {

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

@@ -757,6 +757,8 @@ declare const _default: {
     };
     iconWrapper: {
         xs: {
+            justifyContent: string;
+            alignItems: string;
             '&.is-circle': {
                 borderRadius: string;
             };
@@ -768,6 +770,8 @@ declare const _default: {
             fontSize: any;
         };
         sm: {
+            justifyContent: string;
+            alignItems: string;
             '&.is-circle': {
                 borderRadius: string;
             };
@@ -779,6 +783,8 @@ declare const _default: {
             fontSize: any;
         };
         md: {
+            justifyContent: string;
+            alignItems: string;
             '&.is-circle': {
                 borderRadius: string;
             };
@@ -790,6 +796,8 @@ declare const _default: {
             fontSize: any;
         };
         lg: {
+            justifyContent: string;
+            alignItems: string;
             '&.is-circle': {
                 borderRadius: string;
             };
@@ -801,6 +809,8 @@ declare const _default: {
             fontSize: any;
         };
         xl: {
+            justifyContent: string;
+            alignItems: string;
             '&.is-circle': {
                 borderRadius: string;
             };
@@ -814,13 +824,15 @@ declare const _default: {
     };
     listBox: {
         container: {
-            px: string;
+            pl: string;
+            pr: number;
             py: string;
         };
         option: {
             py: string;
             pl: string;
             pr: string;
+            mr: string;
             justifyContent: string;
             borderRadius: string;
             lineHeight: string;
@@ -1088,7 +1100,6 @@ declare const _default: {
     message: {
         wrapper: {
             gap: string;
-            right: string;
         };
         item: {
             maxWidth: number;
@@ -1207,6 +1218,7 @@ declare const _default: {
             borderTopColor: string;
             borderRadius: string;
             p: string;
+            flexDirection: string;
         };
         footerContainer: {
             borderTop: string;
@@ -1426,9 +1438,6 @@ declare const _default: {
             alignSelf: string;
             mr: string;
         };
-        wrapper: {
-            mr: string;
-        };
     };
     popoverMenu: {
         container: {

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

@@ -149,7 +149,8 @@ var modal = {
     borderTop: '1px solid',
     borderTopColor: 'gray-200',
     borderRadius: '0px 0px 1em 1em',
-    p: 'lg'
+    p: 'lg',
+    flexDirection: 'row-reverse !important'
   },
   footerContainer: {
     borderTop: '1px solid',
@@ -159,13 +160,15 @@ var modal = {
 };
 var listBox = {
   container: {
-    px: 'sm',
+    pl: 'sm',
+    pr: 0,
     py: 'xs'
   },
   option: {
     py: '.75rem',
     pl: '.75rem',
     pr: 'md',
+    mr: 'sm',
     justifyContent: 'space-between',
     borderRadius: '4px',
     lineHeight: 'body',

package/lib/cjs/types/Modal.d.ts

@@ -3,6 +3,7 @@ import { AstroOverlayTriggerState } from '../hooks/useModalState/useModalState';
 import { DOMAttributes } from './shared/dom';
 import { ModalSizeProps, StyleProps } from './shared/style';
 import { TestingAttributes } from './shared/test';
+import { IconButtonProps } from './iconButton';
 export interface ModalProps extends DOMAttributes, TestingAttributes {
     /** Used in tandem with `hasCloseButton` to customize how the close button is rendered. */
     closeButton?: ReactNode;
@@ -70,6 +71,7 @@ export interface ModalHeaderProps extends StyleProps {
     onClose?: () => void;
     title?: ReactNode;
     hasNoSeparator?: boolean;
+    closeButtonProps?: IconButtonProps;
 }
 export type ModalFooterProps = {
     onSubmit?: () => void;

package/lib/components/ComboBox/ComboBoxInput.js

@@ -93,8 +93,9 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
       transform: 'rotate(180deg)'
     } : null,
     title: {
-      name: 'Menu Down'
-    }
+      name: ''
+    },
+    "aria-hidden": "true"
   }))));
   return ___EmotionJSX(FocusRing, {
     within: true,

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -273,7 +273,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     onChange: function onChange(val) {
       return setSearchValue(val);
     },
-    p: "10px"
+    p: "sm"
   }, searchProps)), ___EmotionJSX(VisuallyHidden, {
     role: "alert",
     "aria-live": "polite",

package/lib/components/HelpHint/HelpHint.js

@@ -9,27 +9,10 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { FocusScope, mergeProps, useFocusRing, useFocusWithin, useOverlayPosition, useOverlayTrigger } from 'react-aria';
 import { useOverlayTriggerState } from 'react-stately';
 import { useHover } from '@react-aria/interactions';
-import { v4 as uuid } from 'uuid';
 import { Box, Icon, IconButton, PopoverContainer } from '../..';
-import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
+import { useGetTheme, useLocalOrForwardRef, useStatusClasses } from '../../hooks';
 import { isSafari } from '../../styles/safariAgent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var HelpIcon = function HelpIcon() {
-  var uid = uuid();
-  return ___EmotionJSX("svg", {
-    width: "7",
-    height: "9",
-    viewBox: "0 0 7 9",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": uid
-  }, ___EmotionJSX("title", {
-    id: uid
-  }, "Help Icon"), ___EmotionJSX("path", {
-    d: "M2.56685 7.306V9H4.29385V7.306H2.56685ZM0.795848 3.676H2.41285C2.41285 3.478 2.43485 3.29467 2.47885 3.126C2.52285 2.95 2.58885 2.79967 2.67685 2.675C2.77218 2.543 2.88951 2.44033 3.02885 2.367C3.17551 2.28633 3.34785 2.246 3.54585 2.246C3.83918 2.246 4.06651 2.32667 4.22785 2.488C4.39651 2.64933 4.48085 2.89867 4.48085 3.236C4.48818 3.434 4.45151 3.599 4.37085 3.731C4.29751 3.863 4.19851 3.984 4.07385 4.094C3.94918 4.204 3.81351 4.314 3.66685 4.424C3.52018 4.534 3.38085 4.666 3.24885 4.82C3.11685 4.96667 2.99951 5.14633 2.89685 5.359C2.80151 5.57167 2.74285 5.83567 2.72085 6.151V6.646H4.20585V6.228C4.23518 6.008 4.30485 5.82467 4.41485 5.678C4.53218 5.53133 4.66418 5.403 4.81085 5.293C4.95751 5.17567 5.11151 5.062 5.27285 4.952C5.44151 4.83467 5.59185 4.69533 5.72385 4.534C5.86318 4.37267 5.97685 4.17833 6.06485 3.951C6.16018 3.72367 6.20785 3.434 6.20785 3.082C6.20785 2.86933 6.16018 2.642 6.06485 2.4C5.97685 2.15067 5.82651 1.91967 5.61385 1.707C5.40118 1.49433 5.11885 1.31833 4.76685 1.179C4.42218 1.03233 3.98951 0.959 3.46885 0.959C3.06551 0.959 2.69885 1.02867 2.36885 1.168C2.04618 1.3 1.76751 1.487 1.53285 1.729C1.30551 1.971 1.12585 2.257 0.993848 2.587C0.869181 2.917 0.803181 3.28 0.795848 3.676Z",
-    fill: "#3B4A58"
-  }));
-};
 var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
   var align = props.align,
@@ -45,6 +28,8 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     popoverProps = props.popoverProps,
     tooltipProps = props.tooltipProps,
     others = _objectWithoutProperties(props, _excluded);
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocusWithinOverlay = _useState2[0],
@@ -133,7 +118,7 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     "data-testid": "help-hint__button",
     variant: "hintButton"
   }, mergeProps(triggerProps, iconButtonProps, focusProps, hoverProps)), ___EmotionJSX(Icon, {
-    icon: HelpIcon
+    icon: icons.helpHint
   })), ___EmotionJSX(PopoverContainer, _extends({
     arrowCrossOffset: arrowCrossOffset,
     arrowProps: {

package/lib/components/IconWrapper/IconWrapper.js

@@ -53,9 +53,7 @@ var IconWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: _objectSpread({
       backgroundColor: "iconWrapper.wrapper.".concat(finalColor)
     }, sx),
-    className: classNames,
-    justifyContent: "center",
-    alignItems: "center"
+    className: classNames
   }, wrapperProps), ___EmotionJSX(Icon, _extends({
     icon: icon,
     size: sizeProps.size,

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -31,8 +31,10 @@ 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;
+    popoverWidth = props.popoverWidth,
+    triggerProps = props.triggerProps;
   var _getAriaAttributeProp = getAriaAttributeProps(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = useGetTheme(),
@@ -53,14 +55,14 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var fieldControlInputProps = selectFieldProps.fieldControlInputProps,
     isLoadingInitial = selectFieldProps.isLoadingInitial,
     state = selectFieldProps.state,
-    triggerProps = selectFieldProps.triggerProps,
+    raTriggerProps = selectFieldProps.triggerProps,
     triggerRef = selectFieldProps.triggerRef;
   var trigger = ___EmotionJSX(Button, _extends({
     className: fieldControlInputProps.className,
     ref: triggerRef,
     variant: "link",
     tabIndex: isDisabled ? -1 : 0
-  }, getPendoID(displayName), triggerProps, ariaProps, {
+  }, getPendoID(displayName), triggerProps, raTriggerProps, ariaProps, {
     "aria-describedby": helperText && helperTextId
   }), ___EmotionJSX(Text, {
     variant: "label",
@@ -73,15 +75,16 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     as: "span",
     "aria-hidden": "true",
     variant: "forms.select.arrow"
-  }, ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(Icon, _extends({
     icon: MenuDown,
     title: {
       name: 'Menu Down Icon'
-    },
+    }
+  }, iconProps, {
     sx: state.isOpen ? {
       transform: 'rotate(180deg)'
     } : null
-  }))), ___EmotionJSX(VisuallyHidden, {
+  })))), ___EmotionJSX(VisuallyHidden, {
     "aria-live": "polite",
     id: helperTextId
   }, helperText));

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

@@ -228,6 +228,24 @@ 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';
+  getComponent({
+    iconProps: {
+      'data-testid': iconTestId
+    }
+  });
+  expect(screen.getByTestId(iconTestId)).toBeInTheDocument();
+});
+test('triggerProps are spread to the trigger button', function () {
+  getComponent({
+    triggerProps: {
+      'data-custom': 'custom-trigger'
+    }
+  });
+  var button = screen.getByRole('button');
+  expect(button).toHaveAttribute('data-custom', 'custom-trigger');
+});
 
 // Needs to be added to each components test file
 universalComponentTests({

package/lib/components/Modal/Modal.styles.js

@@ -69,9 +69,7 @@ export var closeButton = {
   position: 'absolute',
   top: 0,
   right: -14,
-  alignSelf: 'auto',
-  width: '22px',
-  height: '22px'
+  alignSelf: 'auto'
 };
 var bodyContainer = {
   px: 'lg'

package/lib/components/Modal/ModalHeader.js

@@ -9,11 +9,11 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["closeButton", "hasCloseButton", "title", "onClose", "containerProps", "titleProps", "hasNoSeparator"];
+var _excluded = ["closeButton", "hasCloseButton", "title", "onClose", "containerProps", "titleProps", "hasNoSeparator", "closeButtonProps"];
 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';
-import CloseIcon from '@pingux/mdi-react/CloseIcon';
+import { useGetTheme } from '../../hooks';
 import Box from '../Box';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
@@ -27,10 +27,17 @@ var ModalHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     containerProps = props.containerProps,
     titleProps = props.titleProps,
     hasNoSeparator = props.hasNoSeparator,
+    closeButtonProps = props.closeButtonProps,
     rest = _objectWithoutProperties(props, _excluded);
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons,
+    modalCloseIconSize = _useGetTheme.modalCloseIconSize;
+  var ModalCloseIcon = icons.ModalCloseIcon;
   var titleContent = typeof title === 'string' && title ? ___EmotionJSX(Box, {
     flex: "1"
-  }, ___EmotionJSX(Text, _extends({}, titleProps, {
+  }, ___EmotionJSX(Text, _extends({
+    as: "h3"
+  }, titleProps, {
     variant: "modalTitle",
     role: "heading",
     "aria-level": 1
@@ -45,16 +52,17 @@ var ModalHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: _objectSpread({
       borderBottomWidth: hasNoSeparator ? '0px' : '1px'
     }, rest.sx)
-  }, containerProps, rest), titleContent, hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, {
+  }, containerProps, rest), titleContent, hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, _extends({
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",
     variant: "modalHeaderCloseButton",
     onPress: onClose
-  }, ___EmotionJSX(Icon, {
-    icon: CloseIcon,
+  }, closeButtonProps), ___EmotionJSX(Icon, {
+    icon: ModalCloseIcon,
     title: {
       name: 'Close Icon'
-    }
+    },
+    size: modalCloseIconSize
   }))));
 });
 ModalHeader.displayName = 'ModalHeader';

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -382,15 +382,15 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     onClick: handleButtonPress,
     sx: {
       border: 'none'
+    },
+    title: {
+      name: ''
     }
   }, ___EmotionJSX(Icon, _extends({
     icon: isOpen ? MenuUp : MenuDown
   }, isOnyx && {
     size: 'sm'
   }, {
-    title: {
-      name: ''
-    },
     "aria-hidden": "true"
   }))));
   return ___EmotionJSX(MultivaluesContext.Provider, {