baseui 0.0.0-next-2992a67 → 0.0.0-next-ecc760f

package/es/icon/omit-dollar-prefixed-keys.js

@@ -10,6 +10,7 @@ export default function omitDollarPrefixedKeys(source) {
 
   for (const key in source) {
     if (key[0] !== '$') {
+      // @ts-ignore
       result[key] = source[key];
     }
   }

package/es/icon/overflow.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Overflow(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/plus.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Plus(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/search.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Search(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/show.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Show(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/spinner.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Spinner(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/styled-components.js

@@ -13,7 +13,9 @@ export function getSvgStyles({
   let size = $theme.sizing.scale600;
 
   if ($size) {
+    // @ts-ignore
     if ($theme.sizing[$size]) {
+      // @ts-ignore
       size = $theme.sizing[$size];
     } else if (typeof $size === 'number') {
       size = `${$size}px`;
@@ -25,7 +27,9 @@ export function getSvgStyles({
   let color = 'currentColor';
 
   if ($color) {
+    // @ts-ignore
     if ($theme.colors[$color]) {
+      // @ts-ignore
       color = $theme.colors[$color];
     } else {
       color = $color;

package/es/icon/triangle-down.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function TriangleDown(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/triangle-left.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function TriangleLeft(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/triangle-right.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function TriangleRight(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/triangle-up.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function TriangleUp(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/upload.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Upload(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/input/base-input.js

@@ -21,6 +21,7 @@ import Show from '../icon/show';
 import createEvent from '../utils/create-event';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
 
+// @ts-ignore
 const NullComponent = () => null;
 
 class BaseInput extends React.Component {
@@ -54,14 +55,16 @@ class BaseInput extends React.Component {
     _defineProperty(this, "onFocus", e => {
       this.setState({
         isFocused: true
-      });
+      }); // @ts-ignore
+
       this.props.onFocus(e);
     });
 
     _defineProperty(this, "onBlur", e => {
       this.setState({
         isFocused: false
-      });
+      }); // @ts-ignore
+
       this.props.onBlur(e);
     });
 
@@ -110,6 +113,7 @@ class BaseInput extends React.Component {
       }
 
       if (clearable) {
+        // @ts-ignore
         this.inputRef.current.addEventListener('keydown', this.onInputKeyDown);
       }
     }
@@ -121,6 +125,7 @@ class BaseInput extends React.Component {
     } = this.props;
 
     if (clearable && this.inputRef.current) {
+      // @ts-ignore
       this.inputRef.current.removeEventListener('keydown', this.onInputKeyDown);
     }
   }
@@ -158,15 +163,19 @@ class BaseInput extends React.Component {
 
   renderMaskToggle() {
     if (this.props.type !== 'password') return null;
-    const [MaskToggleButton, maskToggleButtonProps] = getOverrides(this.props.overrides.MaskToggleButton, StyledMaskToggleButton);
-    const [MaskToggleShowIcon, maskToggleIconShowProps] = getOverrides(this.props.overrides.MaskToggleShowIcon, Show);
-    const [MaskToggleHideIcon, maskToggleIconHideProps] = getOverrides(this.props.overrides.MaskToggleHideIcon, Hide);
+    const [MaskToggleButton, maskToggleButtonProps] = getOverrides( // @ts-ignore
+    this.props.overrides.MaskToggleButton, StyledMaskToggleButton);
+    const [MaskToggleShowIcon, maskToggleIconShowProps] = getOverrides( // @ts-ignore
+    this.props.overrides.MaskToggleShowIcon, Show);
+    const [MaskToggleHideIcon, maskToggleIconHideProps] = getOverrides( // @ts-ignore
+    this.props.overrides.MaskToggleHideIcon, Hide);
     const label = this.state.isMasked ? 'Show password text' : 'Hide password text';
     const iconSize = {
       [SIZE.mini]: '12px',
       [SIZE.compact]: '16px',
       [SIZE.default]: '20px',
-      [SIZE.large]: '24px'
+      [SIZE.large]: '24px' // @ts-ignore
+
     }[this.props.size];
     return /*#__PURE__*/React.createElement(MaskToggleButton, _extends({
       $size: this.props.size,
@@ -210,7 +219,8 @@ class BaseInput extends React.Component {
       [SIZE.mini]: '14px',
       [SIZE.compact]: '14px',
       [SIZE.default]: '16px',
-      [SIZE.large]: '22px'
+      [SIZE.large]: '22px' // @ts-ignore
+
     }[this.props.size];
     return /*#__PURE__*/React.createElement(ClearIconContainer, _extends({
       $alignTop: this.props.type === CUSTOM_INPUT_TYPE.textarea
@@ -219,7 +229,8 @@ class BaseInput extends React.Component {
       tabIndex: 0,
       title: ariaLabel,
       "aria-label": ariaLabel,
-      onClick: this.onClearIconClick,
+      onClick: this.onClearIconClick // @ts-ignore
+      ,
       onKeyDown: event => {
         if (event.key && (event.key === 'Enter' || event.key === ' ')) {
           event.preventDefault();
@@ -237,9 +248,13 @@ class BaseInput extends React.Component {
   render() {
     const {
       overrides: {
+        // @ts-ignore
         InputContainer: InputContainerOverride,
+        // @ts-ignore
         Input: InputOverride,
+        // @ts-ignore
         Before: BeforeOverride,
+        // @ts-ignore
         After: AfterOverride
       }
     } = this.props; // more here https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#Preventing_autofilling_with_autocompletenew-password
@@ -293,13 +308,21 @@ class BaseInput extends React.Component {
 }
 
 _defineProperty(BaseInput, "defaultProps", {
+  // @ts-ignore
   'aria-activedescendant': null,
+  // @ts-ignore
   'aria-autocomplete': null,
+  // @ts-ignore
   'aria-controls': null,
+  // @ts-ignore
   'aria-errormessage': null,
+  // @ts-ignore
   'aria-haspopup': null,
+  // @ts-ignore
   'aria-label': null,
+  // @ts-ignore
   'aria-labelledby': null,
+  // @ts-ignore
   'aria-describedby': null,
   adjoined: ADJOINED.none,
   autoComplete: 'on',
@@ -319,9 +342,11 @@ _defineProperty(BaseInput, "defaultProps", {
   clearable: false,
   clearOnEscape: true,
   overrides: {},
+  // @ts-ignore
   pattern: null,
   placeholder: '',
   required: false,
+  // @ts-ignore
   role: null,
   size: SIZE.default,
   type: 'text',

package/es/input/input.js

@@ -26,14 +26,16 @@ class Input extends React.Component {
     _defineProperty(this, "onFocus", e => {
       this.setState({
         isFocused: true
-      });
+      }); // @ts-ignore
+
       this.props.onFocus(e);
     });
 
     _defineProperty(this, "onBlur", e => {
       this.setState({
         isFocused: false
-      });
+      }); // @ts-ignore
+
       this.props.onBlur(e);
     });
   }
@@ -43,8 +45,11 @@ class Input extends React.Component {
       startEnhancer,
       endEnhancer,
       overrides: {
+        // @ts-ignore
         Root: RootOverride,
+        // @ts-ignore
         StartEnhancer: StartEnhancerOverride,
+        // @ts-ignore
         EndEnhancer: EndEnhancerOverride,
         ...restOverrides
       },
@@ -79,7 +84,8 @@ class Input extends React.Component {
     }), typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer));
   }
 
-}
+} // @ts-ignore
+
 
 _defineProperty(Input, "defaultProps", {
   autoComplete: 'on',
@@ -91,7 +97,9 @@ _defineProperty(Input, "defaultProps", {
   overrides: {},
   required: false,
   size: SIZE.default,
+  // @ts-ignore
   startEnhancer: null,
+  // @ts-ignore
   endEnhancer: null,
   clearable: false,
   type: 'text',
@@ -108,7 +116,8 @@ function getAdjoinedProp(startEnhancer, endEnhancer) {
   }
 
   return ADJOINED.none;
-}
+} // @ts-ignore
+
 
 function isEnhancer(enhancer) {
   return Boolean(enhancer || enhancer === 0);

package/es/input/masked-input.js

@@ -6,7 +6,8 @@ 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.
 */
-import * as React from 'react';
+import * as React from 'react'; // @ts-ignore
+
 import InputMask from 'react-input-mask';
 import Input from './input';
 import { Input as StyledInput } from './styled-components';

package/es/input/stateful-container.js

@@ -24,11 +24,13 @@ class StatefulContainer extends React.Component {
       const nextState = {
         value: e.target.value
       };
-      this.internalSetState(STATE_CHANGE_TYPE.change, nextState);
+      this.internalSetState(STATE_CHANGE_TYPE.change, nextState); // @ts-ignore
+
       this.props.onChange(e);
     });
 
     _defineProperty(this, "internalSetState", (type, nextState) => {
+      // @ts-ignore
       const newState = this.props.stateReducer(type, nextState, this.state);
       this.setState(newState);
     });
@@ -47,6 +49,7 @@ class StatefulContainer extends React.Component {
     } = this;
     return children({ ...restProps,
       ...this.state,
+      // @ts-ignore
       onChange
     });
   }

package/es/input/styled-components.js

@@ -66,7 +66,10 @@ export const StyledClearIcon = styled(DeleteAlt, ({
 StyledClearIcon.displayName = "StyledClearIcon";
 StyledClearIcon.displayName = 'StyledClearIcon';
 
-function getInputPadding(size, sizing) {
+function getInputPadding( // @ts-ignore
+size, // @ts-ignore
+sizing) {
+  // @ts-ignore
   return {
     [SIZE.mini]: {
       paddingTop: sizing.scale100,
@@ -95,16 +98,23 @@ function getInputPadding(size, sizing) {
   }[size];
 }
 
-function getRootPadding(adjoined, size, sizing, direction, hasIconTrailing) {
+function getRootPadding( // @ts-ignore
+adjoined, // @ts-ignore
+size, // @ts-ignore
+sizing, // @ts-ignore
+direction, // @ts-ignore
+hasIconTrailing) {
   let ifLeftPad = adjoined === ADJOINED.both || adjoined === ADJOINED.left && direction !== 'rtl' || adjoined === ADJOINED.right && direction === 'rtl' || hasIconTrailing && direction === 'rtl';
   let ifRightPad = adjoined === ADJOINED.both || adjoined === ADJOINED.right && direction !== 'rtl' || adjoined === ADJOINED.left && direction === 'rtl' || hasIconTrailing && direction !== 'rtl';
   return {
     paddingLeft: ifLeftPad ? sizing.scale550 : '0px',
     paddingRight: ifRightPad ? sizing.scale550 : '0px'
   };
-}
+} // @ts-ignore
+
 
 function getFont(size, typography) {
+  // @ts-ignore
   return {
     [SIZE.mini]: typography.font100,
     [SIZE.compact]: typography.font200,
@@ -113,7 +123,11 @@ function getFont(size, typography) {
   }[size];
 }
 
-function getRootColors($disabled, $isFocused, $error, $positive = false, colors) {
+function getRootColors( // @ts-ignore
+$disabled, // @ts-ignore
+$isFocused, // @ts-ignore
+$error, $positive = false, // @ts-ignore
+colors) {
   if ($disabled) {
     return {
       borderLeftColor: colors.inputFillDisabled,
@@ -163,7 +177,9 @@ function getRootColors($disabled, $isFocused, $error, $positive = false, colors)
   };
 }
 
-function getRootBorderRadius(size, borders) {
+function getRootBorderRadius( // @ts-ignore
+size, // @ts-ignore
+borders) {
   let radius = borders.inputBorderRadius;
 
   if (size === SIZE.mini) {
@@ -222,7 +238,9 @@ export const Root = styled('div', getRootStyles);
 Root.displayName = "Root";
 Root.displayName = 'Root'; // InputEnhancer
 
+// @ts-ignore
 function getInputEnhancerPadding($size, sizing) {
+  // @ts-ignore
   return {
     [SIZE.mini]: {
       paddingRight: sizing.scale400,
@@ -241,7 +259,8 @@ function getInputEnhancerPadding($size, sizing) {
       paddingLeft: sizing.scale200
     }
   }[$size];
-}
+} // @ts-ignore
+
 
 function getInputEnhancerColors($disabled, $isFocused, $error, $positive, colors) {
   if ($disabled) {
@@ -306,6 +325,7 @@ export const InputEnhancer = styled('div', props => {
 });
 InputEnhancer.displayName = "InputEnhancer";
 InputEnhancer.displayName = 'InputEnhancer'; // InputContainer
+// @ts-ignore
 
 function getInputContainerColors($disabled, $isFocused, $error, $positive, colors) {
   if ($disabled) {
@@ -367,7 +387,7 @@ export const getInputContainerStyles = props => {
 };
 export const InputContainer = styled('div', getInputContainerStyles);
 InputContainer.displayName = "InputContainer";
-InputContainer.displayName = 'InputContainer';
+InputContainer.displayName = 'InputContainer'; // @ts-ignore
 
 function getInputColors($disabled, $isFocused, $error, colors) {
   if ($disabled) {
@@ -420,9 +440,13 @@ export const getInputStyles = props => {
     maxWidth: '100%',
     cursor: $disabled ? 'not-allowed' : 'text',
     margin: '0',
+    // @ts-ignore
     paddingTop: '0',
+    // @ts-ignore
     paddingBottom: '0',
+    // @ts-ignore
     paddingLeft: '0',
+    // @ts-ignore
     paddingRight: '0',
     ...getFont($size, typography),
     ...getInputPadding($size, sizing),

package/es/input/utils.js

@@ -23,7 +23,9 @@ export function getSharedProps(props, state) {
     $disabled: disabled,
     $error: error,
     $positive: positive,
+    // @ts-ignore
     $adjoined: adjoined,
+    // @ts-ignore
     $size: size,
     $required: required,
     $resize: resize,

package/es/layer/layer.js

@@ -29,6 +29,8 @@ class LayerComponent extends React.Component {
   constructor(...args) {
     super(...args);
 
+    _defineProperty(this, "context", void 0);
+
     _defineProperty(this, "state", {
       container: null
     });
@@ -100,7 +102,8 @@ class LayerComponent extends React.Component {
     if (host) {
       this.addContainer(host);
     }
-  }
+  } // @ts-ignore
+
 
   componentDidUpdate(prevProps) {
     const {
@@ -146,6 +149,7 @@ class LayerComponent extends React.Component {
     }
   }
 
+  // @ts-ignore
   addContainer(host) {
     const {
       index,

package/es/layer/tether.js

@@ -152,9 +152,12 @@ class Tether extends React.Component {
 }
 
 _defineProperty(Tether, "defaultProps", {
+  // @ts-ignore
   anchorRef: null,
+  // @ts-ignore
   onPopperUpdate: () => null,
   placement: TETHER_PLACEMENT.auto,
+  // @ts-ignore
   popperRef: null,
   popperOptions: {}
 });

package/es/layout-grid/grid.js

@@ -56,6 +56,7 @@ export default function Grid({
       gridColumns,
       gridGaps,
       gridGutters,
+      // @ts-ignore
       gridUnit,
       ...gridContextStyleValues
     }

package/es/layout-grid/index.js

@@ -12,7 +12,8 @@ export { StyledGrid, StyledCell, Grid, Cell };
 export * from './constants';
 const componentName = 'Layout Grid (baseui/layout-grid)';
 export const Unstable_StyledGrid = DeprecatedHOC(StyledGrid, componentName);
-export const Unstable_StyledCell = DeprecatedHOC(StyledCell, componentName);
+export const Unstable_StyledCell = DeprecatedHOC(StyledCell, componentName); // @ts-ignore
+
 export const Unstable_Grid = DeprecatedHOC(Grid, componentName);
 export const Unstable_Cell = DeprecatedHOC(Cell, componentName);
 export * from './types';

package/es/layout-grid/styled-components.js

@@ -7,7 +7,8 @@ LICENSE file in the root directory of this source tree.
 import { styled } from '../styles';
 import { getMediaQueries } from '../helpers/responsive-helpers';
 import { BEHAVIOR } from './constants';
-export const StyledGridWrapper = styled('div', ({
+export const StyledGridWrapper = styled('div', // @ts-ignore
+({
   $theme,
   $behavior = BEHAVIOR.fixed,
   $gridMargins = $theme.grid.margins,
@@ -19,7 +20,8 @@ export const StyledGridWrapper = styled('div', ({
 }));
 StyledGridWrapper.displayName = "StyledGridWrapper";
 StyledGridWrapper.displayName = 'StyledGridWrapper';
-export const StyledGrid = styled('div', ({
+export const StyledGrid = styled('div', // @ts-ignore
+({
   $theme,
   $align = null,
   $behavior = BEHAVIOR.fixed,
@@ -56,7 +58,8 @@ export const StyledGrid = styled('div', ({
 });
 StyledGrid.displayName = "StyledGrid";
 StyledGrid.displayName = 'StyledGrid';
-export const StyledCell = styled('div', ({
+export const StyledCell = styled('div', // @ts-ignore
+({
   $theme,
   $align = null,
   $order = null,

package/es/link/index.js

@@ -12,6 +12,7 @@ import { Link } from './styled-components';
 import { withWrapper } from '../styles';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
 
+// @ts-ignore
 function LinkFocus(props) {
   const [focusVisible, setFocusVisible] = React.useState(false);
 

package/es/list/list-heading.js

@@ -11,6 +11,7 @@ import * as ReactIs from 'react-is';
 import { getOverrides } from '../helpers/overrides';
 import { StyledHeadingRoot, StyledHeadingContent, StyledHeadingContentRow, StyledHeadingEndEnhancerContainer, StyledHeadingEndEnhancerDescriptionContainer, StyledHeadingMainHeading, StyledHeadingSubHeading } from './styled-components';
 
+// @ts-ignore
 function RenderNode(props) {
   const {
     component,
@@ -31,7 +32,8 @@ function RenderNode(props) {
   }
 
   return Component;
-}
+} // @ts-ignore
+
 
 function isMaxLinesValid(maxLines) {
   return maxLines === 1 || maxLines === 2;
@@ -63,27 +65,24 @@ const ListHeading = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   }
 
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    React.createElement(Root, _extends({
-      ref: ref
-    }, rootProps), /*#__PURE__*/React.createElement(Content, contentProps, /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(HeadingContainer, _extends({
-      $maxLines: isMaxLinesValid(maxLines) ? maxLines : 1
-    }, headingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
-      component: props.heading
-    })), EndEnhancer && /*#__PURE__*/React.createElement(EndEnhancerContainer, _extends({
-      $isText: isEndEnhancerString
-    }, endEnhancerContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
-      component: EndEnhancer
-    }))), (Boolean(SubHeading) || EndEnhancerDescription) && /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(SubHeadingContainer, _extends({
-      $maxLines: isMaxLinesValid(maxLines) ? maxLines : 1
-    }, subHeadingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
-      component: SubHeading
-    })), Boolean(EndEnhancerDescription) && isEndEnhancerString && /*#__PURE__*/React.createElement(EndEnhancerDescriptionContainer, endEnhancerDescriptionContainerProps, /*#__PURE__*/React.createElement(RenderNode, {
-      component: EndEnhancerDescription
-    })))))
-  );
+  return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  , _extends({
+    ref: ref
+  }, rootProps), /*#__PURE__*/React.createElement(Content, contentProps, /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(HeadingContainer, _extends({
+    $maxLines: isMaxLinesValid(maxLines) ? maxLines : 1
+  }, headingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: props.heading
+  })), EndEnhancer && /*#__PURE__*/React.createElement(EndEnhancerContainer, _extends({
+    $isText: isEndEnhancerString
+  }, endEnhancerContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: EndEnhancer
+  }))), (Boolean(SubHeading) || EndEnhancerDescription) && /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(SubHeadingContainer, _extends({
+    $maxLines: isMaxLinesValid(maxLines) ? maxLines : 1
+  }, subHeadingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: SubHeading
+  })), Boolean(EndEnhancerDescription) && isEndEnhancerString && /*#__PURE__*/React.createElement(EndEnhancerDescriptionContainer, endEnhancerDescriptionContainerProps, /*#__PURE__*/React.createElement(RenderNode, {
+    component: EndEnhancerDescription
+  })))));
 });
 ListHeading.displayName = 'ListHeading';
 export default ListHeading;

package/es/list/list-item.js

@@ -38,14 +38,18 @@ const ListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       return props.artworkSize || ARTWORK_SIZES.MEDIUM;
     }
   }, [props.artworkSize, props.sublist]);
+  const isTapTarget = Boolean(props.onClick);
   return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line @typescript-eslint/no-explicit-any
   , _extends({
     ref: ref,
     $shape: props.shape || SHAPE.DEFAULT,
+    $as: isTapTarget ? 'button' : 'li',
+    $isTapTarget: isTapTarget,
     "aria-label": props['aria-label'],
     "aria-selected": props['aria-selected'],
     id: props.id,
-    role: props.role
+    role: props.role,
+    onClick: props.onClick
   }, rootProps), Artwork && /*#__PURE__*/React.createElement(ArtworkContainer, _extends({
     $artworkSize: artworkSize,
     $sublist: Boolean(props.sublist)