@hi-ui/menu 4.3.1 → 5.0.0-alpha.0

package/lib/esm/button/lib/esm/styles/index.scss.js

@@ -0,0 +1,23 @@
+/** @LICENSE
+ * @hi-ui/menu
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import __styleInject__ from '@hi-ui/style-inject';
+
+/** @LICENSE
+ * @hi-ui/button
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/button#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var css_248z = ".hi-v5-button {background-color: transparent;position: relative;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-appearance: none;-moz-appearance: none;appearance: none;margin: 0;border: 1px solid transparent;font-weight: var(--hi-v5-text-weight-normal, 400);text-decoration: none;white-space: nowrap;-ms-touch-action: manipulation;touch-action: manipulation;-webkit-transition: background-color var(--hi-v5-motion-duration-normal, 200ms) var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), border-color var(--hi-v5-motion-duration-normal, 200ms) var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), color var(--hi-v5-motion-duration-normal, 200ms) var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), -webkit-box-shadow var(--hi-v5-motion-duration-fast, 150ms) var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition: background-color var(--hi-v5-motion-duration-normal, 200ms) var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), border-color var(--hi-v5-motion-duration-normal, 200ms) var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), color var(--hi-v5-motion-duration-normal, 200ms) var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), -webkit-box-shadow var(--hi-v5-motion-duration-fast, 150ms) var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition: background-color var(--hi-v5-motion-duration-normal, 200ms) var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), border-color var(--hi-v5-motion-duration-normal, 200ms) var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), box-shadow var(--hi-v5-motion-duration-fast, 150ms) var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), color var(--hi-v5-motion-duration-normal, 200ms) var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition: background-color var(--hi-v5-motion-duration-normal, 200ms) var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), border-color var(--hi-v5-motion-duration-normal, 200ms) var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), box-shadow var(--hi-v5-motion-duration-fast, 150ms) var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), color var(--hi-v5-motion-duration-normal, 200ms) var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), -webkit-box-shadow var(--hi-v5-motion-duration-fast, 150ms) var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v5-button + .hi-v5-button {-webkit-margin-start: var(--hi-v5-spacing-6, 12px);margin-inline-start: var(--hi-v5-spacing-6, 12px);}.hi-v5-button:not(.hi-v5-button--loading) {cursor: pointer;}.hi-v5-button:focus {outline: 0;z-index: 1;}.hi-v5-button--shape-square {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-button--shape-round {border-radius: var(--hi-v5-border-radius-full, 9999px);}.hi-v5-button--disabled, .hi-v5-button[disabled]:not(.hi-v5-button--loading) {cursor: not-allowed;}.hi-v5-button__icon {line-height: 1em;}.hi-v5-button--size-sm {font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-button--size-sm .hi-v5-button__icon {font-size: 14px;}.hi-v5-button--size-sm:not(.hi-v5-button--icon-only) .hi-v5-button__icon--prefix {-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-button--size-sm:not(.hi-v5-button--icon-only) .hi-v5-button__icon--suffix {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);}.hi-v5-button--size-sm.hi-v5-button--loading:not(.hi-v5-button--icon-only) .hi-v5-button__icon--prefix {-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-button--size-sm.hi-v5-button--loading:not(.hi-v5-button--icon-only) .hi-v5-button__icon--suffix {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);}.hi-v5-button--size-md {font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-button--size-md .hi-v5-button__icon {font-size: 16px;}.hi-v5-button--size-md:not(.hi-v5-button--icon-only) .hi-v5-button__icon--prefix {-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-button--size-md:not(.hi-v5-button--icon-only) .hi-v5-button__icon--suffix {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);}.hi-v5-button--size-md.hi-v5-button--loading:not(.hi-v5-button--icon-only) .hi-v5-button__icon--prefix {-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-button--size-md.hi-v5-button--loading:not(.hi-v5-button--icon-only) .hi-v5-button__icon--suffix {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);}.hi-v5-button--size-lg {font-size: var(--hi-v5-text-size-lg, 1rem);line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);}.hi-v5-button--size-lg .hi-v5-button__icon {font-size: 20px;}.hi-v5-button--size-lg:not(.hi-v5-button--icon-only) .hi-v5-button__icon--prefix {-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);}.hi-v5-button--size-lg:not(.hi-v5-button--icon-only) .hi-v5-button__icon--suffix {-webkit-margin-start: var(--hi-v5-spacing-4, 8px);margin-inline-start: var(--hi-v5-spacing-4, 8px);}.hi-v5-button--size-lg.hi-v5-button--loading:not(.hi-v5-button--icon-only) .hi-v5-button__icon--prefix {-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);}.hi-v5-button--size-lg.hi-v5-button--loading:not(.hi-v5-button--icon-only) .hi-v5-button__icon--suffix {-webkit-margin-start: var(--hi-v5-spacing-4, 8px);margin-inline-start: var(--hi-v5-spacing-4, 8px);}.hi-v5-button--size-xl {font-size: var(--hi-v5-text-size-xl, 1.125rem);line-height: var(--hi-v5-text-lineheight-xl, 1.625rem);}.hi-v5-button--size-xl .hi-v5-button__icon {font-size: 24px;}.hi-v5-button--size-xl:not(.hi-v5-button--icon-only) .hi-v5-button__icon--prefix {-webkit-margin-end: var(--hi-v5-spacing-6, 12px);margin-inline-end: var(--hi-v5-spacing-6, 12px);}.hi-v5-button--size-xl:not(.hi-v5-button--icon-only) .hi-v5-button__icon--suffix {-webkit-margin-start: var(--hi-v5-spacing-6, 12px);margin-inline-start: var(--hi-v5-spacing-6, 12px);}.hi-v5-button--size-xl.hi-v5-button--loading .hi-v5-button__icon--prefix {-webkit-margin-end: var(--hi-v5-spacing-6, 12px);margin-inline-end: var(--hi-v5-spacing-6, 12px);}.hi-v5-button--size-xl.hi-v5-button--loading .hi-v5-button__icon--suffix {-webkit-margin-start: var(--hi-v5-spacing-6, 12px);margin-inline-start: var(--hi-v5-spacing-6, 12px);}.hi-v5-button--loading {position: relative;}.hi-v5-button--loading .hi-v5-button__icon {display: inline-block;width: 1em;height: 1em;stroke: none;cursor: default;fill: currentColor;}.hi-v5-button--loading .hi-v5-button__icon svg {-webkit-animation: rotate 1s linear infinite;animation: rotate 1s linear infinite;}@-webkit-keyframes rotate {to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes rotate {to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}.hi-v5-button--appearance-filled.hi-v5-button--size-xs {height: calc(var(--hi-v5-text-lineheight-sm, 1.25rem) + 4px);font-size: var(--hi-v5-text-size-sm, 0.75rem);}.hi-v5-button--appearance-filled.hi-v5-button--size-xs:not(.hi-v5-button--icon-only) {min-width: var(--hi-v5-height-12, 48px);padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-button--appearance-filled.hi-v5-button--size-xs.hi-v5-button--icon-only {width: calc(var(--hi-v5-text-lineheight-sm, 1.25rem) + 4px);}.hi-v5-button--appearance-filled.hi-v5-button--size-sm {height: calc(var(--hi-v5-text-lineheight-sm, 1.25rem) + 8px);font-size: var(--hi-v5-text-size-sm, 0.75rem);}.hi-v5-button--appearance-filled.hi-v5-button--size-sm:not(.hi-v5-button--icon-only) {min-width: var(--hi-v5-height-12, 48px);padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-button--appearance-filled.hi-v5-button--size-sm.hi-v5-button--icon-only {width: calc(var(--hi-v5-text-lineheight-sm, 1.25rem) + 8px);}.hi-v5-button--appearance-filled.hi-v5-button--size-md {height: calc(var(--hi-v5-text-lineheight-md, 1.375rem) + 10px);font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-button--appearance-filled.hi-v5-button--size-md:not(.hi-v5-button--icon-only) {min-width: var(--hi-v5-height-18, 72px);padding: 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-button--appearance-filled.hi-v5-button--size-md.hi-v5-button--icon-only {width: calc(var(--hi-v5-text-lineheight-md, 1.375rem) + 10px);}.hi-v5-button--appearance-filled.hi-v5-button--size-lg {height: calc(var(--hi-v5-text-lineheight-lg, 1.5rem) + 16px);font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-button--appearance-filled.hi-v5-button--size-lg:not(.hi-v5-button--icon-only) {min-width: var(--hi-v5-height-22, 88px);padding: 0 var(--hi-v5-spacing-8, 16px);}.hi-v5-button--appearance-filled.hi-v5-button--size-lg.hi-v5-button--icon-only {width: calc(var(--hi-v5-text-lineheight-lg, 1.5rem) + 16px);}.hi-v5-button--appearance-filled.hi-v5-button--type-primary {background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border: 1px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));color: var(--hi-v5-color-static-white, #fff);}.hi-v5-button--appearance-filled.hi-v5-button--type-primary:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {background-color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));border: 1px solid var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));color: var(--hi-v5-color-static-white, #fff);}.hi-v5-button--appearance-filled.hi-v5-button--type-primary:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {background-color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));border: 1px solid var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));color: var(--hi-v5-color-static-white, #fff);}.hi-v5-button--appearance-filled.hi-v5-button--type-primary.hi-v5-button--disabled {background-color: var(--hi-v5-color-gray-50, #f2f4f7);border: 1px solid var(--hi-v5-color-gray-50, #f2f4f7);color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-filled.hi-v5-button--type-primary.hi-v5-button--loading {background-color: var(--hi-v5-color-primary-300, var(--hi-v5-color-brandblue-300, #74a2ff));border: 1px solid var(--hi-v5-color-primary-300, var(--hi-v5-color-brandblue-300, #74a2ff));color: var(--hi-v5-color-static-white, #fff);}.hi-v5-button--appearance-filled.hi-v5-button--type-secondary {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));border: 1px solid var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-button--appearance-filled.hi-v5-button--type-secondary:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {background-color: var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));border: 1px solid var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-button--appearance-filled.hi-v5-button--type-secondary:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {background-color: var(--hi-v5-color-primary-200, var(--hi-v5-color-brandblue-200, #b1cafc));border: 1px solid var(--hi-v5-color-primary-200, var(--hi-v5-color-brandblue-200, #b1cafc));color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-button--appearance-filled.hi-v5-button--type-secondary.hi-v5-button--disabled {background-color: var(--hi-v5-color-gray-50, #f2f4f7);border: 1px solid var(--hi-v5-color-gray-50, #f2f4f7);color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-filled.hi-v5-button--type-secondary.hi-v5-button--loading {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));border: 1px solid var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-button--appearance-filled.hi-v5-button--type-default {background-color: var(--hi-v5-color-gray-50, #f2f4f7);border: 1px solid var(--hi-v5-color-gray-50, #f2f4f7);color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-button--appearance-filled.hi-v5-button--type-default:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {background-color: var(--hi-v5-color-gray-100, #edeff2);border: 1px solid var(--hi-v5-color-gray-100, #edeff2);color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-button--appearance-filled.hi-v5-button--type-default:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {background-color: var(--hi-v5-color-gray-200, #e6e8eb);border: 1px solid var(--hi-v5-color-gray-200, #e6e8eb);color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-button--appearance-filled.hi-v5-button--type-default.hi-v5-button--disabled {background-color: var(--hi-v5-color-gray-50, #f2f4f7);border: 1px solid var(--hi-v5-color-gray-50, #f2f4f7);color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-filled.hi-v5-button--type-default.hi-v5-button--loading {background-color: var(--hi-v5-color-gray-50, #f2f4f7);border: 1px solid var(--hi-v5-color-gray-50, #f2f4f7);color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-filled.hi-v5-button--type-success {background-color: var(--hi-v5-color-success-50, var(--hi-v5-color-green-50, #e4fce3));border: 1px solid var(--hi-v5-color-success-50, var(--hi-v5-color-green-50, #e4fce3));color: var(--hi-v5-color-success-500, var(--hi-v5-color-green-500, #24b237));}.hi-v5-button--appearance-filled.hi-v5-button--type-success:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {background-color: var(--hi-v5-color-success-100, var(--hi-v5-color-green-100, #daf7de));border: 1px solid var(--hi-v5-color-success-100, var(--hi-v5-color-green-100, #daf7de));color: var(--hi-v5-color-success-500, var(--hi-v5-color-green-500, #24b237));}.hi-v5-button--appearance-filled.hi-v5-button--type-success:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {background-color: var(--hi-v5-color-success-200, var(--hi-v5-color-green-200, #8de08f));border: 1px solid var(--hi-v5-color-success-200, var(--hi-v5-color-green-200, #8de08f));color: var(--hi-v5-color-success-500, var(--hi-v5-color-green-500, #24b237));}.hi-v5-button--appearance-filled.hi-v5-button--type-success.hi-v5-button--disabled {background-color: var(--hi-v5-color-gray-50, #f2f4f7);border: 1px solid var(--hi-v5-color-gray-50, #f2f4f7);color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-filled.hi-v5-button--type-success.hi-v5-button--loading {background-color: var(--hi-v5-color-success-50, var(--hi-v5-color-green-50, #e4fce3));border: 1px solid var(--hi-v5-color-success-50, var(--hi-v5-color-green-50, #e4fce3));color: var(--hi-v5-color-success-400, var(--hi-v5-color-green-400, #42c14f));}.hi-v5-button--appearance-filled.hi-v5-button--type-danger {background-color: var(--hi-v5-color-danger-50, var(--hi-v5-color-red-50, #ffede8));border: 1px solid var(--hi-v5-color-danger-50, var(--hi-v5-color-red-50, #ffede8));color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-button--appearance-filled.hi-v5-button--type-danger:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {background-color: var(--hi-v5-color-danger-100, var(--hi-v5-color-red-100, #ffe0db));border: 1px solid var(--hi-v5-color-danger-100, var(--hi-v5-color-red-100, #ffe0db));color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-button--appearance-filled.hi-v5-button--type-danger:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {background-color: var(--hi-v5-color-danger-200, var(--hi-v5-color-red-200, #ffb3aa));border: 1px solid var(--hi-v5-color-danger-200, var(--hi-v5-color-red-200, #ffb3aa));color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-button--appearance-filled.hi-v5-button--type-danger.hi-v5-button--disabled {background-color: var(--hi-v5-color-gray-50, #f2f4f7);border: 1px solid var(--hi-v5-color-gray-50, #f2f4f7);color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-filled.hi-v5-button--type-danger.hi-v5-button--loading {background-color: var(--hi-v5-color-danger-50, var(--hi-v5-color-red-50, #ffede8));border: 1px solid var(--hi-v5-color-danger-50, var(--hi-v5-color-red-50, #ffede8));color: var(--hi-v5-color-danger-300, var(--hi-v5-color-red-300, #ff938b));}.hi-v5-button--appearance-line.hi-v5-button--size-xs {height: calc(var(--hi-v5-text-lineheight-sm, 1.25rem) + 4px);font-size: var(--hi-v5-text-size-sm, 0.75rem);}.hi-v5-button--appearance-line.hi-v5-button--size-xs:not(.hi-v5-button--icon-only) {min-width: var(--hi-v5-height-12, 48px);padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-button--appearance-line.hi-v5-button--size-xs.hi-v5-button--icon-only {width: calc(var(--hi-v5-text-lineheight-sm, 1.25rem) + 4px);}.hi-v5-button--appearance-line.hi-v5-button--size-sm {height: calc(var(--hi-v5-text-lineheight-sm, 1.25rem) + 8px);font-size: var(--hi-v5-text-size-sm, 0.75rem);}.hi-v5-button--appearance-line.hi-v5-button--size-sm:not(.hi-v5-button--icon-only) {min-width: var(--hi-v5-height-12, 48px);padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-button--appearance-line.hi-v5-button--size-sm.hi-v5-button--icon-only {width: calc(var(--hi-v5-text-lineheight-sm, 1.25rem) + 8px);}.hi-v5-button--appearance-line.hi-v5-button--size-md {height: calc(var(--hi-v5-text-lineheight-md, 1.375rem) + 10px);font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-button--appearance-line.hi-v5-button--size-md:not(.hi-v5-button--icon-only) {min-width: var(--hi-v5-height-18, 72px);padding: 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-button--appearance-line.hi-v5-button--size-md.hi-v5-button--icon-only {width: calc(var(--hi-v5-text-lineheight-md, 1.375rem) + 10px);}.hi-v5-button--appearance-line.hi-v5-button--size-lg {height: calc(var(--hi-v5-text-lineheight-lg, 1.5rem) + 16px);font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-button--appearance-line.hi-v5-button--size-lg:not(.hi-v5-button--icon-only) {min-width: var(--hi-v5-height-22, 88px);padding: 0 var(--hi-v5-spacing-8, 16px);}.hi-v5-button--appearance-line.hi-v5-button--size-lg.hi-v5-button--icon-only {width: calc(var(--hi-v5-text-lineheight-lg, 1.5rem) + 16px);}.hi-v5-button--appearance-line.hi-v5-button--type-primary {background-color: var(--hi-v5-color-static-white, #fff);border: 1px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-button--appearance-line.hi-v5-button--type-primary:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));border: 1px solid var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-button--appearance-line.hi-v5-button--type-primary:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {background-color: var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));border: 1px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-button--appearance-line.hi-v5-button--type-primary.hi-v5-button--disabled {color: var(--hi-v5-color-gray-400, #babcc2);border: 1px solid var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-button--appearance-line.hi-v5-button--type-primary.hi-v5-button--loading {color: var(--hi-v5-color-primary-200, var(--hi-v5-color-brandblue-200, #b1cafc));border: 1px solid var(--hi-v5-color-primary-300, var(--hi-v5-color-brandblue-300, #74a2ff));}.hi-v5-button--appearance-line.hi-v5-button--type-secondary {background-color: var(--hi-v5-color-static-white, #fff);border: 1px solid var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-button--appearance-line.hi-v5-button--type-secondary:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));border: 1px solid var(--hi-v5-color-primary-300, var(--hi-v5-color-brandblue-300, #74a2ff));}.hi-v5-button--appearance-line.hi-v5-button--type-secondary:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {background-color: var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));border: 1px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-button--appearance-line.hi-v5-button--type-secondary.hi-v5-button--disabled {color: var(--hi-v5-color-gray-400, #babcc2);border: 1px solid var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-button--appearance-line.hi-v5-button--type-secondary.hi-v5-button--loading {color: var(--hi-v5-color-primary-200, var(--hi-v5-color-brandblue-200, #b1cafc));border: 1px solid var(--hi-v5-color-primary-200, var(--hi-v5-color-brandblue-200, #b1cafc));}.hi-v5-button--appearance-line.hi-v5-button--type-default {background-color: var(--hi-v5-color-static-white, #fff);border: 1px solid var(--hi-v5-color-gray-300, #dbdde0);color: var(--hi-v5-color-gray-700, #1a1d26);}.hi-v5-button--appearance-line.hi-v5-button--type-default:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {background-color: var(--hi-v5-color-gray-50, #f2f4f7);border: 1px solid var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-button--appearance-line.hi-v5-button--type-default:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {background-color: var(--hi-v5-color-gray-200, #e6e8eb);border: 1px solid var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-button--appearance-line.hi-v5-button--type-default.hi-v5-button--disabled {color: var(--hi-v5-color-gray-400, #babcc2);border: 1px solid var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-button--appearance-line.hi-v5-button--type-default.hi-v5-button--loading {color: var(--hi-v5-color-gray-400, #babcc2);border: 1px solid var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-button--appearance-line.hi-v5-button--type-success {background-color: var(--hi-v5-color-static-white, #fff);border: 1px solid var(--hi-v5-color-success-500, var(--hi-v5-color-green-500, #24b237));color: var(--hi-v5-color-success-500, var(--hi-v5-color-green-500, #24b237));}.hi-v5-button--appearance-line.hi-v5-button--type-success:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {background-color: var(--hi-v5-color-success-50, var(--hi-v5-color-green-50, #e4fce3));border: 1px solid var(--hi-v5-color-success-400, var(--hi-v5-color-green-400, #42c14f));}.hi-v5-button--appearance-line.hi-v5-button--type-success:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {background-color: var(--hi-v5-color-success-100, var(--hi-v5-color-green-100, #daf7de));border: 1px solid var(--hi-v5-color-success-600, var(--hi-v5-color-green-600, #17992d));}.hi-v5-button--appearance-line.hi-v5-button--type-success.hi-v5-button--disabled {color: var(--hi-v5-color-gray-400, #babcc2);border: 1px solid var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-button--appearance-line.hi-v5-button--type-success.hi-v5-button--loading {color: var(--hi-v5-color-success-200, var(--hi-v5-color-green-200, #8de08f));border: 1px solid var(--hi-v5-color-success-200, var(--hi-v5-color-green-200, #8de08f));}.hi-v5-button--appearance-line.hi-v5-button--type-danger {background-color: var(--hi-v5-color-static-white, #fff);border: 1px solid var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-button--appearance-line.hi-v5-button--type-danger:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {background-color: var(--hi-v5-color-danger-50, var(--hi-v5-color-red-50, #ffede8));border: 1px solid var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-button--appearance-line.hi-v5-button--type-danger:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {background-color: var(--hi-v5-color-danger-100, var(--hi-v5-color-red-100, #ffe0db));border: 1px solid var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-button--appearance-line.hi-v5-button--type-danger.hi-v5-button--disabled {color: var(--hi-v5-color-gray-400, #babcc2);border: 1px solid var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-button--appearance-line.hi-v5-button--type-danger.hi-v5-button--loading {color: var(--hi-v5-color-danger-300, var(--hi-v5-color-red-300, #ff938b));border: 1px solid var(--hi-v5-color-danger-200, var(--hi-v5-color-red-200, #ffb3aa));}.hi-v5-button--appearance-link {padding: 0;border: 0;}.hi-v5-button--appearance-link.hi-v5-button--type-primary {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-button--appearance-link.hi-v5-button--type-primary:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-button--appearance-link.hi-v5-button--type-primary:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-button--appearance-link.hi-v5-button--type-primary.hi-v5-button--disabled {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-link.hi-v5-button--type-primary.hi-v5-button--loading {color: var(--hi-v5-color-primary-300, var(--hi-v5-color-brandblue-300, #74a2ff));}.hi-v5-button--appearance-link.hi-v5-button--type-secondary {color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-button--appearance-link.hi-v5-button--type-secondary:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {color: var(--hi-v5-color-primary-300, var(--hi-v5-color-brandblue-300, #74a2ff));}.hi-v5-button--appearance-link.hi-v5-button--type-secondary:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-button--appearance-link.hi-v5-button--type-secondary.hi-v5-button--disabled {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-link.hi-v5-button--type-secondary.hi-v5-button--loading {color: var(--hi-v5-color-primary-200, var(--hi-v5-color-brandblue-200, #b1cafc));}.hi-v5-button--appearance-link.hi-v5-button--type-default {color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-button--appearance-link.hi-v5-button--type-default:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-button--appearance-link.hi-v5-button--type-default:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {color: var(--hi-v5-color-gray-700, #1a1d26);}.hi-v5-button--appearance-link.hi-v5-button--type-default.hi-v5-button--disabled {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-link.hi-v5-button--type-default.hi-v5-button--loading {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-link.hi-v5-button--type-success {color: var(--hi-v5-color-success-500, var(--hi-v5-color-green-500, #24b237));}.hi-v5-button--appearance-link.hi-v5-button--type-success:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {color: var(--hi-v5-color-success-400, var(--hi-v5-color-green-400, #42c14f));}.hi-v5-button--appearance-link.hi-v5-button--type-success:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {color: var(--hi-v5-color-success-600, var(--hi-v5-color-green-600, #17992d));}.hi-v5-button--appearance-link.hi-v5-button--type-success.hi-v5-button--disabled {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-link.hi-v5-button--type-success.hi-v5-button--loading {color: var(--hi-v5-color-success-200, var(--hi-v5-color-green-200, #8de08f));}.hi-v5-button--appearance-link.hi-v5-button--type-danger {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-button--appearance-link.hi-v5-button--type-danger:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {color: var(--hi-v5-color-danger-400, var(--hi-v5-color-red-400, #ff716c));}.hi-v5-button--appearance-link.hi-v5-button--type-danger:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-button--appearance-link.hi-v5-button--type-danger.hi-v5-button--disabled {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-link.hi-v5-button--type-danger.hi-v5-button--loading {color: var(--hi-v5-color-danger-300, var(--hi-v5-color-red-300, #ff938b));}.hi-v5-button--appearance-text.hi-v5-button--size-xs {height: calc(var(--hi-v5-text-lineheight-sm, 1.25rem) + 4px);font-size: var(--hi-v5-text-size-sm, 0.75rem);}.hi-v5-button--appearance-text.hi-v5-button--size-xs:not(.hi-v5-button--icon-only) {min-width: var(--hi-v5-height-12, 48px);padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-button--appearance-text.hi-v5-button--size-xs.hi-v5-button--icon-only {width: calc(var(--hi-v5-text-lineheight-sm, 1.25rem) + 4px);}.hi-v5-button--appearance-text.hi-v5-button--size-sm {height: calc(var(--hi-v5-text-lineheight-sm, 1.25rem) + 8px);font-size: var(--hi-v5-text-size-sm, 0.75rem);}.hi-v5-button--appearance-text.hi-v5-button--size-sm:not(.hi-v5-button--icon-only) {min-width: var(--hi-v5-height-12, 48px);padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-button--appearance-text.hi-v5-button--size-sm.hi-v5-button--icon-only {width: calc(var(--hi-v5-text-lineheight-sm, 1.25rem) + 8px);}.hi-v5-button--appearance-text.hi-v5-button--size-md {height: calc(var(--hi-v5-text-lineheight-md, 1.375rem) + 10px);font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-button--appearance-text.hi-v5-button--size-md:not(.hi-v5-button--icon-only) {min-width: var(--hi-v5-height-18, 72px);padding: 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-button--appearance-text.hi-v5-button--size-md.hi-v5-button--icon-only {width: calc(var(--hi-v5-text-lineheight-md, 1.375rem) + 10px);}.hi-v5-button--appearance-text.hi-v5-button--size-lg {height: calc(var(--hi-v5-text-lineheight-lg, 1.5rem) + 16px);font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-button--appearance-text.hi-v5-button--size-lg:not(.hi-v5-button--icon-only) {min-width: var(--hi-v5-height-22, 88px);padding: 0 var(--hi-v5-spacing-8, 16px);}.hi-v5-button--appearance-text.hi-v5-button--size-lg.hi-v5-button--icon-only {width: calc(var(--hi-v5-text-lineheight-lg, 1.5rem) + 16px);}.hi-v5-button--appearance-text.hi-v5-button--type-primary {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-button--appearance-text.hi-v5-button--type-primary:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));border: 1px solid var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-button--appearance-text.hi-v5-button--type-primary:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {background-color: var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));border: 1px solid var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-button--appearance-text.hi-v5-button--type-primary.hi-v5-button--disabled {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-text.hi-v5-button--type-primary.hi-v5-button--loading {color: var(--hi-v5-color-primary-300, var(--hi-v5-color-brandblue-300, #74a2ff));}.hi-v5-button--appearance-text.hi-v5-button--type-secondary {color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-button--appearance-text.hi-v5-button--type-secondary:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));border: 1px solid var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-button--appearance-text.hi-v5-button--type-secondary:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {background-color: var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));border: 1px solid var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-button--appearance-text.hi-v5-button--type-secondary.hi-v5-button--disabled {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-text.hi-v5-button--type-secondary.hi-v5-button--loading {color: var(--hi-v5-color-primary-200, var(--hi-v5-color-brandblue-200, #b1cafc));}.hi-v5-button--appearance-text.hi-v5-button--type-default {color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-button--appearance-text.hi-v5-button--type-default:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {background-color: var(--hi-v5-color-gray-50, #f2f4f7);border: 1px solid var(--hi-v5-color-gray-50, #f2f4f7);color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-button--appearance-text.hi-v5-button--type-default:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {background-color: var(--hi-v5-color-gray-200, #e6e8eb);border: 1px solid var(--hi-v5-color-gray-200, #e6e8eb);color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-button--appearance-text.hi-v5-button--type-default.hi-v5-button--disabled {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-text.hi-v5-button--type-default.hi-v5-button--loading {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-text.hi-v5-button--type-success {color: var(--hi-v5-color-success-500, var(--hi-v5-color-green-500, #24b237));}.hi-v5-button--appearance-text.hi-v5-button--type-success:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {background-color: var(--hi-v5-color-success-50, var(--hi-v5-color-green-50, #e4fce3));border: 1px solid var(--hi-v5-color-success-50, var(--hi-v5-color-green-50, #e4fce3));color: var(--hi-v5-color-success-500, var(--hi-v5-color-green-500, #24b237));}.hi-v5-button--appearance-text.hi-v5-button--type-success:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {background-color: var(--hi-v5-color-success-100, var(--hi-v5-color-green-100, #daf7de));border: 1px solid var(--hi-v5-color-success-100, var(--hi-v5-color-green-100, #daf7de));color: var(--hi-v5-color-success-500, var(--hi-v5-color-green-500, #24b237));}.hi-v5-button--appearance-text.hi-v5-button--type-success.hi-v5-button--disabled {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-text.hi-v5-button--type-success.hi-v5-button--loading {color: var(--hi-v5-color-success-300, var(--hi-v5-color-green-300, #65d16d));}.hi-v5-button--appearance-text.hi-v5-button--type-danger {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-button--appearance-text.hi-v5-button--type-danger:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):hover {background-color: var(--hi-v5-color-danger-50, var(--hi-v5-color-red-50, #ffede8));border: 1px solid var(--hi-v5-color-danger-50, var(--hi-v5-color-red-50, #ffede8));color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-button--appearance-text.hi-v5-button--type-danger:not(.hi-v5-button--disabled):not(.hi-v5-button--loading):active {background-color: var(--hi-v5-color-danger-100, var(--hi-v5-color-red-100, #ffe0db));border: 1px solid var(--hi-v5-color-danger-100, var(--hi-v5-color-red-100, #ffe0db));color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-button--appearance-text.hi-v5-button--type-danger.hi-v5-button--disabled {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-button--appearance-text.hi-v5-button--type-danger.hi-v5-button--loading {color: var(--hi-v5-color-danger-300, var(--hi-v5-color-red-300, #ff938b));}.hi-v5-button-group {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;}.hi-v5-button-group .hi-v5-button:first-child {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v5-button-group .hi-v5-button:not(:first-child):not(:last-child) {border-radius: 0;}.hi-v5-button-group .hi-v5-button:not(:first-child) {margin-left: 0;}.hi-v5-button-group .hi-v5-button:not(:first-child)::before {content: \"\";position: absolute;left: -1px;width: 1px;height: 50%;}.hi-v5-button-group .hi-v5-button--type-primary::before {background-color: var(--hi-v5-color-primary-300, var(--hi-v5-color-brandblue-300, #74a2ff));}.hi-v5-button-group .hi-v5-button--type-secondary::before {background-color: var(--hi-v5-color-primary-300, var(--hi-v5-color-brandblue-300, #74a2ff));}.hi-v5-button-group .hi-v5-button--type-default::before {background-color: var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-button-group .hi-v5-button--type-success::before {background-color: var(--hi-v5-color-success-300, var(--hi-v5-color-green-300, #65d16d));}.hi-v5-button-group .hi-v5-button--type-danger::before {background-color: var(--hi-v5-color-danger-300, var(--hi-v5-color-red-300, #ff938b));}.hi-v5-button-group .hi-v5-button:last-child {border-top-left-radius: 0;border-bottom-left-radius: 0;}";
+__styleInject__(css_248z);
+export { css_248z as default };

package/lib/esm/index.js

@@ -10,4 +10,7 @@
 import './styles/index.scss.js';
 export { Menu, Menu as default } from './Menu.js';
 export { Sidebar } from './Sidebar.js';
+export { MenuSearch, MenuSearchInput } from './MenuSearch.js';
+export { GroupMenu } from './GroupMenu.js';
+export { SideMenu, useSideMenuCascade } from './SideMenu.js';
 export { filterTreeData, getAncestorIds, getParentId } from './util.js';

package/lib/esm/styles/index.scss.js

@@ -8,6 +8,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import __styleInject__ from '@hi-ui/style-inject';
-var css_248z = ".hi-v4-menu-fat-menu {background-color: var(--hi-v4-color-static-white, #fff);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v4-color-gray-700, #1f2733);border-radius: var(--hi-v4-border-radius-md, 4px);-ms-flex-wrap: wrap;flex-wrap: wrap;}.hi-v4-menu-fat-menu__group:not(:last-of-type) {margin-right: var(--hi-v4-spacing-18, 36px);}.hi-v4-menu-fat-menu .hi-v4-menu-group-item {height: 40px;margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-6, 12px);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-menu-fat-menu .hi-v4-menu-item {height: 40px;margin: 0;border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);}.hi-v4-menu-fat-menu .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-fat-menu .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu-fat-menu ul {padding: 0;margin: 0;}.hi-v4-menu-fat-menu ul li {list-style-type: none;}.hi-v4-menu-popmenu {background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu-popmenu .hi-v4-menu-item {height: 40px;margin: 0;}.hi-v4-menu-popmenu .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu-popmenu .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;padding-right: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu ul {margin: 0;padding: 0;}.hi-v4-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-500, #929aa6);-webkit-margin-end: var(--hi-v4-spacing-4, 8px);margin-inline-end: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu-item__icon svg[class^=hi-v4-icon] {font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu-item__arrow {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0;}.hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu__wrapper {padding: 0;margin: 0;}.hi-v4-menu--horizontal {width: 100%;overflow: hidden;}.hi-v4-menu--horizontal .hi-v4-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu--horizontal .hi-v4-menu-item {padding: 0 var(--hi-v4-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu--horizontal .hi-v4-menu-item__arrow {-webkit-margin-start: var(--hi-v4-spacing-2, 4px);margin-inline-start: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--horizontal .hi-v4-menu-item:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item:hover .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom: 2px solid transparent;}.hi-v4-menu--horizontal .hi-v4-menu-item__inner--expanded {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled:hover .hi-v4-menu-item__inner {border-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled .hi-v4-menu-item__content {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v4-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v4-menu--vertical .hi-v4-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto;}.hi-v4-menu--vertical.hi-v4-menu--mini {width: 56px;overflow-x: hidden;}.hi-v4-menu--vertical.hi-v4-menu--popup .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical.hi-v4-menu--popup:not(.hi-v4-menu--mini) .hi-v4-menu__wrapper > .hi-v4-menu-item:last-child .hi-v4-menu-item__inner {margin-bottom: 0;}.hi-v4-menu--vertical .hi-v4-menu__toggle {width: var(--hi-v4-height-10, 40px);height: var(--hi-v4-height-10, 40px);cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border-radius: var(--hi-v4-border-radius-md, 4px);color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color;}.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px;}.hi-v4-menu--vertical .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--vertical.hi-v4-menu--size-lg .hi-v4-menu-item__inner {height: var(--hi-v4-height-10, 40px);margin-bottom: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu--vertical.hi-v4-menu--size-md .hi-v4-menu-item__inner {height: var(--hi-v4-height-9, 36px);margin-bottom: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--vertical.hi-v4-menu--size-sm .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: var(--hi-v4-spacing-1, 2px);}.hi-v4-sidebar-wrapper {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: 100%;}.hi-v4-sidebar-wrapper:not(.hi-v4-sidebar-wrapper-showMenuArrow) .hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__arrow {display: none;}.hi-v4-sidebar-wrapper--showMenu .hi-v4-sidebar-menu-wrapper {border-right: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-sidebar-wrapper--showMenu .hi-v4-sidebar-toggle svg[class^=hi-v4-icon] {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v4-sidebar-wrapper:not(.hi-v4-sidebar-wrapper--collapsible) .hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--expanded:hover {background-color: transparent;cursor: default;}.hi-v4-sidebar {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v4-spacing-4, 8px) 0;overflow: auto;border-right: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);background-color: #fff;}.hi-v4-sidebar-list {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}.hi-v4-sidebar-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-1, 2px);width: 52px;overflow: hidden;text-align: center;border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-sidebar-item:first-child {margin-top: 0;}.hi-v4-sidebar-item:hover {cursor: pointer;}.hi-v4-sidebar-item:not(.hi-v4-sidebar-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-sidebar-item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-sidebar-item--active .hi-v4-sidebar-item__icon, .hi-v4-sidebar-item--active .hi-v4-sidebar-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-sidebar-item__icon {height: 20px;color: var(--hi-v4-color-gray-600, #5f6a7a);}.hi-v4-sidebar-item__icon svg[class^=hi-v4-icon] {width: 20px;height: 20px;}.hi-v4-sidebar-item__title {font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: 20px;color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-sidebar-menu-wrapper {width: 0;border-right: none;overflow: hidden;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: 0;padding: 0 var(--hi-v4-spacing-4, 8px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item .hi-v4-menu-item__inner--hasIcon + div .hi-v4-menu-submenu .hi-v4-menu-item__indent {width: 20px;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-600, #5f6a7a);-webkit-margin-end: var(--hi-v4-spacing-2, 4px);margin-inline-end: var(--hi-v4-spacing-2, 4px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__indent {width: 14px;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__content {font-weight: 550;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-gray-700, #1f2733);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-600, #5f6a7a);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-submenu .hi-v4-menu-item__inner .hi-v4-menu-item__content {font-size: var(--hi-v4-text-size-sm, 0.75rem);font-weight: var(--hi-v4-text-weight-normal, 400);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu__wrapper > .hi-v4-menu-item {margin-top: var(--hi-v4-spacing-4, 8px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu__wrapper > .hi-v4-menu-item:first-child {margin-top: 0;}.hi-v4-sidebar-toggle {-webkit-box-sizing: border-box;box-sizing: border-box;position: absolute;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 12px;height: 60px;right: -11px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);border-start-end-radius: 16px 8px;border-end-end-radius: 16px 8px;border: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);border-left: none;cursor: pointer;color: var(--hi-v4-color-gray-600, #5f6a7a);background-color: #fff;}.hi-v4-sidebar-toggle svg[class^=hi-v4-icon] {margin-left: -4px;}";
+var css_248z = ".hi-v5-menu-fat-menu {background-color: var(--hi-v5-color-static-white, #fff);margin: 0;font-size: var(--hi-v5-text-size-md, 0.875rem);padding: var(--hi-v5-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v5-color-gray-700, #1a1d26);border-radius: var(--hi-v5-border-radius-lg, 6px);-ms-flex-wrap: wrap;flex-wrap: wrap;}.hi-v5-menu-fat-menu__group:not(:last-of-type) {margin-right: var(--hi-v5-spacing-18, 36px);}.hi-v5-menu-fat-menu .hi-v5-menu-group-item {height: 40px;margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-6, 12px);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-menu-fat-menu .hi-v5-menu-item {height: 40px;margin: 0;border-radius: var(--hi-v5-border-radius-lg, 6px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-menu-fat-menu .hi-v5-menu-item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu-fat-menu .hi-v5-menu-item:not(.hi-v5-menu-item--active):hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu-fat-menu .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-400, #babcc2);cursor: not-allowed;}.hi-v5-menu-fat-menu ul {padding: 0;margin: 0;}.hi-v5-menu-fat-menu ul li {list-style-type: none;}.hi-v5-menu-popmenu {background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-xl, 8px);margin: 0;font-size: var(--hi-v5-text-size-md, 0.875rem);padding: var(--hi-v5-spacing-4, 8px);color: var(--hi-v5-color-gray-700, #1a1d26);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu-popmenu .hi-v5-menu-item {margin: 0;}.hi-v5-menu-popmenu .hi-v5-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--expanded {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner:not(.hi-v5-menu-item__inner--active):hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--disabled {color: var(--hi-v5-color-gray-400, #babcc2);cursor: not-allowed;}.hi-v5-menu-popmenu .hi-v5-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;padding-right: var(--hi-v5-spacing-4, 8px);}.hi-v5-menu-popmenu.hi-v5-menu--size-sm .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);}.hi-v5-menu-popmenu.hi-v5-menu--size-md .hi-v5-menu-item__inner {height: var(--hi-v5-height-9, 36px);}.hi-v5-menu-popmenu.hi-v5-menu--size-lg .hi-v5-menu-item__inner {height: var(--hi-v5-height-10, 40px);}.hi-v5-menu {background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-700, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu ul {margin: 0;padding: 0;}.hi-v5-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-menu-item__icon {color: var(--hi-v5-color-gray-500, #91959e);-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);}.hi-v5-menu-item__icon svg[class^=hi-v5-icon] {font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-menu-item__arrow {color: var(--hi-v5-color-gray-500, #91959e);font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0;}.hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-400, #babcc2);cursor: not-allowed;}.hi-v5-menu__wrapper {padding: 0;margin: 0;}.hi-v5-menu--horizontal {width: 100%;overflow: hidden;}.hi-v5-menu--horizontal .hi-v5-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu--horizontal .hi-v5-menu-item {padding: 0 var(--hi-v5-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-menu--horizontal .hi-v5-menu-item__arrow {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--horizontal .hi-v5-menu-item:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item:hover .hi-v5-menu-item__inner {border-bottom: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active .hi-v5-menu-item__inner {border-bottom: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom: 2px solid transparent;}.hi-v5-menu--horizontal .hi-v5-menu-item__inner--expanded {border-bottom: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none;}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-400, #babcc2);cursor: not-allowed;}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled:hover .hi-v5-menu-item__inner {border-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled .hi-v5-menu-item__content {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v5-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v5-menu--vertical .hi-v5-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto;}.hi-v5-menu--vertical.hi-v5-menu--mini {width: 56px;overflow-x: hidden;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini {padding-left: var(--hi-v5-spacing-2, 4px);padding-right: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--vertical.hi-v5-menu--popup .hi-v5-menu-item__inner--expanded {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu--vertical.hi-v5-menu--popup:not(.hi-v5-menu--mini) .hi-v5-menu__wrapper > .hi-v5-menu-item:last-child .hi-v5-menu-item__inner {margin-bottom: 0;}.hi-v5-menu--vertical .hi-v5-menu__toggle {width: var(--hi-v5-height-10, 40px);height: var(--hi-v5-height-10, 40px);cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border-radius: var(--hi-v5-border-radius-lg, 6px);color: var(--hi-v5-color-gray-500, #91959e);-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color;}.hi-v5-menu--vertical .hi-v5-menu__toggle:hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu--vertical .hi-v5-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner:not(.hi-v5-menu-item__inner--active):hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu--vertical .hi-v5-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px;}.hi-v5-menu--vertical .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-400, #babcc2);cursor: not-allowed;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini {width: 60px;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-sizing: border-box;box-sizing: border-box;width: 52px;height: 48px;padding: 6px 6px 0;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner .hi-v5-menu-item__icon {-webkit-margin-end: 0;margin-inline-end: 0;-webkit-margin-after: 2px;margin-block-end: 2px;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner .hi-v5-menu-item__icon svg[class^=hi-v5-icon] {font-size: 18px;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner .hi-v5-menu-item__content {-webkit-transform: scale(0.5);transform: scale(0.5);width: 200%;font-size: 20px;text-align: center;text-indent: 0;}.hi-v5-menu--vertical.hi-v5-menu--size-lg .hi-v5-menu-item__inner {height: var(--hi-v5-height-10, 40px);margin-bottom: var(--hi-v5-spacing-4, 8px);}.hi-v5-menu--vertical.hi-v5-menu--size-md .hi-v5-menu-item__inner {height: var(--hi-v5-height-9, 36px);margin-bottom: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--vertical.hi-v5-menu--size-sm .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);margin-bottom: var(--hi-v5-spacing-1, 2px);}.hi-v5-sidebar-wrapper {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: 100%;}.hi-v5-sidebar-wrapper:not(.hi-v5-sidebar-wrapper-showMenuArrow) .hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__arrow {display: none;}.hi-v5-sidebar-wrapper--showMenu .hi-v5-sidebar-menu-wrapper {border-right: 1px solid var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-sidebar-wrapper--showMenu .hi-v5-sidebar-toggle svg[class^=hi-v5-icon] {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v5-sidebar-wrapper:not(.hi-v5-sidebar-wrapper--collapsible) .hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--expanded:hover {background-color: transparent;cursor: default;}.hi-v5-sidebar {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v5-spacing-4, 8px) 0;overflow: auto;border-right: 1px solid var(--hi-v5-color-gray-300, #dbdde0);background-color: #fff;}.hi-v5-sidebar-list {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}.hi-v5-sidebar-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: var(--hi-v5-spacing-6, 12px) var(--hi-v5-spacing-2, 4px) 0;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-1, 2px);width: 52px;overflow: hidden;text-align: center;border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-sidebar-item:first-child {margin-top: 0;}.hi-v5-sidebar-item:hover {cursor: pointer;}.hi-v5-sidebar-item:not(.hi-v5-sidebar-item--active):hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-sidebar-item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-sidebar-item--active .hi-v5-sidebar-item__icon, .hi-v5-sidebar-item--active .hi-v5-sidebar-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-sidebar-item__icon {height: 20px;color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-sidebar-item__icon svg[class^=hi-v5-icon] {width: 20px;height: 20px;}.hi-v5-sidebar-item__title {font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: 20px;color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-sidebar-menu-wrapper {width: 0;border-right: none;overflow: hidden;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);margin-bottom: 0;padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item .hi-v5-menu-item__inner--hasIcon + div .hi-v5-menu-submenu .hi-v5-menu-item__indent {width: 20px;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__icon {color: var(--hi-v5-color-gray-600, #60636b);-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__indent {width: 14px;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__content {font-weight: 550;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-gray-700, #1a1d26);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-submenu .hi-v5-menu-item__inner .hi-v5-menu-item__content {font-size: var(--hi-v5-text-size-sm, 0.75rem);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu__wrapper > .hi-v5-menu-item {margin-top: var(--hi-v5-spacing-4, 8px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu__wrapper > .hi-v5-menu-item:first-child {margin-top: 0;}.hi-v5-sidebar-toggle {-webkit-box-sizing: border-box;box-sizing: border-box;position: absolute;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 12px;height: 60px;right: -11px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);border-start-end-radius: 16px 8px;border-end-end-radius: 16px 8px;border: 1px solid var(--hi-v5-color-gray-300, #dbdde0);border-left: none;cursor: pointer;color: var(--hi-v5-color-gray-600, #60636b);background-color: #fff;}.hi-v5-sidebar-toggle svg[class^=hi-v5-icon] {margin-left: -4px;}.hi-v5-menu-search {min-width: 360px;border-radius: var(--hi-v5-border-radius-xl, 8px);overflow: hidden;background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-menu-search__input-wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-8, 16px) 0 calc(var(--hi-v5-spacing-2, 4px) + 1px);height: var(--hi-v5-height-12, 48px);}.hi-v5-menu-search--open .hi-v5-menu-search__input-wrapper {border-bottom-left-radius: 0;border-bottom-right-radius: 0;}.hi-v5-menu-search__input .hi-v5-input__inner:hover {background-color: transparent !important;}.hi-v5-menu-search__input-prefix {color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-menu-search__input-clear {font-size: var(--hi-v5-text-size-sm, 0.75rem);}.hi-v5-menu-search__close {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: var(--hi-v5-height-4, 16px);padding-left: var(--hi-v5-spacing-5, 10px);border-left: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-menu-search__content {-webkit-box-sizing: border-box;box-sizing: border-box;display: none;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v5-spacing-4, 8px);max-height: 550px;border-top: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu-search__content--visible {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-menu-search__header {padding: 0 var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-menu-search__header-count {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-search__list {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow-y: auto;position: relative;outline: none;}.hi-v5-menu-search__list:focus {outline: none;}.hi-v5-menu-search__list-item {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;height: var(--hi-v5-height-10, 40px);padding: calc(var(--hi-v5-spacing-4, 8px) + 1px) var(--hi-v5-spacing-4, 8px);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-menu-search__list-item__title {font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-gray-700, #1a1d26);}.hi-v5-menu-search__list-item--selected, .hi-v5-menu-search__list-item:hover {cursor: pointer;background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu-search__empty {padding: calc(var(--hi-v5-spacing-2, 4px) + 1px) var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-menu-search__footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);background-color: #f5f7fa;}.hi-v5-menu-search__footer-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-right: var(--hi-v5-spacing-8, 16px);font-size: var(--hi-v5-text-size-sm, 0.75rem);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-menu-search__footer-item__icon {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;gap: var(--hi-v5-spacing-1, 2px);margin-right: var(--hi-v5-spacing-2, 4px);padding: 0 var(--hi-v5-spacing-2, 4px);height: var(--hi-v5-height-5, 20px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #dbdde0);border-radius: var(--hi-v5-border-radius-md, 4px);}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-container {min-width: 360px;border-top-left-radius: 0;border-top-right-radius: 0;}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-panel {border-top: none;border-top-left-radius: 0;border-top-right-radius: 0;}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-body {max-height: 544px;}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-footer {-webkit-box-shadow: none;box-shadow: none;background-color: #f5f7fa;}.hi-v5-group-menu {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 100%;padding: var(--hi-v5-spacing-4, 8px) 0;}.hi-v5-group-menu-item:not(:first-child) {margin-top: var(--hi-v5-spacing-4, 8px);}.hi-v5-group-menu-item__content {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: var(--hi-v5-height-8, 32px);padding: 0 var(--hi-v5-spacing-4, 8px);margin: 0 var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-700, #1a1d26);}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled) {cursor: pointer;}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled):hover .hi-v5-group-menu-item__content {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled).hi-v5-group-menu-item--active > .hi-v5-group-menu-item__content {font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled).hi-v5-group-menu-item--active:hover > .hi-v5-group-menu-item__content {background-color: var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));}.hi-v5-group-menu-item--disabled > .hi-v5-group-menu-item__content {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-group-menu-item--empty > .hi-v5-group-menu-item__content {display: none;}.hi-v5-group-menu-item__icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;margin-right: var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-group-menu-parent-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-group-menu-parent-item > .hi-v5-group-menu-item__content {height: var(--hi-v5-height-7, 28px);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-group-menu-parent-item > .hi-v5-group-menu-item__content .hi-v5-group-menu-item__title {font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-group-menu-parent-item:not(:first-child) > .hi-v5-group-menu-item__content {margin-top: var(--hi-v5-spacing-12, 24px);}.hi-v5-group-menu-parent-item + .hi-v5-group-menu-item {margin-top: var(--hi-v5-spacing-12, 24px);}.hi-v5-side-menu {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v5-spacing-2, 4px) 0;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v5-side-menu-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: var(--hi-v5-height-8, 32px);padding: 0 var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-700, #1a1d26);border-radius: var(--hi-v5-border-radius-lg, 6px);cursor: pointer;position: relative;}.hi-v5-side-menu-item:hover, .hi-v5-side-menu-item--selected {background-color: rgba(124, 135, 166, 0.15);}.hi-v5-side-menu-item-wrapper {padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-4, 8px);}.hi-v5-side-menu-item--active {font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-side-menu-item--active:hover {background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-side-menu-item--active .hi-v5-side-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-side-menu-item__icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;margin-right: var(--hi-v5-spacing-4, 8px);color: #7c87a6;}.hi-v5-side-menu-item__title {min-width: 1px;}.hi-v5-side-menu-item--mini {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-3, 6px) 0;width: 52px;height: 48px;}.hi-v5-side-menu-item--mini .hi-v5-side-menu-item__icon {margin-right: 0;font-size: 18px;}.hi-v5-side-menu-item--mini .hi-v5-side-menu-item__title {width: 200%;font-size: 20px;text-align: center;text-indent: 0;-webkit-transform: scale(0.5);transform: scale(0.5);}.hi-v5-side-menu--mini .hi-v5-side-menu-item-wrapper {padding: var(--hi-v5-spacing-2, 4px);}.hi-v5-side-menu .hi-v5-scrollbar__wrapper {width: 100%;}";
 __styleInject__(css_248z);
 export { css_248z as default };

package/lib/esm/util.js

@@ -8,7 +8,39 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { cloneTree, filterTree, getTreeNodesWithChildren } from '@hi-ui/tree-utils';
-
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+  return arr2;
+}
 // 寻找某一节点的父节点
 var getParentId = function getParentId(id, data) {
   var parentId = '';
@@ -85,4 +117,65 @@ var transformTreeData = function transformTreeData(data, fieldNames) {
   };
   return data.map(traverseTreeNode);
 };
-export { filterTreeData, getAncestorIds, getIdsWithChildren, getParentId, transformTreeData };
+/**
+ * 增强版搜索函数，返回包含路径信息的结果
+ */
+function searchMenuWithPath(data, keyword) {
+  if (!keyword || !data || data.length === 0) {
+    return [];
+  }
+  var results = [];
+  var processedIds = new Set();
+  function searchInTree(nodes, currentPath) {
+    if (currentPath === void 0) {
+      currentPath = [];
+    }
+    var _a;
+    for (var _iterator3 = _createForOfIteratorHelperLoose(nodes), _step3; !(_step3 = _iterator3()).done;) {
+      var node = _step3.value;
+      var nodePath = [].concat(currentPath, [node]);
+      var isMatched = (_a = node.title) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().includes(keyword.toLowerCase());
+      if (isMatched) {
+        if (!node.children || node.children.length === 0) {
+          // 叶子节点
+          if (!processedIds.has(node.id)) {
+            results.push({
+              node: node,
+              path: nodePath,
+              level: nodePath.length - 1
+            });
+            processedIds.add(node.id);
+          }
+        } else {
+          // 父节点，添加所有子节点
+          addAllDescendantsWithPath(node.children, nodePath);
+        }
+      } else {
+        // 继续搜索子节点
+        if (node.children && node.children.length > 0) {
+          searchInTree(node.children, nodePath);
+        }
+      }
+    }
+  }
+  function addAllDescendantsWithPath(children, parentPath) {
+    for (var _iterator4 = _createForOfIteratorHelperLoose(children), _step4; !(_step4 = _iterator4()).done;) {
+      var child = _step4.value;
+      var childPath = [].concat(parentPath, [child]);
+      if (!processedIds.has(child.id)) {
+        results.push({
+          node: child,
+          path: childPath,
+          level: childPath.length - 1
+        });
+        processedIds.add(child.id);
+      }
+      if (child.children && child.children.length > 0) {
+        addAllDescendantsWithPath(child.children, childPath);
+      }
+    }
+  }
+  searchInTree(data);
+  return results;
+}
+export { filterTreeData, getAncestorIds, getIdsWithChildren, getParentId, searchMenuWithPath, transformTreeData };

package/lib/types/EnterIcon.d.ts

@@ -0,0 +1 @@
+export declare const EnterIcon: () => JSX.Element;

package/lib/types/GroupMenu.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+import { MenuDataItem } from './types';
+/**
+ * 分组菜单
+ */
+export declare const GroupMenu: React.ForwardRefExoticComponent<GroupMenuProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface GroupMenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
+    /**
+     * 菜单项数据列表
+     */
+    data: MenuDataItem[];
+    /**
+     * 默认激活的菜单项 id
+     */
+    defaultActiveId?: React.ReactText;
+    /**
+     * 激活的菜单项 id
+     */
+    activeId?: React.ReactText;
+    /**
+     * 点击菜单选项时的回调
+     */
+    onClick?: (evt: React.MouseEvent<HTMLDivElement>, menuId: React.ReactText, menuItem: MenuDataItem) => void;
+    /**
+     * 自定义渲染菜单项标题
+     */
+    titleRender?: (menuItem: MenuDataItem) => React.ReactNode;
+}

package/lib/types/Menu.d.ts

@@ -98,4 +98,8 @@ export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
      * 设置菜单项的尺寸
      */
     size?: HiBaseSizeEnum;
+    /**
+     * 是否在 mini 模式下显示菜单项的标题
+     */
+    showTitleOnMini?: boolean;
 }

package/lib/types/MenuSearch.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+import { MenuDataItem } from './types';
+export declare const MenuSearch: React.ForwardRefExoticComponent<MenuSearchProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface MenuSearchHelper {
+    show: () => void;
+    hide: () => void;
+    focus: () => void;
+}
+export interface MenuSearchProps extends HiBaseHTMLProps<'div'> {
+    innerRef?: React.RefObject<MenuSearchHelper>;
+    clearText?: React.ReactNode;
+    placeholder?: string;
+    notFoundContent?: React.ReactNode;
+    width?: React.CSSProperties['width'];
+    visible?: boolean;
+    data?: MenuDataItem[];
+    defaultValue?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onSearch?: (value: string) => void;
+    onSelect?: (id: React.ReactText, item: MenuDataItem) => void;
+    onClear?: () => void;
+    onClose?: () => void;
+    onEsc?: () => void;
+}
+export declare const MenuSearchInput: React.ForwardRefExoticComponent<{
+    prefixCls: string;
+    placeholder?: string | undefined;
+    inputRef?: React.Dispatch<React.SetStateAction<HTMLInputElement | null>> | undefined;
+    width?: React.CSSProperties['width'];
+    value?: string | undefined;
+    onChange?: ((value: string) => void) | undefined;
+    onClear?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    onKeyDown?: ((e: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;

package/lib/types/SideMenu.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+import { MenuDataItem } from './types';
+/**
+ * 侧边菜单组件
+ */
+export declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface SideMenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
+    /**
+     * 侧边菜单宽度
+     */
+    width?: number;
+    /**
+     * 是否为迷你模式
+     */
+    mini?: boolean;
+    /**
+     * 默认激活的菜单项
+     */
+    defaultActiveId?: React.ReactText | null;
+    /**
+     * 激活的菜单项
+     */
+    activeId?: React.ReactText | null;
+    /**
+     * 选中的菜单项
+     */
+    selectedId?: React.ReactText | null;
+    /**
+     * 侧边菜单数据
+     */
+    data: MenuDataItem[];
+    /**
+     * 子菜单容器引用
+     */
+    childrenContainerRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * 点击侧边菜单项
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>, id: React.ReactText, item: MenuDataItem) => void;
+    /**
+     * 鼠标移入侧边菜单项
+     */
+    onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>, id: React.ReactText, item: MenuDataItem) => void;
+    /**
+     * 鼠标移出侧边菜单项
+     */
+    onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>, id: React.ReactText, item: MenuDataItem) => void;
+}
+export declare const useSideMenuCascade: ({ data, selectId, activeId, }: {
+    data: MenuDataItem[];
+    selectId: React.ReactText;
+    activeId: React.ReactText;
+}) => {
+    submenuData: MenuDataItem[];
+    selectParentId: string | number;
+    activeParentId: string | number;
+};

package/lib/types/context.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { MenuDataItem } from './types';
 declare const MenuContext: React.Context<{
-    placement?: "vertical" | "horizontal" | undefined;
+    placement?: "horizontal" | "vertical" | undefined;
     expandedType?: "collapse" | "pop" | undefined;
     showAllSubMenus?: boolean | undefined;
     mini?: boolean | undefined;
+    showTitleOnMini?: boolean | undefined;
     expandedIds?: React.ReactText[] | undefined;
     activeId?: React.ReactText | undefined;
     activeParents?: React.ReactText[] | undefined;

package/lib/types/index.d.ts

@@ -2,5 +2,8 @@ import './styles/index.scss';
 export * from './Menu';
 export { Menu as default } from './Menu';
 export * from './Sidebar';
+export * from './MenuSearch';
+export * from './GroupMenu';
+export * from './SideMenu';
 export { filterTreeData, getParentId, getAncestorIds } from './util';
 export * from './types';

package/lib/types/util.d.ts

@@ -6,3 +6,19 @@ export declare const getAncestorIds: (id: string | number, data: Record<string,
 export declare const getIdsWithChildren: (treeData: MenuDataItem[]) => React.ReactText[];
 export declare const filterTreeData: (treeData: MenuDataItem[], searchKey: string, activeId: string | number) => MenuDataItem[];
 export declare const transformTreeData: (data: MenuDataItem[], fieldNames?: HiBaseFieldNames | undefined) => MenuDataItem[];
+/**
+ * 根据关键字匹配菜单数据的算法
+ * @param data 菜单数据数组
+ * @param keyword 搜索关键字
+ * @returns 匹配结果数组
+ */
+export declare function searchMenuByKeyword(data: MenuDataItem[], keyword: string): MenuDataItem[];
+export interface MenuSearchResult {
+    node: MenuDataItem;
+    path: MenuDataItem[];
+    level: number;
+}
+/**
+ * 增强版搜索函数，返回包含路径信息的结果
+ */
+export declare function searchMenuWithPath(data: MenuDataItem[], keyword: string): MenuSearchResult[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/menu",
-  "version": "4.3.1",
+  "version": "5.0.0-alpha.0",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -19,6 +19,7 @@
   "typings": "lib/types/index.d.ts",
   "exports": {
     ".": {
+      "types": "./lib/types/index.d.ts",
       "require": "./lib/cjs/index.js",
       "default": "./lib/esm/index.js"
     }
@@ -43,31 +44,38 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@hi-ui/array-utils": "^4.0.5",
-    "@hi-ui/classname": "^4.0.5",
-    "@hi-ui/env": "^4.0.5",
-    "@hi-ui/icons": "^4.0.19",
-    "@hi-ui/popper": "^4.1.5",
-    "@hi-ui/scrollbar": "^4.1.1",
-    "@hi-ui/times": "^4.0.4",
-    "@hi-ui/tooltip": "^4.0.11",
-    "@hi-ui/tree-utils": "^4.1.5",
-    "@hi-ui/type-assertion": "^4.0.4",
-    "@hi-ui/use-id": "^4.0.4",
-    "@hi-ui/use-merge-refs": "^4.0.4",
-    "@hi-ui/use-resize-observer": "^4.0.4",
-    "@hi-ui/use-toggle": "^4.0.4",
-    "@hi-ui/use-uncontrolled-state": "^4.0.4",
+    "@hi-ui/array-utils": "^5.0.0-alpha.0",
+    "@hi-ui/classname": "^5.0.0-alpha.0",
+    "@hi-ui/ellipsis-tooltip": "^5.0.0-alpha.0",
+    "@hi-ui/env": "^5.0.0-alpha.0",
+    "@hi-ui/highlighter": "^5.0.0-alpha.0",
+    "@hi-ui/icon-button": "^5.0.0-alpha.0",
+    "@hi-ui/icons": "^5.0.0-alpha.0",
+    "@hi-ui/input": "^5.0.0-alpha.0",
+    "@hi-ui/picker": "^5.0.0-alpha.0",
+    "@hi-ui/popper": "^5.0.0-alpha.0",
+    "@hi-ui/scrollbar": "^5.0.0-alpha.0",
+    "@hi-ui/times": "^5.0.0-alpha.0",
+    "@hi-ui/tooltip": "^5.0.0-alpha.0",
+    "@hi-ui/tree-utils": "^5.0.0-alpha.0",
+    "@hi-ui/type-assertion": "^5.0.0-alpha.0",
+    "@hi-ui/use-id": "^5.0.0-alpha.0",
+    "@hi-ui/use-latest": "^5.0.0-alpha.0",
+    "@hi-ui/use-merge-refs": "^5.0.0-alpha.0",
+    "@hi-ui/use-outside-click": "^5.0.0-alpha.0",
+    "@hi-ui/use-resize-observer": "^5.0.0-alpha.0",
+    "@hi-ui/use-toggle": "^5.0.0-alpha.0",
+    "@hi-ui/use-uncontrolled-state": "^5.0.0-alpha.0",
     "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
-    "@hi-ui/core": ">=4.0.8",
+    "@hi-ui/core": ">=5.0.0-alpha.0",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/core": "^4.0.8",
-    "@hi-ui/core-css": "^4.1.5",
+    "@hi-ui/core": "^5.0.0-alpha.0",
+    "@hi-ui/core-css": "^5.0.0-alpha.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }