baseui 10.4.0 → 10.7.1

package/map-marker/types.js.flow

@@ -0,0 +1,114 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+import * as React from 'react';
+import {
+  FLOATING_MARKER_ANCHOR_POSITIONS,
+  NEEDLE_SIZES,
+  PINHEAD_SIZES_SHAPES,
+  FLOATING_MARKER_SIZES,
+  PINHEAD_TYPES,
+  FLOATING_MARKER_ANCHOR_TYPES,
+} from './constants.js';
+import type {OverrideT} from '../helpers/overrides.js';
+
+export type PinHeadT = $Values<typeof PINHEAD_TYPES>;
+
+export type AnchorPositionsT = $Values<typeof FLOATING_MARKER_ANCHOR_POSITIONS>;
+
+export type NeedleSizeT = $Values<typeof NEEDLE_SIZES>;
+
+export type PinHeadSizeT = $Values<typeof PINHEAD_SIZES_SHAPES>;
+
+export type FloatingMarkerSizeT = $Values<typeof FLOATING_MARKER_SIZES>;
+
+/* eslint-disable flowtype/generic-spacing*/
+export type FloatingMarkerAnchorTypeT = $Values<
+  typeof FLOATING_MARKER_ANCHOR_TYPES,
+>;
+
+export type NeedlePropsT = {
+  size: NeedleSizeT,
+  background?: string,
+  overrides: FixedMarkerOverridesT,
+};
+
+export type ItemPropsT = {
+  children?: React.Node,
+  color?: string,
+  size?: number,
+};
+
+export type FixedMarkerOverridesT = {
+  Root?: OverrideT,
+  InnerAnchor?: OverrideT,
+  OuterAnchor?: OverrideT,
+  PinHead?: OverrideT,
+  PinHeadContent?: OverrideT,
+  PinHeadContainer?: OverrideT,
+  Needle?: OverrideT,
+  DragShadow?: OverrideT,
+  DragShadowContainer?: OverrideT,
+  DragContainer?: OverrideT,
+};
+
+export type FixedMarkerPropsT = {
+  size?: PinHeadSizeT,
+  needle?: NeedleSizeT,
+  label?: string,
+  startEnhancer?: React.AbstractComponent<{|size: number|}>,
+  endEnhancer?: React.AbstractComponent<{|size: number|}>,
+  color?: string,
+  background?: string,
+  dragging?: boolean,
+  overrides?: FixedMarkerOverridesT,
+};
+
+export type FloatingMarkerOverridesT = {
+  Root?: OverrideT,
+  InnerAnchor?: OverrideT,
+  OuterAnchor?: OverrideT,
+  PinHead?: OverrideT,
+  PinHeadContent?: OverrideT,
+  PinHeadContainer?: OverrideT,
+  AnchorContainer?: OverrideT,
+};
+
+export type FloatingMarkerPropsT = {
+  color?: string,
+  background?: string,
+  label?: string,
+  anchor?: AnchorPositionsT,
+  endEnhancer?: React.AbstractComponent<{|size: number|}>,
+  startEnhancer?: React.AbstractComponent<{|size: number|}>,
+  anchorType?: FloatingMarkerAnchorTypeT,
+  size?: FloatingMarkerSizeT,
+  overrides?: FloatingMarkerOverridesT,
+};
+
+export type PinHeadPropsT = {
+  size?: PinHeadSizeT,
+  label?: string,
+  endEnhancer?: React.AbstractComponent<{|size: number|}>,
+  startEnhancer?: React.AbstractComponent<{|size: number|}>,
+  color?: string,
+  background?: string,
+  type?: PinHeadT,
+  anchorType?: FloatingMarkerAnchorTypeT,
+  overrides?: FloatingMarkerOverridesT | FixedMarkerOverridesT,
+};
+
+export type DragShadowPropsT = {
+  background: string,
+  dragging: boolean,
+  height: number,
+  overrides: FixedMarkerOverridesT,
+};
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/menu/index.d.ts

@@ -123,6 +123,7 @@ export interface OptionListProps extends BaseMenuPropsT {
   item: any;
   getItemLabel: (item: any) => React.ReactNode;
   getChildMenu?: (item: any) => React.ReactNode;
+  onMouseDown?: (event: MouseEvent) => any;
   onMouseEnter?: (event: MouseEvent) => any;
   size?: OPTION_LIST_SIZE[keyof OPTION_LIST_SIZE];
   overrides?: {
@@ -133,6 +134,12 @@ export interface OptionListProps extends BaseMenuPropsT {
   resetMenu?: () => void;
   $isHighlighted?: boolean;
   $isFocused?: boolean;
+  renderAll?: boolean;
+  $disabled?: boolean;
+  'aria-disabled'?: boolean;
+  'aria-selected'?: boolean;
+  id?: string;
+  role?: string;
 }
 export const OptionList: React.FC<OptionListProps>;
 

package/menu/maybe-child-menu.js

@@ -55,6 +55,7 @@ function MaybeChildMenu(props) {
   return /*#__PURE__*/React.createElement(_nestedMenus.NestedMenuContext.Consumer, null, function (ctx) {
     return /*#__PURE__*/React.createElement(PopoverOverride, _extends({
       focusLock: false,
+      autoFocus: false,
       isOpen: props.isOpen,
       renderAll: props.renderAll,
       content: ChildMenu,

package/menu/maybe-child-menu.js.flow

@@ -48,6 +48,7 @@ export default function MaybeChildMenu(props: PropsT) {
         return (
           <PopoverOverride
             focusLock={false}
+            autoFocus={false}
             isOpen={props.isOpen}
             renderAll={props.renderAll}
             content={ChildMenu}

package/menu/types.js.flow

@@ -234,6 +234,8 @@ export type OptionListPropsT = {
   getChildMenu?: (item: ItemT) => React.Node,
   onClick?: (event: MouseEvent) => mixed,
   /** Callback used to change highlighted index in stateful menu. */
+  onMouseDown?: (event: MouseEvent) => mixed,
+  /** Callback used to change highlighted index in stateful menu. */
   onMouseEnter?: (event: MouseEvent) => mixed,
   /** Renders UI in defined scale. */
   size?: $Keys<typeof OPTION_LIST_SIZE>,
@@ -251,6 +253,16 @@ export type OptionListPropsT = {
   $isFocused?: boolean,
   /** Renders all menu content for SEO purposes regardless of menu  state */
   renderAll?: boolean,
+  /** Is the item disabled */
+  $disabled?: boolean,
+  /** Is the item disabled */
+  'aria-disabled'?: boolean,
+  /** Is the item selected */
+  'aria-selected'?: boolean,
+  /** Id of the item */
+  id?: string,
+  /** Accessibility role of the item */
+  role?: string,
 };
 
 export type OptionProfilePropsT = {

package/modal/index.d.ts

@@ -47,7 +47,7 @@ export interface ModalProps {
   autofocus?: boolean;
   autoFocus?: boolean;
   focusLock?: boolean;
-  returnFocus?: boolean | FocusOptions;
+  returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions);
   children?: React.ReactNode;
   closeable?: boolean;
   isOpen?: boolean;

package/modal/types.js.flow

@@ -48,7 +48,10 @@ export type ModalPropsT = {
    * Optionally, can pass focus options instead of `true` to control the focus
    * more precisely (ie. `{ preventScroll: true }`)
    */
-  returnFocus?: boolean | FocusOptions,
+  returnFocus?:
+    | boolean
+    | FocusOptions
+    | ((returnTo: Element) => boolean | FocusOptions),
   /** Modal content. The children-as-function API may be preferable
    * for performance reasons (wont render until opened) */
   children?: React.Node | (() => React.Node),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "10.4.0",
+  "version": "10.7.1",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -81,7 +81,7 @@
     "@commitlint/config-conventional": "^8.0.0",
     "@date-io/luxon": "^2.7.0",
     "@date-io/moment": "^2.7.0",
-    "@ladle/react": "^0.2.0",
+    "@ladle/react": "^0.3.0",
     "@mdx-js/tag": "^0.20.0",
     "@octokit/rest": "^16.33.1",
     "@svgr/cli": "^4.3.2",
@@ -170,6 +170,7 @@
     "react-dom": "^16.9.0",
     "react-hook-form": "^7.9.0",
     "react-icons": "^3.8.0",
+    "react-map-gl": "^6.1.17",
     "react-markdown": "^4.0.3",
     "react-twitter-embed": "^2.0.8",
     "react-view": "^2.3.3",
@@ -196,10 +197,11 @@
     "glob": "^7.1.6",
     "just-extend": "^4.0.2",
     "memoize-one": "^5.1.1",
+    "mockdate": "^3.0.5",
     "polished": "^3.2.0",
     "popper.js": "^1.16.0",
     "react-dropzone": "^9.0.0",
-    "react-focus-lock": "^2.2.1",
+    "react-focus-lock": "^2.7.1",
     "react-input-mask": "^2.0.4",
     "react-is": "^16.8.6",
     "react-movable": "^2.5.4",

package/popover/index.d.ts

@@ -96,7 +96,8 @@ export interface BasePopoverProps {
   accessibilityType?: ACCESSIBILITY_TYPE[keyof ACCESSIBILITY_TYPE];
   focusLock?: boolean;
   autoFocus?: boolean;
-  returnFocus?: boolean;
+  focusOptions?: FocusOptions;
+  returnFocus?: boolean | FocusOptions | ((returnTo: Element) => (boolean | FocusOptions));
   'data-baseweb'?: string;
   id?: string;
   ignoreBoundary?: boolean;

package/popover/popover.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
+var _reactFocusLock = _interopRequireWildcard(require("react-focus-lock"));
 
 var _overrides = require("../helpers/overrides.js");
 
@@ -213,7 +213,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps, prevState) {
       this.init(prevProps, prevState);
 
-      if (this.props.autoFocus && this.props.focusLock && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
+      if (this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
         this.setState({
           autoFocusAfterPositioning: true
         });
@@ -529,9 +529,10 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
             disabled: !this.props.focusLock,
             noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
             ,
-            returnFocus: this.props.returnFocus && !this.isHoverTrigger(),
-            autoFocus: this.state.autoFocusAfterPositioning
-          }, this.renderPopover(renderedContent)))));
+            returnFocus: !this.isHoverTrigger() && this.props.returnFocus,
+            autoFocus: this.state.autoFocusAfterPositioning,
+            focusOptions: this.props.focusOptions
+          }, !this.props.focusLock && this.state.autoFocusAfterPositioning ? /*#__PURE__*/React.createElement(_reactFocusLock.MoveFocusInside, null, this.renderPopover(renderedContent)) : this.renderPopover(renderedContent)))));
         } else {
           rendered.push( /*#__PURE__*/React.createElement(_styledComponents.Hidden, {
             key: "hidden-layer"

package/popover/popover.js.flow

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 /* eslint-disable react/no-find-dom-node */
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
-import FocusLock from 'react-focus-lock';
+import FocusLock, {MoveFocusInside} from 'react-focus-lock';
 
 import {getOverride, getOverrideProps} from '../helpers/overrides.js';
 import {
@@ -73,7 +73,6 @@ class PopoverInner extends React.Component<
     this.init(prevProps, prevState);
     if (
       this.props.autoFocus &&
-      this.props.focusLock &&
       !this.state.autoFocusAfterPositioning &&
       this.popperRef.current !== null &&
       this.popperRef.current.getBoundingClientRect().top > 0
@@ -475,10 +474,18 @@ class PopoverInner extends React.Component<
                 disabled={!this.props.focusLock}
                 noFocusGuards={false}
                 // see popover-focus-loop.scenario.js for why hover cannot return focus
-                returnFocus={this.props.returnFocus && !this.isHoverTrigger()}
+                returnFocus={!this.isHoverTrigger() && this.props.returnFocus}
                 autoFocus={this.state.autoFocusAfterPositioning}
+                focusOptions={this.props.focusOptions}
               >
-                {this.renderPopover(renderedContent)}
+                {!this.props.focusLock &&
+                this.state.autoFocusAfterPositioning ? (
+                  <MoveFocusInside>
+                    {this.renderPopover(renderedContent)}
+                  </MoveFocusInside>
+                ) : (
+                  this.renderPopover(renderedContent)
+                )}
               </FocusLock>
             </TetherBehavior>
           </Layer>,

package/popover/stateful-container.js

@@ -70,6 +70,10 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
         _this.props.onBlur(e);
       }
 
+      if (_this.props.focusLock || _this.props.autoFocus) {
+        return;
+      }
+
       _this.close();
     });
 
@@ -208,7 +212,8 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
           returnFocus = _this$props.returnFocus,
           showArrow = _this$props.showArrow,
           triggerType = _this$props.triggerType,
-          popoverMargin = _this$props.popoverMargin;
+          popoverMargin = _this$props.popoverMargin,
+          focusOptions = _this$props.focusOptions;
       var popoverProps = {
         accessibilityType: accessibilityType,
         autoFocus: autoFocus,
@@ -231,7 +236,8 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
         returnFocus: returnFocus,
         showArrow: showArrow,
         triggerType: triggerType,
-        popoverMargin: popoverMargin
+        popoverMargin: popoverMargin,
+        focusOptions: focusOptions
       };
 
       if (dismissOnClickOutside) {

package/popover/stateful-container.js.flow

@@ -52,6 +52,9 @@ class StatefulContainer extends React.Component<
     if (this.props.onBlur) {
       this.props.onBlur(e);
     }
+    if (this.props.focusLock || this.props.autoFocus) {
+      return;
+    }
     this.close();
   };
 
@@ -168,6 +171,7 @@ class StatefulContainer extends React.Component<
       showArrow,
       triggerType,
       popoverMargin,
+      focusOptions,
     } = this.props;
 
     const popoverProps: PopoverPropsWithoutChildrenT = {
@@ -193,6 +197,7 @@ class StatefulContainer extends React.Component<
       showArrow,
       triggerType,
       popoverMargin,
+      focusOptions,
     };
 
     if (dismissOnClickOutside) {

package/popover/types.js.flow

@@ -83,6 +83,8 @@ export type BasePopoverPropsT = {
   onClick?: (e: Event) => mixed,
   /** Handler for 'Esc' keypress events */
   onFocus?: (e: Event) => mixed,
+  /** Pass FocusOptions for focusing (used as `HtmlElement.focus(focusOptions)`) */
+  focusOptions?: FocusOptions,
   /** Handler for mouseenter events on trigger element. */
   onMouseEnter?: (e: Event) => mixed,
   /** Number of milliseconds to wait before showing the popover after mouse enters the trigger element (for triggerType `hover`). */
@@ -104,7 +106,10 @@ export type BasePopoverPropsT = {
   /** If true, focus will shift back to the original element that triggered the popover
    * Be careful with elements that open the popover on focus (e.g. input) this will cause the popover to reopen on close!
    */
-  returnFocus?: boolean,
+  returnFocus?:
+    | boolean
+    | FocusOptions
+    | ((returnTo: Element) => boolean | FocusOptions),
   /** Whether or not to show the arrow pointing from the popover to the trigger. */
   showArrow?: boolean,
   /** Whether to toggle the popover when trigger is clicked or hovered. */

package/rating/emoticon-rating.js

@@ -222,8 +222,8 @@ var EmoticonRating = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "emoticon-rating",
         role: "radiogroup",
-        onBlur: function onBlur() {
-          return _this2.updatePreview(undefined);
+        onBlur: function onBlur(e) {
+          if (!e.currentTarget.contains(e.relatedTarget)) _this2.updatePreview(undefined);
         },
         onMouseLeave: function onMouseLeave() {
           return _this2.updatePreview(undefined);

package/rating/emoticon-rating.js.flow

@@ -135,7 +135,10 @@ class EmoticonRating extends React.Component<
       <Root
         data-baseweb="emoticon-rating"
         role="radiogroup"
-        onBlur={() => this.updatePreview(undefined)}
+        onBlur={e => {
+          if (!e.currentTarget.contains(e.relatedTarget))
+            this.updatePreview(undefined);
+        }}
         onMouseLeave={() => this.updatePreview(undefined)}
         {...rootProps}
       >

package/rating/star-rating.js

@@ -225,8 +225,8 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "star-rating",
         role: "radiogroup",
-        onBlur: function onBlur() {
-          return _this2.updatePreview(undefined);
+        onBlur: function onBlur(e) {
+          if (!e.currentTarget.contains(e.relatedTarget)) _this2.updatePreview(undefined);
         },
         onMouseLeave: function onMouseLeave() {
           return _this2.updatePreview(undefined);

package/rating/star-rating.js.flow

@@ -133,7 +133,10 @@ class StarRating extends React.Component<StarRatingPropsT, RatingStateT> {
       <Root
         data-baseweb="star-rating"
         role="radiogroup"
-        onBlur={() => this.updatePreview(undefined)}
+        onBlur={e => {
+          if (!e.currentTarget.contains(e.relatedTarget))
+            this.updatePreview(undefined);
+        }}
         onMouseLeave={() => this.updatePreview(undefined)}
         {...rootProps}
       >

package/select/select-component.js

@@ -180,7 +180,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       isPseudoFocused: false
     });
 
-    _defineProperty(_assertThisInitialized(_this), "isMounted", false);
+    _defineProperty(_assertThisInitialized(_this), "isItMounted", false);
 
     _defineProperty(_assertThisInitialized(_this), "handleTouchOutside", function (event) {
       if (containsNode(_this.dropdown.current, event.target)) return;
@@ -328,7 +328,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         _this.props.onBlur(event);
       }
 
-      if (_this.isMounted) {
+      if (_this.isItMounted) {
         _this.setState({
           isFocused: false,
           isOpen: false,
@@ -682,7 +682,14 @@ var Select = /*#__PURE__*/function (_React$Component) {
         this.focus();
       }
 
-      this.isMounted = true;
+      this.isItMounted = true;
+
+      if (this.props.methodsRef) {
+        var methodsRef = this.props.methodsRef;
+        methodsRef.current = {
+          setDropdownOpen: this.handleDropdownOpen.bind(this)
+        };
+      }
     }
   }, {
     key: "componentDidUpdate",
@@ -711,13 +718,20 @@ var Select = /*#__PURE__*/function (_React$Component) {
         document.removeEventListener('click', this.handleClickOutside);
       }
 
-      this.isMounted = false;
+      this.isItMounted = false;
     }
   }, {
     key: "focus",
     value: function focus() {
       if (!this.input) return;
       this.input.focus();
+    }
+  }, {
+    key: "handleDropdownOpen",
+    value: function handleDropdownOpen(nextOpenState) {
+      this.setState({
+        isOpen: nextOpenState
+      });
     } // Handle touch outside on mobile to dismiss menu, ensures that the
     // touch target is not within the anchor DOM node.
 
@@ -933,7 +947,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
       var ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
       return /*#__PURE__*/React.createElement(ClearIcon, _extends({
-        size: 16,
         title: ariaLabel,
         "aria-label": ariaLabel,
         onClick: this.clearValue,
@@ -1155,6 +1168,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
               if (!ref) return;
               _this6.anchor = ref.anchorRef;
             },
+            autoFocus: false,
             focusLock: false,
             mountNode: _this6.props.mountNode,
             onEsc: function onEsc() {

package/select/select-component.js.flow

@@ -117,13 +117,21 @@ class Select extends React.Component<PropsT, SelectStateT> {
     isPseudoFocused: false,
   };
 
-  isMounted: boolean = false;
+  isItMounted: boolean = false;
 
   componentDidMount() {
     if (this.props.autoFocus) {
       this.focus();
     }
-    this.isMounted = true;
+    this.isItMounted = true;
+
+    if (this.props.methodsRef) {
+      const {methodsRef} = this.props;
+
+      methodsRef.current = {
+        setDropdownOpen: this.handleDropdownOpen.bind(this),
+      };
+    }
   }
 
   componentDidUpdate(prevProps: PropsT, prevState: SelectStateT) {
@@ -149,7 +157,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
       document.removeEventListener('touchstart', this.handleTouchOutside);
       document.removeEventListener('click', this.handleClickOutside);
     }
-    this.isMounted = false;
+    this.isItMounted = false;
   }
 
   focus() {
@@ -157,6 +165,12 @@ class Select extends React.Component<PropsT, SelectStateT> {
     this.input.focus();
   }
 
+  handleDropdownOpen(nextOpenState: boolean) {
+    this.setState({
+      isOpen: nextOpenState,
+    });
+  }
+
   // Handle touch outside on mobile to dismiss menu, ensures that the
   // touch target is not within the anchor DOM node.
   handleTouchOutside = (event: TouchEvent) => {
@@ -305,7 +319,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
       this.props.onBlur(event);
     }
 
-    if (this.isMounted) {
+    if (this.isItMounted) {
       this.setState({
         isFocused: false,
         isOpen: false,
@@ -779,7 +793,6 @@ class Select extends React.Component<PropsT, SelectStateT> {
 
     return (
       <ClearIcon
-        size={16}
         title={ariaLabel}
         aria-label={ariaLabel}
         onClick={this.clearValue}
@@ -1012,6 +1025,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
                   if (!ref) return;
                   this.anchor = ref.anchorRef;
                 }}
+                autoFocus={false}
                 focusLock={false}
                 mountNode={this.props.mountNode}
                 onEsc={() => this.closeMenu()}

package/select/styled-components.js

@@ -342,26 +342,50 @@ function getSvgStyles(_ref4) {
 }
 
 var StyledSelectArrow = (0, _index.styled)('svg', function (props) {
+  var _sizes;
+
   var $theme = props.$theme,
-      $disabled = props.$disabled;
+      $disabled = props.$disabled,
+      $size = props.$size;
   var colors = $theme.colors;
+  var sizes = (_sizes = {}, _defineProperty(_sizes, _constants.SIZE.mini, 16), _defineProperty(_sizes, _constants.SIZE.compact, 16), _defineProperty(_sizes, _constants.SIZE.default, 20), _defineProperty(_sizes, _constants.SIZE.large, 24), _sizes);
+  var size = sizes[_constants.SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return _objectSpread(_objectSpread({}, getSvgStyles({
     $theme: $theme
   })), {}, {
     color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
-    cursor: $disabled ? 'not-allowed' : 'pointer'
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
   });
 });
 exports.StyledSelectArrow = StyledSelectArrow;
 StyledSelectArrow.displayName = "StyledSelectArrow";
 var StyledClearIcon = (0, _index.styled)('svg', function (props) {
-  var $theme = props.$theme;
+  var _sizes2;
+
+  var $theme = props.$theme,
+      $size = props.$size;
   var colors = $theme.colors;
+  var sizes = (_sizes2 = {}, _defineProperty(_sizes2, _constants.SIZE.mini, 15), _defineProperty(_sizes2, _constants.SIZE.compact, 15), _defineProperty(_sizes2, _constants.SIZE.default, 18), _defineProperty(_sizes2, _constants.SIZE.large, 22), _sizes2);
+  var size = sizes[_constants.SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return _objectSpread(_objectSpread({}, getSvgStyles({
     $theme: $theme
   })), {}, {
     color: colors.contentPrimary,
-    cursor: 'pointer'
+    cursor: 'pointer',
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
   });
 });
 exports.StyledClearIcon = StyledClearIcon;