@pingux/astro 2.121.0-alpha.0 → 2.121.0-alpha.1

package/lib/components/ListViewItem/ListViewItem.js

@@ -1,22 +1,23 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "data", "iconProps", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
+var _excluded = ["children", "className", "data", "iconProps", "iconWrapperProps", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { forwardRef } from 'react';
 import { useHover } from '@react-aria/interactions';
-import { Box, Icon, Image, Text } from '../..';
-import { useStatusClasses } from '../../hooks';
+import { Box, Icon, IconWrapper, Image, Text } from '../..';
+import { useGetTheme, useStatusClasses } from '../../hooks';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { listViewItemPropTypes } from './listViewItemAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var LIST_ITEM_ICON = '-list-item-icon';
 var displayName = 'ListViewItem';
 var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _context;
+  var _context, _context2;
   var children = _ref.children,
     className = _ref.className,
     data = _ref.data,
     iconProps = _ref.iconProps,
+    iconWrapperProps = _ref.iconWrapperProps,
     isHovered = _ref.isHovered,
     isSelected = _ref.isSelected,
     linkProps = _ref.linkProps,
@@ -47,7 +48,17 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (image && !icon) return 'listViewItem.imageWrapper';
     return 'listViewItem.iconWrapper';
   };
-  var renderIcon = icon && ___EmotionJSX(Box, {
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
+  var renderIcon = icon && (isOnyx ? ___EmotionJSX(IconWrapper, _extends({
+    icon: icon,
+    size: "sm",
+    title: {
+      name: _concatInstanceProperty(_context = "".concat(text)).call(_context, LIST_ITEM_ICON)
+    },
+    isCircle: true,
+    color: "cyan"
+  }, iconWrapperProps)) : ___EmotionJSX(Box, {
     width: "25px",
     variant: "listViewItem.iconContainer"
   }, ___EmotionJSX(Icon, _extends({
@@ -55,9 +66,9 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     icon: icon,
     size: "md",
     title: {
-      name: _concatInstanceProperty(_context = "".concat(text)).call(_context, LIST_ITEM_ICON)
+      name: _concatInstanceProperty(_context2 = "".concat(text)).call(_context2, LIST_ITEM_ICON)
     }
-  }, iconProps)));
+  }, iconProps))));
   var renderImage = !icon && image && ___EmotionJSX(Box, {
     width: "35px"
   }, ___EmotionJSX(Image, {

package/lib/components/ListViewItem/ListViewItem.stories.js

@@ -4,6 +4,7 @@ import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Badge, Box, ListViewItem, ListViewItemChart, ListViewItemEditButton, ListViewItemMenu, ListViewItemSwitchField, Separator, Text } from '../..';
+import { useGetTheme } from '../../hooks';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import { chartData } from './controls/chart/chartData';
@@ -27,13 +28,21 @@ export default {
 };
 var Wrapper = function Wrapper(_ref) {
   var children = _ref.children;
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   return ___EmotionJSX(Box, {
-    sx: {
+    sx: isOnyx ? {
+      bg: 'transparent',
+      border: '1px solid',
+      borderColor: 'border.base',
+      borderRadius: '1rem',
+      p: '0'
+    } : {
       bg: 'accent.99'
     }
-  }, ___EmotionJSX(Separator, {
+  }, !isOnyx && ___EmotionJSX(Separator, {
     margin: 0
-  }), children, ___EmotionJSX(Separator, {
+  }), children, !isOnyx && ___EmotionJSX(Separator, {
     margin: 0
   }));
 };
@@ -42,6 +51,10 @@ export var Default = function Default() {
     data: {
       icon: AccountIcon,
       text: 'Fons Vernall'
+    },
+    iconWrapperProps: {
+      size: 'sm',
+      color: 'green'
     }
   }));
 };
@@ -57,6 +70,10 @@ export var WithSubtext = function WithSubtext() {
       icon: AccountIcon,
       subtext: 'rad_developer@pingidentity.com',
       text: 'Fons Vernall'
+    },
+    iconWrapperProps: {
+      size: 'sm',
+      color: 'pink'
     }
   }));
 };
@@ -90,6 +107,10 @@ export var WithControls = function WithControls() {
     data: {
       icon: FormSelectIcon,
       text: 'Fons Vernall'
+    },
+    iconWrapperProps: {
+      size: 'sm',
+      color: 'orange'
     }
   }, ___EmotionJSX(ListViewItemEditButton, {
     "aria-label": "edit-icon"
@@ -126,6 +147,10 @@ export var WithRightOfDataSlot = function WithRightOfDataSlot() {
       text: 'Fons Vernall',
       subtext: 'verylongemailaddress@email.com'
     },
+    iconWrapperProps: {
+      size: 'sm',
+      color: 'teal'
+    },
     slots: {
       rightOfData: renderRightOfData
     }
@@ -156,6 +181,10 @@ export var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
       icon: AccountIcon,
       text: 'Fons Vernall',
       subtext: 'verylongemailaddress@email.com'
+    },
+    iconWrapperProps: {
+      size: 'sm',
+      color: 'orange'
     }
     // Note that when the leftOfData slot is used, it overrides the provided icon and
     // removes all margins and padding on the left of data
@@ -185,6 +214,10 @@ export var WithCharts = function WithCharts() {
       text: 'Kangaroo',
       subtext: 'kangaroo@example.com',
       icon: FormSelectIcon
+    },
+    iconWrapperProps: {
+      size: 'sm',
+      color: 'purple'
     }
   }, ___EmotionJSX(ListViewItemChart, {
     containerRef: containerRef,
@@ -229,6 +262,10 @@ export var WithExtraLongText = function WithExtraLongText() {
       text: longText,
       subtext: longText
     },
+    iconWrapperProps: {
+      size: 'sm',
+      color: 'orange'
+    },
     slots: {
       rightOfData: renderRightOfData
     }

package/lib/components/ListViewItem/ListViewItem.styles.js

@@ -145,6 +145,17 @@ var expandableRow = {
     borderBottomColor: 'line.light'
   }
 };
+var expandIcon = {
+  color: 'gray-900'
+};
+var editIcon = {
+  width: '25px !important',
+  height: '25px !important'
+};
+var menuIcon = {
+  width: '25px !important',
+  height: '25px !important'
+};
 export default {
   container: container,
   controls: controls,
@@ -159,5 +170,8 @@ export default {
   expandableFocusContainer: expandableFocusContainer,
   expandableItemBody: expandableItemBody,
   expandableStyledListItem: expandableStyledListItem,
-  expandableRow: expandableRow
+  expandableRow: expandableRow,
+  expandIcon: expandIcon,
+  editIcon: editIcon,
+  menuIcon: menuIcon
 };

package/lib/components/ListViewItem/controls/ListViewItemEditButton.js

@@ -17,7 +17,7 @@ var ListViewItemEditButton = /*#__PURE__*/forwardRef(function (props, ref) {
     ml: "sm"
   }, ___EmotionJSX(IconButton, props, ___EmotionJSX(Icon, {
     icon: CreateIcon,
-    size: "md"
+    variant: "listViewItem.editIcon"
   })));
 });
 ListViewItemEditButton.propTypes = iconButtonPropTypes;

package/lib/components/ListViewItem/controls/ListViewItemMenu.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "iconButtonProps"];
 import React, { forwardRef } from 'react';
-import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
 import { Icon, IconButton, Menu, PopoverMenu } from '../../..';
+import { useGetTheme } from '../../../hooks';
 import { menuPropTypes } from '../../Menu/menuAttributes';
 
 /**
@@ -18,12 +18,18 @@ var ListViewItemMenu = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     iconButtonProps = _ref.iconButtonProps,
     others = _objectWithoutProperties(_ref, _excluded);
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  var listViewMenu = icons.listViewMenu;
   return ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(IconButton, _extends({
     "aria-label": "more",
     ref: ref
   }, iconButtonProps), ___EmotionJSX(Icon, {
-    icon: MoreVertIcon,
-    size: "md"
+    icon: listViewMenu,
+    variant: "listViewItem.menuIcon",
+    title: {
+      name: 'Menu Icon'
+    }
   })), ___EmotionJSX(Menu, others, children));
 });
 ListViewItemMenu.propTypes = menuPropTypes;

package/lib/components/ListViewItem/controls/ListViewItemMenu.test.js

@@ -20,6 +20,7 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(ListViewItemMenu, props, ___EmotionJSX(Item, null, "testItem")));
 };
+
 // Needs to be added to each components test file
 universalComponentTests({
   renderComponent: function renderComponent(props) {

package/lib/components/ListViewItem/controls/chart/ListViewItemChart.js

@@ -16,8 +16,10 @@ import React, { forwardRef, useCallback, useEffect, useMemo } from 'react';
 import { useVisuallyHidden } from 'react-aria';
 import { Line, LineChart, ResponsiveContainer } from 'recharts';
 import useResizeObserver from 'use-resize-observer';
+import { useGetTheme } from '../../../../hooks';
 import { Box, Button, Text, Tooltip, TooltipTrigger } from '../../../../index';
 import { neutral } from '../../../../styles/colors';
+import { nextGenColors } from '../../../../styles/themes/next-gen/tokens/colorTokens';
 import { listViewItemChartPropTypes } from './ListViewItemChartAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ListViewItemChart = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -85,6 +87,8 @@ var ListViewItemChart = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     setAriaLabel();
   }, [ariaLabel, containerRef]);
+  var _useGetTheme = useGetTheme(),
+    isOnyxDark = _useGetTheme.themeState.isOnyxDark;
   return ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center",
@@ -120,7 +124,7 @@ var ListViewItemChart = /*#__PURE__*/forwardRef(function (props, ref) {
     type: "monotone",
     dataKey: chartDataKey,
     dot: false,
-    stroke: neutral[20]
+    stroke: isOnyxDark ? nextGenColors['gray-100'] : neutral[20]
   })))), ___EmotionJSX(Text, {
     variant: "variants.lisViewItemChart.chartLabel"
   }, chartLabel)), ___EmotionJSX(Box, {

package/lib/components/Pagination/Pagination.stories.js

@@ -6,7 +6,7 @@ import React, { useState } from 'react';
 import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
 import usePaginationState from '../../hooks/usePaginationState';
 import { Box, Button, Item, ListView, ListViewItem, Pagination, PaginationProvider, ScrollBox } from '../../index';
-import { animals } from '../ListView/ListView.stories';
+import animals from '../../utils/devUtils/constants/animals';
 import PaginationReadme from './Pagination.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {

package/lib/components/SearchField/SearchField.js

@@ -72,14 +72,8 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, iconProps)), !hasNoClearButton && state.value !== '' && ___EmotionJSX(IconButton, _extends({
     tabIndex: 0,
     onKeyDown: handleKeyDownEvent,
-    sx: {
-      position: 'absolute',
-      top: 8,
-      right: 10,
-      path: {
-        fill: 'text.secondary'
-      }
-    }
+    color: "text.secondary",
+    variant: "searchClearButton"
   }, clearButtonProps), ___EmotionJSX(Icon, {
     icon: CloseIcon,
     title: {

package/lib/hooks/useExpandableListViewItem/useExpandableListViewItem.js

@@ -158,15 +158,21 @@ var useExpandableListViewItem = function useExpandableListViewItem(props) {
       isHovered: isSelectable && item.key === state.hover.hoveredItem,
       isSelected: isSelected,
       isExpanded: isExpanded,
-      isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin && !isFocusEscaped && !isFocusVisibleContainer
+      isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin && !isFocusEscaped && !isFocusVisibleContainer,
+      isFirstItem: item.index === 0,
+      isLastItem: item.index === state.collection.size - 1
     }),
     classNames = _useStatusClasses.classNames;
   var _useStatusClasses2 = useStatusClasses('', {
-      isFocused: isFocusVisibleContainer
+      isFocused: isFocusVisibleContainer,
+      isFirstItemBody: item.index === 0,
+      isLastItemBody: item.index === state.collection.size - 1
     }),
     focusContainerClassName = _useStatusClasses2.classNames;
   var _useStatusClasses3 = useStatusClasses('', {
-      hasSeparator: hasSeparator
+      hasSeparator: hasSeparator,
+      isFirstRow: item.index === 0,
+      isLastRow: item.index === state.collection.size - 1
     }),
     rowClassName = _useStatusClasses3.classNames;
   var expandableRowProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({

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

@@ -35,6 +35,8 @@ var iconWrapper = {
     red: nextGenColors['red-500'],
     yellow: nextGenColors['yellow-500'],
     teal: nextGenColors['teal-500'],
+    blue: nextGenColors['blue-500'],
+    indigo: nextGenColors['indigo-500'],
     lightBlue: nextGenColors['blue-600'],
     lightPink: nextGenColors['pink-600'],
     lightGreen: nextGenColors['green-800'],
@@ -50,6 +52,8 @@ var iconWrapper = {
     red: 'black',
     yellow: 'black',
     teal: 'black',
+    blue: 'black',
+    indigo: 'black',
     lightBlue: nextGenColors['blue-100'],
     lightPink: nextGenColors['pink-100'],
     lightGreen: nextGenColors['green-100'],

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

@@ -6,6 +6,7 @@ import buttons from './variants/buttons';
 import cards from './variants/cards';
 import forms from './variants/forms';
 import links from './variants/links';
+import { text } from './variants/text';
 import variants from './variants/variants';
 import { colors } from './colors';
 var override = {
@@ -16,6 +17,7 @@ var override = {
   badges: badges,
   links: links,
   cards: cards,
+  text: text,
   name: themes.NEXT_GEN_DARK
 };
 var NextGenDarkTheme = merge(NextGenTheme, override);

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

@@ -0,0 +1,58 @@
+export var listViewItem = {
+  styledListItem: {
+    '&.has-separator': {
+      borderBottom: '1px solid',
+      borderBottomColor: 'border.base'
+    },
+    bg: 'background.base',
+    '&.is-selected': {
+      bg: 'background.hover'
+    },
+    '&.is-hovered': {
+      bg: 'background.hover'
+    },
+    '&.is-focused': {
+      boxShadow: '0 0 0 3px inset #1a73e8',
+      bg: 'background.hover'
+    }
+  },
+  expandableStyledListItem: {
+    '&.is-hovered': {
+      bg: 'background.hover'
+    },
+    '&.is-selected': {
+      bg: 'background.hover'
+    },
+    '&.is-focused': {
+      bg: 'background.hover'
+    }
+  },
+  expandIcon: {
+    color: 'gray-400'
+  }
+};
+export var listView = {
+  container: {
+    borderColor: 'border.base'
+  }
+};
+export var lisViewItemChart = {
+  title: {
+    color: 'gray-100'
+  },
+  count: {
+    color: 'gray-100'
+  },
+  countLabel: {
+    color: 'gray-100'
+  },
+  chartLabel: {
+    color: 'gray-100'
+  },
+  trend: {
+    color: 'gray-100'
+  },
+  chartButton: {
+    color: 'gray-100'
+  }
+};

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

@@ -0,0 +1,15 @@
+export var text = {
+  listViewItemText: {
+    color: 'text.secondary'
+  },
+  listViewItemTextSelected: {
+    color: 'gray-100'
+  },
+  listViewItemSubtext: {
+    color: 'gray-400'
+  },
+  itemTitle: {
+    fontWeight: 2,
+    color: 'text.secondary'
+  }
+};

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

@@ -1,6 +1,6 @@
 import { avatar } from './avatar';
 import iconBadge from './iconBadge';
-import { listView, listViewItem } from './lsitview';
+import { listView, listViewItem, lisViewItemChart } from './listview';
 import { menu, menuItem } from './menu';
 import { message } from './message';
 import { navBar } from './navbar';
@@ -68,6 +68,7 @@ export default {
   menuItem: menuItem,
   listViewItem: listViewItem,
   listView: listView,
+  lisViewItemChart: lisViewItemChart,
   navBar: navBar,
   listBox: listBox,
   modal: modal,

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

@@ -6,9 +6,10 @@ import CheckCircleIcon from '@pingux/mdi-react/CheckCircleIcon';
 import InformationIcon from '@pingux/mdi-react/InformationIcon';
 import MenuDown from '@pingux/mdi-react/MenuDownIcon';
 import MenuUp from '@pingux/mdi-react/MenuUpIcon';
+import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
 import { pingLogoHorizontalSmallWhite } from '../../../../utils/devUtils/constants/logos';
 import statuses from '../../../../utils/devUtils/constants/statuses';
 export default (_MenuDown$MenuUp$stat = {
   MenuDown: MenuDown,
   MenuUp: MenuUp
-}, _defineProperty(_MenuDown$MenuUp$stat, statuses.DEFAULT, InformationIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.ERROR, AlertCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.SUCCESS, CheckCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.WARNING, AlertIcon), _defineProperty(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), _MenuDown$MenuUp$stat);
+}, _defineProperty(_MenuDown$MenuUp$stat, statuses.DEFAULT, InformationIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.ERROR, AlertCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.SUCCESS, CheckCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.WARNING, AlertIcon), _defineProperty(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), _defineProperty(_MenuDown$MenuUp$stat, "listViewMenu", MoreVertIcon), _MenuDown$MenuUp$stat);

package/lib/styles/themes/next-gen/colors/iconWrapper.js

@@ -9,6 +9,8 @@ export var iconWrapper = {
     red: nextGenColors['red-100'],
     yellow: nextGenColors['yellow-100'],
     teal: nextGenColors['teal-100'],
+    blue: nextGenColors['blue-100'],
+    indigo: nextGenColors['indigo-100'],
     lightBlue: nextGenColors['blue-100'],
     lightPink: nextGenColors['pink-100'],
     lightGreen: nextGenColors['green-100'],
@@ -24,6 +26,8 @@ export var iconWrapper = {
     red: nextGenColors['red-800'],
     yellow: nextGenColors['yellow-800'],
     teal: nextGenColors['teal-800'],
+    blue: nextGenColors['blue-600'],
+    indigo: nextGenColors['indigo-700'],
     lightBlue: nextGenColors['blue-500'],
     lightPink: nextGenColors['pink-600'],
     lightGreen: nextGenColors['green-800'],

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

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'Pagination'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'ListViewItem', 'Pagination'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],

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

@@ -5,10 +5,11 @@ import AlertOutlineIcon from '@pingux/mdi-react/AlertOutlineIcon';
 import CheckCircleOutlineIcon from '@pingux/mdi-react/CheckCircleOutlineIcon';
 import ChevronDownIcon from '@pingux/mdi-react/ChevronDownIcon';
 import ChevronUpIcon from '@pingux/mdi-react/ChevronUpIcon';
+import DotsHorizontalIcon from '@pingux/mdi-react/DotsHorizontalIcon';
 import InformationOutlineIcon from '@pingux/mdi-react/InformationOutlineIcon';
 import { pingLogoHorizontalSmall } from '../../../../utils/devUtils/constants/logos';
 import statuses from '../../../../utils/devUtils/constants/statuses';
 export default (_MenuDown$MenuUp$stat = {
   MenuDown: ChevronDownIcon,
   MenuUp: ChevronUpIcon
-}, _defineProperty(_MenuDown$MenuUp$stat, statuses.DEFAULT, InformationOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.ERROR, AlertCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.SUCCESS, CheckCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.WARNING, AlertOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", pingLogoHorizontalSmall), _MenuDown$MenuUp$stat);
+}, _defineProperty(_MenuDown$MenuUp$stat, statuses.DEFAULT, InformationOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.ERROR, AlertCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.SUCCESS, CheckCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.WARNING, AlertOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", pingLogoHorizontalSmall), _defineProperty(_MenuDown$MenuUp$stat, "listViewMenu", DotsHorizontalIcon), _MenuDown$MenuUp$stat);

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

@@ -334,7 +334,18 @@ var iconButtons = {
     '&.is-disabled': {
       backgroundColor: 'gray-300'
     }
-  }
+  },
+  searchClearButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+    border: 'none',
+    '&.is-hovered': {
+      bg: 'background.hover'
+    },
+    '&.is-pressed': {
+      bg: 'background.hover'
+    },
+    position: 'absolute',
+    right: 10
+  })
 };
 var buttons = {
   neutral: neutral,