@sheinx/shineout-style 3.2.0-beta.1 → 3.2.0-beta.2

package/cjs/menu/menu.js

@@ -6,37 +6,89 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _theme = _interopRequireDefault(require("@sheinx/theme"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var menuIndex = 1000;
-var arrow = {
-  content: '""',
-  position: 'absolute',
-  left: 0,
-  transform: 'translateY(-50%)',
-  border: '6px solid transparent',
-  borderRightColor: _theme.default.menuItemBackgroundColor,
-  marginLeft: '-10px'
-};
+var animationDuration = '.25s';
+var collpaseWidth = _theme.default.menuCollpaseWidth;
+var transitionFunc = 'ease-out';
 var menuStyle = {
   wrapper: {
     height: '100%',
-    transition: 'width 0.3s',
-    backgroundColor: _theme.default.menuItemBackgroundColor
+    width: '100%',
+    backgroundColor: _theme.default.menuItemBackgroundColor,
+    transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
+    color: _theme.default.menuFontColor
   },
   wrapperLight: {},
   wrapperDark: {
     backgroundColor: _theme.default.menuDarkItemBackgroundColor
   },
-  collapse: {
-    width: _theme.default.menuCollapseWidth,
-    boxSizing: 'content-box',
-    '& $root': {
-      width: _theme.default.menuCollapseWidth
+  wrapperCollpase: {
+    width: "".concat(collpaseWidth, "!important"),
+    '& $title': {
+      paddingLeft: '0'
+    },
+    '& $expand': {
+      opacity: 0
+    },
+    '& $titleIcon': {
+      width: "".concat(collpaseWidth, "!important"),
+      flexShrink: 0,
+      justifyContent: 'center'
+    },
+    '& $titleContent': {
+      opacity: 0,
+      alignItems: 'center',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    },
+    '&$wrapperLight': {
+      '$menuRoot > $itemActive > $itemContent': {
+        backgroundColor: _theme.default.menuItemBackgroundColor
+      }
+    }
+  },
+  wrapperInTransition: {
+    '& $titleContent, & $header': {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    },
+    '& $expand': {
+      opacity: 0
+    }
+  },
+  popover: {
+    '&&': {
+      border: 'none',
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+      borderRadius: '4px',
+      backgroundColor: _theme.default.menuItemBackgroundColor
+    },
+    '&[data-soui-theme=dark]': {
+      backgroundColor: _theme.default.menuDarkItemBackgroundColor
+    },
+    '& $children': {
+      borderRadius: '4px',
+      padding: "".concat(_theme.default.menuPopoverPaddingY, " 0")
+      // '& > :first-child > $itemContent': {
+      //   borderTopRightRadius: '4px',
+      //   borderTopLeftRadius: '4px',
+      // },
+      // '& > :last-child > $itemContent': {
+      //   borderBottomRightRadius: '4px',
+      //   borderBottomLeftRadius: '4px',
+      // },
+    }
+  },
+  popArrow: {
+    '&&&': {
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+      width: '6px',
+      height: '6px'
+    }
+  },
+  popArrowDark: {
+    '&&&': {
+      backgroundColor: _theme.default.menuDarkItemBackgroundColor,
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
     }
   },
   scrollbox: {
@@ -46,12 +98,6 @@ var menuStyle = {
     },
     '$wrapperHorizontal &': {
       overflow: 'hidden'
-    },
-    '$wrapperHasOpen$wrapperVertical &': {
-      width: '100vw'
-    },
-    '$wrapperHasOpen$wrapperHorizontal &': {
-      height: '100vh'
     }
   },
   root: {
@@ -67,166 +113,27 @@ var menuStyle = {
   },
   wrapperInline: {},
   wrapperVertical: {
-    position: 'relative',
-    zIndex: menuIndex
+    position: 'relative'
   },
   wrapperHorizontal: {
-    height: '42px',
-    position: 'relative',
-    zIndex: menuIndex
+    position: 'relative'
   },
   wrapperHasOpen: {},
   children: {
     padding: '0',
+    margin: '0',
     display: 'none',
     minWidth: '100%',
     whiteSpace: 'nowrap',
-    '$itemOpen > &': {
+    '$itemOpen > &, $childrenShow&': {
       display: 'block'
-    },
-    '$wrapper:not($wrapperInline) &': {
-      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
-    },
-    '$wrapperHorizontal &': {
-      position: 'absolute',
-      bottom: '-2px',
-      left: 0,
-      transform: 'translateY(100%)'
-    },
-    '$wrapperHorizontal & &': {
-      position: 'absolute',
-      left: 'auto',
-      bottom: 'auto',
-      top: 0,
-      right: '-2px',
-      transform: 'translateX(100%)'
-    },
-    '$wrapperVertical &': {
-      position: 'absolute',
-      top: 0,
-      '&[dir=ltr]': {
-        right: '-6px',
-        transform: 'translateX(100%)'
-      },
-      '&[dir=rtl]': {
-        left: '-6px',
-        transform: 'translateX(-100%)'
-      },
-      minWidth: 'auto',
-      borderRadius: '4px',
-      '& > :first-child > $itemContent': {
-        borderTopRightRadius: '4px',
-        borderTopLeftRadius: '4px'
-      },
-      '& > :last-child > $itemContent': {
-        borderBottomRightRadius: '4px',
-        borderBottomLeftRadius: '4px'
-      },
-      '&$childrenUp': {
-        top: 'auto',
-        bottom: 0
-      },
-      '&$childrenUp::before': _objectSpread(_objectSpread({
-        top: 'auto',
-        bottom: '20%'
-      }, arrow), {}, {
-        '$wrapperDark&': {
-          borderRightColor: _theme.default.menuDarkItemBackgroundColor
-        }
-      }),
-      '&::before': _objectSpread(_objectSpread({
-        top: '20%'
-      }, arrow), {}, {
-        '$wrapperDark&': {
-          borderRightColor: _theme.default.menuDarkItemBackgroundColor
-        }
-      })
     }
   },
+  childrenShow: {},
   childrenUp: {},
   item: {
     listStyle: 'none',
-    flexShrink: 0,
-    position: 'relative',
-    '$wrapperVertical &, $wrapperHorizontal &': {
-      position: 'relative'
-    }
-  },
-  collapseItem: {
-    // width: 40,
-    cursor: 'pointer',
-    opacity: 1,
-    height: _theme.default.menuCollapseWidth,
-    transition: 'all ease .3s',
-    color: 'inherit',
-    position: 'relative',
-    '$wrapperLight &': {
-      background: _theme.default.menuItemBackgroundColor,
-      '&:hover': {
-        background: _theme.default.menuItemHoverBackgroundColor,
-        color: _theme.default.menuItemHoverFontColor
-      }
-    },
-    '$wrapperLight $itemDisabled > &&': {
-      cursor: 'not-allowed',
-      color: _theme.default.menuCollapseItemDisabledFontColor,
-      background: _theme.default.menuCollapseItemDisabledBackgroundColor
-    },
-    '$wrapperDark $itemDisabled > &&': {
-      cursor: 'not-allowed',
-      color: _theme.default.menuDarkCollapseItemDisabledFontColor,
-      background: _theme.default.menuDarkCollapseItemDisabledBackgroundColor
-    },
-    '$wrapperDark &': {
-      color: _theme.default.menuDarkCollapseItemFontColor,
-      background: _theme.default.menuDarkCollapseItemBackgroundColor,
-      '&:hover': {
-        background: _theme.default.menuDarkCollapseItemHoverBackgroundColor,
-        color: _theme.default.menuDarkCollapseItemHoverFontColor
-      }
-    },
-    '$itemActive > &&': {
-      '$wrapperLight &': {
-        color: _theme.default.menuCollapseItemActiveFontColor,
-        background: _theme.default.menuCollapseItemActiveBackgroundColor
-      },
-      '$wrapperDark &': {
-        color: _theme.default.menuDarkCollapseItemActiveFontColor,
-        background: _theme.default.menuDarkCollapseItemActiveBackgroundColor
-      }
-    },
-    '&$collapseItemInPath': {
-      // background: token.menuItemBackgroundColor,
-      '&::after': {
-        content: '""',
-        position: 'absolute',
-        left: 0,
-        top: 0,
-        bottom: 0,
-        width: 3,
-        transition: 'all ease 0.3s',
-        backgroundColor: _theme.default.menuCollapseItemActiveFontColor
-      }
-    }
-  },
-  collapseItemInPath: {},
-  collapseItemHide: {
-    opacity: 0,
-    width: 0,
-    // height: 0,
-    // zIndex: -1,
-    position: 'absolute',
-    top: 0,
-    color: 'transparent',
-    background: 'transparent',
-    '&$collapseItemInPath': {
-      // background: token.menuItemBackgroundColor,
-      '&::after': {
-        top: 20,
-        bottom: 20,
-        backgroundColor: 'transparent'
-      }
-    }
+    flexShrink: 0
   },
   itemActive: {},
   itemDisabled: {},
@@ -240,9 +147,7 @@ var menuStyle = {
     alignItems: 'center',
     cursor: 'pointer',
     position: 'relative',
-    // opacity: 1,
-    transition: 'all ease 0.3s',
-    '$wrapperLight &': {
+    '[data-soui-theme=light] &': {
       color: _theme.default.menuItemFontColor,
       backgroundColor: _theme.default.menuItemBackgroundColor,
       '&:hover': {
@@ -250,7 +155,7 @@ var menuStyle = {
         backgroundColor: _theme.default.menuItemHoverBackgroundColor
       }
     },
-    '$wrapperDark &': {
+    '[data-soui-theme=dark] &': {
       color: _theme.default.menuDarkFontColor,
       backgroundColor: _theme.default.menuDarkItemBackgroundColor,
       '&:hover': {
@@ -258,7 +163,7 @@ var menuStyle = {
         backgroundColor: _theme.default.menuDarkItemHoverBackgroundColor
       }
     },
-    '$wrapperDark $itemOpen > &': {
+    '[data-soui-theme=dark] $itemOpen > &': {
       color: _theme.default.menuDarkItemOpenFontColor,
       backgroundColor: _theme.default.menuDarkItemOpenBackgroundColor,
       '& $icon': {
@@ -266,13 +171,13 @@ var menuStyle = {
       }
     },
     '$itemInPath > &&': {
-      '$wrapperLight &': {
+      '[data-soui-theme=light] &': {
         color: _theme.default.menuItemActiveFontColor,
         '& $icon': {
           color: _theme.default.menuItemActiveFontColor
         }
       },
-      '$wrapperDark$wrapperInline &::before, $wrapperDark$wrapperVertical &::before': {
+      '[data-soui-theme=dark][data-soui-mode=inline] &::before, [data-soui-theme=dark][data-soui-mode=vertical] &::before': {
         content: '""',
         position: 'absolute',
         left: 0,
@@ -280,50 +185,73 @@ var menuStyle = {
         bottom: 0,
         width: '3px',
         backgroundColor: _theme.default.menuDarkItemActiveBackgroundColor
-      },
-      '$wrapperLight$wrapperVertical &': {
-        '&::before': {
-          display: 'block',
-          content: '""',
-          position: 'absolute',
-          right: 0,
-          top: 0,
-          bottom: 0,
-          width: '4px',
-          borderTopLeftRadius: '4px',
-          borderBottomLeftRadius: '4px',
-          backgroundColor: _theme.default.menuItemActiveFontColor
-        }
       }
+      // '[data-soui-theme=light][data-soui-mode=vertical]:not($wrapperCollpase) &': {
+      //   '&::before': {
+      //     display: 'block',
+      //     content: '""',
+      //     position: 'absolute',
+      //     right: 0,
+      //     top: 0,
+      //     bottom: 0,
+      //     width: '4px',
+      //     borderTopLeftRadius: '4px',
+      //     borderBottomLeftRadius: '4px',
+      //     backgroundColor: token.menuItemActiveFontColor,
+      //   },
+      // },
     },
     '$itemActive > &&': {
-      '$wrapperLight &': {
+      '[data-soui-theme=light] &': {
         color: _theme.default.menuItemActiveFontColor,
         backgroundColor: _theme.default.menuItemActiveBackgroundColor,
         '& $icon': {
           color: _theme.default.menuItemActiveFontColor
         }
       },
-      '$wrapperDark &': {
+      '$wrapperCollpase[data-soui-theme=light] $root > &': {
+        color: _theme.default.menuItemActiveFontColor,
+        backgroundColor: _theme.default.menuItemBackgroundColor,
+        '& $icon': {
+          color: _theme.default.menuItemActiveFontColor
+        }
+      },
+      '[data-soui-theme=dark]:not($wrapperCollpase) &': {
         color: _theme.default.menuDarkItemActiveFontColor,
         backgroundColor: _theme.default.menuDarkItemActiveBackgroundColor,
         '& $icon': {
           color: _theme.default.menuDarkItemActiveFontColor
         }
       },
-      '$wrapperLight$wrapperInline &,  $wrapperLight$wrapperHorizontal &': {
+      '[data-soui-theme=dark]$wrapperCollpase &': {
         '&::before': {
           content: '""',
           position: 'absolute',
-          display: 'block',
+          left: 0,
           top: 0,
-          right: 0,
+          bottom: 0,
           width: '3px',
-          height: '100%',
-          backgroundColor: _theme.default.menuItemActiveFontColor
+          backgroundColor: _theme.default.menuDarkItemActiveBackgroundColor
         }
       },
-      '$wrapperLight$wrapperHorizontal $root > &::before': {
+      // '[data-soui-theme=light][data-soui-mode=inline] &,  [data-soui-theme=light][data-soui-mode=horizontal] &':
+      //   {
+      //     '&::before': {
+      //       content: '""',
+      //       position: 'absolute',
+      //       display: 'block!important',
+      //       top: 0,
+      //       right: 0,
+      //       width: '3px',
+      //       height: '100%',
+      //       backgroundColor: token.menuItemActiveFontColor,
+      //     },
+      //   },
+      '[data-soui-theme=light][data-soui-mode=horizontal] $root > &::before': {
+        content: '""',
+        position: 'absolute',
+        display: 'block!important',
+        backgroundColor: _theme.default.menuItemActiveFontColor,
         width: '100%',
         height: '2px',
         top: 'auto',
@@ -332,7 +260,7 @@ var menuStyle = {
         right: 'auto'
       }
     },
-    '$wrapperLight $itemDisabled > &&': {
+    '[data-soui-theme=light] $itemDisabled > &&': {
       cursor: 'not-allowed',
       color: _theme.default.menuItemDisabledFontColor,
       backgroundColor: _theme.default.menuItemDisabledBackgroundColor,
@@ -340,7 +268,7 @@ var menuStyle = {
         color: _theme.default.menuItemDisabledFontColor
       }
     },
-    '$wrapperDark $itemDisabled > &&': {
+    '[data-soui-theme=dark] $itemDisabled > &&': {
       cursor: 'not-allowed',
       color: _theme.default.menuDarkItemDisabledFontColor,
       backgroundColor: _theme.default.menuDarkItemDisabledBackgroundColor,
@@ -349,23 +277,32 @@ var menuStyle = {
       }
     }
   },
-  itemContentHide: {
-    position: 'absolute',
-    overflow: 'hidden',
-    pointerEvents: 'none',
-    // opacity: 0,
-    visibility: 'hidden',
-    '& $title': {
-      pointerEvents: 'none',
-      whiteSpace: 'nowrap'
+  itemContentFront: {},
+  itemContentBack: {},
+  header: {
+    padding: "".concat(_theme.default.menuTitlePaddingY, " ").concat(_theme.default.menuTitlePaddingX),
+    width: '100%',
+    transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
+    color: _theme.default.menuFontColor,
+    '$wrapperDark &': {
+      color: _theme.default.menuDarkFontColor
     },
-    '& $menuIcon': {
-      opacity: 0
+    '$wrapperCollpase &': {
+      paddingLeft: '0',
+      paddingRight: '0',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    '& + div': {
+      borderTop: "1px solid ".concat(_theme.default.menuHeaderBorderColor),
+      '$wrapperDark &': {
+        borderTop: "1px solid ".concat(_theme.default.menuDarkHeaderBorderColor)
+      }
     }
   },
-  itemContentFront: {},
-  itemContentBack: {},
   title: {
+    cursor: 'inherit',
     '&:hover': {
       color: 'inherit'
     },
@@ -377,13 +314,13 @@ var menuStyle = {
     minWidth: 0,
     padding: "".concat(_theme.default.menuTitlePaddingY, " ").concat(_theme.default.menuTitlePaddingX),
     '$wrapperInline $childrenHasExpand  $item:not($itemHasChildren)  $itemContentBack > &': {
-      paddingRight: _theme.default.menuExpandWidth
+      paddingRight: "calc(".concat(_theme.default.menuIconMarginX, " + ").concat(_theme.default.menuTitlePaddingX, " + ").concat(_theme.default.menuExpandSize, ")")
     },
     '$wrapperInline $itemHasChildren > $itemContentBack > &': {
       paddingRight: 0
     },
     '$childrenHasExpand > $item:not($itemHasChildren) > $itemContentBack > &': {
-      paddingRight: _theme.default.menuExpandWidth
+      paddingRight: "calc(".concat(_theme.default.menuIconMarginX, " + ").concat(_theme.default.menuTitlePaddingX, " + ").concat(_theme.default.menuExpandSize, ")")
     },
     '$childrenHasExpand $itemHasChildren > $itemContentBack > &': {
       paddingRight: 0
@@ -392,35 +329,44 @@ var menuStyle = {
       paddingLeft: 0
     }
   },
+  titleIcon: {
+    '& + $titleContent': {
+      paddingLeft: _theme.default.menuIconMarginX
+    },
+    lineHeight: 1,
+    display: 'inline-flex'
+  },
+  titleContent: {
+    whiteSpace: 'pre-wrap',
+    transition: "opacity ".concat(animationDuration, " ").concat(transitionFunc),
+    opacity: 1
+  },
   expand: {
     alignSelf: 'stretch',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    '$wrapperLight &': {
+    '[data-soui-theme=light] &': {
       color: _theme.default.menuIconColor
     },
     '& > $icon': {
       lineHeight: 1,
-      opacity: 1,
       width: _theme.default.menuExpandSize,
       height: _theme.default.menuExpandSize,
       '$wrapper:not($wrapperVertical) $itemOpen > $itemContent &': {
         transform: 'rotate(180deg)'
       }
-    },
-    '$wrapperVertical &': {
-      '&[dir=ltr]': {
-        transform: 'rotate(-90deg)'
-      },
-      '&[dir=rtl]': {
-        transform: 'rotate(90deg)'
-      }
     }
   },
-  icon: {
-    transition: 'all ease 0.3s'
+  expandVertical: {
+    '&[dir=ltr] svg': {
+      transform: 'rotate(-90deg)'
+    },
+    '&[dir=rtl] svg': {
+      transform: 'rotate(90deg)'
+    }
   },
+  icon: {},
   expandHover: {
     '&:hover': {
       backgroundColor: _theme.default.menuExpandHoverBackgroundColor
@@ -433,13 +379,14 @@ var menuStyle = {
     width: 'auto',
     visibility: 'hidden',
     paddingLeft: _theme.default.menuTitlePaddingX,
-    paddingRight: '8px',
+    paddingRight: _theme.default.menuIconMarginX,
     '$itemHasChildren > $itemContent &': {
       visibility: 'visible'
     }
   },
   expandBack: {
-    width: _theme.default.menuExpandWidth
+    paddingRight: _theme.default.menuTitlePaddingX,
+    paddingLeft: _theme.default.menuIconMarginX
   },
   scrollbar: {
     position: 'absolute',

package/cjs/menu/search.d.ts

@@ -0,0 +1,6 @@
+import { MenuSearchClasses } from '@sheinx/base';
+import { JsStyles } from '../jss-style';
+export type MenuSearchClassType = keyof MenuSearchClasses;
+declare const menuSearchStyle: JsStyles<MenuSearchClassType>;
+export default menuSearchStyle;
+//# sourceMappingURL=search.d.ts.map

package/cjs/menu/search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["search.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,MAAM,MAAM,mBAAmB,GAAG,MAAM,iBAAiB,CAAC;AAE1D,QAAA,MAAM,eAAe,EAAE,QAAQ,CAAC,mBAAmB,CA6FlD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/cjs/menu/search.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _theme = _interopRequireWildcard(require("@sheinx/theme"));
+var _wrapperDark;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var menuSearchStyle = {
+  wrapper: _defineProperty({}, (0, _theme.getTokenName)('inputBorderRadius'), _theme.default.menuSearchBorderRadius),
+  wrapperDark: (_wrapperDark = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_wrapperDark, (0, _theme.getTokenName)('inputClearColor'), _theme.default.menuSearchDarkClearColor), (0, _theme.getTokenName)('inputHoverClearColor'), _theme.default.menuSearchDarkHoverClearColor), (0, _theme.getTokenName)('inputBorderColor'), _theme.default.menuSearchDarkBackgroundColor), (0, _theme.getTokenName)('inputBackgroundColor'), _theme.default.menuSearchDarkBackgroundColor), (0, _theme.getTokenName)('inputFontColor'), _theme.default.menuSearchDarkFontColor), (0, _theme.getTokenName)('inputPlaceholderFontColor'), _theme.default.menuSearchDarkPlaceholderFontColor), (0, _theme.getTokenName)('inputHoverBorderColor'), _theme.default.menuSearchDarkHoverBorderColor), (0, _theme.getTokenName)('inputHoverBackgroundColor'), _theme.default.menuSearchDarkHoverBackgroundColor), (0, _theme.getTokenName)('inputFocusBorderColor'), _theme.default.menuSearchDarkFocusBorderColor), (0, _theme.getTokenName)('inputFocusBackgroundColor'), _theme.default.menuSearchDarkFocusBackgroundColor), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_wrapperDark, (0, _theme.getTokenName)('inputFocusShadow'), _theme.default.menuSearchDarkFocusShadow), (0, _theme.getTokenName)('inputDisabledBorderColor'), _theme.default.menuSearchDarkBackgroundColor), (0, _theme.getTokenName)('inputDisabledBackgroundColor'), _theme.default.menuSearchDarkBackgroundColor), (0, _theme.getTokenName)('inputDisabledFontColor'), _theme.default.menuSearchDarkFontColor), (0, _theme.getTokenName)('inputDisabledPlaceholderFontColor'), _theme.default.menuSearchDarkPlaceholderFontColor)),
+  wrapperLight: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, (0, _theme.getTokenName)('inputBorderColor'), _theme.default.menuSearchBackgroundColor), (0, _theme.getTokenName)('inputBackgroundColor'), _theme.default.menuSearchBackgroundColor), (0, _theme.getTokenName)('inputHoverBorderColor'), _theme.default.menuSearchHoverBorderColor), (0, _theme.getTokenName)('inputHoverBackgroundColor'), _theme.default.menuSearchHoverBackgroundColor), (0, _theme.getTokenName)('inputDisabledBorderColor'), _theme.default.menuSearchDisabledBackgroundColor), (0, _theme.getTokenName)('inputDisabledBackgroundColor'), _theme.default.menuSearchDisabledBackgroundColor), (0, _theme.getTokenName)('inputClearColor'), _theme.default.menuSearchClearColor), (0, _theme.getTokenName)('inputHoverClearColor'), _theme.default.menuSearchHoverClearColor),
+  wrapperCollapsed: {
+    borderRadius: '50%',
+    padding: _theme.default.menuSearchPaddingX,
+    cursor: 'pointer',
+    lineHeight: 1,
+    '$wrapperLight&': {
+      background: _theme.default.menuSearchBackgroundColor,
+      border: "1px solid ".concat(_theme.default.menuSearchBackgroundColor),
+      '&:hover': {
+        background: _theme.default.menuSearchHoverBackgroundColor,
+        borderColor: _theme.default.menuSearchHoverBorderColor
+      },
+      '$wrapperDisabled&': {
+        background: _theme.default.menuSearchDisabledBackgroundColor,
+        borderColor: _theme.default.menuSearchDisabledBackgroundColor
+      }
+    },
+    '$wrapperDark&': {
+      background: _theme.default.menuSearchDarkBackgroundColor,
+      border: "1px solid ".concat(_theme.default.menuSearchDarkBackgroundColor),
+      '&:hover': {
+        background: _theme.default.menuSearchDarkHoverBackgroundColor,
+        borderColor: _theme.default.menuSearchDarkHoverBorderColor
+      },
+      '$wrapperDisabled&': {
+        background: _theme.default.menuSearchDarkBackgroundColor,
+        borderColor: _theme.default.menuSearchDarkBackgroundColor,
+        '&$search': {
+          color: _theme.default.menuSearchDarkIconColor
+        }
+      }
+    }
+  },
+  wrapperDisabled: {
+    cursor: 'not-allowed',
+    '&$wrapperDark': {
+      opacity: 0.3
+    }
+  },
+  input: {
+    width: '100%'
+  },
+  search: {
+    width: _theme.default.menuSearchIconSize,
+    height: _theme.default.menuSearchIconSize,
+    cursor: 'pointer',
+    display: 'flex',
+    justifyContent: 'center',
+    marginRight: _theme.default.menuSearchIconMarginX,
+    color: _theme.default.menuSearchIconColor,
+    '$wrapperDisabled &': {
+      color: _theme.default.inputDisabledFontColor,
+      cursor: 'not-allowed'
+    },
+    '$wrapperDark &': {
+      color: _theme.default.menuSearchDarkIconColor
+    },
+    '$wrapperCollapsed &': {
+      marginRight: 0
+    }
+  }
+};
+var _default = exports.default = menuSearchStyle;