@officesdk/design 0.2.0 → 0.2.2

package/dist/theme/{index.mjs → esm/index.js}

@@ -187,6 +187,25 @@ var colors = {
     purple: palettes.purple,
     gray: palettes.gray,
     transparency: palettes.transparency
+  },
+  text: {
+    content: palettes.transparency["120"],
+    default: palettes.transparency["100"],
+    medium: palettes.transparency["80"],
+    secondary: palettes.transparency["60"],
+    disabled: palettes.transparency["30"],
+    white: palettes.gray["0"],
+    alert: palettes.red["6"],
+    guidance: palettes.blue["6"]
+  },
+  decorate: {
+    june: "#DE7F83",
+    july: "#F3833A",
+    october: "#C3AB7C",
+    february: "#80BE7F",
+    november: "#7AE6F5",
+    december: "#3861AF",
+    april: "#9C8EC1"
   }
 };
 var boxShadow = {
@@ -293,20 +312,6 @@ var typography = {
 
 // src/light/components/button.ts
 var button = {
-  icons: {
-    close: {
-      url: "",
-      size: { width: "16px", height: "16px" }
-    },
-    clear: {
-      url: "",
-      size: { width: "16px", height: "16px" }
-    },
-    search: {
-      url: "",
-      size: { width: "16px", height: "16px" }
-    }
-  },
   solid: {
     default: {
       background: `linear-gradient(0deg, ${colors.palettes.gray["120"]} 0%, ${colors.palettes.gray["90"]} 100%)`,
@@ -318,10 +323,10 @@ var button = {
       boxShadowHover: "none",
       boxShadowActive: "none",
       boxShadowDisabled: "none",
-      borderColor: "transparent",
-      borderColorHover: "transparent",
-      borderColorActive: "transparent",
-      borderColorDisabled: "transparent",
+      borderColor: colors.palettes.transparency["10"],
+      borderColorHover: colors.palettes.transparency["20"],
+      borderColorActive: colors.palettes.transparency["30"],
+      borderColorDisabled: colors.palettes.transparency["10"],
       fontWeight: 500,
       colorHover: colors.palettes.gray["0"],
       colorActive: colors.palettes.gray["0"],
@@ -337,10 +342,10 @@ var button = {
       boxShadowHover: "none",
       boxShadowActive: "none",
       boxShadowDisabled: "none",
-      borderColor: "transparent",
-      borderColorHover: "transparent",
-      borderColorActive: "transparent",
-      borderColorDisabled: "transparent",
+      borderColor: colors.palettes.transparency["10"],
+      borderColorHover: colors.palettes.transparency["20"],
+      borderColorActive: colors.palettes.transparency["30"],
+      borderColorDisabled: colors.palettes.transparency["10"],
       fontWeight: 500,
       colorHover: colors.palettes.gray["0"],
       colorActive: colors.palettes.gray["0"],
@@ -356,10 +361,10 @@ var button = {
       boxShadowHover: "none",
       boxShadowActive: "none",
       boxShadowDisabled: "none",
-      borderColor: "transparent",
-      borderColorHover: "transparent",
-      borderColorActive: "transparent",
-      borderColorDisabled: "transparent",
+      borderColor: colors.palettes.transparency["10"],
+      borderColorHover: colors.palettes.transparency["20"],
+      borderColorActive: colors.palettes.transparency["30"],
+      borderColorDisabled: colors.palettes.transparency["10"],
       fontWeight: 500,
       colorHover: colors.palettes.gray["0"],
       colorActive: colors.palettes.gray["0"],
@@ -382,9 +387,9 @@ var button = {
       borderColorActive: colors.palettes.transparency["30"],
       borderColorDisabled: colors.palettes.transparency["10"],
       fontWeight: 500,
-      colorHover: colors.palettes.gray["0"],
-      colorActive: colors.palettes.gray["0"],
-      colorDisabled: colors.palettes.gray["0"]
+      colorHover: colors.palettes.brand,
+      colorActive: colors.palettes.brand,
+      colorDisabled: colors.palettes.transparency["30"]
     },
     guidance: {
       background: `linear-gradient(0deg, ${colors.palettes.gray["5"]} 0%, ${colors.palettes.gray["0"]} 100%)`,
@@ -401,9 +406,9 @@ var button = {
       borderColorActive: colors.palettes.transparency["30"],
       borderColorDisabled: colors.palettes.transparency["10"],
       fontWeight: 500,
-      colorHover: colors.palettes.gray["0"],
-      colorActive: colors.palettes.gray["0"],
-      colorDisabled: colors.palettes.gray["0"]
+      colorHover: colors.palettes.blue["6"],
+      colorActive: colors.palettes.blue["6"],
+      colorDisabled: colors.palettes.transparency["30"]
     },
     alert: {
       background: `linear-gradient(0deg, ${colors.palettes.gray["5"]} 0%, ${colors.palettes.gray["0"]} 100%)`,
@@ -420,9 +425,9 @@ var button = {
       borderColorActive: colors.palettes.transparency["30"],
       borderColorDisabled: colors.palettes.transparency["10"],
       fontWeight: 500,
-      colorHover: colors.palettes.gray["0"],
-      colorActive: colors.palettes.gray["0"],
-      colorDisabled: colors.palettes.gray["0"]
+      colorHover: colors.palettes.red["6"],
+      colorActive: colors.palettes.red["6"],
+      colorDisabled: colors.palettes.transparency["30"]
     }
   },
   text: {
@@ -440,15 +445,15 @@ var button = {
       borderColorHover: "transparent",
       borderColorActive: "transparent",
       borderColorDisabled: "transparent",
-      fontWeight: 500,
-      colorHover: colors.palettes.gray["0"],
-      colorActive: colors.palettes.gray["0"],
-      colorDisabled: colors.palettes.gray["0"]
+      fontWeight: 400,
+      colorHover: colors.palettes.brand,
+      colorActive: colors.palettes.brand,
+      colorDisabled: colors.palettes.transparency["30"]
     },
     guidance: {
       background: "transparent",
-      backgroundHover: colors.palettes.blue["1"],
-      backgroundActive: colors.palettes.blue["2"],
+      backgroundHover: colors.palettes.transparency["5"],
+      backgroundActive: colors.palettes.transparency["10"],
       backgroundDisabled: "transparent",
       color: colors.palettes.blue["6"],
       boxShadow: "none",
@@ -459,15 +464,15 @@ var button = {
       borderColorHover: "transparent",
       borderColorActive: "transparent",
       borderColorDisabled: "transparent",
-      fontWeight: 500,
-      colorHover: colors.palettes.gray["0"],
-      colorActive: colors.palettes.gray["0"],
-      colorDisabled: colors.palettes.gray["0"]
+      fontWeight: 400,
+      colorHover: colors.palettes.blue["6"],
+      colorActive: colors.palettes.blue["6"],
+      colorDisabled: colors.palettes.transparency["30"]
     },
     alert: {
       background: "transparent",
-      backgroundHover: colors.palettes.red["1"],
-      backgroundActive: colors.palettes.red["2"],
+      backgroundHover: colors.palettes.transparency["5"],
+      backgroundActive: colors.palettes.transparency["10"],
       backgroundDisabled: "transparent",
       color: colors.palettes.red["6"],
       boxShadow: "none",
@@ -478,10 +483,10 @@ var button = {
       borderColorHover: "transparent",
       borderColorActive: "transparent",
       borderColorDisabled: "transparent",
-      fontWeight: 500,
-      colorHover: colors.palettes.gray["0"],
-      colorActive: colors.palettes.gray["0"],
-      colorDisabled: colors.palettes.gray["0"]
+      fontWeight: 400,
+      colorHover: colors.palettes.red["6"],
+      colorActive: colors.palettes.red["6"],
+      colorDisabled: colors.palettes.transparency["30"]
     },
     status: {
       background: colors.palettes.blue["1"],
@@ -497,47 +502,79 @@ var button = {
       borderColorHover: "transparent",
       borderColorActive: "transparent",
       borderColorDisabled: "transparent",
-      fontWeight: 500,
-      colorHover: colors.palettes.gray["0"],
-      colorActive: colors.palettes.gray["0"],
-      colorDisabled: colors.palettes.gray["0"]
+      fontWeight: 400,
+      colorHover: colors.palettes.blue["6"],
+      colorActive: colors.palettes.blue["6"],
+      colorDisabled: colors.palettes.transparency["60"]
     }
   },
   small: {
-    height: "28px",
-    padding: "4px 12px",
-    fontSize: "13px",
-    lineHeight: "20px",
-    borderRadius: "4px",
-    iconSize: { width: "14px", height: "14px" },
-    iconGap: "4px"
+    withIcon: {
+      height: "24px",
+      padding: "0px 10px",
+      textPadding: "0 2px",
+      fontSize: "12px",
+      lineHeight: "20px",
+      borderRadius: borderRadius.small,
+      iconSize: { width: "16px", height: "16px" },
+      iconGap: "4px"
+    },
+    onlyIcon: {
+      iconSize: { width: "12px", height: "12px" },
+      padding: "6px",
+      borderRadius: borderRadius.small
+    }
   },
   medium: {
-    height: "32px",
-    padding: "6px 16px",
-    fontSize: "14px",
-    lineHeight: "20px",
-    borderRadius: "4px",
-    iconSize: { width: "16px", height: "16px" },
-    iconGap: "6px"
+    withIcon: {
+      height: "28px",
+      padding: "2px 14px",
+      textPadding: "0 2px",
+      fontSize: "13px",
+      lineHeight: "20px",
+      borderRadius: borderRadius.small,
+      iconSize: { width: "16px", height: "16px" },
+      iconGap: "4px"
+    },
+    onlyIcon: {
+      iconSize: { width: "14px", height: "14px" },
+      padding: "7px",
+      borderRadius: borderRadius.small
+    }
   },
   large: {
-    height: "36px",
-    padding: "8px 20px",
-    fontSize: "14px",
-    lineHeight: "20px",
-    borderRadius: "4px",
-    iconSize: { width: "16px", height: "16px" },
-    iconGap: "6px"
+    withIcon: {
+      height: "32px",
+      padding: "0 18px",
+      textPadding: "0 6px",
+      fontSize: "13px",
+      lineHeight: "20px",
+      borderRadius: borderRadius.small,
+      iconSize: { width: "18px", height: "18px" },
+      iconGap: "4px"
+    },
+    onlyIcon: {
+      iconSize: { width: "16px", height: "16px" },
+      padding: "8px",
+      borderRadius: borderRadius.small
+    }
   },
   extraLarge: {
-    height: "40px",
-    padding: "10px 24px",
-    fontSize: "14px",
-    lineHeight: "20px",
-    borderRadius: "4px",
-    iconSize: { width: "16px", height: "16px" },
-    iconGap: "8px"
+    withIcon: {
+      height: "40px",
+      padding: "0px 26px",
+      textPadding: "0px 6px",
+      fontSize: "16px",
+      lineHeight: "24px",
+      borderRadius: borderRadius.small,
+      iconSize: { width: "16px", height: "16px" },
+      iconGap: "4px"
+    },
+    onlyIcon: {
+      iconSize: { width: "20px", height: "20px" },
+      padding: "10px",
+      borderRadius: borderRadius.small
+    }
   }
 };
 
@@ -547,76 +584,85 @@ var toast = {
   borderRadius: "8px",
   fontSize: "14px",
   fontWeight: 500,
+  offset: {
+    vertical: "24px",
+    horizontal: "24px"
+  },
   success: {
-    background: colors.palettes.green["1"],
-    borderColor: colors.palettes.green["2"],
+    background: "#FFFFFF",
+    borderColor: colors.palettes.transparency["10"],
     icon: {
       url: "",
       size: { width: "20px", height: "20px" }
     },
-    button: {
-      fontSize: "14px",
-      fontWeight: 500,
-      color: colors.palettes.green["6"],
-      gap: "8px"
+    message: {
+      color: colors.palettes.gray["100"]
     }
   },
   info: {
-    background: colors.palettes.blue["1"],
-    borderColor: colors.palettes.blue["2"],
+    background: "#FFFFFF",
+    borderColor: colors.palettes.transparency["10"],
     icon: {
       url: "",
       size: { width: "20px", height: "20px" }
     },
-    button: {
-      fontSize: "14px",
-      fontWeight: 500,
-      color: colors.palettes.blue["6"],
-      gap: "8px"
+    message: {
+      color: colors.palettes.gray["100"]
     }
   },
   error: {
-    background: colors.palettes.red["1"],
-    borderColor: colors.palettes.red["2"],
+    background: "#FFFFFF",
+    borderColor: colors.palettes.transparency["10"],
     icon: {
       url: "",
       size: { width: "20px", height: "20px" }
     },
-    button: {
-      fontSize: "14px",
-      fontWeight: 500,
-      color: colors.palettes.red["6"],
-      gap: "8px"
+    message: {
+      color: colors.palettes.gray["100"]
     }
   },
   warn: {
-    background: colors.palettes.yellow["1"],
-    borderColor: colors.palettes.yellow["2"],
+    background: "#FFFFFF",
+    borderColor: colors.palettes.transparency["10"],
     icon: {
       url: "",
       size: { width: "20px", height: "20px" }
     },
-    button: {
-      fontSize: "14px",
-      fontWeight: 500,
-      color: colors.palettes.yellow["7"],
-      gap: "8px"
+    message: {
+      color: colors.palettes.gray["100"]
     }
-  }
-};
-
-// src/light/components/input.ts
-var input = {
-  icons: {
-    search: {
+  },
+  critical: {
+    background: "#FFFFFF",
+    borderColor: colors.palettes.transparency["10"],
+    icon: {
       url: "",
-      size: { width: "16px", height: "16px" }
+      size: { width: "20px", height: "20px" }
     },
-    clear: {
+    message: {
+      color: colors.palettes.gray["100"]
+    }
+  },
+  loading: {
+    background: "#FFFFFF",
+    borderColor: colors.palettes.transparency["10"],
+    icon: {
       url: "",
-      size: { width: "16px", height: "16px" }
+      size: { width: "20px", height: "20px" }
+    },
+    message: {
+      color: colors.palettes.gray["100"]
     }
   },
+  closeButton: {
+    icon: {
+      url: ""
+    }
+  }
+};
+
+// src/light/components/input.ts
+var input = {
   outlined: {
     state: {
       borderColor: colors.palettes.transparency["10"],
@@ -629,13 +675,23 @@ var input = {
       backgroundHover: colors.palettes.gray["0"],
       backgroundActive: colors.palettes.gray["0"],
       backgroundDisabled: colors.palettes.gray["5"],
-      backgroundReadonly: colors.palettes.gray["2"]
+      backgroundReadonly: colors.palettes.gray["2"],
+      placeholderColorNormal: colors.palettes.transparency["30"],
+      placeholderColorHover: colors.palettes.transparency["30"],
+      textColorNormal: colors.palettes.gray["120"],
+      textColorDisabled: colors.palettes.transparency["30"],
+      textColorReadOnly: colors.palettes.transparency["30"]
     },
     mini: {
+      height: "20px",
       borderRadius: "4px",
+      padding: "0px 4px",
+      contentPadding: "0px 0",
+      gap: "4px",
       iconSize: { width: "12px", height: "12px" },
-      padding: "2px 4px",
-      height: "20px",
+      clearIcon: {
+        size: { width: "12px", height: "12px" }
+      },
       fontSize: "12px",
       lineHeight: "20px",
       boxShadow: "none",
@@ -644,10 +700,15 @@ var input = {
       boxShadowDisabled: "none"
     },
     small: {
+      height: "24px",
       borderRadius: "4px",
+      padding: "0px 4px",
+      contentPadding: "2px 4px",
+      gap: "4px",
       iconSize: { width: "14px", height: "14px" },
-      padding: "2px 4px",
-      height: "24px",
+      clearIcon: {
+        size: { width: "14px", height: "14px" }
+      },
       fontSize: "12px",
       lineHeight: "20px",
       boxShadow: "none",
@@ -656,22 +717,15 @@ var input = {
       boxShadowDisabled: "none"
     },
     medium: {
-      borderRadius: "4px",
-      iconSize: { width: "18px", height: "18px" },
-      padding: "4px 8px",
       height: "32px",
-      fontSize: "13px",
-      lineHeight: "20px",
-      boxShadow: "none",
-      boxShadowHover: "none",
-      boxShadowActive: "0 2px 8px 0 rgba(0, 0, 0, 0.04)",
-      boxShadowDisabled: "none"
-    },
-    large: {
       borderRadius: "4px",
+      padding: "2px 8px",
+      contentPadding: "4px",
+      gap: "4px",
       iconSize: { width: "18px", height: "18px" },
-      padding: "4px 8px",
-      height: "32px",
+      clearIcon: {
+        size: { width: "18px", height: "18px" }
+      },
       fontSize: "13px",
       lineHeight: "20px",
       boxShadow: "none",
@@ -679,11 +733,16 @@ var input = {
       boxShadowActive: "0 2px 8px 0 rgba(0, 0, 0, 0.04)",
       boxShadowDisabled: "none"
     },
-    extraLarge: {
+    large: {
+      height: "40px",
       borderRadius: "4px",
+      padding: "4px 4px 4px 12px",
+      contentPadding: "4px 8px",
+      gap: "4px",
       iconSize: { width: "20px", height: "20px" },
-      padding: "6px 12px",
-      height: "40px",
+      clearIcon: {
+        size: { width: "20px", height: "20px" }
+      },
       fontSize: "14px",
       lineHeight: "24px",
       boxShadow: "none",
@@ -694,73 +753,86 @@ var input = {
   },
   underlined: {
     state: {
-      borderColor: colors.palettes.transparency["10"],
+      borderColor: "transparent",
       borderColorHover: colors.palettes.transparency["20"],
       borderColorActive: colors.palettes.transparency["30"],
-      borderColorDisabled: colors.palettes.transparency["10"],
+      borderColorDisabled: "transparent",
       borderColorError: colors.palettes.red["6"],
-      borderColorReadonly: colors.palettes.transparency["10"],
+      borderColorReadonly: "transparent",
       background: "transparent",
       backgroundHover: "transparent",
       backgroundActive: "transparent",
       backgroundDisabled: "transparent",
-      backgroundReadonly: "transparent"
+      backgroundReadonly: "transparent",
+      placeholderColorNormal: colors.palettes.transparency["30"],
+      placeholderColorHover: colors.palettes.transparency["30"],
+      textColorNormal: colors.palettes.gray["120"],
+      textColorDisabled: colors.palettes.transparency["30"],
+      textColorReadOnly: colors.palettes.transparency["30"]
     },
     mini: {
-      borderRadius: "0",
-      iconSize: { width: "12px", height: "12px" },
-      padding: "2px 0",
-      height: "20px",
+      height: "24px",
+      padding: "0 4px",
+      contentPadding: "4px 0 4px 4px",
+      gap: "4px",
       fontSize: "12px",
       lineHeight: "20px",
+      iconSize: { width: "16px", height: "16px" },
+      clearIcon: {
+        size: { width: "16px", height: "16px" }
+      },
+      borderRadius: "4px",
       boxShadow: "none",
       boxShadowHover: "none",
       boxShadowActive: "none",
       boxShadowDisabled: "none"
     },
     small: {
-      borderRadius: "0",
-      iconSize: { width: "14px", height: "14px" },
-      padding: "2px 0",
       height: "24px",
+      padding: "0 4px",
+      contentPadding: "4px 0 4px 4px",
+      gap: "4px",
       fontSize: "12px",
       lineHeight: "20px",
+      iconSize: { width: "16px", height: "16px" },
+      clearIcon: {
+        size: { width: "16px", height: "16px" }
+      },
+      borderRadius: "4px",
       boxShadow: "none",
       boxShadowHover: "none",
       boxShadowActive: "none",
       boxShadowDisabled: "none"
     },
     medium: {
-      borderRadius: "0",
-      iconSize: { width: "18px", height: "18px" },
-      padding: "4px 0",
       height: "32px",
+      padding: "0 8px",
+      contentPadding: "6px 0 6px 4px",
+      gap: "4px",
       fontSize: "13px",
       lineHeight: "20px",
-      boxShadow: "none",
-      boxShadowHover: "none",
-      boxShadowActive: "none",
-      boxShadowDisabled: "none"
-    },
-    large: {
-      borderRadius: "0",
       iconSize: { width: "18px", height: "18px" },
-      padding: "4px 0",
-      height: "32px",
-      fontSize: "13px",
-      lineHeight: "20px",
+      clearIcon: {
+        size: { width: "16px", height: "16px" }
+      },
+      borderRadius: "4px",
       boxShadow: "none",
       boxShadowHover: "none",
       boxShadowActive: "none",
       boxShadowDisabled: "none"
     },
-    extraLarge: {
-      borderRadius: "0",
-      iconSize: { width: "20px", height: "20px" },
-      padding: "6px 0",
+    large: {
       height: "40px",
+      padding: "10px 12px",
+      contentPadding: "0 0 0 4px",
+      gap: "4px",
       fontSize: "14px",
       lineHeight: "24px",
+      iconSize: { width: "20px", height: "20px" },
+      clearIcon: {
+        size: { width: "16px", height: "16px" }
+      },
+      borderRadius: "4px",
       boxShadow: "none",
       boxShadowHover: "none",
       boxShadowActive: "none",
@@ -769,6 +841,14 @@ var input = {
   }
 };
 
+// src/light/components/inputSearch.ts
+var inputSearch = {
+  searchIcon: {
+    url: ""
+    // Empty means use default icon
+  }
+};
+
 // src/light/components/radio.ts
 var radio = {
   unchecked: {
@@ -943,100 +1023,6 @@ var switchComponent = {
   }
 };
 
-// src/light/components/dropdown.ts
-var dropdown = {
-  icons: {
-    arrow: {
-      url: "",
-      size: { width: "12px", height: "12px" },
-      expandedRotateAngel: "180deg"
-    },
-    check: {
-      url: "",
-      size: { width: "14px", height: "14px" }
-    }
-  },
-  button: {
-    trigger: {
-      borderColor: colors.palettes.transparency["20"],
-      borderColorHover: colors.palettes.transparency["30"],
-      borderColorActive: colors.palettes.transparency["30"],
-      borderColorDisabled: colors.palettes.transparency["10"],
-      background: colors.palettes.gray["0"],
-      backgroundHover: colors.palettes.gray["0"],
-      backgroundActive: colors.palettes.gray["0"],
-      backgroundDisabled: colors.palettes.gray["5"],
-      color: colors.palettes.brand,
-      colorDisabled: colors.palettes.transparency["30"],
-      boxShadow: "none",
-      boxShadowHover: "none",
-      boxShadowActive: "0 2px 8px 0 rgba(0, 0, 0, 0.04)",
-      boxShadowDisabled: "none"
-    },
-    menu: {
-      background: colors.palettes.gray["0"],
-      borderColor: colors.palettes.transparency["10"],
-      borderRadius: "8px",
-      padding: "4px",
-      boxShadow: "0 8px 18px 0 rgba(0, 0, 0, 0.06)",
-      maxHeight: "280px"
-    },
-    menuItem: {
-      background: "transparent",
-      backgroundHover: colors.palettes.transparency["5"],
-      backgroundDisabled: "transparent",
-      backgroundSelected: colors.palettes.transparency["8"],
-      color: colors.palettes.brand,
-      colorDisabled: colors.palettes.transparency["30"],
-      padding: "8px 12px"
-    }
-  },
-  input: {
-    trigger: {
-      borderColor: colors.palettes.transparency["10"],
-      borderColorHover: colors.palettes.transparency["20"],
-      borderColorActive: colors.palettes.transparency["30"],
-      borderColorDisabled: colors.palettes.transparency["10"],
-      background: colors.palettes.gray["0"],
-      backgroundHover: colors.palettes.gray["0"],
-      backgroundActive: colors.palettes.gray["0"],
-      backgroundDisabled: colors.palettes.gray["5"],
-      color: colors.palettes.brand,
-      colorDisabled: colors.palettes.transparency["30"],
-      boxShadow: "none",
-      boxShadowHover: "none",
-      boxShadowActive: "0 2px 8px 0 rgba(0, 0, 0, 0.04)",
-      boxShadowDisabled: "none"
-    },
-    menu: {
-      background: colors.palettes.gray["0"],
-      borderColor: colors.palettes.transparency["10"],
-      borderRadius: "8px",
-      padding: "4px",
-      boxShadow: "0 8px 18px 0 rgba(0, 0, 0, 0.06)",
-      maxHeight: "280px"
-    },
-    menuItem: {
-      background: "transparent",
-      backgroundHover: colors.palettes.transparency["5"],
-      backgroundDisabled: "transparent",
-      backgroundSelected: colors.palettes.transparency["8"],
-      color: colors.palettes.brand,
-      colorDisabled: colors.palettes.transparency["30"],
-      padding: "8px 12px"
-    }
-  },
-  large: {
-    height: "36px",
-    padding: "8px 12px",
-    fontSize: "14px",
-    lineHeight: "20px",
-    borderRadius: "4px",
-    fontWeight: 400,
-    iconSize: { width: "16px", height: "16px" }
-  }
-};
-
 // src/light/components/tab.ts
 var tab = {
   line: {
@@ -1052,10 +1038,14 @@ var tab = {
       color: colors.palettes.transparency["60"],
       colorHover: colors.palettes.brand,
       colorActive: colors.palettes.brand,
-      colorDisabled: colors.palettes.transparency["30"]
+      colorDisabled: colors.palettes.transparency["30"],
+      bottomActiveWidth: "2px",
+      bottomActiveBorderRadius: "1px",
+      bottomActiveBackgroundColor: "#41464B"
     },
+    backgroundColor: "transparent",
     layout: {
-      gap: "24px"
+      gap: "0"
     }
   },
   card: {
@@ -1066,7 +1056,7 @@ var tab = {
       backgroundDisabled: "transparent",
       borderColor: "transparent",
       borderColorHover: "transparent",
-      borderColorActive: colors.palettes.transparency["10"],
+      borderColorActive: colors.palettes.transparency["20"],
       borderColorDisabled: "transparent",
       color: colors.palettes.transparency["60"],
       colorHover: colors.palettes.brand,
@@ -1075,46 +1065,50 @@ var tab = {
     },
     layout: {
       gap: "0"
-    }
+    },
+    backgroundColor: colors.palettes.gray["8"]
   },
   large: {
-    height: "40px",
+    height: "32px",
     padding: "10px 16px",
     fontSize: "14px",
     lineHeight: "20px",
     borderRadius: "4px",
-    fontWeight: 500
+    fontWeight: 400
   }
 };
 
 // src/light/components/slider.ts
 var slider = {
   thumb: {
-    background: colors.palettes.gray["0"],
-    backgroundHover: colors.palettes.gray["0"],
-    backgroundActive: colors.palettes.gray["0"],
-    backgroundDisabled: colors.palettes.gray["0"],
-    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.15)",
-    boxShadowHover: "0 2px 6px rgba(0, 0, 0, 0.2)",
-    boxShadowActive: "0 2px 6px rgba(0, 0, 0, 0.2)",
+    background: colors.base.default,
+    backgroundHover: colors.base.default,
+    backgroundActive: colors.base.default,
+    backgroundDisabled: "#F1F1F1",
+    // filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.08)) drop-shadow(0 4px 24px rgba(0, 0, 0, 0.12));
+    boxShadow: "0 8px 16px rgba(0, 0, 0, 0.08), 0 4px 24px rgba(0, 0, 0, 0.12)",
+    boxShadowHover: "none",
+    boxShadowActive: "none",
     boxShadowDisabled: "none",
-    borderColor: colors.palettes.brand,
-    borderColorHover: colors.palettes.brand,
-    borderColorActive: colors.palettes.brand,
-    borderColorDisabled: colors.palettes.transparency["20"]
+    borderColor: "#fff",
+    borderColorHover: "#fff",
+    borderColorActive: "#fff",
+    borderColorDisabled: "#fff"
   },
   track: {
-    background: colors.palettes.transparency["10"],
-    backgroundDisabled: colors.palettes.transparency["5"],
+    background: colors.palettes.transparency["20"],
+    backgroundDisabled: colors.palettes.transparency["20"],
     filledBackground: colors.palettes.brand,
+    filledBackgroundDisabled: colors.palettes.transparency["20"],
     height: "4px",
     width: "100%",
     borderRadius: "2px"
   },
   large: {
     height: "20px",
-    thumbSize: "16px",
-    thumbOffset: "0"
+    thumbSize: "8px",
+    thumbOffset: "0",
+    borderWidth: "1px"
   }
 };
 
@@ -1186,7 +1180,7 @@ var inputNumber = {
 var tooltip = {
   arrow: {
     size: { width: "8px", height: "8px" },
-    borderRadius: "2px",
+    borderRadius: "0",
     boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)"
   },
   black: {
@@ -1227,10 +1221,367 @@ var tooltip = {
   }
 };
 
+// src/light/components/toolbarButton.ts
+var toolbarButton = {
+  boxShadow: {
+    boxShadow: "none",
+    boxShadowHover: boxShadow.small,
+    boxShadowActive: "none",
+    boxShadowClick: boxShadow.small,
+    boxShadowDisabled: "none"
+  },
+  border: {
+    borderColor: "transparent",
+    borderColorHover: colors.palettes.transparency["20"],
+    borderColorActive: colors.palettes.transparency["20"],
+    borderColorClick: colors.palettes.transparency["30"],
+    borderColorDisabled: "transparent"
+  },
+  background: {
+    background: "transparent",
+    backgroundHover: colors.palettes.transparency["5"],
+    backgroundActive: colors.palettes.transparency["5"],
+    backgroundClick: colors.palettes.transparency["10"],
+    backgroundDisabled: "transparent"
+  },
+  color: {
+    color: colors.palettes.gray["120"],
+    colorHover: colors.palettes.gray["120"],
+    colorActive: colors.palettes.gray["120"],
+    colorDisabled: colors.palettes.transparency["30"]
+  },
+  layout: {
+    padding: "0",
+    height: "28px",
+    borderRadius: borderRadius.small,
+    content: {
+      padding: "0 4px",
+      gap: "0px",
+      iconSize: {
+        width: "20px",
+        height: "20px"
+      }
+    },
+    dropdown: {
+      iconSize: {
+        width: "16px",
+        height: "16px"
+      },
+      wrapperWidth: "14px"
+    }
+  },
+  typography: {
+    fontSize: "12px",
+    fontWeight: 400
+  }
+};
+
+// src/light/components/menu.ts
+var menu = {
+  // Menu item configuration
+  menuItem: {
+    // Background states
+    background: {
+      normal: "transparent",
+      hover: colors.palettes.transparency["5"],
+      active: colors.palettes.transparency["10"],
+      disabled: "transparent"
+    },
+    border: {
+      radius: "0",
+      color: "transparent",
+      width: "none"
+    },
+    borderRadius: "0",
+    // Layout
+    layout: {
+      padding: "6px 12px",
+      gap: "8px"
+    },
+    // Icon configuration
+    icon: {
+      size: { width: "18px", height: "18px" }
+    },
+    // Label configuration
+    label: {
+      color: {
+        normal: colors.palettes.gray["100"],
+        hover: colors.palettes.gray["100"],
+        active: colors.palettes.gray["100"],
+        disabled: colors.palettes.transparency["30"]
+      }
+    },
+    // Description configuration
+    description: {
+      color: {
+        normal: colors.palettes.transparency["60"],
+        hover: colors.palettes.transparency["60"],
+        active: colors.palettes.transparency["60"],
+        disabled: colors.palettes.transparency["30"]
+      }
+    },
+    // Active/selected icon (checkmark)
+    activeIcon: {
+      url: ""
+      // Use default checkmark
+    },
+    // Next level icon (arrow for submenu)
+    nextLevelIcon: {
+      url: ""
+      // Use default arrow
+    },
+    // Size configurations
+    size: {
+      small: {
+        label: {
+          fontSize: "12px",
+          maxWidth: "200px"
+        },
+        description: {
+          fontSize: "10px",
+          maxWidth: "150px"
+        },
+        activeIcon: {
+          size: { width: "16px", height: "16px" }
+        },
+        nextLevelIcon: {
+          size: { width: "16px", height: "16px" }
+        }
+      },
+      // Medium size (S - 28px)
+      medium: {
+        label: {
+          fontSize: "12px",
+          maxWidth: "200px"
+        },
+        description: {
+          fontSize: "10px",
+          maxWidth: "150px"
+        },
+        activeIcon: {
+          size: { width: "16px", height: "16px" }
+        },
+        nextLevelIcon: {
+          size: { width: "16px", height: "16px" }
+        }
+      },
+      // Large size (M - 36px)
+      large: {
+        label: {
+          fontSize: "13px",
+          maxWidth: "250px"
+        },
+        description: {
+          fontSize: "10px",
+          maxWidth: "180px"
+        },
+        activeIcon: {
+          size: { width: "18px", height: "18px" }
+        },
+        nextLevelIcon: {
+          size: { width: "18px", height: "18px" }
+        }
+      }
+    }
+  },
+  boxShadow: {
+    normal: "0 8px 18px 0 rgba(0, 0, 0, 0.06)",
+    hover: "0 8px 18px 0 rgba(0, 0, 0, 0.06)"
+  },
+  // Border configuration
+  border: {
+    color: colors.palettes.transparency["10"],
+    width: "1px",
+    radius: borderRadius.medium
+  },
+  // Divider configuration
+  divider: {
+    background: colors.palettes.transparency["10"],
+    height: "1px",
+    margin: "4px 0"
+  },
+  // Group title configuration
+  groupTitle: {
+    fontSize: "12px",
+    fontWeight: "500",
+    color: colors.palettes.transparency["60"]
+  },
+  subMenu: {
+    popupOffset: [4, 0]
+  }
+};
+
+// src/light/components/dropdown.ts
+var dropdown = {
+  borderRadius: borderRadius.medium,
+  border: `1px solid ${colors.palettes.transparency["10"]}`,
+  background: colors.palettes.gray["0"],
+  boxShadow: boxShadow.large,
+  padding: "4px 0"
+};
+var dropdownButton = {
+  // Color states
+  color: {
+    normal: colors.palettes.gray["100"],
+    hover: colors.palettes.gray["100"],
+    active: colors.palettes.gray["100"],
+    disabled: colors.palettes.transparency["30"]
+  },
+  // Background states
+  background: {
+    normal: colors.palettes.gray["0"],
+    hover: colors.palettes.gray["0"],
+    active: colors.palettes.gray["0"],
+    disabled: colors.palettes.gray["5"]
+  },
+  frameLessBackground: {
+    normal: "transparent",
+    hover: colors.palettes.transparency["5"],
+    active: colors.palettes.transparency["10"],
+    disabled: "transparent",
+    error: "transparent"
+  },
+  borderColor: {
+    error: colors.palettes.red["6"],
+    normal: colors.palettes.transparency["10"],
+    hover: colors.palettes.transparency["20"],
+    active: colors.palettes.transparency["30"],
+    disabled: colors.palettes.transparency["10"]
+  },
+  // Icon configuration
+  icon: {
+    size: { width: "18px", height: "18px" },
+    opacity: {
+      normal: "1",
+      hover: "1",
+      active: "1",
+      disabled: "0.3"
+    }
+  },
+  // Indicator (arrow) configuration
+  indicator: {
+    url: "",
+    // Use default arrow
+    size: { width: "18px", height: "18px" },
+    rotate: "90deg",
+    // Arrow points right by default, rotate to point down
+    opacity: {
+      normal: "1",
+      hover: "1",
+      active: "1",
+      disabled: "0.3"
+    }
+  },
+  // Size configurations
+  size: {
+    large: {
+      padding: "10px 16px",
+      fontSize: "13px",
+      height: "40px",
+      gap: "8px",
+      iconSize: { width: "18px", height: "18px" },
+      indicatorSize: { width: "18px", height: "18px" },
+      borderRadius: borderRadius.small
+    },
+    medium: {
+      padding: "6px 12px",
+      fontSize: "13px",
+      height: "32px",
+      gap: "8px",
+      iconSize: { width: "18px", height: "18px" },
+      indicatorSize: { width: "18px", height: "18px" },
+      borderRadius: borderRadius.small
+    },
+    small: {
+      padding: "4px 8px",
+      fontSize: "13px",
+      height: "28px",
+      gap: "8px",
+      iconSize: { width: "18px", height: "18px" },
+      indicatorSize: { width: "18px", height: "18px" },
+      borderRadius: borderRadius.small
+    }
+  }
+};
+
+// src/light/components/modal.ts
+var modal = {
+  message: {
+    background: colors.palettes.gray["0"],
+    border: `1px solid ${colors.palettes.transparency["5"]}`,
+    borderRadius: borderRadius.medium,
+    shadow: boxShadow.xl,
+    maskLight: colors.mask.light,
+    maskDark: colors.mask.dark,
+    maskZIndex: 1e3,
+    titleColor: colors.palettes.gray["120"],
+    titleFontSize: typography.title.fontSize.l,
+    titleFontWeight: typography.title.fontWeight.semibold,
+    titleLineHeight: typography.title.lineHeight.medium,
+    bodyColor: colors.palettes.gray["120"],
+    bodyFontSize: typography.paragraph.fontSize.m,
+    bodyLineHeight: typography.paragraph.lineHeight.medium,
+    padding: "24px 32px",
+    closeButtonHoverBackground: colors.palettes.transparency["5"],
+    closeButtonActiveBackground: colors.palettes.transparency["10"],
+    maxWidth: "400px",
+    minWidth: "360px",
+    maxHeight: "50vh",
+    minHeight: "172px",
+    defaultWidth: "400px"
+  },
+  functional: {
+    maxWidth: "800px",
+    minWidth: "400px",
+    maxHeight: "80vh",
+    minHeight: "380px",
+    defaultWidth: "640px"
+  }
+};
+
+// src/light/components/loading.ts
+var loading = {
+  // Size configurations
+  small: {
+    size: "16px"
+  },
+  medium: {
+    size: "24px"
+  },
+  large: {
+    size: "32px"
+  },
+  // Indicator configuration
+  indicator: {
+    defaultType: "gif",
+    defaultImage: void 0,
+    // Will use built-in GIF if not specified
+    color: colors.palettes.brand,
+    animation: {
+      duration: "1s",
+      timingFunction: "linear"
+    },
+    gap: "8px"
+  },
+  // Tip text color
+  tipColor: colors.palettes.gray["100"],
+  // Wrapper styles for nested content loading
+  wrapper: {
+    overlayBackground: colors.palettes.transparency["50"],
+    contentOpacity: 0.5
+  },
+  // Fullscreen styles
+  fullscreen: {
+    background: colors.palettes.transparency["50"],
+    zIndex: 1e3
+  }
+};
+
 // src/light/components/index.ts
 var components = {
   toast,
   input,
+  inputSearch,
   radio,
   checkbox,
   switch: switchComponent,
@@ -1239,7 +1590,12 @@ var components = {
   tab,
   slider,
   inputNumber,
-  tooltip
+  tooltip,
+  toolbarButton,
+  menu,
+  dropdownButton,
+  modal,
+  loading
 };
 
 // src/light/index.ts
@@ -1257,5 +1613,5 @@ var lightTheme = {
 var theme = lightTheme;
 
 export { lightTheme, theme };
-//# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map