@elliemae/ds-form 2.3.1 → 2.3.2-next.0

package/cjs/Input/DSInput.js

@@ -59,7 +59,7 @@ const DSInput = _ref => {
     "aria-label": otherProps['aria-label'],
     "aria-describedby": otherProps['aria-describedby'],
     autoFocus: autoFocus,
-    className: "".concat(className, " ").concat(disabled ? 'input-disabled' : ''),
+    className: "".concat(className, " ").concat(disabled ? 'input-disabled' : '').concat(readOnly ? 'read-only' : ''),
     clearable: clearable,
     containerProps: containerProps,
     customInputType: customInputType,

package/cjs/Input/InputImpl.js

@@ -275,7 +275,7 @@ class InputImpl extends React.Component {
       },
       className,
       autoFocus,
-      disabled: disabled || readOnly,
+      disabled,
       maxLength,
       minLength,
       name,
@@ -296,7 +296,8 @@ class InputImpl extends React.Component {
       min,
       max,
       style,
-      tabIndex
+      tabIndex,
+      readOnly
     }, containerProps);
 
     let InputComponent = /*#__PURE__*/jsxRuntime.jsx(WrapperForTooltipInput, {

package/cjs/InputProtected/DSInputProtected.js

@@ -64,22 +64,21 @@ const DSInputProtected = _ref => {
   }, [leftAddon, rightAddon]);
   const handleLeft = React.useCallback(() => {
     setLocked(!inputLocked);
-  }, [leftAddon, inputLocked]);
+  }, [inputLocked]);
   const handleRight = React.useCallback(() => {
     setHidden(!inputHidden);
-  }, [rightAddon, inputHidden]);
+  }, [inputHidden]);
   return /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/_jsx__default["default"](DSInputGroup["default"], {
     leftAddon: left ? /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
       "aria-label": "".concat(inputLocked ? 'Allow' : 'Disallow', " Edition"),
       buttonType: "secondary",
-      icon: ADDON_ICON_OPTIONS[inputLocked ? options.LEFT_ADDON_OPTIONS.LockUnlocked : options.LEFT_ADDON_OPTIONS.LockLocked],
+      icon: ADDON_ICON_OPTIONS[inputLocked ? options.LEFT_ADDON_OPTIONS.LockLocked : options.LEFT_ADDON_OPTIONS.LockUnlocked],
       onClick: handleLeft
     }) : undefined,
-    readOnly: left ? inputLocked : readOnly,
     rightAddon: right ? /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
       "aria-label": "".concat(inputHidden ? 'Show' : 'Hide', " Characters"),
       buttonType: "secondary",
-      icon: ADDON_ICON_OPTIONS[inputHidden ? options.RIGHT_ADDON_OPTIONS.VisibleView : options.RIGHT_ADDON_OPTIONS.InvisibleHide],
+      icon: ADDON_ICON_OPTIONS[inputHidden ? options.RIGHT_ADDON_OPTIONS.InvisibleHide : options.RIGHT_ADDON_OPTIONS.VisibleView],
       onClick: handleRight,
       containerProps: {
         'data-testid': 'inputprotected-show-hide-button'
@@ -89,7 +88,7 @@ const DSInputProtected = _ref => {
     mask: mask,
     placeholderChar: placeholderChar,
     onChange: onChange,
-    readOnly: left ? inputLocked : readOnly,
+    disabled: left ? inputLocked : readOnly,
     type: right && inputHidden ? 'password' : type,
     value: value
   }))));

package/cjs/MenuItem/components/MultiMenuItem/MultiMenuItem.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
 var reactDesc = require('react-desc');
+var Grid = require('@elliemae/ds-grid');
 var dsControlledForm = require('@elliemae/ds-controlled-form');
 var props = require('../../props.js');
-var styled$1 = require('./styled.js');
 var styled = require('../styled.js');
+var styled$1 = require('./styled.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -50,16 +51,24 @@ const MultiMenuItem = props => {
     style: wrapperStyles,
     pr: render ? 0 : 40,
     "data-testid": "combobox-option",
-    children: /*#__PURE__*/_jsx__default["default"](styled$1.StyledItemContent, {}, void 0, render ? render(props) : /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledCheckbox, {
-      disabled: disabled,
-      checked: isSelected,
-      onMouseDown: onMouseDown,
-      name: value,
-      ariaLabel: label,
-      label: label,
-      id: value,
-      onChange: onClick
-    }))
+    children: /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: render ? render(props) : /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+        cols: ['16px', 'auto'],
+        minHeight: "16px",
+        gutter: "xxs",
+        alignItems: "center"
+      }, void 0, /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledCheckbox, {
+        disabled: disabled,
+        checked: isSelected,
+        onMouseDown: onMouseDown,
+        name: value,
+        "aria-label": label,
+        id: value,
+        onChange: onClick
+      }), /*#__PURE__*/_jsx__default["default"](styled$1.StyledMultiMenuItemLabel, {
+        htmlFor: value
+      }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyleMenuItemLabel, {}, void 0, label)))
+    })
   });
 };
 

package/cjs/MenuItem/components/MultiMenuItem/styled.js

@@ -8,8 +8,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledItemContent = /*#__PURE__*/styled__default["default"].div.withConfig({
+const StyledMultiMenuItemLabel = /*#__PURE__*/styled__default["default"].label.withConfig({
   componentId: "sc-1stlix4-0"
-})(["display:flex;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;"]);
+})(["padding-left:8px;color:rgb(37,41,47);font-size:13px;line-height:13px;display:inherit;"]);
 
-exports.StyledItemContent = StyledItemContent;
+exports.StyledMultiMenuItemLabel = StyledMultiMenuItemLabel;

package/cjs/MenuItem/components/SingleMenuItem/SingleMenuItem.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
 var reactDesc = require('react-desc');
-var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var dsIcons = require('@elliemae/ds-icons');
 var Grid = require('@elliemae/ds-grid');
 var props = require('../../props.js');
@@ -53,15 +52,13 @@ const SingleMenuItem = props => {
     disabled: disabled,
     children: render ? render(props) : /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
       cols: ['16px', 'auto'],
-      height: "16px",
+      minHeight: "16px",
       gutter: "xxs",
       alignItems: "center"
     }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, isSelected && /*#__PURE__*/_jsx__default["default"](dsIcons.Checkmark, {
       size: "s",
       color: ['brand-primary', '600']
-    })), /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText.SimpleTruncatedTooltipText, {
-      value: label
-    }))
+    })), /*#__PURE__*/_jsx__default["default"](styled.StyleMenuItemLabel, {}, void 0, label))
   });
 };
 

package/cjs/MenuItem/components/styled.js

@@ -37,7 +37,7 @@ const focusBorderCss = _ref3 => {
 
 const StyledGlobalMenuItemWrapper = /*#__PURE__*/styled__default["default"].li.withConfig({
   componentId: "sc-jyoobd-0"
-})(["cursor:pointer;height:32px;padding-left:16px;padding-right:16px;display:grid;align-items:center;list-style:none;position:relative;", " ", " ", " ", " ", ";background-color:", ";&:hover{background-color:", ";}"], styledComponents.position, styledComponents.layout, styledComponents.sizing, styledComponents.space, props => {
+})(["cursor:pointer;min-height:32px;padding-left:16px;padding-right:16px;display:grid;align-items:center;list-style:none;position:relative;", " ", " ", " ", " ", ";background-color:", ";&:hover{background-color:", ";}"], styledComponents.position, styledComponents.layout, styledComponents.sizing, styledComponents.space, props => {
   if (props.disabled) return disabledOption();
   if (props.isFocus) return focusBorderCss(props);
   if (props.isActive) return activeBorderCss(props);
@@ -49,7 +49,11 @@ const StyledMenuItemWrapper = /*#__PURE__*/styled__default["default"](StyledGlob
 const StyledSubmenuItemWrapper = /*#__PURE__*/styled__default["default"](StyledGlobalMenuItemWrapper).withConfig({
   componentId: "sc-jyoobd-2"
 })(["", ";padding-right:0;"], props => props.isSelected || props.isActive ? activeBorderCss(props) : '');
+const StyleMenuItemLabel = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-jyoobd-3"
+})(["padding:8px 0;"]);
 
+exports.StyleMenuItemLabel = StyleMenuItemLabel;
 exports.StyledGlobalMenuItemWrapper = StyledGlobalMenuItemWrapper;
 exports.StyledMenuItemWrapper = StyledMenuItemWrapper;
 exports.StyledSubmenuItemWrapper = StyledSubmenuItemWrapper;

package/esm/Input/DSInput.js

@@ -50,7 +50,7 @@ const DSInput = _ref => {
     "aria-label": otherProps['aria-label'],
     "aria-describedby": otherProps['aria-describedby'],
     autoFocus: autoFocus,
-    className: "".concat(className, " ").concat(disabled ? 'input-disabled' : ''),
+    className: "".concat(className, " ").concat(disabled ? 'input-disabled' : '').concat(readOnly ? 'read-only' : ''),
     clearable: clearable,
     containerProps: containerProps,
     customInputType: customInputType,

package/esm/Input/InputImpl.js

@@ -263,7 +263,7 @@ class InputImpl extends Component {
       },
       className,
       autoFocus,
-      disabled: disabled || readOnly,
+      disabled,
       maxLength,
       minLength,
       name,
@@ -284,7 +284,8 @@ class InputImpl extends Component {
       min,
       max,
       style,
-      tabIndex
+      tabIndex,
+      readOnly
     }, containerProps);
 
     let InputComponent = /*#__PURE__*/jsx(WrapperForTooltipInput, {

package/esm/InputProtected/DSInputProtected.js

@@ -53,22 +53,21 @@ const DSInputProtected = _ref => {
   }, [leftAddon, rightAddon]);
   const handleLeft = useCallback(() => {
     setLocked(!inputLocked);
-  }, [leftAddon, inputLocked]);
+  }, [inputLocked]);
   const handleRight = useCallback(() => {
     setHidden(!inputHidden);
-  }, [rightAddon, inputHidden]);
+  }, [inputHidden]);
   return /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {
     leftAddon: left ? /*#__PURE__*/_jsx(DSButton, {
       "aria-label": "".concat(inputLocked ? 'Allow' : 'Disallow', " Edition"),
       buttonType: "secondary",
-      icon: ADDON_ICON_OPTIONS[inputLocked ? LEFT_ADDON_OPTIONS.LockUnlocked : LEFT_ADDON_OPTIONS.LockLocked],
+      icon: ADDON_ICON_OPTIONS[inputLocked ? LEFT_ADDON_OPTIONS.LockLocked : LEFT_ADDON_OPTIONS.LockUnlocked],
       onClick: handleLeft
     }) : undefined,
-    readOnly: left ? inputLocked : readOnly,
     rightAddon: right ? /*#__PURE__*/_jsx(DSButton, {
       "aria-label": "".concat(inputHidden ? 'Show' : 'Hide', " Characters"),
       buttonType: "secondary",
-      icon: ADDON_ICON_OPTIONS[inputHidden ? RIGHT_ADDON_OPTIONS.VisibleView : RIGHT_ADDON_OPTIONS.InvisibleHide],
+      icon: ADDON_ICON_OPTIONS[inputHidden ? RIGHT_ADDON_OPTIONS.InvisibleHide : RIGHT_ADDON_OPTIONS.VisibleView],
       onClick: handleRight,
       containerProps: {
         'data-testid': 'inputprotected-show-hide-button'
@@ -78,7 +77,7 @@ const DSInputProtected = _ref => {
     mask: mask,
     placeholderChar: placeholderChar,
     onChange: onChange,
-    readOnly: left ? inputLocked : readOnly,
+    disabled: left ? inputLocked : readOnly,
     type: right && inputHidden ? 'password' : type,
     value: value
   }))));

package/esm/MenuItem/components/MultiMenuItem/MultiMenuItem.js

@@ -1,11 +1,12 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { describe } from 'react-desc';
+import { Grid } from '@elliemae/ds-grid';
 import { DSControlledCheckbox } from '@elliemae/ds-controlled-form';
 import { itemProps, defaultProps } from '../../props.js';
-import { StyledItemContent } from './styled.js';
-import { StyledGlobalMenuItemWrapper } from '../styled.js';
-import { jsx } from 'react/jsx-runtime';
+import { StyledGlobalMenuItemWrapper, StyleMenuItemLabel } from '../styled.js';
+import { StyledMultiMenuItemLabel } from './styled.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
 const MultiMenuItem = props => {
   const {
@@ -42,16 +43,24 @@ const MultiMenuItem = props => {
     style: wrapperStyles,
     pr: render ? 0 : 40,
     "data-testid": "combobox-option",
-    children: /*#__PURE__*/_jsx(StyledItemContent, {}, void 0, render ? render(props) : /*#__PURE__*/_jsx(DSControlledCheckbox, {
-      disabled: disabled,
-      checked: isSelected,
-      onMouseDown: onMouseDown,
-      name: value,
-      ariaLabel: label,
-      label: label,
-      id: value,
-      onChange: onClick
-    }))
+    children: /*#__PURE__*/jsx(Fragment, {
+      children: render ? render(props) : /*#__PURE__*/_jsx(Grid, {
+        cols: ['16px', 'auto'],
+        minHeight: "16px",
+        gutter: "xxs",
+        alignItems: "center"
+      }, void 0, /*#__PURE__*/_jsx(DSControlledCheckbox, {
+        disabled: disabled,
+        checked: isSelected,
+        onMouseDown: onMouseDown,
+        name: value,
+        "aria-label": label,
+        id: value,
+        onChange: onClick
+      }), /*#__PURE__*/_jsx(StyledMultiMenuItemLabel, {
+        htmlFor: value
+      }, void 0, /*#__PURE__*/_jsx(StyleMenuItemLabel, {}, void 0, label)))
+    })
   });
 };
 

package/esm/MenuItem/components/MultiMenuItem/styled.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
-const StyledItemContent = /*#__PURE__*/styled.div.withConfig({
+const StyledMultiMenuItemLabel = /*#__PURE__*/styled.label.withConfig({
   componentId: "sc-1stlix4-0"
-})(["display:flex;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;"]);
+})(["padding-left:8px;color:rgb(37,41,47);font-size:13px;line-height:13px;display:inherit;"]);
 
-export { StyledItemContent };
+export { StyledMultiMenuItemLabel };

package/esm/MenuItem/components/SingleMenuItem/SingleMenuItem.js

@@ -1,11 +1,10 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { describe } from 'react-desc';
-import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { Checkmark } from '@elliemae/ds-icons';
 import Grid from '@elliemae/ds-grid';
 import { itemProps, defaultProps } from '../../props.js';
-import { StyledGlobalMenuItemWrapper } from '../styled.js';
+import { StyledGlobalMenuItemWrapper, StyleMenuItemLabel } from '../styled.js';
 import { jsx } from 'react/jsx-runtime';
 
 const SingleMenuItem = props => {
@@ -44,15 +43,13 @@ const SingleMenuItem = props => {
     disabled: disabled,
     children: render ? render(props) : /*#__PURE__*/_jsx(Grid, {
       cols: ['16px', 'auto'],
-      height: "16px",
+      minHeight: "16px",
       gutter: "xxs",
       alignItems: "center"
     }, void 0, /*#__PURE__*/_jsx("div", {}, void 0, isSelected && /*#__PURE__*/_jsx(Checkmark, {
       size: "s",
       color: ['brand-primary', '600']
-    })), /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-      value: label
-    }))
+    })), /*#__PURE__*/_jsx(StyleMenuItemLabel, {}, void 0, label))
   });
 };
 

package/esm/MenuItem/components/styled.js

@@ -29,7 +29,7 @@ const focusBorderCss = _ref3 => {
 
 const StyledGlobalMenuItemWrapper = /*#__PURE__*/styled.li.withConfig({
   componentId: "sc-jyoobd-0"
-})(["cursor:pointer;height:32px;padding-left:16px;padding-right:16px;display:grid;align-items:center;list-style:none;position:relative;", " ", " ", " ", " ", ";background-color:", ";&:hover{background-color:", ";}"], position, layout, sizing, space, props => {
+})(["cursor:pointer;min-height:32px;padding-left:16px;padding-right:16px;display:grid;align-items:center;list-style:none;position:relative;", " ", " ", " ", " ", ";background-color:", ";&:hover{background-color:", ";}"], position, layout, sizing, space, props => {
   if (props.disabled) return disabledOption();
   if (props.isFocus) return focusBorderCss(props);
   if (props.isActive) return activeBorderCss(props);
@@ -41,5 +41,8 @@ const StyledMenuItemWrapper = /*#__PURE__*/styled(StyledGlobalMenuItemWrapper).w
 const StyledSubmenuItemWrapper = /*#__PURE__*/styled(StyledGlobalMenuItemWrapper).withConfig({
   componentId: "sc-jyoobd-2"
 })(["", ";padding-right:0;"], props => props.isSelected || props.isActive ? activeBorderCss(props) : '');
+const StyleMenuItemLabel = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-jyoobd-3"
+})(["padding:8px 0;"]);
 
-export { StyledGlobalMenuItemWrapper, StyledMenuItemWrapper, StyledSubmenuItemWrapper };
+export { StyleMenuItemLabel, StyledGlobalMenuItemWrapper, StyledMenuItemWrapper, StyledSubmenuItemWrapper };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form",
-  "version": "2.3.1",
+  "version": "2.3.2-next.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Form",
   "module": "./esm/index.js",
@@ -748,25 +748,25 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.3.1",
-    "@elliemae/ds-circular-progress-indicator": "2.3.1",
-    "@elliemae/ds-classnames": "2.3.1",
-    "@elliemae/ds-controlled-form": "2.3.1",
-    "@elliemae/ds-dropdownmenu": "2.3.1",
-    "@elliemae/ds-grid": "2.3.1",
-    "@elliemae/ds-icon": "2.3.1",
-    "@elliemae/ds-icons": "2.3.1",
-    "@elliemae/ds-menu": "2.3.1",
-    "@elliemae/ds-overlay": "2.3.1",
-    "@elliemae/ds-popper": "2.3.1",
-    "@elliemae/ds-props-helpers": "2.3.1",
-    "@elliemae/ds-separator": "2.3.1",
-    "@elliemae/ds-shared": "2.3.1",
-    "@elliemae/ds-system": "2.3.1",
-    "@elliemae/ds-text-wrapper": "2.3.1",
-    "@elliemae/ds-tooltip": "2.3.1",
-    "@elliemae/ds-truncated-tooltip-text": "2.3.1",
-    "@elliemae/ds-utilities": "2.3.1",
+    "@elliemae/ds-button": "2.3.2-next.0",
+    "@elliemae/ds-circular-progress-indicator": "2.3.2-next.0",
+    "@elliemae/ds-classnames": "2.3.2-next.0",
+    "@elliemae/ds-controlled-form": "2.3.2-next.0",
+    "@elliemae/ds-dropdownmenu": "2.3.2-next.0",
+    "@elliemae/ds-grid": "2.3.2-next.0",
+    "@elliemae/ds-icon": "2.3.2-next.0",
+    "@elliemae/ds-icons": "2.3.2-next.0",
+    "@elliemae/ds-menu": "2.3.2-next.0",
+    "@elliemae/ds-overlay": "2.3.2-next.0",
+    "@elliemae/ds-popper": "2.3.2-next.0",
+    "@elliemae/ds-props-helpers": "2.3.2-next.0",
+    "@elliemae/ds-separator": "2.3.2-next.0",
+    "@elliemae/ds-shared": "2.3.2-next.0",
+    "@elliemae/ds-system": "2.3.2-next.0",
+    "@elliemae/ds-text-wrapper": "2.3.2-next.0",
+    "@elliemae/ds-tooltip": "2.3.2-next.0",
+    "@elliemae/ds-truncated-tooltip-text": "2.3.2-next.0",
+    "@elliemae/ds-utilities": "2.3.2-next.0",
     "@elliemae/react-popper": "1.0.2",
     "@xstyled/styled-components": "~3.1.1",
     "csstype": "~3.0.9",

package/types/DateInputV2/components/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const DateInputFluidContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const DateInputWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const DateInputFluidContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const DateInputWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const DateInputInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
 export declare const DateInputDivider: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/types/MenuItem/components/MultiMenuItem/styled.d.ts

@@ -1 +1 @@
-export declare const StyledItemContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMultiMenuItemLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;

package/types/MenuItem/components/styled.d.ts

@@ -5,3 +5,4 @@ export declare const StyledMenuItemWrapper: import("styled-components").StyledCo
     disabled: boolean;
 }, never>;
 export declare const StyledSubmenuItemWrapper: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, Pick<MenuItemT, "isActive" | "isSelected" | "isFocus"> & LayoutProps<import("@xstyled/system").Theme> & SizingProps<import("@xstyled/system").Theme> & PositionProps<import("@xstyled/system").Theme> & SpaceProps<import("@xstyled/system").Theme>, never>;
+export declare const StyleMenuItemLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;