@pingux/astro 1.38.1 → 1.39.0-alpha.1

package/lib/components/ComboBoxField/ComboBoxField.test.js

@@ -1008,4 +1008,38 @@ test('popover closes on input blur', function () {
   userEvent.click(document.body);
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(screen.queryByRole('option')).not.toBeInTheDocument();
+});
+describe('when isReadOnly is true', function () {
+  var testProp = {
+    isReadOnly: true
+  };
+  var TEST_DEFAULT_INPUT_VALUE = 'test default input value';
+  test('it does not have the show suggestions button', function () {
+    getComponent(testProp);
+    expect(screen.queryByRole('button', {
+      name: "".concat(defaultProps.label, " Show suggestions")
+    })).not.toBeInTheDocument();
+  });
+  test('it has attribute readonly', function () {
+    getComponent(testProp);
+    expect(screen.getByRole('combobox', {
+      name: defaultProps.label
+    })).toHaveAttribute('readonly');
+  });
+  test('the default selected value is selected', function () {
+    testProp.defaultInputValue = TEST_DEFAULT_INPUT_VALUE;
+    getComponent(testProp);
+    expect(screen.getByRole('combobox', {
+      name: defaultProps.label
+    })).toHaveValue(TEST_DEFAULT_INPUT_VALUE);
+  });
+  test('the dropdown does not open when clicked', function () {
+    getComponent(testProp);
+    userEvent.click(screen.getByRole('combobox', {
+      name: defaultProps.label
+    }));
+    expect(screen.queryByRole('listbox', {
+      name: 'Test Label Suggestions'
+    })).not.toBeInTheDocument();
+  });
 });

package/lib/components/Icon/NoticeIcon.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _excluded = ["status"];
+
+var _noticeIcons;
+
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import React from 'react';
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
+import AlertIcon from 'mdi-react/AlertIcon';
+import CheckCircleIcon from 'mdi-react/CheckCircleIcon';
+import InformationIcon from 'mdi-react/InformationIcon';
+import PropTypes from 'prop-types';
+import { Icon } from '../..';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var noticeIcons = (_noticeIcons = {}, _defineProperty(_noticeIcons, statuses.DEFAULT, {
+  icon: InformationIcon,
+  testid: 'default-icon-testid'
+}), _defineProperty(_noticeIcons, statuses.ERROR, {
+  icon: AlertCircleIcon,
+  testid: 'error-icon-testid'
+}), _defineProperty(_noticeIcons, statuses.SUCCESS, {
+  icon: CheckCircleIcon,
+  testid: 'success-icon-testid'
+}), _defineProperty(_noticeIcons, statuses.WARNING, {
+  icon: AlertIcon,
+  testid: 'warning-icon-testid'
+}), _noticeIcons);
+export var NoticeIcon = function NoticeIcon(_ref) {
+  var _ref$status = _ref.status,
+      status = _ref$status === void 0 ? statuses.DEFAULT : _ref$status,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX(Icon, _extends({
+    "data-testid": noticeIcons[status].testid,
+    icon: noticeIcons[status].icon
+  }, others));
+};
+NoticeIcon.propTypes = {
+  status: PropTypes.oneOf(_Object$values(statuses))
+};

package/lib/components/Icon/NoticeIcon.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { render } from '../../utils/testUtils/testWrapper';
+import { NoticeIcon, noticeIcons } from './NoticeIcon';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(NoticeIcon, props));
+};
+
+describe('NoticeIcon', function () {
+  test('renders', function () {
+    getComponent();
+    screen.getByTestId(noticeIcons[statuses.DEFAULT].testid);
+  });
+  test.each([[statuses.DEFAULT, noticeIcons[statuses.DEFAULT].testid], [statuses.ERROR, noticeIcons[statuses.ERROR].testid], [statuses.SUCCESS, noticeIcons[statuses.SUCCESS].testid], [statuses.WARNING, noticeIcons[statuses.WARNING].testid]])('when given status %s it renders icon with %s', function (status, icon) {
+    getComponent({
+      status: status
+    });
+    screen.getByTestId(icon);
+  });
+});

package/lib/components/IconButton/IconButton.stories.js

@@ -42,6 +42,13 @@ export default {
         options: ['iconButton', 'inverted', 'square', 'invertedSquare']
       },
       defaultValue: 'iconButton'
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['xs', 'sm', 'md']
+      },
+      defaultValue: 'sm'
     }
   }
 };
@@ -49,7 +56,8 @@ export var Default = function Default(args) {
   return ___EmotionJSX(IconButton, _extends({
     "aria-label": "default icon button"
   }, args), ___EmotionJSX(Icon, {
-    icon: CreateIcon
+    icon: CreateIcon,
+    size: args.size
   }));
 };
 export var WithTooltip = function WithTooltip() {
@@ -57,7 +65,8 @@ export var WithTooltip = function WithTooltip() {
     "aria-label": "icon button with tooltip",
     title: "Edit"
   }, ___EmotionJSX(Icon, {
-    icon: CreateIcon
+    icon: CreateIcon,
+    size: "sm"
   }));
 };
 export var Disabled = function Disabled() {

package/lib/components/IconButtonToggle/IconButtonToggle.stories.js

@@ -35,6 +35,9 @@ export var Controlled = function Controlled(args) {
     isToggled: isToggled,
     buttonProps: {
       'aria-label': 'eye icon'
+    },
+    iconProps: {
+      size: 'sm'
     }
   }));
 };

package/lib/components/ListItem/ListItem.stories.js

@@ -31,11 +31,9 @@ export var Default = function Default(args) {
   }, "Fons Vernall")), ___EmotionJSX(Box, {
     isRow: true,
     alignSelf: "center"
-  }, ___EmotionJSX(IconButton, {
-    size: 26
-  }, ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(IconButton, null, ___EmotionJSX(Icon, {
     icon: MoreVertIcon,
-    size: 20,
+    size: "sm",
     color: "neutral.20"
   })))), ___EmotionJSX(Separator, {
     margin: 0
@@ -62,11 +60,9 @@ export var WithSubtitle = function WithSubtitle(args) {
   }, "fvernall0@google.it"))), ___EmotionJSX(Box, {
     isRow: true,
     alignSelf: "center"
-  }, ___EmotionJSX(IconButton, {
-    size: 26
-  }, ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(IconButton, null, ___EmotionJSX(Icon, {
     icon: MoreVertIcon,
-    size: 20,
+    size: "sm",
     color: "neutral.20"
   })))), ___EmotionJSX(Separator, {
     margin: 0

package/lib/components/ListView/ListView.stories.js

@@ -530,7 +530,7 @@ var ListElement = function ListElement(_ref) {
     icon: FormSelectIcon,
     mr: "sm",
     color: "text.primary",
-    size: 25
+    size: "md"
   }), ___EmotionJSX(Text, {
     variant: "itemTitle",
     alignSelf: "center"
@@ -538,12 +538,16 @@ var ListElement = function ListElement(_ref) {
     isRow: true,
     alignSelf: "center"
   }, ___EmotionJSX(IconButton, {
-    "aria-label": "create-icon",
-    size: 20
-  }, ___EmotionJSX(CreateIcon, null)), ___EmotionJSX(IconButton, {
-    "aria-label": "actions-icon",
-    size: 20
-  }, ___EmotionJSX(MoreVertIcon, null))));
+    "aria-label": "create-icon"
+  }, ___EmotionJSX(Icon, {
+    icon: CreateIcon,
+    size: "sm"
+  })), ___EmotionJSX(IconButton, {
+    "aria-label": "actions-icon"
+  }, ___EmotionJSX(Icon, {
+    icon: MoreVertIcon,
+    size: "sm"
+  }))));
 };
 
 export var Default = function Default(_ref2) {
@@ -566,7 +570,7 @@ export var Default = function Default(_ref2) {
       icon: FormSelectIcon,
       mr: "sm",
       color: "text.primary",
-      size: 25
+      size: "md"
     }), ___EmotionJSX(Text, {
       variant: "itemTitle",
       alignSelf: "center"
@@ -574,12 +578,17 @@ export var Default = function Default(_ref2) {
       isRow: true,
       alignSelf: "center"
     }, ___EmotionJSX(IconButton, {
-      "aria-label": "create-icon",
-      size: 20
-    }, ___EmotionJSX(CreateIcon, null)), ___EmotionJSX(IconButton, {
+      "aria-label": "create-icon"
+    }, ___EmotionJSX(Icon, {
+      icon: CreateIcon,
+      size: "sm"
+    })), ___EmotionJSX(IconButton, {
       "aria-label": "actions-icon",
-      size: 20
-    }, ___EmotionJSX(MoreVertIcon, null)))));
+      size: "sm"
+    }, ___EmotionJSX(Icon, {
+      icon: MoreVertIcon,
+      size: "sm"
+    })))));
   });
 };
 export var InfiniteLoadingList = function InfiniteLoadingList(args) {

package/lib/components/Messages/Message.js

@@ -5,25 +5,13 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["color"];
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { forwardRef, useRef, useState, useLayoutEffect } from 'react';
-import PropTypes from 'prop-types';
-import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
-import CheckCircleIcon from 'mdi-react/CheckCircleIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
-import AlertIcon from 'mdi-react/AlertIcon';
-import InformationIcon from 'mdi-react/InformationIcon';
-import useStatusClasses from '../../hooks/useStatusClasses';
+import PropTypes from 'prop-types';
+import { NoticeIcon } from '../Icon/NoticeIcon';
 import statuses from '../../utils/devUtils/constants/statuses';
-import Box from '../Box';
-import Icon from '../Icon';
-import IconButton from '../IconButton';
-import Text from '../Text';
+import useStatusClasses from '../../hooks/useStatusClasses';
+import { Box, Icon, IconButton, Text } from '../..';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var icons = {
-  "default": InformationIcon,
-  success: CheckCircleIcon,
-  error: AlertCircleIcon,
-  warning: AlertIcon
-};
 export var ARIA_STATUSES = {
   SUCCESS: 'Success Message',
   ERROR: 'Error Message',
@@ -50,10 +38,10 @@ var CloseButton = function CloseButton(_ref) {
 CloseButton.propTypes = {
   color: PropTypes.string
 };
-var Message = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      item = props.item,
-      onClose = props.onClose;
+var Message = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var className = _ref2.className,
+      item = _ref2.item,
+      onClose = _ref2.onClose;
   var key = item.key,
       itemProps = item.props;
   var children = itemProps.children,
@@ -61,8 +49,7 @@ var Message = /*#__PURE__*/forwardRef(function (props, ref) {
       status = _itemProps$status === void 0 ? 'default' : _itemProps$status,
       bg = itemProps.bg,
       color = itemProps.color,
-      _itemProps$icon = itemProps.icon,
-      icon = _itemProps$icon === void 0 ? icons[status] : _itemProps$icon,
+      icon = itemProps.icon,
       _itemProps$isHidden = itemProps.isHidden,
       isHidden = _itemProps$isHidden === void 0 ? false : _itemProps$isHidden,
       dataId = itemProps['data-id'];
@@ -104,6 +91,17 @@ var Message = /*#__PURE__*/forwardRef(function (props, ref) {
     return '';
   };
 
+  var messageIconProps = {
+    className: statusClasses,
+    color: color,
+    mr: 'md'
+  };
+  var messageIcon = icon ? ___EmotionJSX(Icon, _extends({
+    icon: icon,
+    "data-testid": "custom-icon-testid"
+  }, messageIconProps)) : ___EmotionJSX(NoticeIcon, _extends({
+    status: status
+  }, messageIconProps));
   return ___EmotionJSX(Box, {
     variant: "messages.transition",
     className: wrapperClasses,
@@ -122,12 +120,7 @@ var Message = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "messages.item",
     className: statusClasses,
     bg: bg
-  }, icon && ___EmotionJSX(Icon, {
-    icon: icon,
-    className: statusClasses,
-    color: color,
-    mr: "md"
-  }), ___EmotionJSX(Text, {
+  }, messageIcon, ___EmotionJSX(Text, {
     className: statusClasses,
     color: color,
     mr: "md"

package/lib/components/Messages/Messages.test.js

@@ -5,6 +5,7 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React from 'react';
 import { Item } from '@react-stately/collections';
 import userEvent from '@testing-library/user-event';
+import AccountIcon from 'mdi-react/AccountIcon';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import Messages, { messagesReducerStory, multiMessagesReducerStory } from '.';
@@ -146,4 +147,14 @@ test('should render messages with multiMessagesReducerStory', function () {
   getComponent();
   multiMessagesReducerStory.actions.showSuccessMessage();
   expect(screen.getByTestId(testId)).toBeInTheDocument();
+});
+test('should render a custom icon', function () {
+  getWithDynamicList({
+    items: [{
+      key: 'message1',
+      text: 'test text',
+      icon: AccountIcon
+    }]
+  });
+  screen.getByTestId('custom-icon-testid');
 });

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -51,7 +51,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     "data-testid": heading
   }, icon && ___EmotionJSX(Icon, {
     icon: icon,
-    size: 20,
+    size: "sm",
     sx: {
       mr: '10px',
       color: 'white',
@@ -68,7 +68,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     }
   }, ___EmotionJSX(Icon, {
     icon: isExpanded ? MenuUp : MenuDown,
-    size: 20,
+    size: "xs",
     sx: {
       color: 'white',
       fill: 'white'

package/lib/components/TextField/TextField.stories.js

@@ -57,7 +57,7 @@ export var Default = function Default(_ref) {
       args = _objectWithoutProperties(_ref, _excluded);
 
   return ___EmotionJSX(TextField, _extends({
-    id: "custom-id",
+    id: "default-id",
     name: "custom-name",
     label: "Example Label"
   }, variant && {
@@ -68,7 +68,7 @@ export var Default = function Default(_ref) {
 };
 export var SmallVariant = function SmallVariant() {
   return ___EmotionJSX(TextField, {
-    id: "custom-id",
+    id: "small-variant-id",
     name: "custom-name",
     label: "Example Label",
     controlProps: {
@@ -187,7 +187,7 @@ export var Warning = function Warning() {
 };
 export var WithHelpHint = function WithHelpHint() {
   return ___EmotionJSX(TextField, {
-    id: "custom-id",
+    id: "with-help-hint-id",
     name: "custom-name",
     hintText: "Example Hint",
     label: "Example Label"

package/lib/index.js

@@ -22,6 +22,8 @@ export { default as Bracket } from './components/Bracket';
 export * from './components/Bracket';
 export { default as Breadcrumbs } from './components/Breadcrumbs';
 export * from './components/Breadcrumbs';
+export { default as Bulletin } from './components/Bulletin';
+export * from './components/Bulletin';
 export { default as Button } from './components/Button';
 export * from './components/Button';
 export { default as Card } from './components/Card';

package/lib/recipes/ApplicationSearchDropdown.stories.js

@@ -215,7 +215,8 @@ export var Default = function Default() {
         '& > path': {
           fill: isPinned ? 'success.bright' : 'neutral.50'
         }
-      }
+      },
+      size: "sm"
     }))));
   };
 

package/lib/recipes/AttributeMappingReadOnlyField.stories.js

@@ -140,7 +140,7 @@ var Title = function Title() {
     "aria-label": "edit header button"
   }, ___EmotionJSX(Icon, {
     icon: CreateIcon,
-    size: 18
+    size: "sm"
   }))));
 };
 

package/lib/recipes/AttributesAndPingOneMapping.stories.js

@@ -159,7 +159,8 @@ var Row = /*#__PURE__*/memo(function (props) {
     "aria-label": "icon button with tooltip",
     title: "Advanced Expression"
   }, ___EmotionJSX(Icon, {
-    icon: CogsIcon
+    icon: CogsIcon,
+    size: "sm"
   })), ___EmotionJSX(IconButton, {
     "aria-label": "icon button with tooltip",
     title: "Delete",
@@ -170,7 +171,8 @@ var Row = /*#__PURE__*/memo(function (props) {
       return removeRow(index);
     }
   }, ___EmotionJSX(Icon, {
-    icon: DeleteIcon
+    icon: DeleteIcon,
+    size: "sm"
   })))));
 });
 export var Default = function Default() {

package/lib/recipes/CollapsiblePanel.stories.js

@@ -210,7 +210,7 @@ export var Default = function Default() {
     "aria-label": "Close Panel"
   }, ___EmotionJSX(Icon, {
     icon: Clear,
-    size: 20
+    size: "sm"
   }))))), ___EmotionJSX(Box, {
     pl: "md",
     pt: "25px"

package/lib/recipes/ConditionalFilter.stories.js

@@ -109,7 +109,7 @@ export var Default = function Default() {
     }
   }, ___EmotionJSX(Icon, {
     icon: CreateIcon,
-    size: 14
+    size: "xs"
   }))), ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(Chip, {

package/lib/recipes/DatePicker.stories.js

@@ -97,7 +97,7 @@ export var Default = function Default() {
         ref: triggerRef
       }, triggerProps), ___EmotionJSX(Icon, {
         icon: CalendarIcon,
-        size: 20
+        size: "sm"
       }))
     },
     onChange: handleInputChange,

package/lib/recipes/EditableInput.stories.js

@@ -312,12 +312,14 @@ var EditableControl = function EditableControl(props) {
     variant: confirmBtn.variant,
     sx: sx.editableControlIconButton
   }, ___EmotionJSX(Icon, {
-    icon: CheckIcon
+    icon: CheckIcon,
+    size: "sm"
   })), ___EmotionJSX(IconButton, {
     "aria-label": cancelBtn.ariaLabel,
     onPress: handleCancel,
     variant: cancelBtn.variant
   }, ___EmotionJSX(Icon, {
-    icon: CloseIcon
+    icon: CloseIcon,
+    size: "sm"
   })));
 };

package/lib/recipes/LinkedListView.stories.js

@@ -226,7 +226,7 @@ export var Default = function Default(_ref) {
       "aria-label": "Menu Button"
     }, ___EmotionJSX(Icon, {
       icon: DotsVerticalIcon,
-      size: 16,
+      size: "xs",
       color: "Neutral.40",
       m: "0.61px"
     }))), ___EmotionJSX(Menu, {

package/lib/recipes/ListAndPanel.stories.js

@@ -201,7 +201,11 @@ var ListElement = function ListElement(_ref) {
   }), ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(IconButton, {
     "aria-label": "more icon button",
     mr: onClosePanel ? 'sm' : 0
-  }, ___EmotionJSX(MoreVertIcon, null)), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
+  }, ___EmotionJSX(Icon, {
+    icon: MoreVertIcon,
+    color: "white",
+    size: "sm"
+  })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
     key: "enable"
   }, "Enable user"), ___EmotionJSX(Item, {
     key: "disable"
@@ -210,7 +214,10 @@ var ListElement = function ListElement(_ref) {
   }, "Delete user"))), onClosePanel && ___EmotionJSX(IconButton, {
     "aria-label": "close icon button",
     onPress: onClosePanel
-  }, ___EmotionJSX(CloseIcon, null))));
+  }, ___EmotionJSX(Icon, {
+    size: "sm",
+    icon: CloseIcon
+  }))));
 };
 
 export var Default = function Default() {
@@ -271,7 +278,7 @@ export var Default = function Default() {
   }, ___EmotionJSX(Icon, {
     icon: PlusIcon,
     color: "white",
-    size: 13
+    size: "xs"
   }))), ___EmotionJSX(Text, {
     variant: "bodyWeak"
   }, description, ___EmotionJSX(Link, {

package/lib/recipes/MaskedValue.stories.js

@@ -61,6 +61,7 @@ export var Default = function Default(_ref) {
     },
     sx: sx.showHideButton
   }, ___EmotionJSX(Icon, {
-    icon: isMasked ? EyeOffIcon : EyeIcon
+    icon: isMasked ? EyeOffIcon : EyeIcon,
+    size: "sm"
   }))));
 };

package/lib/recipes/OneWayToBidirectionalArrow.stories.js

@@ -120,7 +120,7 @@ export var Default = function Default() {
     defaultIcon: CustomOffSvg,
     title: "Bidirectional/ Outbound toggle",
     iconProps: {
-      size: 16
+      size: 'xs'
     },
     buttonProps: {
       variant: 'bidirectionalIconButton'
@@ -150,7 +150,7 @@ export var Default = function Default() {
   }, ___EmotionJSX(Icon, {
     icon: CogsIcon,
     sx: sx.actionIcon,
-    size: 20,
+    size: "sm",
     title: "edit icon"
   })), ___EmotionJSX(IconButton, {
     sx: sx.iconButton,
@@ -158,7 +158,7 @@ export var Default = function Default() {
   }, ___EmotionJSX(Icon, {
     icon: DeleteIcon,
     sx: sx.actionIcon,
-    size: 20,
+    size: "sm",
     title: "delete icon"
   })))), ___EmotionJSX(Box, {
     sx: sx.outerContainer,
@@ -222,7 +222,7 @@ export var Default = function Default() {
   }, ___EmotionJSX(Icon, {
     icon: CogsIcon,
     sx: sx.actionIcon,
-    size: 20,
+    size: "sm",
     title: "edit icon"
   })), ___EmotionJSX(IconButton, {
     sx: sx.iconButton,
@@ -230,7 +230,7 @@ export var Default = function Default() {
   }, ___EmotionJSX(Icon, {
     icon: DeleteIcon,
     sx: sx.actionIcon,
-    size: 20,
+    size: "sm",
     title: "delete icon"
   })))));
 };

package/lib/recipes/PageHeader.stories.js

@@ -46,7 +46,7 @@ export var Default = function Default() {
   }, ___EmotionJSX(Icon, {
     icon: PlusIcon,
     color: "white",
-    size: 13
+    size: "xs"
   }))), ___EmotionJSX(Text, {
     variant: "bodyWeak"
   }, description)));

package/lib/recipes/PanelHeader.stories.js

@@ -51,7 +51,7 @@ export var Default = function Default() {
     "aria-label": "Menu Button"
   }, ___EmotionJSX(Icon, {
     icon: DotsVerticalIcon,
-    size: 16.8,
+    size: "xs",
     color: "Neutral.40",
     m: "0.61px"
   })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
@@ -68,7 +68,7 @@ export var Default = function Default() {
     mx: "10px"
   }, ___EmotionJSX(Icon, {
     icon: CloseIcon,
-    size: 16.8,
+    size: "xs",
     color: "Neutral.40",
     m: "0.61px"
   }))));

package/lib/recipes/RadioButtonsWithLinks.stories.js

@@ -81,7 +81,8 @@ export var Default = function Default() {
       onPress: onPress,
       "aria-label": "close icon button"
     }, ___EmotionJSX(Icon, {
-      icon: CloseIcon
+      icon: CloseIcon,
+      size: "sm"
     }))), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
       sx: titleSx,
       mb: "xs"

package/lib/recipes/ScrollableListView.stories.js

@@ -103,11 +103,15 @@ export var Default = function Default(_ref) {
       isRow: true,
       alignSelf: "center"
     }, ___EmotionJSX(IconButton, {
-      "aria-label": "create-icon",
-      size: 20
-    }, ___EmotionJSX(CreateIcon, null)), ___EmotionJSX(IconButton, {
-      "aria-label": "create-icon",
-      size: 20
-    }, ___EmotionJSX(MoreVertIcon, null)))));
+      "aria-label": "create-icon"
+    }, ___EmotionJSX(Icon, {
+      icon: CreateIcon,
+      size: "sm"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "create-icon"
+    }, ___EmotionJSX(Icon, {
+      icon: MoreVertIcon,
+      size: "sm"
+    })))));
   })));
 };