@pingux/astro 2.120.0 → 2.121.0-alpha.1

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

@@ -0,0 +1,144 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListViewNextGen = void 0;
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _react = _interopRequireWildcard(require("react"));
+var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
+var _TrashCanOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/TrashCanOutlineIcon"));
+var _2 = require("../../..");
+var _chartData = require("../../ListViewItem/controls/chart/chartData");
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+var items = (0, _from["default"])({
+  length: 10
+}, function (_, index) {
+  var id = (index + 1).toString();
+  return {
+    key: "Animal".concat(id),
+    name: "Animal".concat(id),
+    id: id
+  };
+});
+var colors = ['cyan', 'orange', 'red', 'green', 'purple', 'yellow', 'teal', 'pink', 'yellow', 'green'];
+var getColor = function getColor(index) {
+  var lastDigit = index % 10;
+  return colors[lastDigit];
+};
+var ListViewNextGen = function ListViewNextGen() {
+  var chartContainerRef = (0, _react.useRef)();
+  var Controls = function Controls() {
+    return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_2.ListViewItemSwitchField, null), (0, _react2.jsx)(_2.ListViewItemMenu, null, (0, _react2.jsx)(_2.Item, {
+      key: "enable"
+    }, "Enable user"), (0, _react2.jsx)(_2.Item, {
+      key: "disable"
+    }, "Disable user"), (0, _react2.jsx)(_2.Item, {
+      key: "delete"
+    }, "Delete user")));
+  };
+  return (0, _react2.jsx)(_2.Box, {
+    backgroundColor: "background.base",
+    p: "lg"
+  }, (0, _react2.jsx)(_2.Box, {
+    height: "400px",
+    mb: "xl"
+  }, (0, _react2.jsx)(_2.Text, {
+    as: "h2",
+    mb: "md"
+  }, "ListView"), (0, _react2.jsx)(_2.ListView, {
+    items: items,
+    selectionMode: "single"
+  }, (0, _map["default"])(items).call(items, function (item, index) {
+    return (0, _react2.jsx)(_2.Item, item, (0, _react2.jsx)(_2.ListViewItem, {
+      data: {
+        icon: _TrashCanOutlineIcon["default"],
+        text: item.name,
+        subtext: loremText
+      },
+      iconWrapperProps: {
+        size: 'md',
+        color: getColor(index)
+      },
+      hasSeparator: false
+    }));
+  }))), (0, _react2.jsx)(_2.Box, {
+    height: "400px",
+    mb: "xl"
+  }, (0, _react2.jsx)(_2.Text, {
+    as: "h2",
+    mb: "md"
+  }, "ListView with Expanded Items"), (0, _react2.jsx)(_2.ListView, {
+    items: items,
+    selectionMode: "expansion",
+    expandedKeys: ['Animal1']
+  }, function (item) {
+    return (0, _react2.jsx)(_2.Item, {
+      key: item.name,
+      textValue: item.name
+    }, (0, _react2.jsx)(_2.Box, {
+      isRow: true,
+      sx: {
+        alignItems: 'center'
+      }
+    }, (0, _react2.jsx)(_2.Text, {
+      variant: "itemTitle"
+    }, item.name)), (0, _react2.jsx)(_2.Box, {
+      sx: {
+        my: 'lg'
+      }
+    }, (0, _react2.jsx)(_2.SearchField, {
+      value: "Animal1",
+      maxWidth: "400px",
+      "aria-label": "Search",
+      placeholder: "Search"
+    }), (0, _react2.jsx)(_2.Text, {
+      sx: {
+        mt: 'md',
+        fontWeight: '1'
+      }
+    }, "Lorem ipsum dolor sit amet consectetur. Viverra nulla nec velit sollicitudin sed nisi mi gravida. Maecenas vestibulum pretium dictum dictum tempus. Sit et rutrum hendrerit facilisi turpis tellus elementum. Egestas consectetur in ac id. Sit aliquam et ut pellentesque in at blandit sed. Sapien morbi cras eleifend lectus.")));
+  })), (0, _react2.jsx)(_2.Box, {
+    height: "400px"
+  }, (0, _react2.jsx)(_2.Text, {
+    as: "h2",
+    mb: "md"
+  }, "ListView with Charts"), (0, _react2.jsx)(_2.ListView, {
+    items: items
+  }, function (item) {
+    return (0, _react2.jsx)(_2.Item, {
+      key: item.name
+    }, (0, _react2.jsx)(_2.ListViewItem, {
+      ref: chartContainerRef,
+      data: {
+        text: item.name,
+        subtext: item.subtext,
+        icon: _FormSelectIcon["default"]
+      },
+      iconProps: {
+        color: 'text.secondary'
+      }
+    }, (0, _react2.jsx)(_2.ListViewItemChart, {
+      containerRef: chartContainerRef,
+      chartData: _chartData.chartData,
+      chartDataKey: "fullData",
+      title: "Avg daily sign-ons:",
+      contentCount: "31",
+      contentCountLabel: "Past 7 days",
+      chartLabel: "12 wk trend",
+      trend: "+115.0%",
+      tooltipText: "See Contributing Data",
+      ariaLabel: item.name
+    }), (0, _react2.jsx)(Controls, null)));
+  })));
+};
+exports.ListViewNextGen = ListViewNextGen;

package/lib/cjs/{styles/themeOverrides/nextGenDarkMode/stories/NextGenDarkListView.chromatic.stories.js → components/ListView/stories/ListViewOnyxDark.stories.js}

@@ -7,11 +7,11 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _ = require("../../../..");
-var _ListViewNextGenComponent = require("../../../themes/next-gen/stories/ListViewNextGenComponent");
+var _ = require("../../..");
+var _ListViewNextGenComponent = require("./ListViewNextGenComponent");
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Chromatic Only Onyx Dark ListView'
+  title: 'Onyx Dark ListView'
 };
 exports["default"] = _default;
 var Default = function Default() {

package/lib/cjs/components/ListViewItem/ListViewItem.js

@@ -19,18 +19,19 @@ var _hooks = require("../../hooks");
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _listViewItemAttributes = require("./listViewItemAttributes");
 var _react2 = require("@emotion/react");
-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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var LIST_ITEM_ICON = '-list-item-icon';
 exports.LIST_ITEM_ICON = LIST_ITEM_ICON;
 var displayName = 'ListViewItem';
 var ListViewItem = /*#__PURE__*/(0, _react.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,
@@ -61,7 +62,17 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (image && !icon) return 'listViewItem.imageWrapper';
     return 'listViewItem.iconWrapper';
   };
-  var renderIcon = icon && (0, _react2.jsx)(_.Box, {
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
+  var renderIcon = icon && (isOnyx ? (0, _react2.jsx)(_.IconWrapper, (0, _extends2["default"])({
+    icon: icon,
+    size: "sm",
+    title: {
+      name: (0, _concat["default"])(_context = "".concat(text)).call(_context, LIST_ITEM_ICON)
+    },
+    isCircle: true,
+    color: "cyan"
+  }, iconWrapperProps)) : (0, _react2.jsx)(_.Box, {
     width: "25px",
     variant: "listViewItem.iconContainer"
   }, (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
@@ -69,9 +80,9 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     icon: icon,
     size: "md",
     title: {
-      name: (0, _concat["default"])(_context = "".concat(text)).call(_context, LIST_ITEM_ICON)
+      name: (0, _concat["default"])(_context2 = "".concat(text)).call(_context2, LIST_ITEM_ICON)
     }
-  }, iconProps)));
+  }, iconProps))));
   var renderImage = !icon && image && (0, _react2.jsx)(_.Box, {
     width: "35px"
   }, (0, _react2.jsx)(_.Image, {

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

@@ -15,6 +15,7 @@ var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon
 var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _ = require("../..");
+var _hooks = require("../../hooks");
 var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _images = require("../../utils/devUtils/constants/images");
 var _chartData = require("./controls/chart/chartData");
@@ -41,13 +42,21 @@ var _default = {
 exports["default"] = _default;
 var Wrapper = function Wrapper(_ref) {
   var children = _ref.children;
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   return (0, _react2.jsx)(_.Box, {
-    sx: {
+    sx: isOnyx ? {
+      bg: 'transparent',
+      border: '1px solid',
+      borderColor: 'border.base',
+      borderRadius: '1rem',
+      p: '0'
+    } : {
       bg: 'accent.99'
     }
-  }, (0, _react2.jsx)(_.Separator, {
+  }, !isOnyx && (0, _react2.jsx)(_.Separator, {
     margin: 0
-  }), children, (0, _react2.jsx)(_.Separator, {
+  }), children, !isOnyx && (0, _react2.jsx)(_.Separator, {
     margin: 0
   }));
 };
@@ -56,6 +65,10 @@ var Default = function Default() {
     data: {
       icon: _AccountIcon["default"],
       text: 'Fons Vernall'
+    },
+    iconWrapperProps: {
+      size: 'sm',
+      color: 'green'
     }
   }));
 };
@@ -72,6 +85,10 @@ var WithSubtext = function WithSubtext() {
       icon: _AccountIcon["default"],
       subtext: 'rad_developer@pingidentity.com',
       text: 'Fons Vernall'
+    },
+    iconWrapperProps: {
+      size: 'sm',
+      color: 'pink'
     }
   }));
 };
@@ -107,6 +124,10 @@ var WithControls = function WithControls() {
     data: {
       icon: _FormSelectIcon["default"],
       text: 'Fons Vernall'
+    },
+    iconWrapperProps: {
+      size: 'sm',
+      color: 'orange'
     }
   }, (0, _react2.jsx)(_.ListViewItemEditButton, {
     "aria-label": "edit-icon"
@@ -144,6 +165,10 @@ var WithRightOfDataSlot = function WithRightOfDataSlot() {
       text: 'Fons Vernall',
       subtext: 'verylongemailaddress@email.com'
     },
+    iconWrapperProps: {
+      size: 'sm',
+      color: 'teal'
+    },
     slots: {
       rightOfData: renderRightOfData
     }
@@ -175,6 +200,10 @@ var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
       icon: _AccountIcon["default"],
       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
@@ -205,6 +234,10 @@ var WithCharts = function WithCharts() {
       text: 'Kangaroo',
       subtext: 'kangaroo@example.com',
       icon: _FormSelectIcon["default"]
+    },
+    iconWrapperProps: {
+      size: 'sm',
+      color: 'purple'
     }
   }, (0, _react2.jsx)(_.ListViewItemChart, {
     containerRef: containerRef,
@@ -250,6 +283,10 @@ var WithExtraLongText = function WithExtraLongText() {
       text: longText,
       subtext: longText
     },
+    iconWrapperProps: {
+      size: 'sm',
+      color: 'orange'
+    },
     slots: {
       rightOfData: renderRightOfData
     }

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

@@ -152,6 +152,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'
+};
 var _default = {
   container: container,
   controls: controls,
@@ -166,6 +177,9 @@ var _default = {
   expandableFocusContainer: expandableFocusContainer,
   expandableItemBody: expandableItemBody,
   expandableStyledListItem: expandableStyledListItem,
-  expandableRow: expandableRow
+  expandableRow: expandableRow,
+  expandIcon: expandIcon,
+  editIcon: editIcon,
+  menuIcon: menuIcon
 };
 exports["default"] = _default;

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

@@ -28,7 +28,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     ml: "sm"
   }, (0, _react2.jsx)(_.IconButton, props, (0, _react2.jsx)(_.Icon, {
     icon: _CreateIcon["default"],
-    size: "md"
+    variant: "listViewItem.editIcon"
   })));
 });
 ListViewItemEditButton.propTypes = _iconButtonAttributes.iconButtonPropTypes;

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

@@ -12,8 +12,8 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _MoreVertIcon = _interopRequireDefault(require("@pingux/mdi-react/MoreVertIcon"));
 var _ = require("../../..");
+var _hooks = require("../../../hooks");
 var _menuAttributes = require("../../Menu/menuAttributes");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "iconButtonProps"];
@@ -30,12 +30,18 @@ var ListViewItemMenu = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
   var children = _ref.children,
     iconButtonProps = _ref.iconButtonProps,
     others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    icons = _useGetTheme.icons;
+  var listViewMenu = icons.listViewMenu;
   return (0, _react2.jsx)(_.PopoverMenu, null, (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
     "aria-label": "more",
     ref: ref
   }, iconButtonProps), (0, _react2.jsx)(_.Icon, {
-    icon: _MoreVertIcon["default"],
-    size: "md"
+    icon: listViewMenu,
+    variant: "listViewItem.menuIcon",
+    title: {
+      name: 'Menu Icon'
+    }
   })), (0, _react2.jsx)(_.Menu, others, children));
 });
 ListViewItemMenu.propTypes = _menuAttributes.menuPropTypes;

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

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

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

@@ -24,8 +24,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _recharts = require("recharts");
 var _useResizeObserver2 = _interopRequireDefault(require("use-resize-observer"));
+var _hooks = require("../../../../hooks");
 var _index = require("../../../../index");
 var _colors = require("../../../../styles/colors");
+var _colorTokens = require("../../../../styles/themes/next-gen/tokens/colorTokens");
 var _ListViewItemChartAttributes = require("./ListViewItemChartAttributes");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -96,6 +98,8 @@ var ListViewItemChart = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
     }
     setAriaLabel();
   }, [ariaLabel, containerRef]);
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyxDark = _useGetTheme.themeState.isOnyxDark;
   return (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",
@@ -131,7 +135,7 @@ var ListViewItemChart = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
     type: "monotone",
     dataKey: chartDataKey,
     dot: false,
-    stroke: _colors.neutral[20]
+    stroke: isOnyxDark ? _colorTokens.nextGenColors['gray-100'] : _colors.neutral[20]
   })))), (0, _react2.jsx)(_index.Text, {
     variant: "variants.lisViewItemChart.chartLabel"
   }, chartLabel)), (0, _react2.jsx)(_index.Box, {

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

@@ -17,7 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
 var _usePaginationState2 = _interopRequireDefault(require("../../hooks/usePaginationState"));
 var _index = require("../../index");
-var _ListView = require("../ListView/ListView.stories");
+var _animals = _interopRequireDefault(require("../../utils/devUtils/constants/animals"));
 var _Pagination = _interopRequireDefault(require("./Pagination.mdx"));
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -65,7 +65,7 @@ var ExampleComponent = function ExampleComponent() {
   return (0, _react2.jsx)(_index.ScrollBox, {
     maxHeight: "400px"
   }, (0, _react2.jsx)(_index.ListView, {
-    items: (0, _map["default"])(_context = (0, _slice["default"])(_ListView.animals).call(_ListView.animals, paginationState.firstRenderedIndex, paginationState.lastRenderedIndex + 1)).call(_context, function (_item) {
+    items: (0, _map["default"])(_context = (0, _slice["default"])(_animals["default"]).call(_animals["default"], paginationState.firstRenderedIndex, paginationState.lastRenderedIndex + 1)).call(_context, function (_item) {
       return {
         name: _item.name,
         key: _item.name,
@@ -101,7 +101,7 @@ var WithListView = function WithListView() {
   return (0, _react2.jsx)(_index.PaginationProvider, null, (0, _react2.jsx)(_index.Box, {
     gap: "sm"
   }, (0, _react2.jsx)(ExampleComponent, null), (0, _react2.jsx)(_index.Pagination, {
-    totalCount: _ListView.animals.length
+    totalCount: _animals["default"].length
   })));
 };
 exports.WithListView = WithListView;

package/lib/cjs/components/SearchField/SearchField.js

@@ -83,14 +83,8 @@ var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, iconProps)), !hasNoClearButton && state.value !== '' && (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
     tabIndex: 0,
     onKeyDown: handleKeyDownEvent,
-    sx: {
-      position: 'absolute',
-      top: 8,
-      right: 10,
-      path: {
-        fill: 'text.secondary'
-      }
-    }
+    color: "text.secondary",
+    variant: "searchClearButton"
   }, clearButtonProps), (0, _react2.jsx)(_.Icon, {
     icon: _CloseIcon["default"],
     title: {