@basic-ui/material 1.0.0-alpha.4 → 1.0.0-alpha.7

package/build/esm/NavRail/NavRailItem.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { BoxProps } from '../Box';
+import type { TextProps } from '../Text';
+import type { RippleBoxProps } from '../Ripple';
+export interface NavRailItemProps extends Omit<BoxProps, 'color'> {
+    as?: React.ElementType<any>;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    selected?: boolean;
+    color?: string;
+}
+export declare const NavRailIndicator: React.ForwardRefExoticComponent<Pick<RippleBoxProps<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>, "hidden" | "translate" | keyof import("../Box").BaseProps | keyof import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | keyof import("../Ripple").UseRippleSurfaceOptions<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export declare const NavRailLabel: React.ForwardRefExoticComponent<Pick<TextProps, "onKeyDown" | "onPointerDown" | "style" | "hidden" | "color" | "bottom" | "left" | "right" | "top" | "size" | "flex" | "border" | "padding" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textShadow" | "translate" | "verticalAlign" | "width" | "background" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "gridColumnGap" | "gridGap" | "gridRowGap" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "borderX" | "borderY" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLDivElement>>;
+export declare const NavRailItem: React.ForwardRefExoticComponent<Pick<NavRailItemProps, "onKeyDown" | "onPointerDown" | "style" | "hidden" | "color" | "bottom" | "left" | "right" | "top" | "size" | "flex" | "border" | "padding" | "disabled" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textShadow" | "translate" | "verticalAlign" | "width" | "background" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "gridColumnGap" | "gridGap" | "gridRowGap" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "borderX" | "borderY" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "selected"> & React.RefAttributes<HTMLDivElement>>;

package/build/esm/NavRail/NavRailItem.js

@@ -0,0 +1,140 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import React, { forwardRef, useMemo } from 'react';
+import { get } from 'styled-system';
+import { Box } from '../Box';
+import { useTheme } from '../theme';
+import { Text } from '../Text';
+import { useRippleSurface } from '../Ripple';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var NavRailIndicator = /*#__PURE__*/forwardRef(function NavRailIndicator(props, forwardedRef) {
+  var _props$as = props.as,
+      as = _props$as === void 0 ? 'div' : _props$as,
+      children = props.children,
+      __css = props.__css,
+      otherProps = _objectWithoutProperties(props, ["as", "children", "__css"]);
+
+  return /*#__PURE__*/_jsx(Box, _extends({
+    color: "currentColor",
+    ref: forwardedRef,
+    as: as,
+    "data-nav-rail-item-indicator": ""
+  }, otherProps, {
+    __css: _extends({
+      width: '100%',
+      height: '100%',
+      maxWidth: "3.5rem",
+      maxHeight: "3.5rem",
+      borderRadius: 'full',
+      bg: 'var(--indicator-background-color)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: "2rem"
+    }, __css),
+    children: children
+  }));
+});
+export var NavRailLabel = /*#__PURE__*/forwardRef(function NavRailLabel(props, forwardedRef) {
+  var _props$as2 = props.as,
+      as = _props$as2 === void 0 ? 'div' : _props$as2,
+      children = props.children,
+      __css = props.__css,
+      otherProps = _objectWithoutProperties(props, ["as", "children", "__css"]);
+
+  return /*#__PURE__*/_jsx(Text, _extends({
+    ref: forwardedRef,
+    as: as,
+    variant: "caption"
+  }, otherProps, {
+    lineHeight: 1,
+    __css: _extends({
+      pt: "0.25rem",
+      pb: "0.75rem",
+      color: 'inherit'
+    }, __css),
+    children: children
+  }));
+});
+export var NavRailItem = /*#__PURE__*/forwardRef(function NavRailItem(props, forwardedRef) {
+  var _props$as3 = props.as,
+      as = _props$as3 === void 0 ? 'button' : _props$as3,
+      children = props.children,
+      _props$color = props.color,
+      color = _props$color === void 0 ? 'primary-container' : _props$color,
+      _props$selected = props.selected,
+      selected = _props$selected === void 0 ? false : _props$selected,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      style = props.style,
+      onKeyDown = props.onKeyDown,
+      onPointerDown = props.onPointerDown,
+      __css = props.__css,
+      otherProps = _objectWithoutProperties(props, ["as", "children", "color", "selected", "disabled", "style", "onKeyDown", "onPointerDown", "__css"]);
+
+  var theme = useTheme();
+  var baseOpacity = 0,
+      hoverOpacity = 0.04,
+      focusOpacity = 0.12,
+      pressedOpacity = 0.12;
+  var ripple = useRippleSurface({
+    rippleColor: "on.".concat(color),
+    onKeyDown: onKeyDown,
+    onPointerDown: onPointerDown,
+    baseOpacity: baseOpacity,
+    hoverOpacity: hoverOpacity,
+    focusOpacity: focusOpacity,
+    pressedOpacity: pressedOpacity
+  }); // Apply ripple from nav item to nav indicator
+
+  var rippleCss = useMemo(function () {
+    var ret = {};
+    var keys = Object.keys(ripple.__css);
+
+    for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
+      var key = _keys[_i];
+
+      if (!key.startsWith('&')) {
+        ret['& [data-nav-rail-item-indicator]'] = ret['& [data-nav-rail-item-indicator]'] || {};
+        ret['& [data-nav-rail-item-indicator]'][key] = ripple.__css[key];
+        continue;
+      }
+
+      var newKey = key.replace(/(.+?)::(before|after)/g, '$1 [data-nav-rail-item-indicator]::$2');
+      ret[newKey] = ripple.__css[key];
+    }
+
+    return ret;
+  }, [ripple.__css]);
+  console.log(Object.keys(rippleCss));
+  return /*#__PURE__*/_jsx(Box, _extends({
+    ref: forwardedRef,
+    as: as
+  }, otherProps, {
+    onPointerDown: ripple.onPointerDown,
+    onKeyDown: ripple.onKeyDown,
+    "aria-pressed": selected,
+    type: "button",
+    style: _extends({}, ripple.style, style),
+    disabled: disabled,
+    __css: _extends({
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      color: "on.".concat(color),
+      '--indicator-background-color': selected ? get(theme, "colors.".concat(color)) : 'transparent',
+      border: 'none',
+      ':focus': {
+        outline: 'none'
+      },
+      backgroundColor: 'transparent',
+      margin: 0,
+      padding: 0,
+      px: "0.75rem",
+      cursor: 'pointer',
+      textDecoration: 'none'
+    }, rippleCss, __css),
+    children: children
+  }));
+});
+//# sourceMappingURL=NavRailItem.js.map

package/build/esm/NavRail/NavRailItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NavRail/NavRailItem.tsx"],"names":["React","forwardRef","useMemo","get","Box","useTheme","Text","useRippleSurface","NavRailIndicator","props","forwardedRef","as","children","__css","otherProps","width","height","maxWidth","maxHeight","borderRadius","bg","display","alignItems","justifyContent","minHeight","NavRailLabel","pt","pb","color","NavRailItem","selected","disabled","style","onKeyDown","onPointerDown","theme","baseOpacity","hoverOpacity","focusOpacity","pressedOpacity","ripple","rippleColor","rippleCss","ret","keys","Object","key","startsWith","newKey","replace","console","log","flexDirection","border","outline","backgroundColor","margin","padding","px","cursor","textDecoration"],"mappings":"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","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { rem } from 'polished';\nimport { get } from 'styled-system';\n\nimport type { BoxProps, SxStyleProp } from '../Box';\nimport { Box } from '../Box';\nimport { useTheme } from '../theme';\nimport { Text } from '../Text';\nimport type { TextProps } from '../Text';\nimport type { RippleBoxProps } from '../Ripple';\nimport { useRippleSurface } from '../Ripple';\n\nexport interface NavRailItemProps extends Omit<BoxProps, 'color'> {\n  as?: React.ElementType<any>;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  selected?: boolean;\n  color?: string;\n}\n\nexport const NavRailIndicator = forwardRef<HTMLDivElement, RippleBoxProps>(\n  function NavRailIndicator(props, forwardedRef) {\n    const { as = 'div', children, __css, ...otherProps } = props;\n\n    return (\n      <Box\n        color=\"currentColor\"\n        ref={forwardedRef}\n        as={as}\n        data-nav-rail-item-indicator=\"\"\n        {...otherProps}\n        __css={{\n          width: '100%',\n          height: '100%',\n          maxWidth: rem(56),\n          maxHeight: rem(56),\n          borderRadius: 'full',\n          bg: 'var(--indicator-background-color)',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          minHeight: rem(32),\n          ...__css,\n        }}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n\nexport const NavRailLabel = forwardRef<HTMLDivElement, TextProps>(\n  function NavRailLabel(props, forwardedRef) {\n    const { as = 'div', children, __css, ...otherProps } = props;\n\n    return (\n      <Text\n        ref={forwardedRef}\n        as={as}\n        variant=\"caption\"\n        {...otherProps}\n        lineHeight={1}\n        __css={{\n          pt: rem(4),\n          pb: rem(12),\n          color: 'inherit',\n          ...__css,\n        }}\n      >\n        {children}\n      </Text>\n    );\n  }\n);\n\nexport const NavRailItem = forwardRef<HTMLDivElement, NavRailItemProps>(\n  function NavRailItem(props, forwardedRef) {\n    const {\n      as = 'button',\n      children,\n      color = 'primary-container',\n      selected = false,\n      disabled = false,\n      style,\n      onKeyDown,\n      onPointerDown,\n      __css,\n      ...otherProps\n    } = props;\n    const theme = useTheme();\n    const baseOpacity = 0,\n      hoverOpacity = 0.04,\n      focusOpacity = 0.12,\n      pressedOpacity = 0.12;\n    const ripple = useRippleSurface({\n      rippleColor: `on.${color}`,\n      onKeyDown,\n      onPointerDown,\n      baseOpacity,\n      hoverOpacity,\n      focusOpacity,\n      pressedOpacity,\n    });\n\n    // Apply ripple from nav item to nav indicator\n    const rippleCss = useMemo(() => {\n      const ret: SxStyleProp = {};\n      const keys = Object.keys(ripple.__css);\n      for (const key of keys) {\n        if (!key.startsWith('&')) {\n          ret['& [data-nav-rail-item-indicator]'] =\n            ret['& [data-nav-rail-item-indicator]'] || {};\n          ret['& [data-nav-rail-item-indicator]'][key] = ripple.__css[key];\n          continue;\n        }\n\n        const newKey = key.replace(\n          /(.+?)::(before|after)/g,\n          '$1 [data-nav-rail-item-indicator]::$2'\n        );\n        ret[newKey] = ripple.__css[key];\n      }\n      return ret;\n    }, [ripple.__css]);\n    console.log(Object.keys(rippleCss));\n\n    return (\n      <Box\n        ref={forwardedRef}\n        as={as}\n        {...otherProps}\n        onPointerDown={ripple.onPointerDown}\n        onKeyDown={ripple.onKeyDown}\n        aria-pressed={selected}\n        type=\"button\"\n        style={{ ...ripple.style, ...style }}\n        disabled={disabled}\n        __css={{\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'center',\n          color: `on.${color}`,\n          '--indicator-background-color': selected\n            ? get(theme, `colors.${color}`)\n            : 'transparent',\n          border: 'none',\n          ':focus': {\n            outline: 'none',\n          },\n          backgroundColor: 'transparent',\n          margin: 0,\n          padding: 0,\n          px: rem(12),\n          cursor: 'pointer',\n          textDecoration: 'none',\n          ...rippleCss,\n          ...__css,\n        }}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n"],"file":"NavRailItem.js"}

package/build/esm/NavRail/index.d.ts

@@ -0,0 +1 @@
+export * from './NavRailItem';

package/build/esm/NavRail/index.js

@@ -0,0 +1,2 @@
+export * from './NavRailItem';
+//# sourceMappingURL=index.js.map

package/build/esm/NavRail/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NavRail/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAd","sourcesContent":["export * from './NavRailItem';\n"],"file":"index.js"}

package/build/esm/Ripple/useRippleSurface.d.ts

@@ -12,7 +12,7 @@ export interface UseRippleSurfaceOptions<T extends HTMLElement> {
     onPointerDown?: React.PointerEventHandler<T>;
     onKeyDown?: React.KeyboardEventHandler<T>;
 }
-export declare function useRippleSurface<T extends HTMLElement>(opts: UseRippleSurfaceOptions<T>): {
+export declare function useRippleSurface<T extends HTMLElement>(opts?: UseRippleSurfaceOptions<T>): {
     style: {
         alignContent?: import("csstype").Property.AlignContent | undefined;
         alignItems?: import("csstype").Property.AlignItems | undefined;
@@ -782,5 +782,5 @@ export declare function useRippleSurface<T extends HTMLElement>(opts: UseRippleS
     };
     onKeyDown: import("@basic-ui/core").CustomEventHandler<import("react").KeyboardEvent<T>, []>;
     onPointerDown: import("@basic-ui/core").CustomEventHandler<import("react").PointerEvent<T>, []>;
-    __css: Record<string, import("@styled-system/css").SystemStyleObject | import("@styled-system/css").ResponsiveStyleValue<string | number> | Record<string, import("@styled-system/css").SystemStyleObject | import("@styled-system/css").ResponsiveStyleValue<string | number>>>;
+    __css: import("@styled-system/css").SystemCssProperties | Record<string, import("@styled-system/css").SystemStyleObject | import("@styled-system/css").ResponsiveStyleValue<string | number> | Record<string, import("@styled-system/css").SystemStyleObject | import("@styled-system/css").ResponsiveStyleValue<string | number>>>;
 };

package/build/esm/Ripple/useRippleSurface.js

@@ -1,14 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import { useMemo } from 'react';
 import { get } from '@styled-system/css';
 import { wrapEvent } from '@basic-ui/core';
 import { useTheme } from '../theme';
 import { rippleStyle } from './Ripple';
 import { useRippleHandlers } from './useRippleHandlers';
-export function useRippleSurface(opts) {
-  var _extends2;
-
+export function useRippleSurface() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _opts$baseOpacity = opts.baseOpacity,
       baseOpacity = _opts$baseOpacity === void 0 ? 0 : _opts$baseOpacity,
       _opts$hoverOpacity = opts.hoverOpacity,
@@ -48,62 +48,65 @@ export function useRippleSurface(opts) {
       animationStyle = _useRippleHandlers.style,
       animation = _useRippleHandlers.animation;
 
-  var css = _extends({
-    overflow: 'hidden',
-    position: 'relative',
-    cursor: 'pointer',
-    // fix overflow: hidden + borderRadius in Safari
-    // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
-    willChange: 'transform,opacity',
-    WebkitTapHighlightColor: 'transparent',
-    // ripple overlay
-    '&::before': {
-      backgroundColor: rippleColor,
-      boxSizing: 'content-box',
-      position: 'absolute',
-      content: '""',
-      opacity: baseOpacity,
-      pointerEvents: 'none',
-      top: '0',
-      left: '0',
-      width: '100%',
-      height: '100%',
-      transition: 'opacity 75ms linear'
-    },
-    '&:hover::before': {
-      opacity: hoverOpacity
-    },
-    '&:focus-visible::before': {
-      opacity: focusOpacity
-    }
-  }, !rippleEnabled && {
-    '&:active::before': {
-      opacity: pressedOpacity
-    }
-  }, {
-    '&[aria-pressed="true"]::before': {
-      opacity: baseOpacity + pressedOpacity
-    },
-    '&[aria-pressed="true"]:hover::before': {
-      opacity: pressedOpacity + hoverOpacity
-    },
-    '&[aria-pressed="true"]:focus-visible::before': {
-      opacity: pressedOpacity + focusOpacity
-    }
-  }, !rippleEnabled && {
-    '&[aria-pressed="true"]:active::before': {
-      opacity: pressedOpacity + pressedOpacity
-    }
-  }, (_extends2 = {}, _defineProperty(_extends2, '&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' + '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' + '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before', {
-    opacity: 0
-  }), _defineProperty(_extends2, '&:disabled,&[data-disabled]', {
-    cursor: 'default'
-  }), _extends2), rippleEnabled && {
-    '&::after': _extends({}, rippleStyle({
-      animation: animation
-    }))
-  });
+  var css = useMemo(function () {
+    var _extends2;
 
+    return _extends({
+      overflow: 'hidden',
+      position: 'relative',
+      cursor: 'pointer',
+      // fix overflow: hidden + borderRadius in Safari
+      // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
+      willChange: 'transform,opacity',
+      WebkitTapHighlightColor: 'transparent',
+      // ripple overlay
+      '&::before': {
+        backgroundColor: rippleColor,
+        boxSizing: 'content-box',
+        position: 'absolute',
+        content: '""',
+        opacity: baseOpacity,
+        pointerEvents: 'none',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        transition: 'opacity 75ms linear'
+      },
+      '&:hover::before': {
+        opacity: hoverOpacity
+      },
+      '&:focus-visible::before': {
+        opacity: focusOpacity
+      }
+    }, !rippleEnabled && {
+      '&:active::before': {
+        opacity: pressedOpacity
+      }
+    }, {
+      '&[aria-pressed="true"]::before': {
+        opacity: baseOpacity + pressedOpacity
+      },
+      '&[aria-pressed="true"]:hover::before': {
+        opacity: pressedOpacity + hoverOpacity
+      },
+      '&[aria-pressed="true"]:focus-visible::before': {
+        opacity: pressedOpacity + focusOpacity
+      }
+    }, !rippleEnabled && {
+      '&[aria-pressed="true"]:active::before': {
+        opacity: pressedOpacity + pressedOpacity
+      }
+    }, (_extends2 = {}, _defineProperty(_extends2, '&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' + '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' + '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before', {
+      opacity: 0
+    }), _defineProperty(_extends2, '&:disabled,&[data-disabled]', {
+      cursor: 'default'
+    }), _extends2), rippleEnabled && {
+      '&::after': _extends({}, rippleStyle({
+        animation: animation
+      }))
+    });
+  }, [animation, baseOpacity, focusOpacity, hoverOpacity, pressedOpacity, rippleColor, rippleEnabled]);
   return {
     style: _extends({}, animationStyle, style),
     onKeyDown: wrapEvent(onKeyDown, handleKeyDown),

package/build/esm/Ripple/useRippleSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/useRippleSurface.ts"],"names":["get","wrapEvent","useTheme","rippleStyle","useRippleHandlers","useRippleSurface","opts","baseOpacity","hoverOpacity","focusOpacity","pressedOpacity","rippleColor","onKeyDown","onPointerDown","style","disabled","rippleEnabled","rippleProps","theme","opacity","Number","backgroundColor","handleKeyDown","handlePointerDown","animationStyle","animation","css","overflow","position","cursor","willChange","WebkitTapHighlightColor","boxSizing","content","pointerEvents","top","left","width","height","transition","__css"],"mappings":"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","sourcesContent":["import type { CSSProperties } from 'react';\nimport { get } from '@styled-system/css';\nimport { wrapEvent } from '@basic-ui/core';\n\nimport { useTheme } from '../theme';\nimport { rippleStyle } from './Ripple';\nimport { useRippleHandlers } from './useRippleHandlers';\nimport type { SxStyleProp } from '../Box';\n\nexport interface UseRippleSurfaceOptions<T extends HTMLElement> {\n  baseOpacity?: number;\n  hoverOpacity?: number;\n  focusOpacity?: number;\n  pressedOpacity?: number;\n  rippleColor?: string;\n  rippleEnabled?: boolean;\n  center?: boolean;\n  disabled?: boolean;\n  style?: CSSProperties;\n  onPointerDown?: React.PointerEventHandler<T>;\n  onKeyDown?: React.KeyboardEventHandler<T>;\n}\n\nexport function useRippleSurface<T extends HTMLElement>(\n  opts: UseRippleSurfaceOptions<T>\n) {\n  let {\n    // eslint-disable-next-line prefer-const\n    baseOpacity = 0,\n    hoverOpacity = 0.04,\n    focusOpacity = 0.12,\n    pressedOpacity = 0.12,\n    rippleColor = 'on.surface',\n  } = opts;\n  const {\n    onKeyDown,\n    onPointerDown,\n    style = {},\n    disabled,\n    rippleEnabled = true,\n    ...rippleProps\n  } = opts;\n\n  const theme = useTheme();\n  rippleColor = get(theme, `colors.${rippleColor}`) || rippleColor;\n\n  if (disabled) {\n    hoverOpacity = baseOpacity;\n    focusOpacity = baseOpacity;\n    pressedOpacity = baseOpacity;\n  }\n\n  const {\n    handleKeyDown,\n    handlePointerDown,\n    style: animationStyle,\n    animation,\n  } = useRippleHandlers({\n    opacity: Number(pressedOpacity),\n    backgroundColor: rippleColor,\n    disabled,\n    ...rippleProps,\n  });\n\n  const css: SxStyleProp = {\n    overflow: 'hidden',\n    position: 'relative',\n    cursor: 'pointer',\n    // fix overflow: hidden + borderRadius in Safari\n    // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479\n    willChange: 'transform,opacity',\n    WebkitTapHighlightColor: 'transparent',\n    // ripple overlay\n    '&::before': {\n      backgroundColor: rippleColor,\n      boxSizing: 'content-box',\n      position: 'absolute',\n      content: '\"\"',\n      opacity: baseOpacity,\n      pointerEvents: 'none',\n      top: '0',\n      left: '0',\n      width: '100%',\n      height: '100%',\n      transition: 'opacity 75ms linear',\n    },\n    '&:hover::before': {\n      opacity: hoverOpacity,\n    },\n    '&:focus-visible::before': {\n      opacity: focusOpacity,\n    },\n    ...(!rippleEnabled && {\n      '&:active::before': {\n        opacity: pressedOpacity,\n      },\n    }),\n    '&[aria-pressed=\"true\"]::before': {\n      opacity: baseOpacity + pressedOpacity,\n    },\n    '&[aria-pressed=\"true\"]:hover::before': {\n      opacity: pressedOpacity + hoverOpacity,\n    },\n    '&[aria-pressed=\"true\"]:focus-visible::before': {\n      opacity: pressedOpacity + focusOpacity,\n    },\n    ...(!rippleEnabled && {\n      '&[aria-pressed=\"true\"]:active::before': {\n        opacity: pressedOpacity + pressedOpacity,\n      },\n    }),\n    ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +\n    '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +\n    '&[data-disabled]:active::before,&:disabled[aria-pressed=\"true\"]::before']:\n      {\n        opacity: 0,\n      },\n    '&:disabled,&[data-disabled]': {\n      cursor: 'default',\n    },\n    // ripple\n    ...(rippleEnabled && {\n      '&::after': { ...rippleStyle({ animation }) },\n    }),\n  };\n\n  return {\n    style: { ...animationStyle, ...style },\n    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),\n    onPointerDown: wrapEvent(onPointerDown, handlePointerDown),\n    __css: css,\n  };\n}\n"],"file":"useRippleSurface.js"}
+{"version":3,"sources":["../../../src/Ripple/useRippleSurface.ts"],"names":["useMemo","get","wrapEvent","useTheme","rippleStyle","useRippleHandlers","useRippleSurface","opts","baseOpacity","hoverOpacity","focusOpacity","pressedOpacity","rippleColor","onKeyDown","onPointerDown","style","disabled","rippleEnabled","rippleProps","theme","opacity","Number","backgroundColor","handleKeyDown","handlePointerDown","animationStyle","animation","css","overflow","position","cursor","willChange","WebkitTapHighlightColor","boxSizing","content","pointerEvents","top","left","width","height","transition","__css"],"mappings":"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","sourcesContent":["import type { CSSProperties } from 'react';\nimport { useMemo } from 'react';\nimport { get } from '@styled-system/css';\nimport { wrapEvent } from '@basic-ui/core';\n\nimport { useTheme } from '../theme';\nimport { rippleStyle } from './Ripple';\nimport { useRippleHandlers } from './useRippleHandlers';\nimport type { SxStyleProp } from '../Box';\n\nexport interface UseRippleSurfaceOptions<T extends HTMLElement> {\n  baseOpacity?: number;\n  hoverOpacity?: number;\n  focusOpacity?: number;\n  pressedOpacity?: number;\n  rippleColor?: string;\n  rippleEnabled?: boolean;\n  center?: boolean;\n  disabled?: boolean;\n  style?: CSSProperties;\n  onPointerDown?: React.PointerEventHandler<T>;\n  onKeyDown?: React.KeyboardEventHandler<T>;\n}\n\nexport function useRippleSurface<T extends HTMLElement>(\n  opts: UseRippleSurfaceOptions<T> = {}\n) {\n  let {\n    // eslint-disable-next-line prefer-const\n    baseOpacity = 0,\n    hoverOpacity = 0.04,\n    focusOpacity = 0.12,\n    pressedOpacity = 0.12,\n    rippleColor = 'on.surface',\n  } = opts;\n  const {\n    onKeyDown,\n    onPointerDown,\n    style = {},\n    disabled,\n    rippleEnabled = true,\n    ...rippleProps\n  } = opts;\n\n  const theme = useTheme();\n  rippleColor = get(theme, `colors.${rippleColor}`) || rippleColor;\n\n  if (disabled) {\n    hoverOpacity = baseOpacity;\n    focusOpacity = baseOpacity;\n    pressedOpacity = baseOpacity;\n  }\n\n  const {\n    handleKeyDown,\n    handlePointerDown,\n    style: animationStyle,\n    animation,\n  } = useRippleHandlers({\n    opacity: Number(pressedOpacity),\n    backgroundColor: rippleColor,\n    disabled,\n    ...rippleProps,\n  });\n\n  const css: SxStyleProp = useMemo(\n    () => ({\n      overflow: 'hidden',\n      position: 'relative',\n      cursor: 'pointer',\n      // fix overflow: hidden + borderRadius in Safari\n      // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479\n      willChange: 'transform,opacity',\n      WebkitTapHighlightColor: 'transparent',\n      // ripple overlay\n      '&::before': {\n        backgroundColor: rippleColor,\n        boxSizing: 'content-box',\n        position: 'absolute',\n        content: '\"\"',\n        opacity: baseOpacity,\n        pointerEvents: 'none',\n        top: '0',\n        left: '0',\n        width: '100%',\n        height: '100%',\n        transition: 'opacity 75ms linear',\n      },\n      '&:hover::before': {\n        opacity: hoverOpacity,\n      },\n      '&:focus-visible::before': {\n        opacity: focusOpacity,\n      },\n      ...(!rippleEnabled && {\n        '&:active::before': {\n          opacity: pressedOpacity,\n        },\n      }),\n      '&[aria-pressed=\"true\"]::before': {\n        opacity: baseOpacity + pressedOpacity,\n      },\n      '&[aria-pressed=\"true\"]:hover::before': {\n        opacity: pressedOpacity + hoverOpacity,\n      },\n      '&[aria-pressed=\"true\"]:focus-visible::before': {\n        opacity: pressedOpacity + focusOpacity,\n      },\n      ...(!rippleEnabled && {\n        '&[aria-pressed=\"true\"]:active::before': {\n          opacity: pressedOpacity + pressedOpacity,\n        },\n      }),\n      ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +\n      '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +\n      '&[data-disabled]:active::before,&:disabled[aria-pressed=\"true\"]::before']:\n        {\n          opacity: 0,\n        },\n      '&:disabled,&[data-disabled]': {\n        cursor: 'default',\n      },\n      // ripple\n      ...(rippleEnabled && {\n        '&::after': { ...rippleStyle({ animation }) },\n      }),\n    }),\n    [\n      animation,\n      baseOpacity,\n      focusOpacity,\n      hoverOpacity,\n      pressedOpacity,\n      rippleColor,\n      rippleEnabled,\n    ]\n  );\n\n  return {\n    style: { ...animationStyle, ...style },\n    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),\n    onPointerDown: wrapEvent(onPointerDown, handlePointerDown),\n    __css: css,\n  };\n}\n"],"file":"useRippleSurface.js"}

package/build/esm/Select/Select.d.ts

@@ -15,4 +15,4 @@ export interface SelectProps extends Omit<BoxProps<HTMLSelectElement, React.Sele
     renderValue?: (value?: string) => string | undefined;
     leadingIcon?: React.ReactNode;
 }
-export declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "bottom" | "top" | "hidden" | "left" | "right" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "p" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "size" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "color" | "bg" | "backgroundColor" | "opacity" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "order" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "gridGap" | "gridColumnGap" | "gridRowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "background" | "backgroundImage" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat" | "position" | "zIndex" | "boxShadow" | "textShadow" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "label" | "disabled" | "key" | "value" | "autoComplete" | "autoFocus" | "multiple" | "name" | "required" | "leadingIcon" | "helperText" | "error" | "native" | "renderValue"> & React.RefAttributes<HTMLButtonElement | HTMLSelectElement>>;
+export declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "onKeyDown" | "onPointerDown" | "style" | "hidden" | "color" | "bottom" | "left" | "right" | "top" | "size" | "flex" | "border" | "padding" | "multiple" | "disabled" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textShadow" | "translate" | "verticalAlign" | "width" | "background" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "gridColumnGap" | "gridGap" | "gridRowGap" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "borderX" | "borderY" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "form" | "label" | "autoFocus" | "name" | "value" | "error" | "autoComplete" | "required" | "leadingIcon" | "helperText" | "native" | "renderValue"> & React.RefAttributes<HTMLButtonElement | HTMLSelectElement>>;

package/build/esm/SelectItem/SelectItem.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { MenuItemProps } from '../Menu';
 export declare type SelectItemProps = MenuItemProps;
-export declare const SelectItem: import("react").ForwardRefExoticComponent<Pick<MenuItemProps, "bottom" | "top" | "hidden" | "left" | "right" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "p" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "size" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "color" | "bg" | "backgroundColor" | "opacity" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "order" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "gridGap" | "gridColumnGap" | "gridRowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "background" | "backgroundImage" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat" | "position" | "zIndex" | "boxShadow" | "textShadow" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "innerAs" | "disabled" | "selected" | "rippleColor" | "key" | "value"> & import("react").RefAttributes<HTMLLIElement>>;
+export declare const SelectItem: import("react").ForwardRefExoticComponent<Pick<MenuItemProps, "rippleColor" | "onKeyDown" | "onPointerDown" | "style" | "hidden" | "color" | "bottom" | "left" | "right" | "top" | "size" | "flex" | "border" | "padding" | "disabled" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textShadow" | "translate" | "verticalAlign" | "width" | "background" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "gridColumnGap" | "gridGap" | "gridRowGap" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "borderX" | "borderY" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "selected" | "value" | "innerAs"> & import("react").RefAttributes<HTMLLIElement>>;