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

package/lib/cjs/components/IconButton/IconButton.styles.d.ts

@@ -722,5 +722,46 @@ declare const _default: {
         cursor: string;
         p: string;
     };
+    clearSelectionButton: {
+        width: string;
+        height: string;
+        position: string;
+        right: string;
+        top: string;
+        bg: string;
+        '.is-float-label &': {
+            top: string;
+        };
+        justifyContent: string;
+        appearance: string;
+        alignItems: string;
+        alignSelf: string;
+        display: string;
+        flexGrow: number;
+        flexShrink: number;
+        borderRadius: string;
+        cursor: string;
+        p: string;
+        path: {
+            fill: string;
+        };
+        outline: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+            boxShadow: string;
+        };
+        '&.is-pressed': {
+            path: {
+                fill: string;
+            };
+            bg: string;
+            boxShadow: string;
+        };
+    };
 };
 export default _default;

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

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.square = exports["default"] = exports.base = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _tShirtSizes = _interopRequireDefault(require("../../styles/themes/astro/customProperties/tShirtSizes"));
 var _Badge = require("../Badge/Badge.styles");
 var _Buttons = require("../Button/Buttons.styles");
 var _CollapsiblePanel = require("../CollapsiblePanel/CollapsiblePanel.styles");
@@ -147,6 +148,17 @@ var searchClearButton = _objectSpread(_objectSpread({}, base), {}, {
   position: 'absolute',
   right: 10
 });
+var clearSelectionButton = _objectSpread(_objectSpread({}, base), {}, {
+  width: _tShirtSizes["default"].md,
+  height: _tShirtSizes["default"].md,
+  position: 'absolute',
+  right: '15px',
+  top: '7px',
+  bg: 'white',
+  '.is-float-label &': {
+    top: '9px'
+  }
+});
 var filter = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'white',
   border: '1px solid',
@@ -196,6 +208,7 @@ var _default = {
   applicationPortal: applicationPortal,
   applicationPortalPinned: applicationPortalPinned,
   searchClearButton: searchClearButton,
-  filter: filter
+  filter: filter,
+  clearSelectionButton: clearSelectionButton
 };
 exports["default"] = _default;

package/lib/cjs/components/ListBox/Option.js

@@ -19,6 +19,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _CheckIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckIcon"));
 var _CircleSmallIcon = _interopRequireDefault(require("@pingux/mdi-react/CircleSmallIcon"));
 var _listbox = require("@react-aria/listbox");
 var _MultivaluesContext = require("../../context/MultivaluesContext");
@@ -99,6 +100,8 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       state.selectionManager.setFocusedKey(item.key);
     }
   };
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(null, {
       isDisabled: isDisabled || isSeparator,
       isFocused: focused,
@@ -139,12 +142,18 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     mr: "xs",
     className: classNames,
     variant: "listBox.checkboxIcon"
-  }) : isSelected && (0, _react2.jsx)(_Icon["default"], {
+  }) : isSelected && !isOnyx && (0, _react2.jsx)(_Icon["default"], {
     icon: _CircleSmallIcon["default"],
     title: {
       name: 'Circle Small Icon'
     }
-  }), rendered);
+  }), rendered, isSelected && isOnyx && (0, _react2.jsx)(_Icon["default"], {
+    icon: _CheckIcon["default"],
+    title: {
+      name: 'Check Icon'
+    },
+    color: "green-500"
+  }));
 });
 var _default = Option;
 exports["default"] = _default;

package/lib/cjs/components/SelectField/SelectField.stories.d.ts

@@ -57,3 +57,4 @@ export declare const DynamicItems: {
 export declare const AsyncLoading: () => React.JSX.Element;
 export declare const WithoutStatusIndicator: (args: any) => React.JSX.Element;
 export declare const WithHelpHint: (args: any) => React.JSX.Element;
+export declare const WithClearButton: (args: any) => React.JSX.Element;

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

@@ -21,7 +21,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithoutStatusIndicator = exports.WithSlots = exports.WithSections = exports.WithNoneOption = exports.WithHelpHint = exports.WithCustomHeight = exports.NoOptionsAvailable = exports.HelperText = exports.FloatLabel = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
+exports["default"] = exports.WithoutStatusIndicator = exports.WithSlots = exports.WithSections = exports.WithNoneOption = exports.WithHelpHint = exports.WithCustomHeight = exports.WithClearButton = exports.NoOptionsAvailable = exports.HelperText = exports.FloatLabel = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
@@ -484,4 +484,24 @@ var WithHelpHint = function WithHelpHint(args) {
     key: "yellow"
   }, "Yellow")));
 };
-exports.WithHelpHint = WithHelpHint;
+exports.WithHelpHint = WithHelpHint;
+var WithClearButton = function WithClearButton(args) {
+  var _useState5 = (0, _react.useState)('red'),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    selectedKey = _useState6[0],
+    setSelectedKey = _useState6[1];
+  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({}, args, {
+    width: "100%",
+    label: "What's your favorite color?",
+    hasClearButton: true,
+    selectedKey: selectedKey,
+    onSelectionChange: setSelectedKey
+  }), (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow")));
+};
+exports.WithClearButton = WithClearButton;

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

@@ -194,4 +194,15 @@ test('should show hintText text if prop is passed', function () {
   _testWrapper.fireEvent.mouseMove(helpHintButton);
   _testWrapper.fireEvent.mouseEnter(helpHintButton);
   expect(_testWrapper.screen.getByText(hintText)).toBeInTheDocument();
+});
+test('should have clear button if hasClearButton prop is true', function () {
+  getComponent({
+    selectedKey: 'a',
+    hasClearButton: true,
+    clearButtonProps: {
+      'data-testid': 'clear-button'
+    }
+  });
+  var clearButton = _testWrapper.screen.getByTestId('clear-button');
+  expect(clearButton).toBeInTheDocument();
 });

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js

@@ -19,21 +19,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
 var _uuid = require("uuid");
+var _ = require("../..");
 var _useGetTheme2 = _interopRequireDefault(require("../../hooks/useGetTheme"));
 var _labelModes = require("../../utils/devUtils/constants/labelModes");
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _Box = _interopRequireDefault(require("../Box"));
-var _Button = _interopRequireDefault(require("../Button"));
-var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _Label = _interopRequireDefault(require("../Label"));
-var _Loader = _interopRequireDefault(require("../Loader"));
-var _Text = _interopRequireDefault(require("../Text"));
 var _HiddenSelect = require("./HiddenSelect");
 var _react2 = require("@emotion/react");
-var _excluded = ["columnStyleProps", "defaultText", "fieldContainerProps", "fieldControlInputProps", "fieldControlWrapperProps", "fieldLabelProps", "helperText", "isLoadingInitial", "isDisabled", "label", "labelMode", "name", "overlay", "placeholder", "slots", "state", "status", "trigger", "triggerProps", "triggerRef", "valueProps", "selectProps"];
+var _excluded = ["columnStyleProps", "defaultText", "fieldContainerProps", "fieldControlInputProps", "fieldControlWrapperProps", "fieldLabelProps", "helperText", "isLoadingInitial", "isDisabled", "label", "labelMode", "name", "overlay", "placeholder", "slots", "state", "status", "trigger", "triggerProps", "triggerRef", "valueProps", "selectProps", "hasClearButton", "clearButtonProps", "onClear"];
 /**
  * Select field (dropdown) that does not rely on native browser or mobile implementations.
  *
@@ -68,6 +63,9 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     triggerRef = props.triggerRef,
     valueProps = props.valueProps,
     selectProps = props.selectProps,
+    hasClearButton = props.hasClearButton,
+    clearButtonProps = props.clearButtonProps,
+    onClear = props.onClear,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
     ariaProps = _getAriaAttributeProp.ariaProps;
@@ -78,44 +76,67 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var helperTextId = (0, _react.useMemo)(function () {
     return (0, _uuid.v4)();
   }, []);
-  var defaultTrigger = (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, fieldControlWrapperProps, {
+  var handleOnClear = function handleOnClear() {
+    if (onClear) {
+      onClear();
+    }
+    state.setSelectedKey(null);
+  };
+  var buttonRendered = !(hasClearButton && state.selectedKey) && (0, _react2.jsx)(_.Box, {
+    as: "span",
+    "aria-hidden": "true",
+    variant: "forms.select.arrow"
+  }, (0, _react2.jsx)(_.Icon, {
+    icon: state.isOpen ? MenuUp : MenuDown,
+    title: {
+      name: 'Menu down'
+    },
+    size: "md"
+  }));
+  var clearButton = hasClearButton && state.selectedKey && (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
+    tabIndex: 0,
+    as: "span",
+    role: "button",
+    "aria-label": "Clear selection",
+    variant: "clearSelectionButton",
+    onPress: handleOnClear,
+    color: "text.secondary"
+  }, clearButtonProps), (0, _react2.jsx)(_.Icon, {
+    icon: _CloseIcon["default"],
+    title: {
+      name: 'Clear selection Icon'
+    }
+  }));
+  var defaultTrigger = (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    isRow: true
+  }, fieldControlWrapperProps, {
     variant: "forms.input.fieldControlWrapper"
-  }), (0, _react2.jsx)(_Button["default"], (0, _extends2["default"])({
+  }), (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
     className: fieldControlInputProps.className,
     ref: triggerRef,
     variant: "forms.select"
   }, triggerProps, ariaProps, {
     "aria-describedby": helperText && helperTextId
-  }), slots === null || slots === void 0 ? void 0 : slots.leftOfData, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+  }), slots === null || slots === void 0 ? void 0 : slots.leftOfData, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "span",
     variant: "forms.select.currentValue"
-  }, valueProps), state.selectedItem ? state.selectedItem.rendered : (0, _react2.jsx)(_Text["default"], {
+  }, valueProps), state.selectedItem ? state.selectedItem.rendered : (0, _react2.jsx)(_.Text, {
     variant: "placeholder"
-  }, labelMode === _labelModes.modes.FLOAT ? '' : placeholder || defaultText)), isLoadingInitial && (0, _react2.jsx)(_Loader["default"], {
+  }, labelMode === _labelModes.modes.FLOAT ? '' : placeholder || defaultText)), isLoadingInitial && (0, _react2.jsx)(_.Loader, {
     variant: "loader.withinInput"
-  }), (0, _react2.jsx)(_Box["default"], {
-    as: "span",
-    "aria-hidden": "true",
-    variant: "forms.select.arrow"
-  }, (0, _react2.jsx)(_Icon["default"], {
-    icon: state.isOpen ? MenuUp : MenuDown,
-    title: {
-      name: 'Menu down'
-    },
-    size: "md"
-  }))), slots === null || slots === void 0 ? void 0 : slots.inContainer);
-  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+  }), buttonRendered), clearButton, slots === null || slots === void 0 ? void 0 : slots.inContainer);
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     ref: ref,
     variant: "forms.input.fieldContainer"
   }, (0, _pendoID.getPendoID)('SelectField'), fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx)
-  }), (0, _react2.jsx)(_Label["default"], fieldLabelProps, label), (0, _react2.jsx)(_HiddenSelect.HiddenSelect, (0, _extends2["default"])({
+  }), (0, _react2.jsx)(_.Label, fieldLabelProps, label), (0, _react2.jsx)(_HiddenSelect.HiddenSelect, (0, _extends2["default"])({
     state: state,
     triggerRef: triggerRef,
     label: label,
     name: name,
     isDisabled: isDisabled
-  }, selectProps)), trigger || defaultTrigger, overlay, helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
+  }, selectProps)), trigger || defaultTrigger, overlay, helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status,
     id: helperTextId
   }, helperText));

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

@@ -51,6 +51,7 @@ var defaultProps = {
   value: testValue,
   items: items
 };
+var onClear = jest.fn();
 var SelectFieldWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useSelectField = (0, _hooks.useSelectField)(props, ref),
     selectFieldProps = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_useSelectField), _useSelectField));
@@ -436,4 +437,29 @@ test('popover closes on button blur', function () {
       }, item.name);
     });
   }
+});
+test('should have clear button if hasClearButton prop is true', function () {
+  getComponent({
+    selectedKey: 'a',
+    hasClearButton: true,
+    clearButtonProps: {
+      'data-testid': 'clear-button'
+    }
+  });
+  var clearButton = _testWrapper.screen.getByTestId('clear-button');
+  expect(clearButton).toBeInTheDocument();
+});
+test('should have call onClear function', function () {
+  getComponent({
+    selectedKey: 'a',
+    hasClearButton: true,
+    clearButtonProps: {
+      'data-testid': 'clear-button'
+    },
+    onClear: onClear
+  });
+  var clearButton = _testWrapper.screen.getByTestId('clear-button');
+  expect(clearButton).toBeInTheDocument();
+  _userEvent["default"].click(clearButton);
+  expect(onClear).toHaveBeenCalledTimes(1);
 });

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -345,10 +345,6 @@ declare const _default: {
             borderRadius: string;
         };
         option: {
-            py: string;
-            pl: string;
-            pr: string;
-            bg: string;
             '&.is-focused': {
                 color: string;
                 bg: string;
@@ -356,7 +352,6 @@ declare const _default: {
             '&.is-selected': {
                 color: string;
                 bg: string;
-                pl: number;
                 '&.is-focused': {
                     color: string;
                 };

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

@@ -23,10 +23,6 @@ var listBox = {
     borderRadius: '4px'
   },
   option: {
-    py: '.75rem',
-    pl: '.75rem',
-    pr: '1rem',
-    bg: 'background.base',
     '&.is-focused': {
       color: 'text.primary',
       bg: 'gray-800'
@@ -34,7 +30,6 @@ var listBox = {
     '&.is-selected': {
       color: 'text.primary',
       bg: 'gray-800',
-      pl: 0,
       '&.is-focused': {
         color: 'text.primary'
       }

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

@@ -20,6 +20,17 @@ export declare const select: {
     currentValue: {
         color: string;
     };
+    arrow: {
+        width: string;
+        height: string;
+        alignItems: string;
+        justifyContent: string;
+        '& > svg': {
+            minWidth: string;
+            width: string;
+            height: string;
+        };
+    };
 };
 export declare const search: {
     wrapper: {
@@ -148,6 +159,17 @@ declare const _default: {
         currentValue: {
             color: string;
         };
+        arrow: {
+            width: string;
+            height: string;
+            alignItems: string;
+            justifyContent: string;
+            '& > svg': {
+                minWidth: string;
+                width: string;
+                height: string;
+            };
+        };
     };
     radio: {
         base: {

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

@@ -15,6 +15,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports.select = exports.search = exports.radio = exports.numberField = exports["default"] = exports.comboBox = exports.checkbox = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _colors = _interopRequireDefault(require("./colors/colors"));
+var _tShirtSizes = _interopRequireDefault(require("./customProperties/tShirtSizes"));
 var _input = require("./variants/input");
 var _label = require("./variants/label");
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -41,6 +42,17 @@ var select = {
   },
   currentValue: {
     color: 'text.primary'
+  },
+  arrow: {
+    width: '20px',
+    height: '20px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '& > svg': {
+      minWidth: _tShirtSizes["default"].xs,
+      width: _tShirtSizes["default"].xs,
+      height: _tShirtSizes["default"].xs
+    }
   }
 };
 exports.select = select;

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

@@ -1316,6 +1316,8 @@ declare const _default: {
                 width: string;
                 height: string;
                 border: string;
+                position: string;
+                right: string;
                 '& > svg': {
                     minWidth: string;
                     width: string;
@@ -1327,8 +1329,6 @@ declare const _default: {
                 '&.is-pressed': {
                     bg: string;
                 };
-                position: string;
-                right: number;
                 cursor: string;
                 transition: string;
                 outline: string;
@@ -1383,6 +1383,42 @@ declare const _default: {
                     bg: string;
                 };
             };
+            clearSelectionButton: {
+                top: string;
+                right: string;
+                bg: string;
+                '.is-float-label &': {
+                    top: string;
+                };
+                width: string;
+                height: string;
+                border: string;
+                position: string;
+                '& > svg': {
+                    minWidth: string;
+                    width: string;
+                    height: string;
+                };
+                '&.is-hovered': {
+                    bg: string;
+                };
+                '&.is-pressed': {
+                    bg: string;
+                };
+                cursor: string;
+                transition: string;
+                outline: string;
+                borderRadius: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+                '&.is-focused': {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
+            };
         };
         modalCloseButton: {
             position: string;
@@ -1515,6 +1551,17 @@ declare const _default: {
             currentValue: {
                 color: string;
             };
+            arrow: {
+                width: string;
+                height: string;
+                alignItems: string;
+                justifyContent: string;
+                '& > svg': {
+                    minWidth: string;
+                    width: string;
+                    height: string;
+                };
+            };
         };
         radio: {
             base: {
@@ -2894,6 +2941,7 @@ declare const _default: {
                 py: string;
                 pl: string;
                 pr: string;
+                justifyContent: string;
                 '&.is-focused': {
                     color: string;
                     bg: string;
@@ -2901,7 +2949,7 @@ declare const _default: {
                 '&.is-selected': {
                     color: string;
                     bg: string;
-                    pl: number;
+                    pl: string;
                     '&.is-focused': {
                         color: string;
                     };

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

@@ -1064,6 +1064,8 @@ declare const buttons: {
             width: string;
             height: string;
             border: string;
+            position: string;
+            right: string;
             '& > svg': {
                 minWidth: string;
                 width: string;
@@ -1075,8 +1077,6 @@ declare const buttons: {
             '&.is-pressed': {
                 bg: string;
             };
-            position: string;
-            right: number;
             cursor: string;
             transition: string;
             outline: string;
@@ -1131,6 +1131,42 @@ declare const buttons: {
                 bg: string;
             };
         };
+        clearSelectionButton: {
+            top: string;
+            right: string;
+            bg: string;
+            '.is-float-label &': {
+                top: string;
+            };
+            width: string;
+            height: string;
+            border: string;
+            position: string;
+            '& > svg': {
+                minWidth: string;
+                width: string;
+                height: string;
+            };
+            '&.is-hovered': {
+                bg: string;
+            };
+            '&.is-pressed': {
+                bg: string;
+            };
+            cursor: string;
+            transition: string;
+            outline: string;
+            borderRadius: string;
+            borderColor: string;
+            path: {
+                fill: string;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+        };
     };
     modalCloseButton: {
         position: string;

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

@@ -17,6 +17,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _codeView = require("../codeView/codeView");
 var _colors = _interopRequireDefault(require("../colors/colors"));
+var _tShirtSizes = _interopRequireDefault(require("../customProperties/tShirtSizes"));
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var primaryBlue = _colors["default"].primary,
@@ -384,6 +385,24 @@ var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButto
   alignItems: 'center',
   justifyContent: 'center'
 });
+var searchClearButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
+  width: '20px',
+  height: '20px',
+  border: 'none',
+  position: 'absolute',
+  right: '20px',
+  '& > svg': {
+    minWidth: _tShirtSizes["default"].xs,
+    width: _tShirtSizes["default"].xs,
+    height: _tShirtSizes["default"].xs
+  },
+  '&.is-hovered': {
+    bg: 'background.hover'
+  },
+  '&.is-pressed': {
+    bg: 'background.hover'
+  }
+});
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
   nextGen: _objectSpread({}, onyxIconButton),
@@ -474,24 +493,7 @@ var iconButtons = {
       backgroundColor: 'gray-300'
     }
   },
-  searchClearButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
-    width: '20px',
-    height: '20px',
-    border: 'none',
-    '& > svg': {
-      minWidth: '18px',
-      width: '18px',
-      height: '18px'
-    },
-    '&.is-hovered': {
-      bg: 'background.hover'
-    },
-    '&.is-pressed': {
-      bg: 'background.hover'
-    },
-    position: 'absolute',
-    right: 20
-  }),
+  searchClearButton: searchClearButton,
   filter: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     bg: 'transparent',
     border: '2px solid',
@@ -519,7 +521,15 @@ var iconButtons = {
     '&.is-hovered': {
       bg: 'gray-900'
     }
-  }
+  },
+  clearSelectionButton: _objectSpread(_objectSpread({}, searchClearButton), {}, {
+    top: '15px',
+    right: '1rem',
+    bg: 'transparent',
+    '.is-float-label &': {
+      top: '12px'
+    }
+  })
 };
 var buttons = {
   neutral: neutral,

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

@@ -494,6 +494,7 @@ declare const _default: {
             py: string;
             pl: string;
             pr: string;
+            justifyContent: string;
             '&.is-focused': {
                 color: string;
                 bg: string;
@@ -501,7 +502,7 @@ declare const _default: {
             '&.is-selected': {
                 color: string;
                 bg: string;
-                pl: number;
+                pl: string;
                 '&.is-focused': {
                     color: string;
                 };

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

@@ -213,7 +213,8 @@ var listBox = {
   option: {
     py: '.75rem',
     pl: '.75rem',
-    pr: '1rem',
+    pr: 'md',
+    justifyContent: 'space-between',
     '&.is-focused': {
       color: 'text.primary',
       bg: 'gray-100'
@@ -221,7 +222,7 @@ var listBox = {
     '&.is-selected': {
       color: 'text.primary',
       bg: 'lightblue',
-      pl: 0,
+      pl: '.75rem',
       '&.is-focused': {
         color: 'text.primary'
       }

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

@@ -12,6 +12,8 @@ export interface SelectFieldProps<T> extends Omit<StyleProps, 'direction'>, UseS
     };
     'data-testid'?: string;
     hintText?: string;
+    hasClearButton?: boolean;
+    onClear?: () => void;
 }
 export interface SelectFieldBaseProps extends UseSelectFieldReturnProps<object>, SharedFieldProps {
     slots?: {
@@ -25,4 +27,7 @@ export interface SelectFieldBaseProps extends UseSelectFieldReturnProps<object>,
     selectProps?: Record<string, unknown>;
     isDisabled?: boolean;
     helpHintProps?: HelpHintProps;
+    hasClearButton?: boolean;
+    clearButtonProps?: Record<string, unknown>;
+    onClear?: () => void;
 }

package/lib/components/IconButton/IconButton.styles.js

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import tShirtSizes from '../../styles/themes/astro/customProperties/tShirtSizes';
 import { badgeDeleteButton, deleteButton, invertedBadgeDeleteButton } from '../Badge/Badge.styles';
 import { defaultActive, defaultFocus, defaultHover } from '../Button/Buttons.styles';
 import { toggle } from '../CollapsiblePanel/CollapsiblePanel.styles';
@@ -138,6 +139,17 @@ var searchClearButton = _objectSpread(_objectSpread({}, base), {}, {
   position: 'absolute',
   right: 10
 });
+var clearSelectionButton = _objectSpread(_objectSpread({}, base), {}, {
+  width: tShirtSizes.md,
+  height: tShirtSizes.md,
+  position: 'absolute',
+  right: '15px',
+  top: '7px',
+  bg: 'white',
+  '.is-float-label &': {
+    top: '9px'
+  }
+});
 var filter = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'white',
   border: '1px solid',
@@ -187,5 +199,6 @@ export default {
   applicationPortal: applicationPortal,
   applicationPortalPinned: applicationPortalPinned,
   searchClearButton: searchClearButton,
-  filter: filter
+  filter: filter,
+  clearSelectionButton: clearSelectionButton
 };

package/lib/components/ListBox/Option.js

@@ -14,10 +14,11 @@ var _excluded = ["item", "hasVirtualFocus", "isCondensed"],
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef } from 'react';
+import CheckIcon from '@pingux/mdi-react/CheckIcon';
 import CircleSmallIcon from '@pingux/mdi-react/CircleSmallIcon';
 import { useOption } from '@react-aria/listbox';
 import { useMultivaluesContext } from '../../context/MultivaluesContext';
-import { useStatusClasses } from '../../hooks';
+import { useGetTheme, useStatusClasses } from '../../hooks';
 import Box from '../Box';
 import Icon from '../Icon';
 import { ListBoxContext } from './ListBoxContext';
@@ -88,6 +89,8 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
       state.selectionManager.setFocusedKey(item.key);
     }
   };
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var _useStatusClasses = useStatusClasses(null, {
       isDisabled: isDisabled || isSeparator,
       isFocused: focused,
@@ -128,11 +131,17 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
     mr: "xs",
     className: classNames,
     variant: "listBox.checkboxIcon"
-  }) : isSelected && ___EmotionJSX(Icon, {
+  }) : isSelected && !isOnyx && ___EmotionJSX(Icon, {
     icon: CircleSmallIcon,
     title: {
       name: 'Circle Small Icon'
     }
-  }), rendered);
+  }), rendered, isSelected && isOnyx && ___EmotionJSX(Icon, {
+    icon: CheckIcon,
+    title: {
+      name: 'Check Icon'
+    },
+    color: "green-500"
+  }));
 });
 export default Option;

package/lib/components/SelectField/SelectField.stories.js

@@ -457,4 +457,23 @@ export var WithHelpHint = function WithHelpHint(args) {
   }, "Blue"), ___EmotionJSX(Item, {
     key: "yellow"
   }, "Yellow")));
+};
+export var WithClearButton = function WithClearButton(args) {
+  var _useState5 = useState('red'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedKey = _useState6[0],
+    setSelectedKey = _useState6[1];
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, _extends({}, args, {
+    width: "100%",
+    label: "What's your favorite color?",
+    hasClearButton: true,
+    selectedKey: selectedKey,
+    onSelectionChange: setSelectedKey
+  }), ___EmotionJSX(Item, {
+    key: "red"
+  }, "Red"), ___EmotionJSX(Item, {
+    key: "blue"
+  }, "Blue"), ___EmotionJSX(Item, {
+    key: "yellow"
+  }, "Yellow")));
 };

package/lib/components/SelectField/SelectField.test.js

@@ -191,4 +191,15 @@ test('should show hintText text if prop is passed', function () {
   fireEvent.mouseMove(helpHintButton);
   fireEvent.mouseEnter(helpHintButton);
   expect(screen.getByText(hintText)).toBeInTheDocument();
+});
+test('should have clear button if hasClearButton prop is true', function () {
+  getComponent({
+    selectedKey: 'a',
+    hasClearButton: true,
+    clearButtonProps: {
+      'data-testid': 'clear-button'
+    }
+  });
+  var clearButton = screen.getByTestId('clear-button');
+  expect(clearButton).toBeInTheDocument();
 });

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -9,22 +9,17 @@ 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 = ["columnStyleProps", "defaultText", "fieldContainerProps", "fieldControlInputProps", "fieldControlWrapperProps", "fieldLabelProps", "helperText", "isLoadingInitial", "isDisabled", "label", "labelMode", "name", "overlay", "placeholder", "slots", "state", "status", "trigger", "triggerProps", "triggerRef", "valueProps", "selectProps"];
+var _excluded = ["columnStyleProps", "defaultText", "fieldContainerProps", "fieldControlInputProps", "fieldControlWrapperProps", "fieldLabelProps", "helperText", "isLoadingInitial", "isDisabled", "label", "labelMode", "name", "overlay", "placeholder", "slots", "state", "status", "trigger", "triggerProps", "triggerRef", "valueProps", "selectProps", "hasClearButton", "clearButtonProps", "onClear"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useMemo } from 'react';
+import CloseIcon from '@pingux/mdi-react/CloseIcon';
 import { v4 as uuid } from 'uuid';
+import { Box, Button, FieldHelperText, Icon, IconButton, Label, Loader, Text } from '../..';
 import useGetTheme from '../../hooks/useGetTheme';
 import { modes } from '../../utils/devUtils/constants/labelModes';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
-import Box from '../Box';
-import Button from '../Button';
-import FieldHelperText from '../FieldHelperText';
-import Icon from '../Icon';
-import Label from '../Label';
-import Loader from '../Loader';
-import Text from '../Text';
 import { HiddenSelect } from './HiddenSelect';
 
 /**
@@ -58,6 +53,9 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
     triggerRef = props.triggerRef,
     valueProps = props.valueProps,
     selectProps = props.selectProps,
+    hasClearButton = props.hasClearButton,
+    clearButtonProps = props.clearButtonProps,
+    onClear = props.onClear,
     others = _objectWithoutProperties(props, _excluded);
   var _getAriaAttributeProp = getAriaAttributeProps(others),
     ariaProps = _getAriaAttributeProp.ariaProps;
@@ -68,7 +66,40 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperTextId = useMemo(function () {
     return uuid();
   }, []);
-  var defaultTrigger = ___EmotionJSX(Box, _extends({}, fieldControlWrapperProps, {
+  var handleOnClear = function handleOnClear() {
+    if (onClear) {
+      onClear();
+    }
+    state.setSelectedKey(null);
+  };
+  var buttonRendered = !(hasClearButton && state.selectedKey) && ___EmotionJSX(Box, {
+    as: "span",
+    "aria-hidden": "true",
+    variant: "forms.select.arrow"
+  }, ___EmotionJSX(Icon, {
+    icon: state.isOpen ? MenuUp : MenuDown,
+    title: {
+      name: 'Menu down'
+    },
+    size: "md"
+  }));
+  var clearButton = hasClearButton && state.selectedKey && ___EmotionJSX(IconButton, _extends({
+    tabIndex: 0,
+    as: "span",
+    role: "button",
+    "aria-label": "Clear selection",
+    variant: "clearSelectionButton",
+    onPress: handleOnClear,
+    color: "text.secondary"
+  }, clearButtonProps), ___EmotionJSX(Icon, {
+    icon: CloseIcon,
+    title: {
+      name: 'Clear selection Icon'
+    }
+  }));
+  var defaultTrigger = ___EmotionJSX(Box, _extends({
+    isRow: true
+  }, fieldControlWrapperProps, {
     variant: "forms.input.fieldControlWrapper"
   }), ___EmotionJSX(Button, _extends({
     className: fieldControlInputProps.className,
@@ -83,17 +114,7 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "placeholder"
   }, labelMode === modes.FLOAT ? '' : placeholder || defaultText)), isLoadingInitial && ___EmotionJSX(Loader, {
     variant: "loader.withinInput"
-  }), ___EmotionJSX(Box, {
-    as: "span",
-    "aria-hidden": "true",
-    variant: "forms.select.arrow"
-  }, ___EmotionJSX(Icon, {
-    icon: state.isOpen ? MenuUp : MenuDown,
-    title: {
-      name: 'Menu down'
-    },
-    size: "md"
-  }))), slots === null || slots === void 0 ? void 0 : slots.inContainer);
+  }), buttonRendered), clearButton, slots === null || slots === void 0 ? void 0 : slots.inContainer);
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     variant: "forms.input.fieldContainer"

package/lib/components/SelectFieldBase/SelectFieldBase.test.js

@@ -44,6 +44,7 @@ var defaultProps = {
   value: testValue,
   items: items
 };
+var onClear = jest.fn();
 var SelectFieldWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useSelectField = useSelectField(props, ref),
     selectFieldProps = _extends({}, (_objectDestructuringEmpty(_useSelectField), _useSelectField));
@@ -429,4 +430,29 @@ universalComponentTests({
       }, item.name);
     });
   }
+});
+test('should have clear button if hasClearButton prop is true', function () {
+  getComponent({
+    selectedKey: 'a',
+    hasClearButton: true,
+    clearButtonProps: {
+      'data-testid': 'clear-button'
+    }
+  });
+  var clearButton = screen.getByTestId('clear-button');
+  expect(clearButton).toBeInTheDocument();
+});
+test('should have call onClear function', function () {
+  getComponent({
+    selectedKey: 'a',
+    hasClearButton: true,
+    clearButtonProps: {
+      'data-testid': 'clear-button'
+    },
+    onClear: onClear
+  });
+  var clearButton = screen.getByTestId('clear-button');
+  expect(clearButton).toBeInTheDocument();
+  userEvent.click(clearButton);
+  expect(onClear).toHaveBeenCalledTimes(1);
 });

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

@@ -15,10 +15,6 @@ var listBox = {
     borderRadius: '4px'
   },
   option: {
-    py: '.75rem',
-    pl: '.75rem',
-    pr: '1rem',
-    bg: 'background.base',
     '&.is-focused': {
       color: 'text.primary',
       bg: 'gray-800'
@@ -26,7 +22,6 @@ var listBox = {
     '&.is-selected': {
       color: 'text.primary',
       bg: 'gray-800',
-      pl: 0,
       '&.is-focused': {
         color: 'text.primary'
       }

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

@@ -10,6 +10,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import colors from './colors/colors';
+import tShirtSizes from './customProperties/tShirtSizes';
 import { fieldControlWrapper, input } from './variants/input';
 import { label } from './variants/label';
 export var checkbox = {
@@ -33,6 +34,17 @@ export var select = {
   },
   currentValue: {
     color: 'text.primary'
+  },
+  arrow: {
+    width: '20px',
+    height: '20px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '& > svg': {
+      minWidth: tShirtSizes.xs,
+      width: tShirtSizes.xs,
+      height: tShirtSizes.xs
+    }
   }
 };
 export var search = {

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

@@ -12,6 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import chroma from 'chroma-js';
 import { copyButton } from '../codeView/codeView';
 import colors from '../colors/colors';
+import tShirtSizes from '../customProperties/tShirtSizes';
 var primaryBlue = colors.primary,
   primaryBlueHover = colors.active_hover,
   primaryBluePress = colors.active_pressed,
@@ -376,6 +377,24 @@ var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButto
   alignItems: 'center',
   justifyContent: 'center'
 });
+var searchClearButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
+  width: '20px',
+  height: '20px',
+  border: 'none',
+  position: 'absolute',
+  right: '20px',
+  '& > svg': {
+    minWidth: tShirtSizes.xs,
+    width: tShirtSizes.xs,
+    height: tShirtSizes.xs
+  },
+  '&.is-hovered': {
+    bg: 'background.hover'
+  },
+  '&.is-pressed': {
+    bg: 'background.hover'
+  }
+});
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
   nextGen: _objectSpread({}, onyxIconButton),
@@ -466,24 +485,7 @@ var iconButtons = {
       backgroundColor: 'gray-300'
     }
   },
-  searchClearButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
-    width: '20px',
-    height: '20px',
-    border: 'none',
-    '& > svg': {
-      minWidth: '18px',
-      width: '18px',
-      height: '18px'
-    },
-    '&.is-hovered': {
-      bg: 'background.hover'
-    },
-    '&.is-pressed': {
-      bg: 'background.hover'
-    },
-    position: 'absolute',
-    right: 20
-  }),
+  searchClearButton: searchClearButton,
   filter: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     bg: 'transparent',
     border: '2px solid',
@@ -511,7 +513,15 @@ var iconButtons = {
     '&.is-hovered': {
       bg: 'gray-900'
     }
-  }
+  },
+  clearSelectionButton: _objectSpread(_objectSpread({}, searchClearButton), {}, {
+    top: '15px',
+    right: '1rem',
+    bg: 'transparent',
+    '.is-float-label &': {
+      top: '12px'
+    }
+  })
 };
 var buttons = {
   neutral: neutral,

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

@@ -200,7 +200,8 @@ var listBox = {
   option: {
     py: '.75rem',
     pl: '.75rem',
-    pr: '1rem',
+    pr: 'md',
+    justifyContent: 'space-between',
     '&.is-focused': {
       color: 'text.primary',
       bg: 'gray-100'
@@ -208,7 +209,7 @@ var listBox = {
     '&.is-selected': {
       color: 'text.primary',
       bg: 'lightblue',
-      pl: 0,
+      pl: '.75rem',
       '&.is-focused': {
         color: 'text.primary'
       }

package/package.json

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