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

package/esm/menu/menu.js

@@ -1,35 +1,87 @@
-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); }
 import token from '@sheinx/theme';
-var menuIndex = 1000;
-var arrow = {
-  content: '""',
-  position: 'absolute',
-  left: 0,
-  transform: 'translateY(-50%)',
-  border: '6px solid transparent',
-  borderRightColor: token.menuItemBackgroundColor,
-  marginLeft: '-10px'
-};
+var animationDuration = '.25s';
+var collpaseWidth = token.menuCollpaseWidth;
+var transitionFunc = 'ease-out';
 var menuStyle = {
   wrapper: {
     height: '100%',
-    transition: 'width 0.3s',
-    backgroundColor: token.menuItemBackgroundColor
+    width: '100%',
+    backgroundColor: token.menuItemBackgroundColor,
+    transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
+    color: token.menuFontColor
   },
   wrapperLight: {},
   wrapperDark: {
     backgroundColor: token.menuDarkItemBackgroundColor
   },
-  collapse: {
-    width: token.menuCollapseWidth,
-    boxSizing: 'content-box',
-    '& $root': {
-      width: token.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: token.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: token.menuItemBackgroundColor
+    },
+    '&[data-soui-theme=dark]': {
+      backgroundColor: token.menuDarkItemBackgroundColor
+    },
+    '& $children': {
+      borderRadius: '4px',
+      padding: "".concat(token.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: token.menuDarkItemBackgroundColor,
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
     }
   },
   scrollbox: {
@@ -39,12 +91,6 @@ var menuStyle = {
     },
     '$wrapperHorizontal &': {
       overflow: 'hidden'
-    },
-    '$wrapperHasOpen$wrapperVertical &': {
-      width: '100vw'
-    },
-    '$wrapperHasOpen$wrapperHorizontal &': {
-      height: '100vh'
     }
   },
   root: {
@@ -60,166 +106,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: token.menuDarkItemBackgroundColor
-        }
-      }),
-      '&::before': _objectSpread(_objectSpread({
-        top: '20%'
-      }, arrow), {}, {
-        '$wrapperDark&': {
-          borderRightColor: token.menuDarkItemBackgroundColor
-        }
-      })
     }
   },
+  childrenShow: {},
   childrenUp: {},
   item: {
     listStyle: 'none',
-    flexShrink: 0,
-    position: 'relative',
-    '$wrapperVertical &, $wrapperHorizontal &': {
-      position: 'relative'
-    }
-  },
-  collapseItem: {
-    // width: 40,
-    cursor: 'pointer',
-    opacity: 1,
-    height: token.menuCollapseWidth,
-    transition: 'all ease .3s',
-    color: 'inherit',
-    position: 'relative',
-    '$wrapperLight &': {
-      background: token.menuItemBackgroundColor,
-      '&:hover': {
-        background: token.menuItemHoverBackgroundColor,
-        color: token.menuItemHoverFontColor
-      }
-    },
-    '$wrapperLight $itemDisabled > &&': {
-      cursor: 'not-allowed',
-      color: token.menuCollapseItemDisabledFontColor,
-      background: token.menuCollapseItemDisabledBackgroundColor
-    },
-    '$wrapperDark $itemDisabled > &&': {
-      cursor: 'not-allowed',
-      color: token.menuDarkCollapseItemDisabledFontColor,
-      background: token.menuDarkCollapseItemDisabledBackgroundColor
-    },
-    '$wrapperDark &': {
-      color: token.menuDarkCollapseItemFontColor,
-      background: token.menuDarkCollapseItemBackgroundColor,
-      '&:hover': {
-        background: token.menuDarkCollapseItemHoverBackgroundColor,
-        color: token.menuDarkCollapseItemHoverFontColor
-      }
-    },
-    '$itemActive > &&': {
-      '$wrapperLight &': {
-        color: token.menuCollapseItemActiveFontColor,
-        background: token.menuCollapseItemActiveBackgroundColor
-      },
-      '$wrapperDark &': {
-        color: token.menuDarkCollapseItemActiveFontColor,
-        background: token.menuDarkCollapseItemActiveBackgroundColor
-      }
-    },
-    '&$collapseItemInPath': {
-      // background: token.menuItemBackgroundColor,
-      '&::after': {
-        content: '""',
-        position: 'absolute',
-        left: 0,
-        top: 0,
-        bottom: 0,
-        width: 3,
-        transition: 'all ease 0.3s',
-        backgroundColor: token.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: {},
@@ -233,9 +140,7 @@ var menuStyle = {
     alignItems: 'center',
     cursor: 'pointer',
     position: 'relative',
-    // opacity: 1,
-    transition: 'all ease 0.3s',
-    '$wrapperLight &': {
+    '[data-soui-theme=light] &': {
       color: token.menuItemFontColor,
       backgroundColor: token.menuItemBackgroundColor,
       '&:hover': {
@@ -243,7 +148,7 @@ var menuStyle = {
         backgroundColor: token.menuItemHoverBackgroundColor
       }
     },
-    '$wrapperDark &': {
+    '[data-soui-theme=dark] &': {
       color: token.menuDarkFontColor,
       backgroundColor: token.menuDarkItemBackgroundColor,
       '&:hover': {
@@ -251,7 +156,7 @@ var menuStyle = {
         backgroundColor: token.menuDarkItemHoverBackgroundColor
       }
     },
-    '$wrapperDark $itemOpen > &': {
+    '[data-soui-theme=dark] $itemOpen > &': {
       color: token.menuDarkItemOpenFontColor,
       backgroundColor: token.menuDarkItemOpenBackgroundColor,
       '& $icon': {
@@ -259,13 +164,13 @@ var menuStyle = {
       }
     },
     '$itemInPath > &&': {
-      '$wrapperLight &': {
+      '[data-soui-theme=light] &': {
         color: token.menuItemActiveFontColor,
         '& $icon': {
           color: token.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,
@@ -273,50 +178,73 @@ var menuStyle = {
         bottom: 0,
         width: '3px',
         backgroundColor: token.menuDarkItemActiveBackgroundColor
-      },
-      '$wrapperLight$wrapperVertical &': {
-        '&::before': {
-          display: 'block',
-          content: '""',
-          position: 'absolute',
-          right: 0,
-          top: 0,
-          bottom: 0,
-          width: '4px',
-          borderTopLeftRadius: '4px',
-          borderBottomLeftRadius: '4px',
-          backgroundColor: token.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: token.menuItemActiveFontColor,
         backgroundColor: token.menuItemActiveBackgroundColor,
         '& $icon': {
           color: token.menuItemActiveFontColor
         }
       },
-      '$wrapperDark &': {
+      '$wrapperCollpase[data-soui-theme=light] $root > &': {
+        color: token.menuItemActiveFontColor,
+        backgroundColor: token.menuItemBackgroundColor,
+        '& $icon': {
+          color: token.menuItemActiveFontColor
+        }
+      },
+      '[data-soui-theme=dark]:not($wrapperCollpase) &': {
         color: token.menuDarkItemActiveFontColor,
         backgroundColor: token.menuDarkItemActiveBackgroundColor,
         '& $icon': {
           color: token.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: token.menuItemActiveFontColor
+          backgroundColor: token.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: token.menuItemActiveFontColor,
         width: '100%',
         height: '2px',
         top: 'auto',
@@ -325,7 +253,7 @@ var menuStyle = {
         right: 'auto'
       }
     },
-    '$wrapperLight $itemDisabled > &&': {
+    '[data-soui-theme=light] $itemDisabled > &&': {
       cursor: 'not-allowed',
       color: token.menuItemDisabledFontColor,
       backgroundColor: token.menuItemDisabledBackgroundColor,
@@ -333,7 +261,7 @@ var menuStyle = {
         color: token.menuItemDisabledFontColor
       }
     },
-    '$wrapperDark $itemDisabled > &&': {
+    '[data-soui-theme=dark] $itemDisabled > &&': {
       cursor: 'not-allowed',
       color: token.menuDarkItemDisabledFontColor,
       backgroundColor: token.menuDarkItemDisabledBackgroundColor,
@@ -342,23 +270,32 @@ var menuStyle = {
       }
     }
   },
-  itemContentHide: {
-    position: 'absolute',
-    overflow: 'hidden',
-    pointerEvents: 'none',
-    // opacity: 0,
-    visibility: 'hidden',
-    '& $title': {
-      pointerEvents: 'none',
-      whiteSpace: 'nowrap'
+  itemContentFront: {},
+  itemContentBack: {},
+  header: {
+    padding: "".concat(token.menuTitlePaddingY, " ").concat(token.menuTitlePaddingX),
+    width: '100%',
+    transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
+    color: token.menuFontColor,
+    '$wrapperDark &': {
+      color: token.menuDarkFontColor
     },
-    '& $menuIcon': {
-      opacity: 0
+    '$wrapperCollpase &': {
+      paddingLeft: '0',
+      paddingRight: '0',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    '& + div': {
+      borderTop: "1px solid ".concat(token.menuHeaderBorderColor),
+      '$wrapperDark &': {
+        borderTop: "1px solid ".concat(token.menuDarkHeaderBorderColor)
+      }
     }
   },
-  itemContentFront: {},
-  itemContentBack: {},
   title: {
+    cursor: 'inherit',
     '&:hover': {
       color: 'inherit'
     },
@@ -370,13 +307,13 @@ var menuStyle = {
     minWidth: 0,
     padding: "".concat(token.menuTitlePaddingY, " ").concat(token.menuTitlePaddingX),
     '$wrapperInline $childrenHasExpand  $item:not($itemHasChildren)  $itemContentBack > &': {
-      paddingRight: token.menuExpandWidth
+      paddingRight: "calc(".concat(token.menuIconMarginX, " + ").concat(token.menuTitlePaddingX, " + ").concat(token.menuExpandSize, ")")
     },
     '$wrapperInline $itemHasChildren > $itemContentBack > &': {
       paddingRight: 0
     },
     '$childrenHasExpand > $item:not($itemHasChildren) > $itemContentBack > &': {
-      paddingRight: token.menuExpandWidth
+      paddingRight: "calc(".concat(token.menuIconMarginX, " + ").concat(token.menuTitlePaddingX, " + ").concat(token.menuExpandSize, ")")
     },
     '$childrenHasExpand $itemHasChildren > $itemContentBack > &': {
       paddingRight: 0
@@ -385,35 +322,44 @@ var menuStyle = {
       paddingLeft: 0
     }
   },
+  titleIcon: {
+    '& + $titleContent': {
+      paddingLeft: token.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: token.menuIconColor
     },
     '& > $icon': {
       lineHeight: 1,
-      opacity: 1,
       width: token.menuExpandSize,
       height: token.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: token.menuExpandHoverBackgroundColor
@@ -426,13 +372,14 @@ var menuStyle = {
     width: 'auto',
     visibility: 'hidden',
     paddingLeft: token.menuTitlePaddingX,
-    paddingRight: '8px',
+    paddingRight: token.menuIconMarginX,
     '$itemHasChildren > $itemContent &': {
       visibility: 'visible'
     }
   },
   expandBack: {
-    width: token.menuExpandWidth
+    paddingRight: token.menuTitlePaddingX,
+    paddingLeft: token.menuIconMarginX
   },
   scrollbar: {
     position: 'absolute',

package/esm/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/esm/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/esm/menu/search.js

@@ -0,0 +1,73 @@
+var _wrapperDark;
+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); }
+import token, { getTokenName } from '@sheinx/theme';
+var menuSearchStyle = {
+  wrapper: _defineProperty({}, getTokenName('inputBorderRadius'), token.menuSearchBorderRadius),
+  wrapperDark: (_wrapperDark = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_wrapperDark, getTokenName('inputClearColor'), token.menuSearchDarkClearColor), getTokenName('inputHoverClearColor'), token.menuSearchDarkHoverClearColor), getTokenName('inputBorderColor'), token.menuSearchDarkBackgroundColor), getTokenName('inputBackgroundColor'), token.menuSearchDarkBackgroundColor), getTokenName('inputFontColor'), token.menuSearchDarkFontColor), getTokenName('inputPlaceholderFontColor'), token.menuSearchDarkPlaceholderFontColor), getTokenName('inputHoverBorderColor'), token.menuSearchDarkHoverBorderColor), getTokenName('inputHoverBackgroundColor'), token.menuSearchDarkHoverBackgroundColor), getTokenName('inputFocusBorderColor'), token.menuSearchDarkFocusBorderColor), getTokenName('inputFocusBackgroundColor'), token.menuSearchDarkFocusBackgroundColor), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_wrapperDark, getTokenName('inputFocusShadow'), token.menuSearchDarkFocusShadow), getTokenName('inputDisabledBorderColor'), token.menuSearchDarkBackgroundColor), getTokenName('inputDisabledBackgroundColor'), token.menuSearchDarkBackgroundColor), getTokenName('inputDisabledFontColor'), token.menuSearchDarkFontColor), getTokenName('inputDisabledPlaceholderFontColor'), token.menuSearchDarkPlaceholderFontColor)),
+  wrapperLight: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, getTokenName('inputBorderColor'), token.menuSearchBackgroundColor), getTokenName('inputBackgroundColor'), token.menuSearchBackgroundColor), getTokenName('inputHoverBorderColor'), token.menuSearchHoverBorderColor), getTokenName('inputHoverBackgroundColor'), token.menuSearchHoverBackgroundColor), getTokenName('inputDisabledBorderColor'), token.menuSearchDisabledBackgroundColor), getTokenName('inputDisabledBackgroundColor'), token.menuSearchDisabledBackgroundColor), getTokenName('inputClearColor'), token.menuSearchClearColor), getTokenName('inputHoverClearColor'), token.menuSearchHoverClearColor),
+  wrapperCollapsed: {
+    borderRadius: '50%',
+    padding: token.menuSearchPaddingX,
+    cursor: 'pointer',
+    lineHeight: 1,
+    '$wrapperLight&': {
+      background: token.menuSearchBackgroundColor,
+      border: "1px solid ".concat(token.menuSearchBackgroundColor),
+      '&:hover': {
+        background: token.menuSearchHoverBackgroundColor,
+        borderColor: token.menuSearchHoverBorderColor
+      },
+      '$wrapperDisabled&': {
+        background: token.menuSearchDisabledBackgroundColor,
+        borderColor: token.menuSearchDisabledBackgroundColor
+      }
+    },
+    '$wrapperDark&': {
+      background: token.menuSearchDarkBackgroundColor,
+      border: "1px solid ".concat(token.menuSearchDarkBackgroundColor),
+      '&:hover': {
+        background: token.menuSearchDarkHoverBackgroundColor,
+        borderColor: token.menuSearchDarkHoverBorderColor
+      },
+      '$wrapperDisabled&': {
+        background: token.menuSearchDarkBackgroundColor,
+        borderColor: token.menuSearchDarkBackgroundColor,
+        '&$search': {
+          color: token.menuSearchDarkIconColor
+        }
+      }
+    }
+  },
+  wrapperDisabled: {
+    cursor: 'not-allowed',
+    '&$wrapperDark': {
+      opacity: 0.3
+    }
+  },
+  input: {
+    width: '100%'
+  },
+  search: {
+    width: token.menuSearchIconSize,
+    height: token.menuSearchIconSize,
+    cursor: 'pointer',
+    display: 'flex',
+    justifyContent: 'center',
+    marginRight: token.menuSearchIconMarginX,
+    color: token.menuSearchIconColor,
+    '$wrapperDisabled &': {
+      color: token.inputDisabledFontColor,
+      cursor: 'not-allowed'
+    },
+    '$wrapperDark &': {
+      color: token.menuSearchDarkIconColor
+    },
+    '$wrapperCollapsed &': {
+      marginRight: 0
+    }
+  }
+};
+export default menuSearchStyle;

package/esm/popover/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["popover.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG,MAAM,cAAc,CAAC;AAKpD,QAAA,MAAM,YAAY,EAAE,QAAQ,CAAC,gBAAgB,CAkK5C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["popover.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG,MAAM,cAAc,CAAC;AAMpD,QAAA,MAAM,YAAY,EAAE,QAAQ,CAAC,gBAAgB,CAiL5C,CAAC;AAEF,eAAe,YAAY,CAAC"}