@officesdk/design 0.1.3 → 0.1.5

package/dist/components/esm/index.js

@@ -1,17 +1,60 @@
 import React12, { forwardRef, useState, createContext, useRef, useCallback, useEffect, useContext } from 'react';
-import styled3, { createGlobalStyle, ThemeProvider } from 'styled-components';
+import baseStyled, { createGlobalStyle } from 'styled-components';
 import RcTooltip from 'rc-tooltip';
 import 'rc-tooltip/assets/bootstrap.css';
 
 // src/Button/Button.tsx
-var IconWrapper = styled3.span`
+
+// src/utils/context.ts
+var globalTheme = {};
+var registerGlobalTheme = (theme2) => {
+  Object.assign(globalTheme, { ...globalTheme, ...theme2 });
+};
+var getGlobalTheme = () => {
+  return globalTheme;
+};
+var registerGlobalContext = (context) => {
+  if (context.theme) {
+    registerGlobalTheme(context.theme);
+  }
+};
+
+// src/utils/styled.ts
+var wrapWithTheme = (component) => {
+  if (component && typeof component === "object") {
+    component.defaultProps = {
+      ...component.defaultProps,
+      get theme() {
+        return getGlobalTheme();
+      }
+    };
+  }
+  return component;
+};
+var styledFunction = (tag) => {
+  return wrapWithTheme(baseStyled(tag));
+};
+var styledWithBase = Object.assign(styledFunction, baseStyled);
+Object.keys(baseStyled).forEach((key) => {
+  const originalMethod = baseStyled[key];
+  if (typeof originalMethod === "function") {
+    styledWithBase[key] = (...args) => {
+      const component = originalMethod(...args);
+      return wrapWithTheme(component);
+    };
+  }
+});
+var styled = styledWithBase;
+
+// src/Button/Button.tsx
+var IconWrapper = styled.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 
-  ${({ $size, $position, theme }) => {
-  const sizeConfig = theme.components.button[$size || "medium"];
+  ${({ $size, $position, theme: theme2 }) => {
+  const sizeConfig = theme2.components.button[$size || "medium"];
   const marginSide = $position === "before" ? "margin-right" : "margin-left";
   return `
       width: ${sizeConfig.iconSize.width};
@@ -26,7 +69,7 @@ var IconWrapper = styled3.span`
     `;
 }}
 `;
-var StyledButton = styled3.button`
+var StyledButton = styled.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -36,8 +79,8 @@ var StyledButton = styled3.button`
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 
   /* Size variants */
-  ${({ $size, $isIconOnly, theme }) => {
-  const sizeConfig = theme.components.button[$size || "medium"];
+  ${({ $size, $isIconOnly, theme: theme2 }) => {
+  const sizeConfig = theme2.components.button[$size || "medium"];
   if ($isIconOnly) {
     return `
         padding: 0;
@@ -56,10 +99,10 @@ var StyledButton = styled3.button`
 }}
 
   /* Variant and color type styles */
-  ${({ $variant, $colorType, $isIconOnly, $iconBordered, theme }) => {
+  ${({ $variant, $colorType, $isIconOnly, $iconBordered, theme: theme2 }) => {
   if ($variant === "icon" || $isIconOnly) {
     const baseVariant = $iconBordered ? "outlined" : "text";
-    const styles2 = theme.components.button[baseVariant]["default"];
+    const styles2 = theme2.components.button[baseVariant]["default"];
     return `
         background: ${styles2.background};
         color: ${styles2.color};
@@ -92,10 +135,12 @@ var StyledButton = styled3.button`
   const variant = $variant || "solid";
   const colorType = $colorType || "default";
   if (colorType === "status" && variant !== "text") {
-    console.warn(`colorType 'status' is only available for 'text' variant. Falling back to 'default'.`);
+    console.warn(
+      `colorType 'status' is only available for 'text' variant. Falling back to 'default'.`
+    );
   }
   const effectiveColorType = colorType === "status" && variant !== "text" ? "default" : colorType;
-  const styles = theme.components.button[variant][effectiveColorType];
+  const styles = theme2.components.button[variant][effectiveColorType];
   return `
       background: ${styles.background};
       color: ${styles.color};
@@ -158,7 +203,7 @@ var Button = ({
   );
 };
 Button.displayName = "Button";
-var SliderContainer = styled3.div`
+var SliderContainer = styled.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -167,17 +212,17 @@ var SliderContainer = styled3.div`
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
   user-select: none;
 `;
-var SliderTrack = styled3.div`
+var SliderTrack = styled.div`
   position: absolute;
   left: 0;
   right: 0;
   height: 2px;
-  background: ${({ theme }) => theme.colors.palettes.transparency["20"]};
+  background: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["20"]};
   border-radius: 1000px;
   top: 50%;
   transform: translateY(-50%);
 `;
-var SliderFill = styled3.div`
+var SliderFill = styled.div`
   position: absolute;
   left: 0;
   height: 2px;
@@ -185,14 +230,14 @@ var SliderFill = styled3.div`
   top: 50%;
   transform: translateY(-50%);
   width: ${({ $percentage }) => $percentage}%;
-  background: ${({ $disabled, theme }) => $disabled ? theme.colors.palettes.transparency["10"] : theme.colors.palettes.gray["100"]};
+  background: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.colors.palettes.transparency["10"] : theme2.colors.palettes.gray["100"]};
 `;
-var SliderThumb = styled3.div`
+var SliderThumb = styled.div`
   position: absolute;
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background: ${({ $disabled, theme }) => $disabled ? theme.colors.palettes.transparency["30"] : theme.colors.palettes.blue["5"]};
+  background: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.colors.palettes.transparency["30"] : theme2.colors.palettes.blue["5"]};
   left: ${({ $percentage }) => $percentage}%;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -335,7 +380,7 @@ var Slider = ({
   );
 };
 Slider.displayName = "Slider";
-var NumberInputContainer = styled3.div`
+var NumberInputContainer = styled.div`
   display: inline-flex;
   align-items: center;
   background: white;
@@ -351,35 +396,35 @@ var NumberInputContainer = styled3.div`
     width: 80px;
   `}
 
-  ${({ $disabled, $alert, $isFocused, theme }) => {
+  ${({ $disabled, $alert, $isFocused, theme: theme2 }) => {
   if ($disabled) {
     return `
-        border-color: ${theme.colors.palettes.transparency["10"]};
+        border-color: ${theme2.colors.palettes.transparency["10"]};
         cursor: not-allowed;
       `;
   }
   if ($alert) {
     return `
-        border-color: ${theme.colors.palettes.red["6"]};
+        border-color: ${theme2.colors.palettes.red["6"]};
       `;
   }
   if ($isFocused) {
     return `
-        border-color: ${theme.colors.palettes.transparency["30"]};
+        border-color: ${theme2.colors.palettes.transparency["30"]};
         box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
       `;
   }
   return `
-      border-color: ${theme.colors.palettes.transparency["10"]};
+      border-color: ${theme2.colors.palettes.transparency["10"]};
 
       &:hover {
-        border-color: ${theme.colors.palettes.transparency["20"]};
+        border-color: ${theme2.colors.palettes.transparency["20"]};
         box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
       }
     `;
 }}
 `;
-var InputWrapper = styled3.div`
+var InputWrapper = styled.div`
   flex: 1;
   display: flex;
   align-items: center;
@@ -387,7 +432,7 @@ var InputWrapper = styled3.div`
   min-width: 0;
   gap: 4px;
 `;
-var UnitText = styled3.span`
+var UnitText = styled.span`
   flex-shrink: 0;
   font-family: 'PingFang SC', sans-serif;
   font-weight: 400;
@@ -399,13 +444,13 @@ var UnitText = styled3.span`
     font-size: 13px;
   `}
 
-  ${({ $disabled, theme }) => $disabled ? `
-    color: ${theme.colors.palettes.transparency["30"]};
+  ${({ $disabled, theme: theme2 }) => $disabled ? `
+    color: ${theme2.colors.palettes.transparency["30"]};
   ` : `
-    color: ${theme.colors.palettes.gray["120"]};
+    color: ${theme2.colors.palettes.gray["120"]};
   `}
 `;
-var StyledInput = styled3.input`
+var StyledInput = styled.input`
   width: 100%;
   border: none;
   outline: none;
@@ -422,15 +467,15 @@ var StyledInput = styled3.input`
     font-size: 13px;
   `}
 
-  ${({ $disabled, theme }) => $disabled ? `
-    color: ${theme.colors.palettes.transparency["30"]};
+  ${({ $disabled, theme: theme2 }) => $disabled ? `
+    color: ${theme2.colors.palettes.transparency["30"]};
     cursor: not-allowed;
   ` : `
-    color: ${theme.colors.palettes.gray["120"]};
+    color: ${theme2.colors.palettes.gray["120"]};
   `}
 
   &::placeholder {
-    color: ${({ theme }) => theme.colors.palettes.transparency["30"]};
+    color: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["30"]};
   }
 
   /* Remove number input arrows */
@@ -445,24 +490,24 @@ var StyledInput = styled3.input`
     -moz-appearance: textfield;
   }
 `;
-var ButtonGroup = styled3.div`
+var ButtonGroup = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
   border-left: 1px solid;
   flex-shrink: 0;
 
-  ${({ $disabled, $alert, theme }) => {
+  ${({ $disabled, $alert, theme: theme2 }) => {
   if ($disabled) {
-    return `border-color: ${theme.colors.palettes.transparency["10"]};`;
+    return `border-color: ${theme2.colors.palettes.transparency["10"]};`;
   }
   if ($alert) {
-    return `border-color: ${theme.colors.palettes.red["6"]};`;
+    return `border-color: ${theme2.colors.palettes.red["6"]};`;
   }
-  return `border-color: ${theme.colors.palettes.transparency["10"]};`;
+  return `border-color: ${theme2.colors.palettes.transparency["10"]};`;
 }}
 `;
-var StepButton = styled3.button`
+var StepButton = styled.button`
   flex: 1 1 50%;
   display: flex;
   align-items: center;
@@ -475,16 +520,16 @@ var StepButton = styled3.button`
   min-height: 0;
   overflow: hidden;
 
-  ${({ $position, $alert, $disabled, theme }) => {
+  ${({ $position, $alert, $disabled, theme: theme2 }) => {
   if ($position === "up") {
     return `
-        border-bottom: 1px solid ${$disabled ? theme.colors.palettes.transparency["10"] : $alert ? theme.colors.palettes.red["6"] : theme.colors.palettes.transparency["10"]};
+        border-bottom: 1px solid ${$disabled ? theme2.colors.palettes.transparency["10"] : $alert ? theme2.colors.palettes.red["6"] : theme2.colors.palettes.transparency["10"]};
       `;
   }
   return "";
 }}
 
-  ${({ $disabled, theme }) => {
+  ${({ $disabled, theme: theme2 }) => {
   if ($disabled) {
     return `
         cursor: not-allowed;
@@ -493,11 +538,11 @@ var StepButton = styled3.button`
   }
   return `
       &:hover {
-        background-color: ${theme.colors.palettes.transparency["5"]};
+        background-color: ${theme2.colors.palettes.transparency["5"]};
       }
 
       &:active {
-        background-color: ${theme.colors.palettes.transparency["10"]};
+        background-color: ${theme2.colors.palettes.transparency["10"]};
       }
     `;
 }}
@@ -505,7 +550,7 @@ var StepButton = styled3.button`
   svg {
     width: 14px;
     height: 14px;
-    fill: ${({ $disabled, theme }) => $disabled ? theme.colors.palettes.transparency["30"] : theme.colors.palettes.gray["120"]};
+    fill: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.colors.palettes.transparency["30"] : theme2.colors.palettes.gray["120"]};
   }
 `;
 var UpArrow = () => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("path", { d: "M7 4.5L10.5 8.5H3.5L7 4.5Z", fill: "currentColor" }));
@@ -668,13 +713,13 @@ var NumberInput = ({
 NumberInput.displayName = "NumberInput";
 
 // src/Button/SpinButton.tsx
-var SpinButtonWrapper = styled3.div`
+var SpinButtonWrapper = styled.div`
   display: inline-flex;
   align-items: center;
   gap: ${({ $showSlider }) => $showSlider ? "0" : "0"};
   width: ${({ $showSlider }) => $showSlider ? "100%" : "auto"};
 `;
-var SliderWrapper = styled3.div`
+var SliderWrapper = styled.div`
   flex: 1;
   display: flex;
   align-items: center;
@@ -739,36 +784,36 @@ var SpinButton = ({
   ));
 };
 SpinButton.displayName = "SpinButton";
-var SwitchContainer = styled3.label`
+var SwitchContainer = styled.label`
   position: relative;
   display: inline-block;
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
 
-  ${({ $size, theme }) => {
-  const sizeConfig = theme.components.switch[$size];
+  ${({ $size, theme: theme2 }) => {
+  const sizeConfig = theme2.components.switch[$size];
   return `
       width: ${sizeConfig.container.width};
       height: ${sizeConfig.container.height};
     `;
 }}
 `;
-var HiddenInput = styled3.input`
+var HiddenInput = styled.input`
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
   pointer-events: none;
 `;
-var Track = styled3.div`
+var Track = styled.div`
   position: absolute;
   inset: 0;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  transition: ${({ theme }) => theme.components.switch.transition || "all 0.2s ease"};
+  transition: ${({ theme: theme2 }) => theme2.components.switch.transition || "all 0.2s ease"};
 
-  ${({ $size, theme }) => {
-  const sizeConfig = theme.components.switch[$size];
+  ${({ $size, theme: theme2 }) => {
+  const sizeConfig = theme2.components.switch[$size];
   return `
       border-radius: ${sizeConfig.track.borderRadius};
       width: ${sizeConfig.track.width};
@@ -776,8 +821,8 @@ var Track = styled3.div`
     `;
 }}
 
-  ${({ $checked, $disabled, theme }) => {
-  const stateConfig = $checked ? theme.components.switch.on : theme.components.switch.off;
+  ${({ $checked, $disabled, theme: theme2 }) => {
+  const stateConfig = $checked ? theme2.components.switch.on : theme2.components.switch.off;
   if ($disabled) {
     return `
         background: ${stateConfig.track.backgroundDisabled};
@@ -790,9 +835,9 @@ var Track = styled3.div`
     `;
 }}
 
-  ${({ $disabled, $checked, theme }) => {
+  ${({ $disabled, $checked, theme: theme2 }) => {
   if ($disabled) return "";
-  const stateConfig = $checked ? theme.components.switch.on : theme.components.switch.off;
+  const stateConfig = $checked ? theme2.components.switch.on : theme2.components.switch.off;
   return `
       :hover {
         background: ${stateConfig.track.backgroundHover};
@@ -801,16 +846,16 @@ var Track = styled3.div`
     `;
 }}
 `;
-var Thumb = styled3.div`
+var Thumb = styled.div`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   border-style: solid;
   box-sizing: border-box;
-  transition: ${({ theme }) => theme.components.switch.transition || "all 0.2s ease"};
+  transition: ${({ theme: theme2 }) => theme2.components.switch.transition || "all 0.2s ease"};
 
-  ${({ $size, $checked, theme }) => {
-  const sizeConfig = theme.components.switch[$size];
+  ${({ $size, $checked, theme: theme2 }) => {
+  const sizeConfig = theme2.components.switch[$size];
   const thumbSize = sizeConfig.thumb.size;
   const thumbOffset = sizeConfig.thumb.offset;
   const thumbBorderRadius = sizeConfig.thumb.borderRadius;
@@ -824,8 +869,8 @@ var Thumb = styled3.div`
     `;
 }}
 
-  ${({ $checked, $disabled, theme }) => {
-  const stateConfig = $checked ? theme.components.switch.on : theme.components.switch.off;
+  ${({ $checked, $disabled, theme: theme2 }) => {
+  const stateConfig = $checked ? theme2.components.switch.on : theme2.components.switch.off;
   if ($disabled) {
     return `
         background: ${stateConfig.thumb.backgroundDisabled};
@@ -840,9 +885,9 @@ var Thumb = styled3.div`
     `;
 }}
 
-  ${({ $disabled, $checked, theme }) => {
+  ${({ $disabled, $checked, theme: theme2 }) => {
   if ($disabled) return "";
-  const stateConfig = $checked ? theme.components.switch.on : theme.components.switch.off;
+  const stateConfig = $checked ? theme2.components.switch.on : theme2.components.switch.off;
   return `
       :hover & {
         background: ${stateConfig.thumb.backgroundHover};
@@ -924,58 +969,58 @@ var Switch = ({
   );
 };
 Switch.displayName = "Switch";
-var RadioContainer = styled3.label`
+var RadioContainer = styled.label`
   position: relative;
   display: inline-block;
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
 
-  ${({ theme }) => {
-  const sizeConfig = theme.components.radio.small;
+  ${({ theme: theme2 }) => {
+  const sizeConfig = theme2.components.radio.small;
   return `
       width: ${sizeConfig.size};
       height: ${sizeConfig.size};
     `;
 }}
 `;
-var HiddenInput2 = styled3.input`
+var HiddenInput2 = styled.input`
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
   pointer-events: none;
 `;
-var RadioOuter = styled3.div`
+var RadioOuter = styled.div`
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 1px solid;
   transition: all 0.2s ease;
 
-  ${({ $checked, $disabled, theme }) => {
+  ${({ $checked, $disabled, theme: theme2 }) => {
   if ($disabled) {
-    const stateConfig = $checked ? theme.components.radio.checked : theme.components.radio.unchecked;
+    const stateConfig = $checked ? theme2.components.radio.checked : theme2.components.radio.unchecked;
     return `
         background: ${stateConfig.backgroundDisabled};
         border-color: ${stateConfig.borderColorDisabled};
       `;
   }
   if ($checked) {
-    const checkedConfig = theme.components.radio.checked;
+    const checkedConfig = theme2.components.radio.checked;
     return `
         background: ${checkedConfig.background};
         border-color: ${checkedConfig.borderColor};
       `;
   }
-  const uncheckedConfig = theme.components.radio.unchecked;
+  const uncheckedConfig = theme2.components.radio.unchecked;
   return `
       background: ${uncheckedConfig.background};
       border-color: ${uncheckedConfig.borderColor};
     `;
 }}
 
-  ${({ $disabled, $checked, theme }) => {
+  ${({ $disabled, $checked, theme: theme2 }) => {
   if ($disabled) return "";
-  const stateConfig = $checked ? theme.components.radio.checked : theme.components.radio.unchecked;
+  const stateConfig = $checked ? theme2.components.radio.checked : theme2.components.radio.unchecked;
   return `
       ${RadioContainer}:hover & {
         background: ${stateConfig.backgroundHover};
@@ -988,7 +1033,7 @@ var RadioOuter = styled3.div`
     `;
 }}
 `;
-var RadioInner = styled3.div`
+var RadioInner = styled.div`
   position: absolute;
   left: 50%;
   top: 50%;
@@ -998,8 +1043,8 @@ var RadioInner = styled3.div`
   opacity: ${({ $checked }) => $checked ? 1 : 0};
   transition: opacity 0.2s ease;
 
-  ${({ theme }) => {
-  const dotSize = theme.components.radio.small.dotSize;
+  ${({ theme: theme2 }) => {
+  const dotSize = theme2.components.radio.small.dotSize;
   return `
       width: ${dotSize};
       height: ${dotSize};
@@ -1078,71 +1123,71 @@ var Radio = ({
   );
 };
 Radio.displayName = "Radio";
-var CheckboxContainer = styled3.label`
+var CheckboxContainer = styled.label`
   position: relative;
   display: inline-block;
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
 
-  ${({ theme }) => {
-  const sizeConfig = theme.components.checkbox.small;
+  ${({ theme: theme2 }) => {
+  const sizeConfig = theme2.components.checkbox.small;
   return `
       width: ${sizeConfig.size};
       height: ${sizeConfig.size};
     `;
 }}
 `;
-var HiddenInput3 = styled3.input`
+var HiddenInput3 = styled.input`
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
   pointer-events: none;
 `;
-var CheckboxBox = styled3.div`
+var CheckboxBox = styled.div`
   position: absolute;
   inset: 1px;
   border: 1px solid;
   transition: all 0.2s ease;
 
-  ${({ theme }) => {
-  const sizeConfig = theme.components.checkbox.small;
+  ${({ theme: theme2 }) => {
+  const sizeConfig = theme2.components.checkbox.small;
   return `
       border-radius: ${sizeConfig.borderRadius};
     `;
 }}
 
-  ${({ $checked, $indeterminate, $disabled, theme }) => {
+  ${({ $checked, $indeterminate, $disabled, theme: theme2 }) => {
   if ($disabled) {
-    const stateConfig = $checked || $indeterminate ? theme.components.checkbox.checked : theme.components.checkbox.unchecked;
+    const stateConfig = $checked || $indeterminate ? theme2.components.checkbox.checked : theme2.components.checkbox.unchecked;
     return `
         background: ${stateConfig.backgroundDisabled};
         border-color: ${stateConfig.borderColorDisabled};
       `;
   }
   if ($checked) {
-    const checkedConfig = theme.components.checkbox.checked;
+    const checkedConfig = theme2.components.checkbox.checked;
     return `
         background: ${checkedConfig.background};
         border-color: ${checkedConfig.borderColor};
       `;
   }
   if ($indeterminate) {
-    const indeterminateConfig = theme.components.checkbox.indeterminate;
+    const indeterminateConfig = theme2.components.checkbox.indeterminate;
     return `
         background: ${indeterminateConfig.background};
         border-color: ${indeterminateConfig.borderColor};
       `;
   }
-  const uncheckedConfig = theme.components.checkbox.unchecked;
+  const uncheckedConfig = theme2.components.checkbox.unchecked;
   return `
       background: ${uncheckedConfig.background};
       border-color: ${uncheckedConfig.borderColor};
     `;
 }}
 
-  ${({ $disabled, $checked, $indeterminate, theme }) => {
+  ${({ $disabled, $checked, $indeterminate, theme: theme2 }) => {
   if ($disabled) return "";
-  const stateConfig = $checked || $indeterminate ? theme.components.checkbox.checked : theme.components.checkbox.unchecked;
+  const stateConfig = $checked || $indeterminate ? theme2.components.checkbox.checked : theme2.components.checkbox.unchecked;
   return `
       ${CheckboxContainer}:hover & {
         background: ${stateConfig.backgroundHover};
@@ -1155,7 +1200,7 @@ var CheckboxBox = styled3.div`
     `;
 }}
 `;
-var IconWrapper2 = styled3.div`
+var IconWrapper2 = styled.div`
   position: absolute;
   left: 50%;
   top: 50%;
@@ -1167,8 +1212,8 @@ var IconWrapper2 = styled3.div`
   align-items: center;
   justify-content: center;
 
-  ${({ theme }) => {
-  const iconSize = theme.components.checkbox.small.iconSize;
+  ${({ theme: theme2 }) => {
+  const iconSize = theme2.components.checkbox.small.iconSize;
   return `
       width: ${iconSize.width};
       height: ${iconSize.height};
@@ -1179,7 +1224,7 @@ var IconWrapper2 = styled3.div`
     display: block;
   }
 `;
-var DefaultIndeterminateIcon = styled3.div`
+var DefaultIndeterminateIcon = styled.div`
   width: 8px;
   height: 2px;
   background: white;
@@ -1260,7 +1305,7 @@ var Checkbox = ({
   );
 };
 Checkbox.displayName = "Checkbox";
-var InputWrapper2 = styled3.div`
+var InputWrapper2 = styled.div`
   display: inline-flex;
   align-items: center;
   width: 100%;
@@ -1268,9 +1313,9 @@ var InputWrapper2 = styled3.div`
   position: relative;
   transition: all 0.2s ease;
 
-  ${({ $size, theme }) => {
+  ${({ $size, theme: theme2 }) => {
   const size = $size || "medium";
-  const sizeConfig = theme.components.input.outlined[size];
+  const sizeConfig = theme2.components.input.outlined[size];
   return `
       height: ${sizeConfig.height};
       border-radius: ${sizeConfig.borderRadius};
@@ -1280,8 +1325,8 @@ var InputWrapper2 = styled3.div`
     `;
 }}
 
-  ${({ $error, $disabled, $readOnly, $isFocused, theme, $size }) => {
-  const stateConfig = theme.components.input.outlined.state;
+  ${({ $error, $disabled, $readOnly, $isFocused, theme: theme2, $size }) => {
+  const stateConfig = theme2.components.input.outlined.state;
   let borderColor = stateConfig.borderColor;
   let background = stateConfig.background;
   let boxShadow = "none";
@@ -1298,7 +1343,7 @@ var InputWrapper2 = styled3.div`
     borderColor = stateConfig.borderColorActive;
     background = stateConfig.backgroundActive;
     const size = $size || "medium";
-    boxShadow = theme.components.input.outlined[size].boxShadowActive;
+    boxShadow = theme2.components.input.outlined[size].boxShadowActive;
   }
   return `
       border: 1px solid ${borderColor};
@@ -1319,7 +1364,7 @@ var InputWrapper2 = styled3.div`
     opacity: 1;
   `}
 `;
-var StyledInput2 = styled3.input`
+var StyledInput2 = styled.input`
   flex: 1;
   border: none;
   outline: none;
@@ -1328,11 +1373,11 @@ var StyledInput2 = styled3.input`
   padding: 0;
   margin: 0;
   font-family: inherit;
-  color: ${({ theme }) => theme.components.input.outlined.state.borderColorActive};
+  color: ${({ theme: theme2 }) => theme2.components.input.outlined.state.borderColorActive};
 
-  ${({ $size, theme }) => {
+  ${({ $size, theme: theme2 }) => {
   const size = $size || "medium";
-  const sizeConfig = theme.components.input.outlined[size];
+  const sizeConfig = theme2.components.input.outlined[size];
   return `
       font-size: ${sizeConfig.fontSize};
       line-height: ${sizeConfig.lineHeight};
@@ -1340,27 +1385,27 @@ var StyledInput2 = styled3.input`
 }}
 
   &::placeholder {
-    color: ${({ theme }) => theme.colors.palettes.transparency["30"]};
+    color: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["30"]};
   }
 
-  ${({ $disabled, theme }) => $disabled && `
+  ${({ $disabled, theme: theme2 }) => $disabled && `
     cursor: not-allowed;
-    color: ${theme.colors.palettes.transparency["30"]};
+    color: ${theme2.colors.palettes.transparency["30"]};
   `}
 
   ${({ $readOnly }) => $readOnly && `
     cursor: default;
   `}
 `;
-var PrefixNode = styled3.div`
+var PrefixNode = styled.div`
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
   margin-right: 4px;
 
-  ${({ $size, theme }) => {
+  ${({ $size, theme: theme2 }) => {
   const size = $size || "medium";
-  const sizeConfig = theme.components.input.outlined[size];
+  const sizeConfig = theme2.components.input.outlined[size];
   return `
       svg, img {
         width: ${sizeConfig.iconSize.width};
@@ -1369,15 +1414,15 @@ var PrefixNode = styled3.div`
     `;
 }}
 `;
-var SuffixNode = styled3.div`
+var SuffixNode = styled.div`
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
   margin-left: 4px;
 
-  ${({ $size, theme }) => {
+  ${({ $size, theme: theme2 }) => {
   const size = $size || "medium";
-  const sizeConfig = theme.components.input.outlined[size];
+  const sizeConfig = theme2.components.input.outlined[size];
   return `
       svg, img {
         width: ${sizeConfig.iconSize.width};
@@ -1440,14 +1485,14 @@ var Input = forwardRef(
   }
 );
 Input.displayName = "Input";
-var SearchIconWrapper = styled3.div`
+var SearchIconWrapper = styled.div`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 
-  ${({ $size, theme }) => {
-  const sizeConfig = theme.components.input.outlined[$size === "extraLarge" ? "extraLarge" : "large"];
+  ${({ $size, theme: theme2 }) => {
+  const sizeConfig = theme2.components.input.outlined[$size === "extraLarge" ? "extraLarge" : "large"];
   return `
       width: ${sizeConfig.iconSize.width};
       height: ${sizeConfig.iconSize.height};
@@ -1457,10 +1502,10 @@ var SearchIconWrapper = styled3.div`
   svg {
     width: 100%;
     height: 100%;
-    color: ${({ theme }) => theme.colors.palettes.transparency["100"]};
+    color: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["100"]};
   }
 `;
-var ClearButton = styled3.button`
+var ClearButton = styled.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1473,8 +1518,8 @@ var ClearButton = styled3.button`
   outline: none;
   transition: opacity 0.2s ease;
 
-  ${({ $size, theme }) => {
-  const sizeConfig = theme.components.input.outlined[$size === "extraLarge" ? "extraLarge" : "large"];
+  ${({ $size, theme: theme2 }) => {
+  const sizeConfig = theme2.components.input.outlined[$size === "extraLarge" ? "extraLarge" : "large"];
   return `
       width: ${sizeConfig.iconSize.width};
       height: ${sizeConfig.iconSize.height};
@@ -1484,7 +1529,7 @@ var ClearButton = styled3.button`
   svg {
     width: 100%;
     height: 100%;
-    color: ${({ theme }) => theme.colors.palettes.transparency["100"]};
+    color: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["100"]};
   }
 
   &:hover {
@@ -1602,7 +1647,7 @@ var useIconRegistry = () => {
 IconProvider.displayName = "IconProvider";
 
 // src/Icon/Icon.tsx
-var IconContainer = styled3.span`
+var IconContainer = styled.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1668,15 +1713,15 @@ var Icon = ({
   );
 };
 Icon.displayName = "Icon";
-var ToastContainer = styled3.div`
+var ToastContainer = styled.div`
   display: inline-flex;
   align-items: center;
   gap: 8px;
   border: 1px solid;
   box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
 
-  ${({ theme }) => {
-  const baseConfig = theme.components.toast;
+  ${({ theme: theme2 }) => {
+  const baseConfig = theme2.components.toast;
   return `
       padding: ${baseConfig.padding};
       border-radius: ${baseConfig.borderRadius};
@@ -1685,42 +1730,42 @@ var ToastContainer = styled3.div`
     `;
 }}
 
-  ${({ $variant, theme }) => {
-  const variantConfig = theme.components.toast[$variant];
+  ${({ $variant, theme: theme2 }) => {
+  const variantConfig = theme2.components.toast[$variant];
   return `
       background: ${variantConfig.background};
       border-color: ${variantConfig.borderColor};
     `;
 }}
 `;
-var IconWrapper3 = styled3.div`
+var IconWrapper3 = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 
-  ${({ $variant, theme }) => {
-  const iconConfig = theme.components.toast[$variant].icon;
+  ${({ $variant, theme: theme2 }) => {
+  const iconConfig = theme2.components.toast[$variant].icon;
   return `
       width: ${iconConfig.size.width};
       height: ${iconConfig.size.height};
     `;
 }}
 `;
-var Message = styled3.span`
+var Message = styled.span`
   flex: 1;
   line-height: 20px;
-  color: ${({ theme }) => theme.colors.palettes.gray["120"]};
+  color: ${({ theme: theme2 }) => theme2.colors.palettes.gray["120"]};
 `;
-var ActionButton = styled3.button`
+var ActionButton = styled.button`
   background: transparent;
   border: none;
   cursor: pointer;
   padding: 0;
   outline: none;
 
-  ${({ $variant, theme }) => {
-  const buttonConfig = theme.components.toast[$variant].button;
+  ${({ $variant, theme: theme2 }) => {
+  const buttonConfig = theme2.components.toast[$variant].button;
   return `
       font-size: ${buttonConfig.fontSize};
       font-weight: ${buttonConfig.fontWeight};
@@ -1737,7 +1782,7 @@ var ActionButton = styled3.button`
     opacity: 0.6;
   }
 `;
-var CloseButton = styled3.button`
+var CloseButton = styled.button`
   background: transparent;
   border: none;
   cursor: pointer;
@@ -1747,16 +1792,16 @@ var CloseButton = styled3.button`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${({ theme }) => theme.colors.palettes.gray["60"]};
+  color: ${({ theme: theme2 }) => theme2.colors.palettes.gray["60"]};
   flex-shrink: 0;
   outline: none;
 
   &:hover {
-    color: ${({ theme }) => theme.colors.palettes.gray["100"]};
+    color: ${({ theme: theme2 }) => theme2.colors.palettes.gray["100"]};
   }
 
   &:active {
-    color: ${({ theme }) => theme.colors.palettes.gray["120"]};
+    color: ${({ theme: theme2 }) => theme2.colors.palettes.gray["120"]};
   }
 `;
 var SuccessIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#4ea44b" }), /* @__PURE__ */ React12.createElement("path", { d: "M6 10L9 13L14 7", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
@@ -1834,7 +1879,7 @@ var Toast = ({
 };
 Toast.displayName = "Toast";
 var ToastContext = createContext(null);
-var ToastWrapper = styled3.div`
+var ToastWrapper = styled.div`
   position: fixed;
   top: 24px;
   right: 24px;
@@ -1907,17 +1952,17 @@ var useToast = () => {
   return context;
 };
 ToastContainer2.displayName = "ToastContainer";
-var TabContainer = styled3.div`
+var TabContainer = styled.div`
   display: flex;
   flex-direction: column;
 `;
-var TabList = styled3.div`
+var TabList = styled.div`
   display: flex;
   align-items: center;
   position: relative;
 
-  ${({ $variant, theme }) => {
-  const variantConfig = theme.components.tab[$variant];
+  ${({ $variant, theme: theme2 }) => {
+  const variantConfig = theme2.components.tab[$variant];
   return `
       gap: ${variantConfig.layout.gap};
     `;
@@ -1932,7 +1977,7 @@ var TabList = styled3.div`
   return "";
 }}
 `;
-var TabItem = styled3.button`
+var TabItem = styled.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1944,8 +1989,8 @@ var TabItem = styled3.button`
   position: relative;
   white-space: nowrap;
 
-  ${({ theme }) => {
-  const sizeConfig = theme.components.tab.large;
+  ${({ theme: theme2 }) => {
+  const sizeConfig = theme2.components.tab.large;
   return `
       height: ${sizeConfig.height};
       padding: ${sizeConfig.padding};
@@ -1956,8 +2001,8 @@ var TabItem = styled3.button`
     `;
 }}
 
-  ${({ $variant, $active, $disabled, theme }) => {
-  const variantConfig = theme.components.tab[$variant];
+  ${({ $variant, $active, $disabled, theme: theme2 }) => {
+  const variantConfig = theme2.components.tab[$variant];
   const itemConfig = variantConfig.item;
   if ($disabled) {
     return `
@@ -1980,9 +2025,9 @@ var TabItem = styled3.button`
     `;
 }}
 
-  ${({ $variant, $disabled, theme }) => {
+  ${({ $variant, $disabled, theme: theme2 }) => {
   if ($disabled) return "";
-  const variantConfig = theme.components.tab[$variant];
+  const variantConfig = theme2.components.tab[$variant];
   const itemConfig = variantConfig.item;
   return `
       &:hover {
@@ -2091,6 +2136,7 @@ var Tooltip = ({
   return /* @__PURE__ */ React12.createElement(RcTooltip, { ...tooltipProps }, children);
 };
 Tooltip.displayName = "Tooltip";
+var theme = getGlobalTheme();
 var paddingDistance = "5px";
 var positionDistance = "0";
 var TooltipGlobalStyles = createGlobalStyle`
@@ -2199,16 +2245,16 @@ var TooltipGlobalStyles = createGlobalStyle`
 
   /* Black variant */
   .tooltip-variant-black .rc-tooltip-inner {
-    background: ${({ theme }) => theme.components.tooltip.black.background};
-    border: 1px solid ${({ theme }) => theme.components.tooltip.black.borderColor};
-    color: ${({ theme }) => theme.components.tooltip.black.color};
-    border-radius: ${({ theme }) => theme.components.tooltip.black.borderRadius};
-    padding: ${({ theme }) => theme.components.tooltip.black.padding};
-    box-shadow: ${({ theme }) => theme.components.tooltip.black.boxShadow};
-    font-size: ${({ theme }) => theme.components.tooltip.black.fontSize};
-    line-height: ${({ theme }) => theme.components.tooltip.black.lineHeight};
-    font-weight: ${({ theme }) => theme.components.tooltip.black.fontWeight};
-    max-width: ${({ theme }) => theme.components.tooltip.black.maxWidth};
+    background: ${() => theme.components.tooltip.black.background};
+    border: 1px solid ${() => theme.components.tooltip.black.borderColor};
+    color: ${() => theme.components.tooltip.black.color};
+    border-radius: ${() => theme.components.tooltip.black.borderRadius};
+    padding: ${() => theme.components.tooltip.black.padding};
+    box-shadow: ${() => theme.components.tooltip.black.boxShadow};
+    font-size: ${() => theme.components.tooltip.black.fontSize};
+    line-height: ${() => theme.components.tooltip.black.lineHeight};
+    font-weight: ${() => theme.components.tooltip.black.fontWeight};
+    max-width: ${() => theme.components.tooltip.black.maxWidth};
     text-align: left;
     text-decoration: none;
   }
@@ -2219,7 +2265,7 @@ var TooltipGlobalStyles = createGlobalStyle`
     bottom: ${positionDistance};
     margin-left: -5px;
     border-width: 5px 5px 0;
-    border-top-color: ${({ theme }) => theme.components.tooltip.black.background};
+    border-top-color: ${() => theme.components.tooltip.black.background};
   }
 
   .tooltip-variant-black.rc-tooltip-placement-right .rc-tooltip-arrow,
@@ -2228,7 +2274,7 @@ var TooltipGlobalStyles = createGlobalStyle`
     left: ${positionDistance};
     margin-top: -5px;
     border-width: 5px 5px 5px 0;
-    border-right-color: ${({ theme }) => theme.components.tooltip.black.background};
+    border-right-color: ${() => theme.components.tooltip.black.background};
   }
 
   .tooltip-variant-black.rc-tooltip-placement-left .rc-tooltip-arrow,
@@ -2237,7 +2283,7 @@ var TooltipGlobalStyles = createGlobalStyle`
     right: ${positionDistance};
     margin-top: -5px;
     border-width: 5px 0 5px 5px;
-    border-left-color: ${({ theme }) => theme.components.tooltip.black.background};
+    border-left-color: ${() => theme.components.tooltip.black.background};
   }
 
   .tooltip-variant-black.rc-tooltip-placement-bottom .rc-tooltip-arrow,
@@ -2246,20 +2292,20 @@ var TooltipGlobalStyles = createGlobalStyle`
     top: ${positionDistance};
     margin-left: -5px;
     border-width: 0 5px 5px;
-    border-bottom-color: ${({ theme }) => theme.components.tooltip.black.background};
+    border-bottom-color: ${() => theme.components.tooltip.black.background};
   }
 
   /* White variant - small size */
   .tooltip-variant-white.tooltip-size-small .rc-tooltip-inner {
-    background: ${({ theme }) => theme.components.tooltip.white.small.background};
-    border: 1px solid ${({ theme }) => theme.components.tooltip.white.small.borderColor};
-    color: ${({ theme }) => theme.components.tooltip.white.small.color};
-    border-radius: ${({ theme }) => theme.components.tooltip.white.small.borderRadius};
-    padding: ${({ theme }) => theme.components.tooltip.white.small.padding};
-    box-shadow: ${({ theme }) => theme.components.tooltip.white.small.boxShadow};
-    font-size: ${({ theme }) => theme.components.tooltip.white.small.fontSize};
-    line-height: ${({ theme }) => theme.components.tooltip.white.small.lineHeight};
-    font-weight: ${({ theme }) => theme.components.tooltip.white.small.fontWeight};
+    background: ${() => theme.components.tooltip.white.small.background};
+    border: 1px solid ${() => theme.components.tooltip.white.small.borderColor};
+    color: ${() => theme.components.tooltip.white.small.color};
+    border-radius: ${() => theme.components.tooltip.white.small.borderRadius};
+    padding: ${() => theme.components.tooltip.white.small.padding};
+    box-shadow: ${() => theme.components.tooltip.white.small.boxShadow};
+    font-size: ${() => theme.components.tooltip.white.small.fontSize};
+    line-height: ${() => theme.components.tooltip.white.small.lineHeight};
+    font-weight: ${() => theme.components.tooltip.white.small.fontWeight};
     text-align: left;
     text-decoration: none;
   }
@@ -2270,7 +2316,7 @@ var TooltipGlobalStyles = createGlobalStyle`
     bottom: ${positionDistance};
     margin-left: -5px;
     border-width: 5px 5px 0;
-    border-top-color: ${({ theme }) => theme.components.tooltip.white.small.background};
+    border-top-color: ${() => theme.components.tooltip.white.small.background};
   }
 
   .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-right .rc-tooltip-arrow,
@@ -2279,7 +2325,7 @@ var TooltipGlobalStyles = createGlobalStyle`
     left: ${positionDistance};
     margin-top: -5px;
     border-width: 5px 5px 5px 0;
-    border-right-color: ${({ theme }) => theme.components.tooltip.white.small.background};
+    border-right-color: ${() => theme.components.tooltip.white.small.background};
   }
 
   .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-left .rc-tooltip-arrow,
@@ -2288,7 +2334,7 @@ var TooltipGlobalStyles = createGlobalStyle`
     right: ${positionDistance};
     margin-top: -5px;
     border-width: 5px 0 5px 5px;
-    border-left-color: ${({ theme }) => theme.components.tooltip.white.small.background};
+    border-left-color: ${() => theme.components.tooltip.white.small.background};
   }
 
   .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-bottom .rc-tooltip-arrow,
@@ -2297,20 +2343,20 @@ var TooltipGlobalStyles = createGlobalStyle`
     top: ${positionDistance};
     margin-left: -5px;
     border-width: 0 5px 5px;
-    border-bottom-color: ${({ theme }) => theme.components.tooltip.white.small.background};
+    border-bottom-color: ${() => theme.components.tooltip.white.small.background};
   }
 
   /* White variant - large size */
   .tooltip-variant-white.tooltip-size-large .rc-tooltip-inner {
-    background: ${({ theme }) => theme.components.tooltip.white.large.background};
-    border: 1px solid ${({ theme }) => theme.components.tooltip.white.large.borderColor};
-    color: ${({ theme }) => theme.components.tooltip.white.large.color};
-    border-radius: ${({ theme }) => theme.components.tooltip.white.large.borderRadius};
-    padding: ${({ theme }) => theme.components.tooltip.white.large.padding};
-    box-shadow: ${({ theme }) => theme.components.tooltip.white.large.boxShadow};
-    font-size: ${({ theme }) => theme.components.tooltip.white.large.fontSize};
-    line-height: ${({ theme }) => theme.components.tooltip.white.large.lineHeight};
-    font-weight: ${({ theme }) => theme.components.tooltip.white.large.fontWeight};
+    background: ${() => theme.components.tooltip.white.large.background};
+    border: 1px solid ${() => theme.components.tooltip.white.large.borderColor};
+    color: ${() => theme.components.tooltip.white.large.color};
+    border-radius: ${() => theme.components.tooltip.white.large.borderRadius};
+    padding: ${() => theme.components.tooltip.white.large.padding};
+    box-shadow: ${() => theme.components.tooltip.white.large.boxShadow};
+    font-size: ${() => theme.components.tooltip.white.large.fontSize};
+    line-height: ${() => theme.components.tooltip.white.large.lineHeight};
+    font-weight: ${() => theme.components.tooltip.white.large.fontWeight};
     text-align: left;
     text-decoration: none;
   }
@@ -2321,7 +2367,7 @@ var TooltipGlobalStyles = createGlobalStyle`
     bottom: ${positionDistance};
     margin-left: -5px;
     border-width: 5px 5px 0;
-    border-top-color: ${({ theme }) => theme.components.tooltip.white.large.background};
+    border-top-color: ${() => theme.components.tooltip.white.large.background};
   }
 
   .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-right .rc-tooltip-arrow,
@@ -2330,7 +2376,7 @@ var TooltipGlobalStyles = createGlobalStyle`
     left: ${positionDistance};
     margin-top: -5px;
     border-width: 5px 5px 5px 0;
-    border-right-color: ${({ theme }) => theme.components.tooltip.white.large.background};
+    border-right-color: ${() => theme.components.tooltip.white.large.background};
   }
 
   .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-left .rc-tooltip-arrow,
@@ -2339,7 +2385,7 @@ var TooltipGlobalStyles = createGlobalStyle`
     right: ${positionDistance};
     margin-top: -5px;
     border-width: 5px 0 5px 5px;
-    border-left-color: ${({ theme }) => theme.components.tooltip.white.large.background};
+    border-left-color: ${() => theme.components.tooltip.white.large.background};
   }
 
   .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-bottom .rc-tooltip-arrow,
@@ -2348,33 +2394,368 @@ var TooltipGlobalStyles = createGlobalStyle`
     top: ${positionDistance};
     margin-left: -5px;
     border-width: 0 5px 5px;
-    border-bottom-color: ${({ theme }) => theme.components.tooltip.white.large.background};
+    border-bottom-color: ${() => theme.components.tooltip.white.large.background};
   }
 `;
-var UIConfigContext = createContext(null);
-var UIConfigProvider = ({
-  config,
-  children
+var ToolbarButtonContainer = styled.div`
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid;
+  border-radius: 2px;
+  transition: border-color 0.15s ease;
+  box-sizing: border-box;
+
+  ${({ $disabled, $active, theme: theme2 }) => {
+  const config = theme2.components.toolbarButton;
+  if ($disabled) {
+    return `
+        border-color: ${config.border.borderColorDisabled};
+      `;
+  }
+  if ($active) {
+    return `
+        border-color: ${config.border.borderColorActive};
+
+        ${Divider} {
+          background-color: ${config.border.borderColorActive};
+        }
+      `;
+  }
+  return `
+      border-color: ${config.border.borderColor};
+
+      &:hover {
+        border-color: ${config.border.borderColorHover};
+        box-shadow: ${config.boxShadow.boxShadowHover};
+        ${Divider} {
+          background-color: ${config.border.borderColorHover};
+        }
+      }
+
+      button:active {
+        box-shadow: ${config.boxShadow.boxShadowClick};
+        ${Divider} {
+          background-color: ${config.border.borderColorClick};
+        }
+      }
+    `;
+}}
+`;
+var MainButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.15s ease;
+
+  ${({ $hasLabel, theme: theme2 }) => {
+  const config = theme2.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;
+  if ($disabled) {
+    return `
+        cursor: not-allowed;
+        background: ${config.background.backgroundDisabled};
+      `;
+  }
+  if ($active) {
+    return `
+        background: ${config.background.backgroundActive};
+      `;
+  }
+  return `
+      background: ${config.background.background};
+
+      &:hover {
+        background: ${config.background.backgroundHover};
+      }
+
+      &:active {
+        background: ${config.background.backgroundClick};
+      }
+    `;
+}}
+`;
+var IconWrapper4 = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${({ theme: theme2 }) => {
+  const config = theme2.components.toolbarButton;
+  return `
+      width: ${config.layout.content.iconSize.width};
+      height: ${config.layout.content.iconSize.height};
+    `;
+}}
+
+  ${({ $disabled, theme: theme2 }) => {
+  const config = theme2.components.toolbarButton;
+  return $disabled ? `
+    color: ${config.color.colorDisabled};
+  ` : `
+    color: ${config.color.color};
+  `;
+}}
+
+  svg, img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+`;
+var LabelText = styled.span`
+  font-family: 'PingFang SC', sans-serif;
+  white-space: nowrap;
+
+  ${({ theme: theme2 }) => {
+  const config = theme2.components.toolbarButton;
+  return `
+      font-size: ${config.typography.fontSize};
+      font-weight: ${config.typography.fontWeight};
+      line-height: 20px;
+      padding: ${config.layout.content.padding};
+    `;
+}}
+
+  ${({ $disabled, theme: theme2 }) => {
+  const config = theme2.components.toolbarButton;
+  return $disabled ? `
+    color: ${config.color.colorDisabled};
+  ` : `
+    color: ${config.color.color};
+  `;
+}}
+`;
+var DropdownButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  transition: background-color 0.15s ease;
+
+  ${({ theme: theme2 }) => {
+  const config = theme2.components.toolbarButton;
+  return `
+      height: ${config.layout.height};
+      padding: 5px 0;
+    `;
+}}
+
+  ${({ $disabled, theme: theme2 }) => {
+  const config = theme2.components.toolbarButton;
+  if ($disabled) {
+    return `
+        cursor: not-allowed;
+        background: ${config.background.backgroundDisabled};
+      `;
+  }
+  return `
+      background: ${config.background.background};
+
+      &:hover {
+        background: ${config.background.backgroundHover};
+      }
+
+      &:active {
+        background: ${config.background.backgroundClick};
+      }
+    `;
+}}
+`;
+var DropdownArrow = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${({ theme: theme2 }) => {
+  const config = theme2.components.toolbarButton;
+  return `
+      width: ${config.layout.dropdown.iconSize.width};
+      height: ${config.layout.dropdown.iconSize.height};
+    `;
+}}
+
+  ${({ $disabled, theme: theme2 }) => {
+  const config = theme2.components.toolbarButton;
+  return $disabled ? `
+    color: ${config.color.colorDisabled};
+  ` : `
+    color: ${config.color.color};
+  `;
+}}
+
+  svg {
+  }
+`;
+var Divider = styled.div`
+  width: 1px;
+  transition: background-color 0.15s ease;
+
+  ${({ theme: theme2 }) => {
+  const config = theme2.components.toolbarButton;
+  return `
+      height: ${config.layout.height};
+    `;
+}}
+
+  ${({ $disabled, $active, theme: theme2 }) => {
+  const config = theme2.components.toolbarButton;
+  if ($disabled) {
+    return `
+        background-color: ${config.border.borderColorDisabled};
+      `;
+  }
+  if ($active) {
+    return `
+        background-color: ${config.border.borderColorActive};
+      `;
+  }
+  return `
+      background-color: ${config.border.borderColor};
+    `;
+}}
+`;
+var ArrowIcon = () => /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React12.createElement(
+  "path",
+  {
+    d: "M8.1858 9.79353C8.08649 9.90387 7.91346 9.90387 7.81415 9.79353L4.77549 6.41724C4.6307 6.25636 4.74487 6 4.96132 6L11.0386 6C11.2551 6 11.3693 6.25636 11.2245 6.41724L8.1858 9.79353Z",
+    fill: "#41464B",
+    fillOpacity: "0.6"
+  }
+));
+var ToolbarButton = ({
+  disabled = false,
+  active = false,
+  icon,
+  label,
+  hasDropdown = false,
+  splitDropdown = false,
+  onClick,
+  onDropdownClick,
+  className,
+  style
 }) => {
-  const {
-    theme,
-    icons = {},
-    toast = {}
-  } = config;
+  const handleMainClick = (e) => {
+    if (disabled) return;
+    onClick?.(e);
+  };
+  const handleDropdownClick = (e) => {
+    if (disabled) return;
+    e.stopPropagation();
+    onDropdownClick?.(e);
+  };
+  if (!splitDropdown && hasDropdown) {
+    return /* @__PURE__ */ React12.createElement(
+      ToolbarButtonContainer,
+      {
+        className,
+        style,
+        $disabled: disabled,
+        $active: active
+      },
+      /* @__PURE__ */ React12.createElement(
+        MainButton,
+        {
+          $disabled: disabled,
+          $active: active,
+          $hasLabel: !!label,
+          onClick: handleMainClick,
+          disabled
+        },
+        icon && /* @__PURE__ */ React12.createElement(IconWrapper4, { $disabled: disabled }, icon),
+        label && /* @__PURE__ */ React12.createElement(LabelText, { $disabled: disabled }, label),
+        /* @__PURE__ */ React12.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React12.createElement(ArrowIcon, null))
+      )
+    );
+  }
+  if (splitDropdown && hasDropdown) {
+    return /* @__PURE__ */ React12.createElement(
+      ToolbarButtonContainer,
+      {
+        className,
+        style,
+        $disabled: disabled,
+        $active: active
+      },
+      /* @__PURE__ */ React12.createElement(
+        MainButton,
+        {
+          $disabled: disabled,
+          $active: active,
+          $hasLabel: !!label,
+          onClick: handleMainClick,
+          disabled
+        },
+        icon && /* @__PURE__ */ React12.createElement(IconWrapper4, { $disabled: disabled }, icon),
+        label && /* @__PURE__ */ React12.createElement(LabelText, { $disabled: disabled }, label)
+      ),
+      /* @__PURE__ */ React12.createElement(Divider, { $disabled: disabled, $active: active }),
+      /* @__PURE__ */ React12.createElement(
+        DropdownButton,
+        {
+          $disabled: disabled,
+          $active: active,
+          $split: true,
+          onClick: handleDropdownClick,
+          disabled
+        },
+        /* @__PURE__ */ React12.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React12.createElement(ArrowIcon, null))
+      )
+    );
+  }
+  return /* @__PURE__ */ React12.createElement(
+    ToolbarButtonContainer,
+    {
+      className,
+      style,
+      $disabled: disabled,
+      $active: active
+    },
+    /* @__PURE__ */ React12.createElement(
+      MainButton,
+      {
+        $disabled: disabled,
+        $active: active,
+        $hasLabel: !!label,
+        onClick: handleMainClick,
+        disabled
+      },
+      icon && /* @__PURE__ */ React12.createElement(IconWrapper4, { $disabled: disabled }, icon),
+      label && /* @__PURE__ */ React12.createElement(LabelText, { $disabled: disabled }, label)
+    )
+  );
+};
+ToolbarButton.displayName = "ToolbarButton";
+var UIConfigContext = createContext(null);
+var UIConfigProvider = ({ config, children }) => {
+  registerGlobalContext({ theme: config.theme });
+  const { icons = {}, toast = {} } = config;
   const toastConfig = {
     maxCount: toast.maxCount ?? 5,
     defaultDuration: toast.defaultDuration ?? 3e3
   };
-  const Provider = ThemeProvider;
   const TooltipStyles = TooltipGlobalStyles;
-  return /* @__PURE__ */ React12.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React12.createElement(Provider, { theme }, /* @__PURE__ */ React12.createElement(TooltipStyles, null), /* @__PURE__ */ React12.createElement(IconProvider, { icons }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React12.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React12.createElement(TooltipStyles, null), /* @__PURE__ */ React12.createElement(IconProvider, { icons }, /* @__PURE__ */ React12.createElement(
     ToastContainer2,
     {
       maxCount: toastConfig.maxCount,
       defaultDuration: toastConfig.defaultDuration
     },
     children
-  ))));
+  )));
 };
 var useUIConfig = () => {
   const context = useContext(UIConfigContext);
@@ -2452,6 +2833,6 @@ var mergeUIConfig = (baseConfig, ...configs) => {
   return merged;
 };
 
-export { Button, Checkbox, Icon, IconProvider, Input, NumberInput, Radio, SearchInput, Slider, SpinButton, Switch, Tabs, Toast, ToastContainer2 as ToastContainer, Tooltip, UIConfigProvider, createUIConfig, mergeUIConfig, useIconRegistry, useToast, useUIConfig };
+export { Button, Checkbox, Icon, IconProvider, Input, NumberInput, Radio, SearchInput, Slider, SpinButton, Switch, Tabs, Toast, ToastContainer2 as ToastContainer, ToolbarButton, Tooltip, UIConfigProvider, createUIConfig, getGlobalTheme, mergeUIConfig, styled, useIconRegistry, useToast, useUIConfig };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map