@officesdk/design 0.1.8 → 0.1.10

package/dist/components/cjs/index.js

@@ -4,6 +4,11 @@ var React3 = require('react');
 var baseStyled = require('styled-components');
 var RcTooltip = require('rc-tooltip');
 require('rc-tooltip/assets/bootstrap.css');
+var RcMenu = require('rc-menu');
+var VirtualList = require('rc-virtual-list');
+require('rc-menu/assets/index.css');
+var RcDropdown = require('rc-dropdown');
+require('rc-dropdown/assets/index.css');
 var ReactDOM = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -11,6 +16,9 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React3__default = /*#__PURE__*/_interopDefault(React3);
 var baseStyled__default = /*#__PURE__*/_interopDefault(baseStyled);
 var RcTooltip__default = /*#__PURE__*/_interopDefault(RcTooltip);
+var RcMenu__default = /*#__PURE__*/_interopDefault(RcMenu);
+var VirtualList__default = /*#__PURE__*/_interopDefault(VirtualList);
+var RcDropdown__default = /*#__PURE__*/_interopDefault(RcDropdown);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 
 var __defProp = Object.defineProperty;
@@ -133,8 +141,8 @@ var init_Toast = __esm({
   border: 1px solid;
   box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
 
-  ${({ theme: theme2 }) => {
-      const baseConfig = theme2.components.toast;
+  ${({ theme: theme3 }) => {
+      const baseConfig = theme3.components.toast;
       return `
       padding: ${baseConfig.padding};
       border-radius: ${baseConfig.borderRadius};
@@ -143,8 +151,8 @@ var init_Toast = __esm({
     `;
     }}
 
-  ${({ $variant, theme: theme2 }) => {
-      const variantConfig = theme2.components.toast[$variant];
+  ${({ $variant, theme: theme3 }) => {
+      const variantConfig = theme3.components.toast[$variant];
       return `
       background: ${variantConfig.background};
       border-color: ${variantConfig.borderColor};
@@ -175,12 +183,12 @@ var init_Toast = __esm({
     Message = exports.styled.span`
   font-size: 13px;
   line-height: 20px;
-  color: ${({ theme: theme2 }) => theme2.colors.palettes.gray["100"]};
+  color: ${({ theme: theme3 }) => theme3.colors.palettes.gray["100"]};
 `;
     Description = exports.styled.span`
   font-size: 12px;
   line-height: 20px;
-  color: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["60"]};
+  color: ${({ theme: theme3 }) => theme3.colors.palettes.transparency["60"]};
 `;
     ActionGroup = exports.styled.div`
   display: flex;
@@ -229,8 +237,8 @@ var init_Toast = __esm({
         if (icon) {
           return icon;
         }
-        const theme2 = exports.getGlobalTheme();
-        const themeIconUrl = theme2?.components?.toast?.[variant]?.icon?.url;
+        const theme3 = exports.getGlobalTheme();
+        const themeIconUrl = theme3?.components?.toast?.[variant]?.icon?.url;
         if (themeIconUrl) {
           return /* @__PURE__ */ React3__default.default.createElement(exports.Icon, { src: themeIconUrl });
         }
@@ -315,8 +323,8 @@ var init_toastManager = __esm({
     pointer-events: auto;
   }
 
-  ${({ $placement, theme: theme2 }) => {
-      const offset = theme2.components?.toast?.offset || { vertical: "24px", horizontal: "24px" };
+  ${({ $placement, theme: theme3 }) => {
+      const offset = theme3.components?.toast?.offset || { vertical: "24px", horizontal: "24px" };
       const vertical = offset.vertical || "24px";
       const horizontal = offset.horizontal || "24px";
       const styles = {
@@ -521,8 +529,8 @@ var globalTheme, registerGlobalTheme; exports.getGlobalTheme = void 0; var globa
 var init_context = __esm({
   "src/utils/context.ts"() {
     globalTheme = {};
-    registerGlobalTheme = (theme2) => {
-      Object.assign(globalTheme, { ...globalTheme, ...theme2 });
+    registerGlobalTheme = (theme3) => {
+      Object.assign(globalTheme, { ...globalTheme, ...theme3 });
     };
     exports.getGlobalTheme = () => {
       return globalTheme;
@@ -589,8 +597,8 @@ var init_Button = __esm({
   justify-content: center;
   flex-shrink: 0;
 
-  ${({ $size, $iconPlacement, theme: theme2 }) => {
-      const buttonConfig = theme2.components.button[$size || "medium"];
+  ${({ $size, $iconPlacement, theme: theme3 }) => {
+      const buttonConfig = theme3.components.button[$size || "medium"];
       const sizeConfig = buttonConfig?.withIcon || buttonConfig;
       const marginSide = $iconPlacement === "before" ? "margin-right" : "margin-left";
       return `
@@ -607,8 +615,8 @@ var init_Button = __esm({
     }}
 `;
     TextWrapper = exports.styled.span`
-  ${({ $size, theme: theme2 }) => {
-      const buttonConfig = theme2.components.button[$size || "medium"];
+  ${({ $size, theme: theme3 }) => {
+      const buttonConfig = theme3.components.button[$size || "medium"];
       const sizeConfig = buttonConfig?.withIcon || buttonConfig;
       return `
       padding: ${sizeConfig.textPadding || "0"};
@@ -621,8 +629,8 @@ var init_Button = __esm({
   justify-content: center;
   flex-shrink: 0;
 
-  ${({ $size, theme: theme2 }) => {
-      const buttonConfig = theme2.components.button[$size || "medium"];
+  ${({ $size, theme: theme3 }) => {
+      const buttonConfig = theme3.components.button[$size || "medium"];
       const sizeConfig = buttonConfig?.onlyIcon || buttonConfig;
       return `
       width: ${sizeConfig.iconSize?.width || "14px"};
@@ -646,14 +654,14 @@ var init_Button = __esm({
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 
   /* Size variants */
-  ${({ $size, $variant, theme: theme2 }) => {
+  ${({ $size, $variant, theme: theme3 }) => {
       const sizeName = $size || "medium";
-      const buttonConfig = theme2.components.button[sizeName];
+      const buttonConfig = theme3.components.button[sizeName];
       if ($variant === "icon") {
         const sizeConfig2 = buttonConfig?.onlyIcon || buttonConfig;
         return `
         padding: ${sizeConfig2.padding || "7px"};
-        border-radius: ${sizeConfig2.borderRadius || theme2.borderRadius.small};
+        border-radius: ${sizeConfig2.borderRadius || theme3.borderRadius.small};
       `;
       }
       const sizeConfig = buttonConfig?.withIcon || buttonConfig;
@@ -667,10 +675,10 @@ var init_Button = __esm({
     }}
 
   /* Variant and color type styles */
-  ${({ $variant, $colorType, $iconBordered, theme: theme2 }) => {
+  ${({ $variant, $colorType, $iconBordered, theme: theme3 }) => {
       if ($variant === "icon") {
         const baseVariant = $iconBordered ? "outlined" : "text";
-        const styles2 = theme2.components.button[baseVariant]["default"];
+        const styles2 = theme3.components.button[baseVariant]["default"];
         return `
         background: ${styles2.background};
         color: ${styles2.color};
@@ -708,7 +716,7 @@ var init_Button = __esm({
         );
       }
       const effectiveColorType = colorType === "status" && variant !== "text" ? "default" : colorType;
-      const styles = theme2.components.button[variant][effectiveColorType];
+      const styles = theme3.components.button[variant][effectiveColorType];
       return `
       background: ${styles.background};
       color: ${styles.color};
@@ -791,7 +799,7 @@ var init_Slider = __esm({
   left: 0;
   right: 0;
   height: 2px;
-  background: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["20"]};
+  background: ${({ theme: theme3 }) => theme3.colors.palettes.transparency["20"]};
   border-radius: 1000px;
   top: 50%;
   transform: translateY(-50%);
@@ -804,14 +812,14 @@ var init_Slider = __esm({
   top: 50%;
   transform: translateY(-50%);
   width: ${({ $percentage }) => $percentage}%;
-  background: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.colors.palettes.transparency["10"] : theme2.colors.palettes.gray["100"]};
+  background: ${({ $disabled, theme: theme3 }) => $disabled ? theme3.colors.palettes.transparency["10"] : theme3.colors.palettes.gray["100"]};
 `;
     SliderThumb = exports.styled.div`
   position: absolute;
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.colors.palettes.transparency["30"] : theme2.colors.palettes.blue["5"]};
+  background: ${({ $disabled, theme: theme3 }) => $disabled ? theme3.colors.palettes.transparency["30"] : theme3.colors.palettes.blue["5"]};
   left: ${({ $percentage }) => $percentage}%;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -983,29 +991,29 @@ var init_NumberInput = __esm({
     width: 80px;
   `}
 
-  ${({ $disabled, $alert, $isFocused, theme: theme2 }) => {
+  ${({ $disabled, $alert, $isFocused, theme: theme3 }) => {
       if ($disabled) {
         return `
-        border-color: ${theme2.colors.palettes.transparency["10"]};
+        border-color: ${theme3.colors.palettes.transparency["10"]};
         cursor: not-allowed;
       `;
       }
       if ($alert) {
         return `
-        border-color: ${theme2.colors.palettes.red["6"]};
+        border-color: ${theme3.colors.palettes.red["6"]};
       `;
       }
       if ($isFocused) {
         return `
-        border-color: ${theme2.colors.palettes.transparency["30"]};
+        border-color: ${theme3.colors.palettes.transparency["30"]};
         box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
       `;
       }
       return `
-      border-color: ${theme2.colors.palettes.transparency["10"]};
+      border-color: ${theme3.colors.palettes.transparency["10"]};
 
       &:hover {
-        border-color: ${theme2.colors.palettes.transparency["20"]};
+        border-color: ${theme3.colors.palettes.transparency["20"]};
         box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
       }
     `;
@@ -1031,10 +1039,10 @@ var init_NumberInput = __esm({
     font-size: 13px;
   `}
 
-  ${({ $disabled, theme: theme2 }) => $disabled ? `
-    color: ${theme2.colors.palettes.transparency["30"]};
+  ${({ $disabled, theme: theme3 }) => $disabled ? `
+    color: ${theme3.colors.palettes.transparency["30"]};
   ` : `
-    color: ${theme2.colors.palettes.gray["120"]};
+    color: ${theme3.colors.palettes.gray["120"]};
   `}
 `;
     StyledInput = exports.styled.input`
@@ -1054,15 +1062,15 @@ var init_NumberInput = __esm({
     font-size: 13px;
   `}
 
-  ${({ $disabled, theme: theme2 }) => $disabled ? `
-    color: ${theme2.colors.palettes.transparency["30"]};
+  ${({ $disabled, theme: theme3 }) => $disabled ? `
+    color: ${theme3.colors.palettes.transparency["30"]};
     cursor: not-allowed;
   ` : `
-    color: ${theme2.colors.palettes.gray["120"]};
+    color: ${theme3.colors.palettes.gray["120"]};
   `}
 
   &::placeholder {
-    color: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["30"]};
+    color: ${({ theme: theme3 }) => theme3.colors.palettes.transparency["30"]};
   }
 
   /* Remove number input arrows */
@@ -1084,14 +1092,14 @@ var init_NumberInput = __esm({
   border-left: 1px solid;
   flex-shrink: 0;
 
-  ${({ $disabled, $alert, theme: theme2 }) => {
+  ${({ $disabled, $alert, theme: theme3 }) => {
       if ($disabled) {
-        return `border-color: ${theme2.colors.palettes.transparency["10"]};`;
+        return `border-color: ${theme3.colors.palettes.transparency["10"]};`;
       }
       if ($alert) {
-        return `border-color: ${theme2.colors.palettes.red["6"]};`;
+        return `border-color: ${theme3.colors.palettes.red["6"]};`;
       }
-      return `border-color: ${theme2.colors.palettes.transparency["10"]};`;
+      return `border-color: ${theme3.colors.palettes.transparency["10"]};`;
     }}
 `;
     StepButton = exports.styled.button`
@@ -1107,16 +1115,16 @@ var init_NumberInput = __esm({
   min-height: 0;
   overflow: hidden;
 
-  ${({ $position, $alert, $disabled, theme: theme2 }) => {
+  ${({ $position, $alert, $disabled, theme: theme3 }) => {
       if ($position === "up") {
         return `
-        border-bottom: 1px solid ${$disabled ? theme2.colors.palettes.transparency["10"] : $alert ? theme2.colors.palettes.red["6"] : theme2.colors.palettes.transparency["10"]};
+        border-bottom: 1px solid ${$disabled ? theme3.colors.palettes.transparency["10"] : $alert ? theme3.colors.palettes.red["6"] : theme3.colors.palettes.transparency["10"]};
       `;
       }
       return "";
     }}
 
-  ${({ $disabled, theme: theme2 }) => {
+  ${({ $disabled, theme: theme3 }) => {
       if ($disabled) {
         return `
         cursor: not-allowed;
@@ -1125,11 +1133,11 @@ var init_NumberInput = __esm({
       }
       return `
       &:hover {
-        background-color: ${theme2.colors.palettes.transparency["5"]};
+        background-color: ${theme3.colors.palettes.transparency["5"]};
       }
 
       &:active {
-        background-color: ${theme2.colors.palettes.transparency["10"]};
+        background-color: ${theme3.colors.palettes.transparency["10"]};
       }
     `;
     }}
@@ -1137,7 +1145,7 @@ var init_NumberInput = __esm({
   svg {
     width: 14px;
     height: 14px;
-    fill: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.colors.palettes.transparency["30"] : theme2.colors.palettes.gray["120"]};
+    fill: ${({ $disabled, theme: theme3 }) => $disabled ? theme3.colors.palettes.transparency["30"] : theme3.colors.palettes.gray["120"]};
   }
 `;
     UpArrow = () => /* @__PURE__ */ React3__default.default.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3__default.default.createElement("path", { d: "M7 4.5L10.5 8.5H3.5L7 4.5Z", fill: "currentColor" }));
@@ -1405,8 +1413,8 @@ var SwitchContainer = exports.styled.label`
   display: inline-block;
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
 
-  ${({ $size, theme: theme2 }) => {
-  const sizeConfig = theme2.components.switch[$size];
+  ${({ $size, theme: theme3 }) => {
+  const sizeConfig = theme3.components.switch[$size];
   return `
       width: ${sizeConfig.container.width};
       height: ${sizeConfig.container.height};
@@ -1426,10 +1434,10 @@ var Track = exports.styled.div`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  transition: ${({ theme: theme2 }) => theme2.components.switch.transition || "all 0.2s ease"};
+  transition: ${({ theme: theme3 }) => theme3.components.switch.transition || "all 0.2s ease"};
 
-  ${({ $size, theme: theme2 }) => {
-  const sizeConfig = theme2.components.switch[$size];
+  ${({ $size, theme: theme3 }) => {
+  const sizeConfig = theme3.components.switch[$size];
   return `
       border-radius: ${sizeConfig.track.borderRadius};
       width: ${sizeConfig.track.width};
@@ -1437,8 +1445,8 @@ var Track = exports.styled.div`
     `;
 }}
 
-  ${({ $checked, $disabled, theme: theme2 }) => {
-  const stateConfig = $checked ? theme2.components.switch.on : theme2.components.switch.off;
+  ${({ $checked, $disabled, theme: theme3 }) => {
+  const stateConfig = $checked ? theme3.components.switch.on : theme3.components.switch.off;
   if ($disabled) {
     return `
         background: ${stateConfig.track.backgroundDisabled};
@@ -1451,9 +1459,9 @@ var Track = exports.styled.div`
     `;
 }}
 
-  ${({ $disabled, $checked, theme: theme2 }) => {
+  ${({ $disabled, $checked, theme: theme3 }) => {
   if ($disabled) return "";
-  const stateConfig = $checked ? theme2.components.switch.on : theme2.components.switch.off;
+  const stateConfig = $checked ? theme3.components.switch.on : theme3.components.switch.off;
   return `
       :hover {
         background: ${stateConfig.track.backgroundHover};
@@ -1465,28 +1473,33 @@ var Track = exports.styled.div`
 var Thumb = exports.styled.div`
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
   border-style: solid;
   box-sizing: border-box;
-  transition: ${({ theme: theme2 }) => theme2.components.switch.transition || "all 0.2s ease"};
+  left: 0;
+  transition: ${({ theme: theme3 }) => theme3.components.switch.transition || "all 0.2s ease"};
 
-  ${({ $size, $checked, theme: theme2 }) => {
-  const sizeConfig = theme2.components.switch[$size];
+  ${({ $size, $checked, theme: theme3 }) => {
+  const sizeConfig = theme3.components.switch[$size];
   const thumbSize = sizeConfig.thumb.size;
   const thumbOffset = sizeConfig.thumb.offset;
   const thumbBorderRadius = sizeConfig.thumb.borderRadius;
   const thumbBorderWidth = sizeConfig.thumb.borderWidth;
+  const trackWidth = sizeConfig.container.width;
+  const thumbSizeNum = parseFloat(thumbSize);
+  const offsetNum = parseFloat(thumbOffset);
+  const trackWidthNum = parseFloat(trackWidth);
+  const leftPosition = $checked ? `${trackWidthNum - thumbSizeNum - offsetNum}px` : thumbOffset;
   return `
       width: ${thumbSize};
       height: ${thumbSize};
       border-radius: ${thumbBorderRadius};
       border-width: ${thumbBorderWidth};
-      ${$checked ? "right" : "left"}: ${thumbOffset};
+      transform: translate(${leftPosition}, -50%);
     `;
 }}
 
-  ${({ $checked, $disabled, theme: theme2 }) => {
-  const stateConfig = $checked ? theme2.components.switch.on : theme2.components.switch.off;
+  ${({ $checked, $disabled, theme: theme3 }) => {
+  const stateConfig = $checked ? theme3.components.switch.on : theme3.components.switch.off;
   if ($disabled) {
     return `
         background: ${stateConfig.thumb.backgroundDisabled};
@@ -1501,9 +1514,9 @@ var Thumb = exports.styled.div`
     `;
 }}
 
-  ${({ $disabled, $checked, theme: theme2 }) => {
+  ${({ $disabled, $checked, theme: theme3 }) => {
   if ($disabled) return "";
-  const stateConfig = $checked ? theme2.components.switch.on : theme2.components.switch.off;
+  const stateConfig = $checked ? theme3.components.switch.on : theme3.components.switch.off;
   return `
       :hover & {
         background: ${stateConfig.thumb.backgroundHover};
@@ -1593,8 +1606,8 @@ var RadioContainer = exports.styled.label`
   display: inline-block;
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
 
-  ${({ theme: theme2 }) => {
-  const sizeConfig = theme2.components.radio.small;
+  ${({ theme: theme3 }) => {
+  const sizeConfig = theme3.components.radio.small;
   return `
       width: ${sizeConfig.size};
       height: ${sizeConfig.size};
@@ -1615,31 +1628,31 @@ var RadioOuter = exports.styled.div`
   border: 1px solid;
   transition: all 0.2s ease;
 
-  ${({ $checked, $disabled, theme: theme2 }) => {
+  ${({ $checked, $disabled, theme: theme3 }) => {
   if ($disabled) {
-    const stateConfig = $checked ? theme2.components.radio.checked : theme2.components.radio.unchecked;
+    const stateConfig = $checked ? theme3.components.radio.checked : theme3.components.radio.unchecked;
     return `
         background: ${stateConfig.backgroundDisabled};
         border-color: ${stateConfig.borderColorDisabled};
       `;
   }
   if ($checked) {
-    const checkedConfig = theme2.components.radio.checked;
+    const checkedConfig = theme3.components.radio.checked;
     return `
         background: ${checkedConfig.background};
         border-color: ${checkedConfig.borderColor};
       `;
   }
-  const uncheckedConfig = theme2.components.radio.unchecked;
+  const uncheckedConfig = theme3.components.radio.unchecked;
   return `
       background: ${uncheckedConfig.background};
       border-color: ${uncheckedConfig.borderColor};
     `;
 }}
 
-  ${({ $disabled, $checked, theme: theme2 }) => {
+  ${({ $disabled, $checked, theme: theme3 }) => {
   if ($disabled) return "";
-  const stateConfig = $checked ? theme2.components.radio.checked : theme2.components.radio.unchecked;
+  const stateConfig = $checked ? theme3.components.radio.checked : theme3.components.radio.unchecked;
   return `
       ${RadioContainer}:hover & {
         background: ${stateConfig.backgroundHover};
@@ -1662,8 +1675,8 @@ var RadioInner = exports.styled.div`
   opacity: ${({ $checked }) => $checked ? 1 : 0};
   transition: opacity 0.2s ease;
 
-  ${({ theme: theme2 }) => {
-  const dotSize = theme2.components.radio.small.dotSize;
+  ${({ theme: theme3 }) => {
+  const dotSize = theme3.components.radio.small.dotSize;
   return `
       width: ${dotSize};
       height: ${dotSize};
@@ -1750,8 +1763,8 @@ var CheckboxContainer = exports.styled.label`
   display: inline-block;
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
 
-  ${({ theme: theme2 }) => {
-  const sizeConfig = theme2.components.checkbox.small;
+  ${({ theme: theme3 }) => {
+  const sizeConfig = theme3.components.checkbox.small;
   return `
       width: ${sizeConfig.size};
       height: ${sizeConfig.size};
@@ -1771,45 +1784,45 @@ var CheckboxBox = exports.styled.div`
   border: 1px solid;
   transition: all 0.2s ease;
 
-  ${({ theme: theme2 }) => {
-  const sizeConfig = theme2.components.checkbox.small;
+  ${({ theme: theme3 }) => {
+  const sizeConfig = theme3.components.checkbox.small;
   return `
       border-radius: ${sizeConfig.borderRadius};
     `;
 }}
 
-  ${({ $checked, $indeterminate, $disabled, theme: theme2 }) => {
+  ${({ $checked, $indeterminate, $disabled, theme: theme3 }) => {
   if ($disabled) {
-    const stateConfig = $checked || $indeterminate ? theme2.components.checkbox.checked : theme2.components.checkbox.unchecked;
+    const stateConfig = $checked || $indeterminate ? theme3.components.checkbox.checked : theme3.components.checkbox.unchecked;
     return `
         background: ${stateConfig.backgroundDisabled};
         border-color: ${stateConfig.borderColorDisabled};
       `;
   }
   if ($checked) {
-    const checkedConfig = theme2.components.checkbox.checked;
+    const checkedConfig = theme3.components.checkbox.checked;
     return `
         background: ${checkedConfig.background};
         border-color: ${checkedConfig.borderColor};
       `;
   }
   if ($indeterminate) {
-    const indeterminateConfig = theme2.components.checkbox.indeterminate;
+    const indeterminateConfig = theme3.components.checkbox.indeterminate;
     return `
         background: ${indeterminateConfig.background};
         border-color: ${indeterminateConfig.borderColor};
       `;
   }
-  const uncheckedConfig = theme2.components.checkbox.unchecked;
+  const uncheckedConfig = theme3.components.checkbox.unchecked;
   return `
       background: ${uncheckedConfig.background};
       border-color: ${uncheckedConfig.borderColor};
     `;
 }}
 
-  ${({ $disabled, $checked, $indeterminate, theme: theme2 }) => {
+  ${({ $disabled, $checked, $indeterminate, theme: theme3 }) => {
   if ($disabled) return "";
-  const stateConfig = $checked || $indeterminate ? theme2.components.checkbox.checked : theme2.components.checkbox.unchecked;
+  const stateConfig = $checked || $indeterminate ? theme3.components.checkbox.checked : theme3.components.checkbox.unchecked;
   return `
       ${CheckboxContainer}:hover & {
         background: ${stateConfig.backgroundHover};
@@ -1834,8 +1847,8 @@ var IconWrapper3 = exports.styled.div`
   align-items: center;
   justify-content: center;
 
-  ${({ theme: theme2 }) => {
-  const iconSize = theme2.components.checkbox.small.iconSize;
+  ${({ theme: theme3 }) => {
+  const iconSize = theme3.components.checkbox.small.iconSize;
   return `
       width: ${iconSize.width};
       height: ${iconSize.height};
@@ -1933,28 +1946,51 @@ init_Slider2();
 
 // src/Input/Input.tsx
 init_styled();
+var InputContainer = exports.styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+
+  ${({ $size, $lineType, theme: theme3 }) => {
+  const size = $size || "medium";
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const sizeConfig = typeConfig?.[size];
+  if (!sizeConfig) return "";
+  return `
+      height: ${sizeConfig.height};
+    `;
+}}
+`;
 var InputWrapper2 = exports.styled.div`
   display: inline-flex;
   align-items: center;
   width: 100%;
   box-sizing: border-box;
   position: relative;
+  flex: 1;
   transition: all 0.2s ease;
 
-  ${({ $size, theme: theme2 }) => {
+  ${({ $size, $lineType, theme: theme3 }) => {
   const size = $size || "medium";
-  const sizeConfig = theme2.components.input.outlined[size];
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const sizeConfig = typeConfig?.[size];
+  if (!sizeConfig) return "";
   return `
       height: ${sizeConfig.height};
-      border-radius: ${sizeConfig.borderRadius};
       padding: ${sizeConfig.padding};
-      font-size: ${sizeConfig.fontSize};
-      line-height: ${sizeConfig.lineHeight};
+      gap: ${sizeConfig.gap || "4px"};
+      ${$lineType === "outlined" ? `
+        border-radius: ${sizeConfig.borderRadius};
+      ` : ""}
     `;
 }}
 
-  ${({ $error, $disabled, $readOnly, $isFocused, theme: theme2, $size }) => {
-  const stateConfig = theme2.components.input.outlined.state;
+  ${({ $error, $disabled, $readOnly, $isFocused, $lineType, theme: theme3, $size }) => {
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const stateConfig = typeConfig?.state;
+  if (!stateConfig) return "";
   let borderColor = stateConfig.borderColor;
   let background = stateConfig.background;
   let boxShadow = "none";
@@ -1962,36 +1998,69 @@ var InputWrapper2 = exports.styled.div`
     borderColor = stateConfig.borderColorDisabled;
     background = stateConfig.backgroundDisabled;
   } else if ($readOnly) {
-    borderColor = stateConfig.borderColorReadonly;
-    background = stateConfig.backgroundReadonly;
+    borderColor = stateConfig.borderColorReadonly || stateConfig.borderColor;
+    background = stateConfig.backgroundReadonly || stateConfig.background;
   } else if ($error) {
     borderColor = stateConfig.borderColorError;
-    background = stateConfig.backgroundActive;
+    background = $lineType === "outlined" ? stateConfig.backgroundActive : stateConfig.background;
   } else if ($isFocused) {
     borderColor = stateConfig.borderColorActive;
     background = stateConfig.backgroundActive;
-    const size = $size || "medium";
-    boxShadow = theme2.components.input.outlined[size].boxShadowActive;
+    if ($lineType === "outlined") {
+      const size = $size || "medium";
+      const sizeConfig = typeConfig?.[size];
+      boxShadow = sizeConfig?.boxShadowActive || "none";
+    }
   }
-  return `
-      border: 1px solid ${borderColor};
-      background: ${background};
-      box-shadow: ${boxShadow};
+  if ($lineType === "outlined") {
+    return `
+        border: 1px solid ${borderColor};
+        background: ${background};
+        box-shadow: ${boxShadow};
 
-      &:hover:not(:disabled) {
-        ${!$disabled && !$readOnly && !$isFocused ? `
-          border-color: ${stateConfig.borderColorHover};
-          background: ${stateConfig.backgroundHover};
-        ` : ""}
-      }
-    `;
+        &:hover:not(:disabled) {
+          ${!$disabled && !$readOnly && !$isFocused ? `
+            border-color: ${stateConfig.borderColorHover};
+            background: ${stateConfig.backgroundHover};
+          ` : ""}
+        }
+      `;
+  } else {
+    return `
+        background: ${background};
+        border-bottom: 1px solid ${$error ? borderColor : $isFocused ? borderColor : "transparent"};
+
+        &:hover:not(:disabled) {
+          ${!$disabled && !$isFocused && !$error ? `
+            border-bottom-color: ${stateConfig.borderColorHover};
+          ` : ""}
+        }
+      `;
+  }
 }}
 
   ${({ $disabled }) => $disabled && `
     cursor: not-allowed;
-    opacity: 1;
+    opacity: ${$disabled ? "0.6" : "1"};
   `}
 `;
+var ContentBlock = exports.styled.div`
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+
+  ${({ $size, $lineType, theme: theme3 }) => {
+  const size = $size || "medium";
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const sizeConfig = typeConfig?.[size];
+  if (!sizeConfig) return "";
+  return `
+      padding: ${sizeConfig.contentPadding || "0"};
+      gap: ${sizeConfig.gap || "4px"};
+    `;
+}}
+`;
 var StyledInput2 = exports.styled.input`
   flex: 1;
   border: none;
@@ -2001,24 +2070,31 @@ var StyledInput2 = exports.styled.input`
   padding: 0;
   margin: 0;
   font-family: inherit;
-  color: ${({ theme: theme2 }) => theme2.components.input.outlined.state.borderColorActive};
 
-  ${({ $size, theme: theme2 }) => {
+  ${({ $size, $lineType, $disabled, theme: theme3 }) => {
   const size = $size || "medium";
-  const sizeConfig = theme2.components.input.outlined[size];
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const sizeConfig = typeConfig?.[size];
+  const stateConfig = typeConfig?.state;
+  if (!sizeConfig || !stateConfig) return "";
+  const textColor = $disabled ? stateConfig.textColorDisabled : stateConfig.textColorNormal;
   return `
       font-size: ${sizeConfig.fontSize};
       line-height: ${sizeConfig.lineHeight};
+      color: ${textColor};
     `;
 }}
 
   &::placeholder {
-    color: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["30"]};
+    color: ${({ $isFocused, $lineType, theme: theme3 }) => {
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const stateConfig = typeConfig?.state;
+  return $isFocused ? stateConfig?.placeholderColorHover || "rgba(65, 70, 75, 0.3)" : stateConfig?.placeholderColorNormal || "rgba(65, 70, 75, 0.3)";
+}};
   }
 
-  ${({ $disabled, theme: theme2 }) => $disabled && `
+  ${({ $disabled }) => $disabled && `
     cursor: not-allowed;
-    color: ${theme2.colors.palettes.transparency["30"]};
   `}
 
   ${({ $readOnly }) => $readOnly && `
@@ -2029,11 +2105,12 @@ var PrefixNode = exports.styled.div`
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
-  margin-right: 4px;
 
-  ${({ $size, theme: theme2 }) => {
+  ${({ $size, $lineType, theme: theme3 }) => {
   const size = $size || "medium";
-  const sizeConfig = theme2.components.input.outlined[size];
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const sizeConfig = typeConfig?.[size];
+  if (!sizeConfig) return "";
   return `
       svg, img {
         width: ${sizeConfig.iconSize.width};
@@ -2046,11 +2123,12 @@ var SuffixNode = exports.styled.div`
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
-  margin-left: 4px;
 
-  ${({ $size, theme: theme2 }) => {
+  ${({ $size, $lineType, theme: theme3 }) => {
   const size = $size || "medium";
-  const sizeConfig = theme2.components.input.outlined[size];
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const sizeConfig = typeConfig?.[size];
+  if (!sizeConfig) return "";
   return `
       svg, img {
         width: ${sizeConfig.iconSize.width};
@@ -2059,21 +2137,87 @@ var SuffixNode = exports.styled.div`
     `;
 }}
 `;
+var ClearButton = exports.styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  transition: opacity 0.2s ease;
+
+  ${({ $size, $lineType, theme: theme3 }) => {
+  const size = $size || "medium";
+  const typeConfig = $lineType === "underlined" ? theme3.components?.input?.underlined : theme3.components?.input?.outlined;
+  const sizeConfig = typeConfig?.[size];
+  const clearIconSize = sizeConfig?.clearIcon?.size;
+  if (!clearIconSize) return "";
+  return `
+      width: ${clearIconSize.width};
+      height: ${clearIconSize.height};
+
+      svg {
+        width: ${clearIconSize.width};
+        height: ${clearIconSize.height};
+      }
+    `;
+}}
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  &:active {
+    opacity: 0.5;
+  }
+`;
+var AlertLine = exports.styled.div`
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: ${({ theme: theme3 }) => theme3.colors?.palettes?.red?.["6"] || "#E95555"};
+`;
+var DefaultClearIcon = () => /* @__PURE__ */ React3__default.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React3__default.default.createElement(
+  "path",
+  {
+    d: "M8.00148 8.56042L11.3306 11.8884L11.8961 11.3226L8.56774 7.99531L11.8641 4.70566L11.299 4.1394L8.00196 7.42971L4.70055 4.12939L4.13495 4.69517L7.4357 7.99483L4.10889 11.3149L4.674 11.8812L8.00148 8.56042Z",
+    fill: "#41464B",
+    fillOpacity: "0.6"
+  }
+));
 var Input = React3.forwardRef(
   ({
+    lineType = "outlined",
     size = "medium",
     error = false,
     disabled = false,
     readOnly = false,
     prefixNode,
     suffixNode,
+    clearable = false,
+    onClear,
+    clearIcon,
     className,
     style,
     onFocus,
     onBlur,
+    value,
+    onChange,
     ...rest
   }, ref) => {
     const [isFocused, setIsFocused] = React3.useState(false);
+    const [internalValue, setInternalValue] = React3.useState(
+      value !== void 0 ? value : rest.defaultValue || ""
+    );
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? value : internalValue;
+    const hasValue = !!currentValue && String(currentValue).length > 0;
     const handleFocus = (e) => {
       setIsFocused(true);
       onFocus?.(e);
@@ -2082,189 +2226,137 @@ var Input = React3.forwardRef(
       setIsFocused(false);
       onBlur?.(e);
     };
-    return /* @__PURE__ */ React3__default.default.createElement(
+    const handleChange = (e) => {
+      if (!isControlled) {
+        setInternalValue(e.target.value);
+      }
+      onChange?.(e);
+    };
+    const handleClear = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!isControlled) {
+        setInternalValue("");
+      }
+      if (onChange && ref && "current" in ref && ref.current) {
+        const syntheticEvent = {
+          target: { ...ref.current, value: "" },
+          currentTarget: ref.current
+        };
+        onChange(syntheticEvent);
+      }
+      onClear?.();
+    };
+    const shouldShowClearButton = clearable && hasValue && !disabled && !readOnly;
+    const clearButtonNode = shouldShowClearButton ? /* @__PURE__ */ React3__default.default.createElement(
+      ClearButton,
+      {
+        type: "button",
+        $size: size,
+        $lineType: lineType,
+        onClick: handleClear,
+        "aria-label": "Clear",
+        tabIndex: -1
+      },
+      clearIcon || /* @__PURE__ */ React3__default.default.createElement(DefaultClearIcon, null)
+    ) : null;
+    return /* @__PURE__ */ React3__default.default.createElement(InputContainer, { $size: size, $lineType: lineType, className, style }, /* @__PURE__ */ React3__default.default.createElement(
       InputWrapper2,
       {
         $size: size,
+        $lineType: lineType,
         $error: error,
         $disabled: !!disabled,
         $readOnly: !!readOnly,
-        $isFocused: isFocused,
-        className,
-        style
+        $isFocused: isFocused
       },
-      prefixNode && /* @__PURE__ */ React3__default.default.createElement(PrefixNode, { $size: size }, prefixNode),
-      /* @__PURE__ */ React3__default.default.createElement(
+      prefixNode && /* @__PURE__ */ React3__default.default.createElement(PrefixNode, { $size: size, $lineType: lineType }, prefixNode),
+      /* @__PURE__ */ React3__default.default.createElement(ContentBlock, { $size: size, $lineType: lineType }, /* @__PURE__ */ React3__default.default.createElement(
         StyledInput2,
         {
           ref,
           $size: size,
+          $lineType: lineType,
           $disabled: !!disabled,
           $readOnly: !!readOnly,
+          $isFocused: isFocused,
           disabled,
           readOnly,
+          value: currentValue,
+          onChange: handleChange,
           onFocus: handleFocus,
           onBlur: handleBlur,
           ...rest
         }
-      ),
-      suffixNode && /* @__PURE__ */ React3__default.default.createElement(SuffixNode, { $size: size }, suffixNode)
-    );
+      ), clearButtonNode),
+      suffixNode && /* @__PURE__ */ React3__default.default.createElement(SuffixNode, { $size: size, $lineType: lineType }, suffixNode)
+    ), lineType === "underlined" && error && /* @__PURE__ */ React3__default.default.createElement(AlertLine, null));
   }
 );
 Input.displayName = "Input";
 
 // src/Input/SearchInput.tsx
 init_styled();
+init_Icon2();
+init_context();
 var SearchIconWrapper = exports.styled.div`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 
-  ${({ $size, theme: theme2 }) => {
-  const sizeConfig = theme2.components.input.outlined[$size === "extraLarge" ? "extraLarge" : "large"];
-  return `
-      width: ${sizeConfig.iconSize.width};
-      height: ${sizeConfig.iconSize.height};
-    `;
-}}
-
-  svg {
-    width: 100%;
-    height: 100%;
-    color: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["100"]};
-  }
-`;
-var ClearButton = exports.styled.button`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
-  outline: none;
-  transition: opacity 0.2s ease;
-
-  ${({ $size, theme: theme2 }) => {
-  const sizeConfig = theme2.components.input.outlined[$size === "extraLarge" ? "extraLarge" : "large"];
-  return `
-      width: ${sizeConfig.iconSize.width};
-      height: ${sizeConfig.iconSize.height};
-    `;
-}}
-
   svg {
     width: 100%;
     height: 100%;
-    color: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["100"]};
-  }
-
-  &:hover {
-    opacity: 0.7;
-  }
-
-  &:active {
-    opacity: 0.5;
+    color: ${({ theme: theme3 }) => theme3.colors?.palettes?.transparency?.["100"] || "#41464b"};
   }
 `;
-var DefaultSearchIcon = () => /* @__PURE__ */ React3__default.default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3__default.default.createElement(
-  "path",
-  {
-    d: "M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-), /* @__PURE__ */ React3__default.default.createElement(
-  "path",
-  {
-    d: "M14 14L11.1 11.1",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-));
-var DefaultCloseIcon = () => /* @__PURE__ */ React3__default.default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3__default.default.createElement(
-  "path",
-  {
-    d: "M12 4L4 12",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-), /* @__PURE__ */ React3__default.default.createElement(
-  "path",
-  {
-    d: "M4 4L12 12",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-));
+var DefaultSearchIcon = () => /* @__PURE__ */ React3__default.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React3__default.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.92359 14.0468C9.40656 14.0468 10.7664 13.5197 11.826 12.6426L13.0034 13.8199C12.8604 14.2604 12.9638 14.7635 13.3138 15.1134L14.4012 16.2008C14.8981 16.6977 15.7036 16.6977 16.2004 16.2008C16.6973 15.704 16.6973 14.8985 16.2004 14.4017L15.113 13.3143C14.7549 12.9562 14.2364 12.8562 13.7887 13.0143L12.6234 11.849C13.5122 10.7862 14.0471 9.41727 14.0471 7.92343C14.0471 4.54158 11.3055 1.80005 7.92359 1.80005C4.54165 1.80005 1.80005 4.54158 1.80005 7.92343C1.80005 11.3053 4.54165 14.0468 7.92359 14.0468ZM7.92359 12.6968C10.56 12.6968 12.6971 10.5597 12.6971 7.92343C12.6971 5.2872 10.56 3.15005 7.92359 3.15005C5.2872 3.15005 3.15005 5.2872 3.15005 7.92343C3.15005 10.5597 5.2872 12.6968 7.92359 12.6968Z", fill: "#41464B" }));
 var SearchInput = React3.forwardRef(
   ({
-    size = "extraLarge",
+    lineType = "outlined",
+    size = "medium",
     clearable = true,
     onClear,
     searchIcon,
-    value,
-    defaultValue,
-    onChange,
-    disabled,
-    readOnly,
     ...rest
   }, ref) => {
-    const [internalValue, setInternalValue] = React3.useState(defaultValue || "");
-    const isControlled = value !== void 0;
-    const currentValue = isControlled ? value : internalValue;
-    const handleChange = (e) => {
-      if (!isControlled) {
-        setInternalValue(e.target.value);
+    const getSearchIconElement = () => {
+      if (searchIcon !== void 0) {
+        if (typeof searchIcon === "string") {
+          return /* @__PURE__ */ React3__default.default.createElement(exports.Icon, { src: searchIcon });
+        }
+        return searchIcon;
       }
-      onChange?.(e);
-    };
-    const handleClear = () => {
-      if (!isControlled) {
-        setInternalValue("");
+      const theme3 = exports.getGlobalTheme();
+      const themeIconUrl = theme3?.components?.inputSearch?.searchIcon?.url;
+      if (themeIconUrl) {
+        return /* @__PURE__ */ React3__default.default.createElement(exports.Icon, { src: themeIconUrl });
       }
-      onClear?.();
+      return /* @__PURE__ */ React3__default.default.createElement(DefaultSearchIcon, null);
     };
-    const prefixNode = /* @__PURE__ */ React3__default.default.createElement(SearchIconWrapper, { $size: size }, searchIcon || /* @__PURE__ */ React3__default.default.createElement(DefaultSearchIcon, null));
-    const suffixNode = clearable && currentValue && !disabled && !readOnly ? /* @__PURE__ */ React3__default.default.createElement(
-      ClearButton,
-      {
-        $size: size,
-        onClick: handleClear,
-        type: "button",
-        tabIndex: -1
-      },
-      /* @__PURE__ */ React3__default.default.createElement(DefaultCloseIcon, null)
-    ) : null;
+    const prefixNode = /* @__PURE__ */ React3__default.default.createElement(SearchIconWrapper, null, getSearchIconElement());
     return /* @__PURE__ */ React3__default.default.createElement(
       Input,
       {
         ref,
+        lineType,
         size,
         prefixNode,
-        suffixNode,
-        value: isControlled ? value : internalValue,
-        onChange: handleChange,
-        disabled,
-        readOnly,
+        clearable,
+        onClear,
         ...rest
       }
     );
   }
 );
 SearchInput.displayName = "SearchInput";
+var UnderlinedInput = React3.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React3__default.default.createElement(Input, { ...props, lineType: "underlined", ref });
+  }
+);
+UnderlinedInput.displayName = "UnderlinedInput";
 
 // src/index.ts
 init_NumberInput2();
@@ -2289,8 +2381,8 @@ var ToastWrapper2 = exports.styled.div`
     pointer-events: auto;
   }
 
-  ${({ $placement, theme: theme2 }) => {
-  const offset = theme2.components?.toast?.offset || { vertical: "24px", horizontal: "24px" };
+  ${({ $placement, theme: theme3 }) => {
+  const offset = theme3.components?.toast?.offset || { vertical: "24px", horizontal: "24px" };
   const vertical = offset.vertical || "24px";
   const horizontal = offset.horizontal || "24px";
   const styles = {
@@ -2399,8 +2491,8 @@ var TabList = exports.styled.div`
   align-items: center;
   position: relative;
 
-  ${({ $variant, theme: theme2 }) => {
-  const variantConfig = theme2.components.tab[$variant];
+  ${({ $variant, theme: theme3 }) => {
+  const variantConfig = theme3.components.tab[$variant];
   return `
       gap: ${variantConfig.layout.gap};
     `;
@@ -2427,8 +2519,8 @@ var TabItem = exports.styled.button`
   position: relative;
   white-space: nowrap;
 
-  ${({ theme: theme2 }) => {
-  const sizeConfig = theme2.components.tab.large;
+  ${({ theme: theme3 }) => {
+  const sizeConfig = theme3.components.tab.large;
   return `
       height: ${sizeConfig.height};
       padding: ${sizeConfig.padding};
@@ -2439,8 +2531,8 @@ var TabItem = exports.styled.button`
     `;
 }}
 
-  ${({ $variant, $active, $disabled, theme: theme2 }) => {
-  const variantConfig = theme2.components.tab[$variant];
+  ${({ $variant, $active, $disabled, theme: theme3 }) => {
+  const variantConfig = theme3.components.tab[$variant];
   const itemConfig = variantConfig.item;
   if ($disabled) {
     return `
@@ -2463,9 +2555,9 @@ var TabItem = exports.styled.button`
     `;
 }}
 
-  ${({ $variant, $disabled, theme: theme2 }) => {
+  ${({ $variant, $disabled, theme: theme3 }) => {
   if ($disabled) return "";
-  const variantConfig = theme2.components.tab[$variant];
+  const variantConfig = theme3.components.tab[$variant];
   const itemConfig = variantConfig.item;
   return `
       &:hover {
@@ -2917,8 +3009,8 @@ var ToolbarButtonContainer = exports.styled.div`
   transition: border-color 0.15s ease;
   box-sizing: border-box;
 
-  ${({ $disabled, $active, theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ $disabled, $active, theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   if ($disabled) {
     return `
         border-color: ${config.border.borderColorDisabled};
@@ -2962,16 +3054,16 @@ var MainButton = exports.styled.button`
   outline: none;
   transition: background-color 0.15s ease;
 
-  ${({ $hasLabel, theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ $hasLabel, theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return `
       height: ${config.layout.height};
       padding: ${$hasLabel ? config.layout.content.padding : config.layout.padding};
     `;
 }}
 
-  ${({ $disabled, $active, theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ $disabled, $active, theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   if ($disabled) {
     return `
         cursor: not-allowed;
@@ -3002,16 +3094,16 @@ var IconWrapper4 = exports.styled.span`
   justify-content: center;
   flex-shrink: 0;
 
-  ${({ theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return `
       width: ${config.layout.content.iconSize.width};
       height: ${config.layout.content.iconSize.height};
     `;
 }}
 
-  ${({ $disabled, theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ $disabled, theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return $disabled ? `
     color: ${config.color.colorDisabled};
   ` : `
@@ -3029,8 +3121,8 @@ var LabelText = exports.styled.span`
   font-family: 'PingFang SC', sans-serif;
   white-space: nowrap;
 
-  ${({ theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return `
       font-size: ${config.typography.fontSize};
       font-weight: ${config.typography.fontWeight};
@@ -3039,8 +3131,8 @@ var LabelText = exports.styled.span`
     `;
 }}
 
-  ${({ $disabled, theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ $disabled, theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return $disabled ? `
     color: ${config.color.colorDisabled};
   ` : `
@@ -3057,16 +3149,16 @@ var DropdownButton = exports.styled.button`
   border: none;
   transition: background-color 0.15s ease;
 
-  ${({ theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return `
       height: ${config.layout.height};
       padding: 5px 0;
     `;
 }}
 
-  ${({ $disabled, theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ $disabled, theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   if ($disabled) {
     return `
         cursor: not-allowed;
@@ -3092,16 +3184,16 @@ var DropdownArrow = exports.styled.span`
   justify-content: center;
   flex-shrink: 0;
 
-  ${({ theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return `
       width: ${config.layout.dropdown.iconSize.width};
       height: ${config.layout.dropdown.iconSize.height};
     `;
 }}
 
-  ${({ $disabled, theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ $disabled, theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return $disabled ? `
     color: ${config.color.colorDisabled};
   ` : `
@@ -3116,15 +3208,15 @@ var Divider = exports.styled.div`
   width: 1px;
   transition: background-color 0.15s ease;
 
-  ${({ theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   return `
       height: ${config.layout.height};
     `;
 }}
 
-  ${({ $disabled, $active, theme: theme2 }) => {
-  const config = theme2.components.toolbarButton;
+  ${({ $disabled, $active, theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
   if ($disabled) {
     return `
         background-color: ${config.border.borderColorDisabled};
@@ -3252,6 +3344,884 @@ var ToolbarButton = ({
 };
 ToolbarButton.displayName = "ToolbarButton";
 
+// src/dropdown/DropdownButton.tsx
+init_styled();
+init_Icon2();
+var DropdownButtonContainer = exports.styled.button`
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+  font-family: 'PingFang SC', sans-serif;
+
+  ${({ $size, theme: theme3 }) => {
+  const config = theme3.components?.dropdownButton;
+  const sizeConfig = config?.size?.[$size];
+  if (!sizeConfig) return "";
+  return `
+      height: ${sizeConfig.height};
+      padding: ${sizeConfig.padding};
+      gap: ${sizeConfig.gap};
+      font-size: ${sizeConfig.fontSize};
+    `;
+}}
+
+  ${({ $variant, $disabled, $error, theme: theme3 }) => {
+  const config = theme3.components?.dropdownButton;
+  if (!config) return "";
+  let background = config.background.normal;
+  if ($disabled) {
+    background = config.background.disabled;
+  }
+  let border = "none";
+  const borderRadius = config.borderRadius || "4px";
+  if ($variant === "framed") {
+    const borderColor = $error ? theme3.colors?.palettes?.red?.["6"] : theme3.colors?.palettes?.transparency?.["10"];
+    border = `1px solid ${borderColor}`;
+  }
+  const color = $disabled ? config.color.disabled : config.color.normal;
+  return `
+      background: ${background};
+      border: ${border};
+      border-radius: ${borderRadius};
+      color: ${color};
+
+      &:hover:not(:disabled) {
+        background: ${config.background.hover};
+        ${$variant === "framed" && !$error ? `
+          border-color: ${theme3.colors?.palettes?.transparency?.["20"]};
+        ` : ""}
+      }
+
+      &:active:not(:disabled) {
+        background: ${config.background.active};
+        ${$variant === "framed" && !$error ? `
+          border-color: ${theme3.colors?.palettes?.transparency?.["30"]};
+        ` : ""}
+      }
+    `;
+}}
+
+  ${({ $disabled }) => $disabled && `
+    cursor: not-allowed;
+  `}
+`;
+var IconWrapper5 = exports.styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${({ $size, theme: theme3 }) => {
+  const config = theme3.components?.dropdownButton;
+  const sizeConfig = config?.size?.[$size];
+  if (!sizeConfig) return "";
+  return `
+      width: ${sizeConfig.iconSize.width};
+      height: ${sizeConfig.iconSize.height};
+
+      svg, img {
+        width: ${sizeConfig.iconSize.width};
+        height: ${sizeConfig.iconSize.height};
+      }
+    `;
+}}
+
+  ${({ theme: theme3 }) => {
+  const config = theme3.components?.dropdownButton;
+  return `
+      color: ${config?.color?.normal || "#41464b"};
+    `;
+}}
+`;
+var TextContent = exports.styled.div`
+  flex: 1;
+  min-width: 0; /* Important: allows flex item to shrink below content size */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  line-height: 20px;
+
+  ${({ $hasValue, $disabled, theme: theme3 }) => {
+  const config = theme3.components?.dropdownButton;
+  const color = $disabled ? config?.color?.disabled : config?.color?.normal;
+  return `
+      color: ${color};
+      ${!$hasValue ? `opacity: 0.3;` : ""}
+    `;
+}}
+`;
+var IndicatorWrapper = exports.styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+
+  ${({ $size, theme: theme3 }) => {
+  const config = theme3.components?.dropdownButton;
+  const sizeConfig = config?.size?.[$size];
+  if (!sizeConfig) return "";
+  return `
+      width: ${sizeConfig.indicatorSize.width};
+      height: ${sizeConfig.indicatorSize.height};
+    `;
+}}
+
+  ${({ $open, theme: theme3 }) => {
+  const config = theme3.components?.dropdownButton?.indicator;
+  const rotate = config?.rotate || "90deg";
+  return `
+      transform: rotate(${$open ? rotate : 0});
+    `;
+}}
+
+  ${({ $disabled, theme: theme3 }) => {
+  const config = theme3.components?.dropdownButton?.indicator?.opacity;
+  const opacity = $disabled ? config?.disabled || "0.3" : config?.normal || "1";
+  return `
+      opacity: ${opacity};
+      color: ${theme3.components?.dropdownButton?.color?.normal || "#41464b"};
+    `;
+}}
+`;
+var DefaultArrowIcon = () => /* @__PURE__ */ React3__default.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React3__default.default.createElement(
+  "path",
+  {
+    d: "M11.5975 8.81186C11.7113 8.91146 11.7113 9.08854 11.5975 9.18814L7.72713 12.5747C7.56548 12.7161 7.3125 12.6013 7.3125 12.3866L7.3125 5.61344C7.3125 5.39865 7.56548 5.28386 7.72713 5.4253L11.5975 8.81186Z",
+    fill: "#41464B"
+  }
+));
+var DropdownButton2 = React3.forwardRef(
+  ({
+    variant = "framed",
+    size,
+    value,
+    placeholder = "Select...",
+    icon,
+    indicatorIcon,
+    open = false,
+    disabled = false,
+    error = false,
+    className,
+    style,
+    textStyle,
+    onClick,
+    ...rest
+  }, ref) => {
+    const effectiveSize = size || (variant === "framed" ? "large" : "medium");
+    const hasValue = !!value;
+    const getIconElement = () => {
+      if (!icon) return null;
+      if (typeof icon === "string") {
+        return /* @__PURE__ */ React3__default.default.createElement(exports.Icon, { src: icon });
+      }
+      return icon;
+    };
+    const iconElement = getIconElement();
+    return /* @__PURE__ */ React3__default.default.createElement(
+      DropdownButtonContainer,
+      {
+        ref,
+        type: "button",
+        $variant: variant,
+        $size: effectiveSize,
+        $disabled: disabled,
+        $open: open,
+        $error: error,
+        disabled,
+        onClick,
+        className,
+        style,
+        ...rest
+      },
+      iconElement && /* @__PURE__ */ React3__default.default.createElement(IconWrapper5, { $size: effectiveSize }, iconElement),
+      /* @__PURE__ */ React3__default.default.createElement(TextContent, { $disabled: disabled, $hasValue: hasValue, style: textStyle }, value || placeholder),
+      /* @__PURE__ */ React3__default.default.createElement(IndicatorWrapper, { $size: effectiveSize, $open: open, $disabled: disabled }, indicatorIcon || /* @__PURE__ */ React3__default.default.createElement(DefaultArrowIcon, null))
+    );
+  }
+);
+DropdownButton2.displayName = "DropdownButton";
+
+// src/dropdown/Menu.tsx
+init_styled();
+init_Icon2();
+var MenuContainer = exports.styled.div`
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 220px;
+
+  ${({ theme: theme3 }) => {
+  const dropdownConfig = theme3.components?.dropdown;
+  const menuConfig = theme3.components?.menu;
+  return `
+      background: ${dropdownConfig?.background || "#fff"};
+      border: ${menuConfig?.border?.width || "1px"} solid ${menuConfig?.border?.color || "rgba(65, 70, 75, 0.1)"};
+      border-radius: ${menuConfig?.border?.radius || "4px"};
+      box-shadow: ${dropdownConfig?.boxShadow || "0 2px 8px rgba(0, 0, 0, 0.15)"};
+    `;
+}}
+
+  /* Ensure virtual list container has proper width */
+  .rc-virtual-list {
+    width: 100%;
+  }
+
+  .rc-virtual-list-holder {
+    width: 100%;
+  }
+
+  .rc-virtual-list-holder-inner {
+    width: 100%;
+  }
+`;
+var SearchBoxContainer = exports.styled.div`
+  padding: 8px 12px;
+  border-bottom: 1px solid ${({ theme: theme3 }) => theme3.colors?.palettes?.transparency?.["10"]};
+`;
+var SearchIcon = () => /* @__PURE__ */ React3__default.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React3__default.default.createElement(
+  "path",
+  {
+    d: "M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+), /* @__PURE__ */ React3__default.default.createElement(
+  "path",
+  {
+    d: "M14 14L11.1 11.1",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
+var MenuItemContent = exports.styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  ${({ theme: theme3 }) => {
+  const config = theme3.components?.menu?.menuItem;
+  return `
+      gap: ${config?.layout?.gap || "8px"};
+    `;
+}}
+`;
+var IconContainer2 = exports.styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${({ theme: theme3 }) => {
+  const iconSize = theme3.components?.menu?.menuItem?.icon?.size;
+  return `
+      width: ${iconSize?.width || "18px"};
+      height: ${iconSize?.height || "18px"};
+
+      svg, img {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+}}
+`;
+var ContentBlock2 = exports.styled.div`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-width: 0;
+`;
+var LabelText2 = exports.styled.div`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 20px;
+
+  ${({ $size, $disabled, theme: theme3 }) => {
+  const config = theme3.components?.menu?.menuItem;
+  const sizeConfig = config?.size?.[$size];
+  const colorConfig = config?.label?.color;
+  const fontSize = sizeConfig?.label?.fontSize || "13px";
+  const color = $disabled ? colorConfig?.disabled || "rgba(65, 70, 75, 0.3)" : colorConfig?.normal || "#41464b";
+  return `
+      font-size: ${fontSize};
+      color: ${color};
+    `;
+}}
+`;
+var DescriptionText = exports.styled.div`
+  flex: 0 0 auto;
+  white-space: nowrap;
+  line-height: 20px;
+  text-align: right;
+
+  ${({ $size, $disabled, theme: theme3 }) => {
+  const config = theme3.components?.menu?.menuItem;
+  const sizeConfig = config?.size?.[$size];
+  const colorConfig = config?.description?.color;
+  const fontSize = sizeConfig?.description?.fontSize || "10px";
+  const color = $disabled ? colorConfig?.disabled || "rgba(65, 70, 75, 0.3)" : colorConfig?.normal || "rgba(65, 70, 75, 0.6)";
+  return `
+      font-size: ${fontSize};
+      color: ${color};
+    `;
+}}
+`;
+var ActiveIconContainer = exports.styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${({ $size, theme: theme3 }) => {
+  const sizeConfig = theme3.components?.menu?.menuItem?.size?.[$size];
+  const iconSize = sizeConfig?.activeIcon?.size;
+  return `
+      width: ${iconSize?.width || "18px"};
+      height: ${iconSize?.height || "18px"};
+    `;
+}}
+
+  ${({ $visible, $placeholder }) => {
+  if (!$visible && !$placeholder) {
+    return "display: none;";
+  }
+  if ($placeholder && !$visible) {
+    return "visibility: hidden;";
+  }
+  return "";
+}}
+`;
+var NextLevelIconContainer = exports.styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${({ $size, theme: theme3 }) => {
+  const sizeConfig = theme3.components?.menu?.menuItem?.size?.[$size];
+  const iconSize = sizeConfig?.nextLevelIcon?.size;
+  return `
+      width: ${iconSize?.width || "18px"};
+      height: ${iconSize?.height || "18px"};
+    `;
+}}
+`;
+var CheckmarkIcon = () => /* @__PURE__ */ React3__default.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React3__default.default.createElement(
+  "path",
+  {
+    d: "M14.25 5.25L7.125 12.375L3.75 9",
+    stroke: "#41464B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
+var ArrowIcon2 = () => /* @__PURE__ */ React3__default.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React3__default.default.createElement(
+  "path",
+  {
+    d: "M6.75 4.5L11.25 9L6.75 13.5",
+    stroke: "#41464B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
+var Menu = ({
+  items,
+  selectedKeys = [],
+  openKeys,
+  size = "large",
+  searchable = false,
+  searchPlaceholder = "Enter search content",
+  maxHeight = 300,
+  virtual = false,
+  reserveActiveIconSpace = true,
+  onSelect,
+  onSearch,
+  onOpenChange,
+  className,
+  style
+}) => {
+  const [searchValue, setSearchValue] = React3.useState("");
+  const handleSearch = (value) => {
+    setSearchValue(value);
+    onSearch?.(value);
+  };
+  const filteredItems = React3.useMemo(() => {
+    if (!searchValue) return items;
+    const searchLower = searchValue.toLowerCase();
+    const filterMenuItem = (item) => {
+      if (item.label.toLowerCase().includes(searchLower) || item.description?.toLowerCase().includes(searchLower)) {
+        return item;
+      }
+      if (item.children && item.children.length > 0) {
+        const filteredChildren = item.children.map((child) => filterMenuItem(child)).filter(Boolean);
+        if (filteredChildren.length > 0) {
+          return { ...item, children: filteredChildren };
+        }
+      }
+      return null;
+    };
+    const filterItem = (item) => {
+      if (item.type === "divider") return null;
+      if (item.type === "group") {
+        const filteredChildren = item.children.map((child) => filterMenuItem(child)).filter(Boolean);
+        if (filteredChildren.length > 0) {
+          return { ...item, children: filteredChildren };
+        }
+        return null;
+      }
+      return filterMenuItem(item);
+    };
+    return items.map((item) => filterItem(item)).filter(Boolean);
+  }, [items, searchValue]);
+  const renderMenuItemContent = (item, reserveSpace) => {
+    const isSelected = item.selected || selectedKeys.includes(item.key);
+    const isSelectable = item.selectable !== false;
+    const shouldShowActiveIcon = isSelectable && isSelected;
+    const shouldReserveSpace = reserveSpace || isSelectable;
+    const iconElement = item.icon ? /* @__PURE__ */ React3__default.default.createElement(IconContainer2, { $size: size }, typeof item.icon === "string" ? /* @__PURE__ */ React3__default.default.createElement(exports.Icon, { src: item.icon }) : item.icon) : null;
+    return /* @__PURE__ */ React3__default.default.createElement(MenuItemContent, { $size: size }, iconElement, /* @__PURE__ */ React3__default.default.createElement(ContentBlock2, null, /* @__PURE__ */ React3__default.default.createElement(LabelText2, { $size: size, $disabled: !!item.disabled }, item.label), item.description && /* @__PURE__ */ React3__default.default.createElement(DescriptionText, { $size: size, $disabled: !!item.disabled }, item.description)), /* @__PURE__ */ React3__default.default.createElement(
+      ActiveIconContainer,
+      {
+        $size: size,
+        $visible: shouldShowActiveIcon,
+        $placeholder: shouldReserveSpace && !shouldShowActiveIcon
+      },
+      shouldShowActiveIcon && /* @__PURE__ */ React3__default.default.createElement(CheckmarkIcon, null)
+    ), item.children && item.children.length > 0 && /* @__PURE__ */ React3__default.default.createElement(NextLevelIconContainer, { $size: size }, /* @__PURE__ */ React3__default.default.createElement(ArrowIcon2, null)));
+  };
+  const renderItem = (item) => {
+    if (item.type === "divider") {
+      return /* @__PURE__ */ React3__default.default.createElement(RcMenu.Divider, { key: item.key });
+    }
+    if (item.type === "group") {
+      return /* @__PURE__ */ React3__default.default.createElement(RcMenu.ItemGroup, { key: item.key, title: item.label }, item.children.map((child) => renderMenuItem(child)));
+    }
+    return renderMenuItem(item);
+  };
+  const renderMenuItem = (item) => {
+    if (item.children && item.children.length > 0) {
+      return /* @__PURE__ */ React3__default.default.createElement(
+        RcMenu.SubMenu,
+        {
+          key: item.key,
+          title: renderMenuItemContent(item, reserveActiveIconSpace),
+          disabled: item.disabled,
+          popupOffset: [5, 0]
+        },
+        item.children.map((child) => renderMenuItem(child))
+      );
+    }
+    return /* @__PURE__ */ React3__default.default.createElement(
+      RcMenu.MenuItem,
+      {
+        key: item.key,
+        disabled: item.disabled,
+        onClick: () => {
+          item.onClick?.(item.key);
+          onSelect?.(item.key);
+        }
+      },
+      renderMenuItemContent(item, reserveActiveIconSpace)
+    );
+  };
+  const itemHeight = size === "medium" ? 28 : 36;
+  const menuKey = openKeys?.join(",") || "menu";
+  return /* @__PURE__ */ React3__default.default.createElement(MenuContainer, { className, style }, searchable && /* @__PURE__ */ React3__default.default.createElement(SearchBoxContainer, null, /* @__PURE__ */ React3__default.default.createElement(
+    Input,
+    {
+      lineType: "underlined",
+      size: "small",
+      placeholder: searchPlaceholder,
+      value: searchValue,
+      onChange: (e) => handleSearch(e.target.value),
+      clearable: true,
+      onClear: () => handleSearch(""),
+      prefixNode: /* @__PURE__ */ React3__default.default.createElement(SearchIcon, null)
+    }
+  )), virtual && filteredItems.length > 10 ? /* @__PURE__ */ React3__default.default.createElement(
+    VirtualList__default.default,
+    {
+      data: filteredItems,
+      height: maxHeight,
+      itemHeight,
+      itemKey: "key",
+      fullHeight: false,
+      style: { width: "100%" }
+    },
+    (item) => /* @__PURE__ */ React3__default.default.createElement(
+      RcMenu__default.default,
+      {
+        key: menuKey,
+        prefixCls: "od-menu",
+        mode: "vertical",
+        selectedKeys,
+        openKeys,
+        onOpenChange,
+        triggerSubMenuAction: "hover",
+        expandIcon: null,
+        style: {
+          border: "none",
+          background: "transparent",
+          padding: 0
+        }
+      },
+      renderItem(item)
+    )
+  ) : /* @__PURE__ */ React3__default.default.createElement(
+    RcMenu__default.default,
+    {
+      key: menuKey,
+      prefixCls: "od-menu",
+      mode: "vertical",
+      selectedKeys,
+      openKeys,
+      onOpenChange,
+      triggerSubMenuAction: "hover",
+      expandIcon: null,
+      style: {
+        border: "none",
+        background: "transparent"
+      }
+    },
+    filteredItems.map(renderItem)
+  ));
+};
+Menu.displayName = "Menu";
+var Dropdown = ({
+  overlay,
+  trigger = ["click"],
+  placement = "bottomLeft",
+  visible: controlledVisible,
+  defaultVisible = false,
+  onVisibleChange,
+  children,
+  overlayClassName,
+  getPopupContainer,
+  ...rest
+}) => {
+  const [internalVisible, setInternalVisible] = React3.useState(defaultVisible);
+  const isControlled = controlledVisible !== void 0;
+  const isVisible = isControlled ? controlledVisible : internalVisible;
+  const handleVisibleChange = (visible) => {
+    if (!isControlled) {
+      setInternalVisible(visible);
+    }
+    onVisibleChange?.(visible);
+  };
+  return /* @__PURE__ */ React3__default.default.createElement(
+    RcDropdown__default.default,
+    {
+      overlay: overlay || /* @__PURE__ */ React3__default.default.createElement("div", null),
+      trigger,
+      placement,
+      visible: isVisible,
+      onVisibleChange: handleVisibleChange,
+      prefixCls: "od-dropdown",
+      overlayClassName,
+      getPopupContainer,
+      ...rest
+    },
+    children
+  );
+};
+Dropdown.displayName = "Dropdown";
+
+// src/dropdown/globalStyle.ts
+init_context();
+var theme2 = exports.getGlobalTheme();
+var DropdownGlobalStyles = baseStyled.createGlobalStyle`
+  /* Dropdown container */
+  .od-dropdown {
+    position: absolute;
+    z-index: 1050;
+  }
+
+  .od-dropdown-hidden {
+    display: none;
+  }
+
+  /* Dropdown slide animations */
+  .od-dropdown-slide-up-enter,
+  .od-dropdown-slide-up-appear {
+    animation-duration: 0.2s;
+    animation-fill-mode: both;
+    animation-play-state: paused;
+  }
+
+  .od-dropdown-slide-up-leave {
+    animation-duration: 0.2s;
+    animation-fill-mode: both;
+    animation-play-state: paused;
+  }
+
+  .od-dropdown-slide-up-enter.od-dropdown-slide-up-enter-active,
+  .od-dropdown-slide-up-appear.od-dropdown-slide-up-appear-active {
+    animation-name: rcDropdownSlideUpIn;
+    animation-play-state: running;
+  }
+
+  .od-dropdown-slide-up-leave.od-dropdown-slide-up-leave-active {
+    animation-name: rcDropdownSlideUpOut;
+    animation-play-state: running;
+  }
+
+  @keyframes rcDropdownSlideUpIn {
+    0% {
+      opacity: 0;
+      transform: scaleY(0.8);
+    }
+    100% {
+      opacity: 1;
+      transform: scaleY(1);
+    }
+  }
+
+  @keyframes rcDropdownSlideUpOut {
+    0% {
+      opacity: 1;
+      transform: scaleY(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scaleY(0.8);
+    }
+  }
+`;
+var MenuGlobalStyles = baseStyled.createGlobalStyle`
+  /* Base menu container */
+  .od-menu {
+    margin: 0;
+    padding: ${() => theme2.components?.dropdown?.padding || "4px 0"};
+    list-style: none;
+    outline: none;
+    box-shadow: none;
+    background: transparent;
+    border: none;
+  }
+
+  .od-menu-hidden {
+    display: none;
+  }
+
+  /* Menu item */
+  .od-menu-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    user-select: none;
+    list-style: none;
+
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
+  return `
+        padding: ${config?.layout?.padding || "6px 12px"};
+        background: ${config?.background?.normal || "transparent"};
+      `;
+}}
+  }
+
+  .od-menu-item:hover {
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
+  return `
+        background: ${config?.background?.hover || "rgba(65, 70, 75, 0.05)"};
+      `;
+}}
+  }
+
+  .od-menu-item-active,
+  .od-menu-item-selected {
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
+  return `
+        background: ${config?.background?.active || "rgba(65, 70, 75, 0.1)"};
+      `;
+}}
+  }
+
+  .od-menu-item-disabled {
+    cursor: not-allowed;
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
+  return `
+        background: ${config?.background?.disabled || "transparent"};
+      `;
+}}
+  }
+
+  .od-menu-item-disabled:hover {
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
+  return `
+        background: ${config?.background?.disabled || "transparent"};
+      `;
+}}
+  }
+
+  /* SubMenu */
+  .od-menu-submenu {
+    position: relative;
+    list-style: none;
+  }
+
+  .od-menu-submenu-title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    user-select: none;
+
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
+  return `
+        padding: ${config?.layout?.padding || "6px 12px"};
+        background: ${config?.background?.normal || "transparent"};
+      `;
+}}
+  }
+
+  .od-menu-submenu-title:hover {
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
+  return `
+        background: ${config?.background?.hover || "rgba(65, 70, 75, 0.05)"};
+      `;
+}}
+  }
+
+  .od-menu-submenu-open > .od-menu-submenu-title {
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
+  return `
+        background: ${config?.background?.active || "rgba(65, 70, 75, 0.1)"};
+      `;
+}}
+  }
+
+  .od-menu-submenu-disabled .od-menu-submenu-title {
+    cursor: not-allowed;
+    ${() => {
+  const config = theme2.components?.menu?.menuItem;
+  return `
+        background: ${config?.background?.disabled || "transparent"};
+      `;
+}}
+  }
+
+  /* Submenu popup */
+  .od-menu-submenu-popup {
+    position: absolute;
+    z-index: 1050;
+  }
+
+  /* Submenu popup positioning - add 5px gap */
+  .od-menu-submenu-placement-rightTop,
+  .od-menu-submenu-placement-rightBottom {
+    padding-left: 5px;
+  }
+
+  .od-menu-submenu-placement-leftTop,
+  .od-menu-submenu-placement-leftBottom {
+    padding-right: 5px;
+  }
+
+  .od-menu-submenu > .od-menu {
+    ${() => {
+  const dropdownConfig = theme2.components?.dropdown;
+  const menuConfig = theme2.components?.menu;
+  return `
+        background: ${dropdownConfig?.background || "#fff"};
+        border: ${menuConfig?.border?.width || "1px"} solid ${menuConfig?.border?.color || "rgba(65, 70, 75, 0.1)"};
+        border-radius: ${menuConfig?.border?.radius || "4px"};
+        box-shadow: ${dropdownConfig?.boxShadow || "0 2px 8px rgba(0, 0, 0, 0.15)"};
+      `;
+}}
+  }
+
+  /* Item Group */
+  .od-menu-item-group-title {
+    padding: 8px 12px 4px;
+    user-select: none;
+    list-style: none;
+
+    ${() => {
+  const config = theme2.components?.menu?.groupTitle;
+  return `
+        font-size: ${config?.fontSize || "12px"};
+        font-weight: ${config?.fontWeight || "500"};
+        color: ${config?.color || "rgba(65, 70, 75, 0.6)"};
+        line-height: 20px;
+      `;
+}}
+  }
+
+  .od-menu-item-group-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* Divider */
+  .od-menu-item-divider {
+    overflow: hidden;
+    line-height: 0;
+    list-style: none;
+
+    ${() => {
+  const config = theme2.components?.menu?.divider;
+  return `
+        height: ${config?.height || "1px"};
+        background: ${config?.background || "rgba(65, 70, 75, 0.1)"};
+        margin: ${config?.margin || "4px 0"};
+      `;
+}}
+  }
+
+  /* Animation */
+  .od-menu-submenu-inline {
+    border: 0;
+    box-shadow: none;
+  }
+
+  .od-menu-submenu-inline > .od-menu {
+    padding: 0;
+    border: 0;
+    box-shadow: none;
+  }
+
+  /* Collapse animation */
+  .od-menu-submenu-inline-collapsed {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+
+  .od-menu-submenu-inline-collapsed-active {
+    max-height: 1000px;
+  }
+`;
+
 // src/UIConfigProvider/UIConfigProvider.tsx
 init_IconProvider();
 init_context();
@@ -3276,7 +4246,9 @@ var UIConfigProvider = ({ config, children }) => {
     defaultDuration: toast2.defaultDuration ?? 3e3
   };
   const TooltipStyles = TooltipGlobalStyles;
-  return /* @__PURE__ */ React3__default.default.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React3__default.default.createElement(TooltipStyles, null), /* @__PURE__ */ React3__default.default.createElement(exports.IconProvider, { icons }, /* @__PURE__ */ React3__default.default.createElement(
+  const MenuStyles = MenuGlobalStyles;
+  const DropdownStyles = DropdownGlobalStyles;
+  return /* @__PURE__ */ React3__default.default.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React3__default.default.createElement(TooltipStyles, null), /* @__PURE__ */ React3__default.default.createElement(MenuStyles, null), /* @__PURE__ */ React3__default.default.createElement(DropdownStyles, null), /* @__PURE__ */ React3__default.default.createElement(exports.IconProvider, { icons }, /* @__PURE__ */ React3__default.default.createElement(
     ToastContainer2,
     {
       maxCount: toastConfig.maxCount,
@@ -3366,7 +4338,12 @@ init_styled();
 init_context();
 
 exports.Checkbox = Checkbox;
+exports.Dropdown = Dropdown;
+exports.DropdownButton = DropdownButton2;
+exports.DropdownGlobalStyles = DropdownGlobalStyles;
 exports.Input = Input;
+exports.Menu = Menu;
+exports.MenuGlobalStyles = MenuGlobalStyles;
 exports.Radio = Radio;
 exports.SearchInput = SearchInput;
 exports.Switch = Switch;
@@ -3375,6 +4352,7 @@ exports.ToastContainer = ToastContainer2;
 exports.ToolbarButton = ToolbarButton;
 exports.Tooltip = Tooltip;
 exports.UIConfigProvider = UIConfigProvider;
+exports.UnderlinedInput = UnderlinedInput;
 exports.createUIConfig = createUIConfig;
 exports.mergeUIConfig = mergeUIConfig;
 exports.useToast = useToast;